1 ديسمبر، 2014

مدون محترف اضافات بلوجر دروس بلوجر CSS اضافة ازرار التحميل بطريقة احترافية

اضافة ازرار التحميل بطريقة احترافية

اضافة زر التحميل بطريقتين مخلفتين الزر الاول و هو عند مرور مؤشر الماوس على الزر بظهر بجانبه كم هو حجم الملف المراد تحميله

اضافة ازرار التحميل بطريقة احترافية - في الدرس السابق تعلمنا كيفية اضافة ازرار معاينة و تحميل بشكل احترافي اليوم سوف نتعلم كيفية اضافة زر التحميل بطريقتين مخلفتين الزر الاول و هو عند مرور مؤشر الماوس على الزر يظهر بجانبه كم هو حجم الملف المراد تحميله اما الزر الثاني يظهر تحته كم هو حجم المف المراد تحميله يمكنك معاينة الازرار عبر الروابط التالية


طريقة التركيب


  1. الان قم بالدخول إلى لوحة تحكم المدونة
  2. اختر قالب 
  3. ثم انقر فوق تحرير HTML
ابحث عن الوسم </head> و اضف الكود التالي فوقه
 <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>

طريقة تركيب الزر الاول

ابحث عن الوسم ]]></b:skin> و اضف الكود التالي فوقه
.container {
  width:200px;
  display:block;
  margin:20px auto;
  position:relative;
  font-family:droid arabic kufi;
}

.con_down {
  display:block;
  cursor:pointer;
  background-color:#F6EB96;
  width:190px;
  height:50px;
  padding-left:10px;
  padding-top:5px;
  text-align:left;
  border-bottom:4px solid #D8B83C;
  border-radius:5px;
  position:relative;
  line-height:50px;
}
.con_down .fa-download{
  position:absolute;
  right:10px;
  top:15px;color:#895D0A;
}

.con_down h4 {
  color:#895D0A;
  text-transform:uppercase;
  margin:0;
}
.sizes h5 {
    margin:0;
}

.sizes {
  background-color:#E3E3E3;
  width:100px;
  height:30px;
  z-index:-9;
  padding-top:2px;
  border-bottom:4px solid #AAA9A9;
  position:absolute;
  top:13px;
  left:20px;
  transition:.5s all ease-in-out;
}

.size {
  line-height:30px;
  text-align:center;
  color:#4B4B4B;
}

.sizes_abs {
  background-color:#F6EB96;
  cursor:pointer;
  width:20px;
  border-bottom:4px solid #D8B83C;
  border-bottom-left-radius:5px;
  border-top-left-radius:5px;
  height:55px;
  position:absolute;
  top:-13px;
  left:-20px;
  z-index:2;

}

.container:hover .sizes {
  left:-100px;
}

.container:hover .con_down {
  background-color:#F1DD5E;
     border-bottom-left-radius:0;
  border-top-left-radius:0;
}

.container:hover .sizes_abs {
  background-color:#F1DD5E;
}


التنسيق

لتغيير الخط ابحث عن droid arabic kufi و استبدلها بالخط الموجود في مدونتك
لتغيير لون الزر ابحث عن :#F6EB96 سوف تجد الكود مكرر غيرها كلها بنفس اللون الذي اخترته
لتغيير لون البار التي بالاسفل ابحث عن #D8B83C  سوف تجد الكود مكرر غيرها كلها بنفس اللون الذي اخترته
لتغيير لون الايقونة بجانب كلمة تحميل ابحث عن #895D0A  سوف تجد الكود مكرر غيرها كلها بنفس اللون الذي اخترته
لتغيير اللون عند مرور مؤشر الماوس ابحث عن #F1DD5E سوف تجد الكود مكرر غيرها كلها بنفس اللون الذي اخترته

كيفية استخدام الزر

عند كتابة موضوع انتقل إلى وضع HTML
<div class="container">
  <div class="con_down">
      <i class="fa fa-download fa-2x"></i>
    <h4>Download Now</h4>
  </div>
  <div class="con_sizes">
  <div class="sizes">
    <h5 class="size">34.5 MB</h5>
    <div class="sizes_abs"></div>
  </div>
  </div>
</div>


استبدل كلمة Download Now  بالكلمة التي تريدها
استبدل 34.5 MB  بحجم الملف التي قمت برفعه

طريقة تركيب الزر الثاني

ابحث عن الوسم ]]></b:skin> و اضف الكود التالي فوقه

.container {
    width:200px;
    display:block;
    margin:20px auto;
    position:relative;
    font-family:droid arabic kufi;
}
.con_down {
    display:block;
    cursor:pointer;
    background-color:#F6EB96;
    width:190px;
    height:50px;
    padding-left:10px;
    padding-top:5px;
    text-align:left;
    border-bottom:4px solid #D8B83C;
    border-radius:5px;
    position:relative;
    line-height:50px;
    transition:.5s all ease-in-out;
}
.con_down .fa-download {
    position:absolute;
    right:10px;
    top:15px;
    color:#895D0A;
}
.con_down h4 {
    color:#895D0A;
    text-transform:uppercase;
    margin:0;
}
.sizes h5 {
    margin:0;
}
.sizes {
    background-color:#E3E3E3;
    width:100px;
    height:30px;
    z-index:-9;
    position:absolute;
    bottom:22px;
    right:50%;
    margin-right:-50px;
    transition:.5s all ease-in-out;
}
.size {
    line-height:30px;
    text-align:center;
    color:#4B4B4B;
}
.sizes_abs {
    background-color:#F6EB96;
    cursor:pointer;
    width:200px;
    border-bottom:4px solid #D8B83C;
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
    height:20px;
    position:absolute;
    left:-50px;
    bottom:-22px;
    z-index:2;
}
.container:hover .sizes {
    bottom:-30px;
}
.container:hover .con_down {
    background-color:#F1DD5E;
    border-bottom:0;
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
}
.container:hover .sizes_abs {
    background-color:#F1DD5E;
}

