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

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

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



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


  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  بحجم الملف

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

No comments:

Post a Comment

201 تعريب عرب تيش جمياع الحقوق محفوظة 2016

Theme images by sndr. Powered by Blogger.