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

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

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

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

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

الان قم بالدخول إلى لوحة تحكم المدونة
اختر قالب
ثم انقر فوق تحرير HTML

ابحث عن الوسم و اضف الكود التالي فوقه

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

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

.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

Download Now


34.5 MB

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

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

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

.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

Download now








34.5 MB

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

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

بالتوفيق

Unknown

اضف تعليق

اضافات بلوجر, دروس بلوجر, CSS

الاثنين، 1 ديسمبر 2014

عن الكاتب مدون محترف

إسمي شرف ملقب بي فيدي عمري حوالي 28 سنة مدون مغربي مهووس بجديد تكنولوجيا المعلوميات مهتم بالحماية المعلوماتية يمكنك متابعتي من خلال الفيسبوك أو. تويتر.أو. جوجل بلس

0000000000

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

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

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

التنسيق

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

Download Now

34.5 MB

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

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

Download now

34.5 MB

عن الكاتب مدون محترف

مقالات قد تهمك