كيفية استخدام الزر

عند كتابة موضوع انتقل إلى وضع HTML
<div class="container">
    <div class="con_down"> <i class="fa fa-download fa-2x"></i>

         <h4>Download now</h4>

    </div>
    <div class="con_sizes">
        <div class="sizes">
             <h5 class="size">34.5 MB</h5>

            <div class="sizes_abs"></div>
        </div>
    </div>
</div>


استبدل كلمة Download Now  بالكلمة التي تريدها
استبدل 34.5 MB  بحجم الملف التي قمت برفعه

طريقة تنسيق الزر الثاني هي نفس طريقة تنسيق الزر الاول و مع القليل من الخبرة في CSS تستطيع ان تجعله افضل 

بالتوفيق

مواضيع ذات صلة
اضافة ازرار التحميل بطريقة احترافية
4 / 5
بواسطة

هناك 12 تعليقًا :

  1. هناك أمر مهم و ناقص في الموضوع وهو أين أضع رابط التحميل n=

    ردحذف
    الردود
    1. فعلا انا نسيت كيفية اضافة رابط التحميل لكن ليست بصعبة يا غالي
      فقط اضف <a href="http://mudwnp"/> مع تغيير كلمة mudwnp برابط التحميل
      و يوضع الكود فوق <h4>Download now</h4> =a

      حذف
  2. السلام عليكم اخي الكريم جزاك الله خيرا علي هذا المجهود فعلا مواضيع مميزه جزاك الله خيرا
    اخي الكريم ممكن مساعده صغيره منك بخصوص كود معين في مدونه بلوجر .
    مش عارف ليه كل لما بضيف كود زر التحميل داخل المواضيع سواء الل حضرتك حاطه ف المدونه عندك او مدونات اخري الكود بينجح وبيظهر زر التحميل لكن اي موضوع بحط فيه الزر الصفحه اول ما تفتح بيحصلها زي freez يعني بتتجمد كده تقدر تتطلع وتنزل فيها بس لكن مينفعش تدوس علي اي لينك نهااااااااااااااائي في الصفحه وبمجرد ما ازيل زر التحميل من المقاله ترجع كل شي طبيعي والغريب ان الموضوع ده اتكرر مع كل الكواد المختلفه لزر التحميل جربت اكواد كتير !!!

    ردحذف
    الردود
    1. وعليكم السلام
      اهلا صديقي
      بخصوص موضوعك قد يكون السبب أنه يوجد كود يتعارض مع الإضافة داخل القالب الخاص بك
      أو أنك لم تقم بتركيب الاضافة بشكل جيد، أيضًا يوجد في مدونتك ازرار تحميل ومعاينة
      لذلك عندما تقوم باضافة اكواد ثانية لازرار اخرى يصبح هناك تعارض بين الاكواد ويؤدي إلى المشكلة التي تقول عليها

      حذف
    2. جزاك الله يرا اخي علي الرد والاهتمام
      اولا بخصوص اني مركبه غلط : انا مركبه صح والله ومتاكد لاني ركب اكتر من كود منهم وكله بيظهر فعلا بس بيعل نفس المشكله وانا مركب اكواد كتير وبعدل علي اكواد يعني الي حد ما بعرف اتعامل مع الاكواد .

      ثانيا : حضرتك بتقول ان فيه عندي ازرار تحميل ومعاينه معلش بس هو حضرتك عرفت اذاي ان عندي ولو عندي هل هعرف اطلعها من الاكواد من html لان هيا اكيد تبع القالب مش انا اليل حاططها علشان الحاجه اليل بحطها انا بعمله داخل هذا الكود <-- example --!> علشان تبقي سهل عليا اجيبها ف اي وقتواعدل عليها

      حذف
    3. دخلت إلى مدونتك ووجد اكواد لازرار ابحث عن
      /* CSS Button */
      سوف تجد اكواد الازرار
      وإذا كان لديها اكواد جافا قم بمسحها وإعادة تركيب الازرار الخاصة بك
      ولن يحصل اي مشاكل

      حذف
    4. جزاك الله خيرا انا كنت فعلا لقيتهم وبعدل عليهم هخليهم زي دول باذن الله .

      اخي بالله عليك انا محتاج الفيس بتاعك ياريت تبعت لينك صفحتك الشخصيه وجزاك الله خيرا

      حذف
    5. بالتوفيق صديقي
      ويُمكنك التوصل معي عبر صفحتنا على فيس بوك
      اكتب في فيس بوك مدون محترف وسوف تجدنا

      حذف

يسعدنا تفاعلكم بالتعليق , لكن يرجى مراعاة الآداب العامة وعدم نشر روابط إشهار حتى ينشر التعليق , ويمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود. اولا تضع الـ = بعدها الحرف الخاص بالإبتسامة
=q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r