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

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

الزر الاول الزر الثاني

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

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 تستطيع ان تجعله افضل 

بالتوفيق

12/01/2014

مواضيع ذات صلة

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

4 / 5

بواسطة مدون محترف

مدون محترف 12/01/2014 12 تعليقات