اضافة ازرار معاينة و تحميل بشكل احترافي

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

معاينة

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

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

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

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

/* Custom Button */
.whitebutton {
    margin: 20px auto;
    padding: 20px 0;
    width: 200px;
}

.whitebutton a {
    background: #fff;
    color: #666;
    display: block;
    font-size: 17px;
    font-weight: 700;
    font-family: 'Droid Arabic Kufi',Verdana,sans-serif;
    height: 50px;
    line-height: 50px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 200px;
    position: relative;
    z-index: 2;
}

.whitebutton a:before {
    content: '\f019';
    font-family: FontAwesome;
    font-weight: normal;
    padding: 8px;
    margin-left: -90px;
    margin-right: 30px;
}

.whitebutton span {
    background: #444;
    color: #fff;
    display: block;
    font-size: 12px;
    font-family: 'Droid Arabic Kufi', Verdana,sans-serif;
    height: 40px;
    line-height: 40px;
    text-align: center;
    width: 200px;
    z-index: 1;
    text-transform: uppercase;
    font-weight: bold;
}

.whitebutton .up {
    background: #e25734;
    margin: -25px auto;
    opacity: 0;
    border-radius: 0 0 5px 5px;
    transform: translate(0,-50px);
    transition: 350ms;
}

.whitebutton .down {
    margin: -30px auto;
    opacity: 0;
    border-radius: 5px 5px 0 0;
    transform: translate(0,-50px);
    transition: 350ms;
}

.whitebutton .down:before {
    content:'\f14a';
    font-family: FontAwesome;
    font-weight: normal;
    margin-left: -6px;
    color: #aaa;
}

.whitebutton:hover .up {
    opacity: 1;
    transform: translate(0,0);
}

.whitebutton:hover .down {
    opacity: 1;
    transform: translate(0,-90px);
}

.whitebuttondemo {
    margin: 20px auto;
    padding: 20px 0;
    width: 200px;
}

.whitebuttondemo a {
    background: #e25734;
    color: #fff;
    display: block;
    font-size: 17px;
    font-weight: 700;
    font-family:'Droid Arabic Kufi',Verdana,sans-serif;
    height: 50px;
    line-height: 50px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 200px;
    position: relative;
    z-index: 2;
    transition: 350ms;
}

.whitebuttondemo a:before {
    content:'\f002';
    font-family: FontAwesome;
    font-weight: normal;
    padding: 8px;
    margin-left: -90px;
    margin-right: 30px;
}

.whitebuttondemo a:hover {
    color: #fff;
}

.whitebuttondemo span {
    background: #444;
    color: #fff;
    display: block;
    font-size: 12px;
    font-family: 'Droid Arabic Kufi', Verdana,sans-serif;
    height: 40px;
    line-height: 40px;
    text-align: center;
    width: 200px;
    z-index: 1;
    text-transform: uppercase;
    font-weight: bold;
}

.whitebuttondemo .up {
    background: #444;
    margin: -25px auto;
    opacity: 0;
    border-radius: 0 0 5px 5px;
    transform: translate(0,-50px);
    transition: 350ms;
}

.whitebuttondemo:hover .up {
    opacity: 1;
    transform: translate(0,0);
}

كيفية اضافة الازرار في الموضوع

عند كتابة موضوع ننتقل من تأليف إلى HTML و وضع الكود التالي صورة توضيحية

http://mudwnp.blogspot.com/">معاينة
انقر للعرض

http://mudwnp.blogspot.com/">تحميل
انقر للعرض
1.6MB .rar

 الإستخدام

 استبدل رابط مدونتي  بالرابط الذي تريده ان ينتقل إليه عند الضغط
 استبدل كلمة معاينة بالكمة التي تريدها
استبدل كلمة انقر للعرض بالكلمة التي تريدها
استبدل 1.6MB .rar  بحجم الملف

اي سؤال لا تتردد بوضعه في تعليق