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

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

معاينة

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

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

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

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

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

/* 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 و وضع الكود التالي صورة توضيحية

<div class="whitebuttondemo">
<a href="http://mudwnp.blogspot.com/">معاينة</a>
<span class="up">انقر للعرض</span></div>

<div class="whitebutton">
<a href="http://mudwnp.blogspot.com/">تحميل</a>
<span class="up">انقر للعرض</span>
<span class="down"> 1.6MB .rar </span></div>
</div>

 الإستخدام

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

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

11/05/2014

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

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

4 / 5

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

مدون محترف 11/05/2014 23 تعليقات