أزرار المشاهدة والتحميل واقرأ المزيد لمدونات بلوجر

السلام عليكم ورحمة الله وبركاته .

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

للمشاهدة المباشرة

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

1- ادخل إلى مدونتك ، ثم اختر لوحة التحكم .

2-من لوحة التحكم اختر -> قالب -> تحرير قالب HTML .

3- الآن ابحث عن الوسم : بواسطة المفاتيح Ctrl+F

4- اضف الكود التالي فوقه .

 /* Custom Button by www.homeblog7.blogspot.com */
a.HB-button{border:none;cursor:pointer;padding:10px 20px;display:inline-block;margin:15px;text-transform:uppercase;letter-spacing:1px;font-weight:700;outline:0;position:relative;border-radius:3px;-webkit-animation: anim 2s ease-in infinite;animation: anim 2s ease-in infinite;transition:all .3s}
a.HB-button:after {
content: '';position:absolute;z-index:-1;transition:all .3s;}
a.HB-button:before{font-family:Fontawesome;font-style:normal;font-weight:400;font-variant:normal}
a.HB-butt{background:#06A3ED;color:#fff!important;overflow:hidden;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;backface-visibility:hidden}
a.HB-butt:active {background:#06A3ED;top:2px;}
a.HB-butt span {display:inline-block;width:100%;height:100%;transition:all 0.3s;backface-visibility:hidden;}
a.HB-butt:before{position:absolute;height:100%;width:100%;line-height:2.2;font-size:130%;transition:all .3s}
a.HB-butt:active:before {color:#fff;}
a.HB-buttlater:hover span {-webkit-transform: translateY(300%);-moz-transform: translateY(300%);-ms-transform: translateY(300%);transform: translateY(300%);}
a.HB-buttlater:before {left:0;top:-110%;}
a.HB-buttlater:hover:before {top:0;padding-left:40%;text-decoration:none;}
a.HB-butticon:before {content: "\f135";}
@-webkit-keyframes anim{5%{-webkit-transform:scale(1.1,.9);transform:scale(1.1,.9)}10%{-webkit-transform:scale(.9,1.1) translateY(-.5rem);transform:scale(.9,1.1) translateY(-.5rem)}15%{-webkit-transform:scale(1);transform:scale(1)}}
@keyframes anim{5%{-webkit-transform:scale(1.1,.9);transform:scale(1.1,.9)}10%{-webkit-transform:scale(.9,1.1) translateY(-.5rem);transform:scale(.9,1.1) translateY(-.5rem)}15%{-webkit-transform:scale(1);transform:scale(1)}} 

5- الآن ابحث عن الوسم : بواسطة المفاتيح Ctrl+F

6- اضف الكود التالي تحته .

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

7- احفظ القالب .

8- الآن أستخدم هذه الأزرار بوضعية HTML .

 <a href="ضع هنا رابط التوجيه" rel="”nofollow”" target="_blank" class="HB-button HB-butt HB-buttlater HB-butticon"><span>المعاينة المباشرة</span></a>

<a href="ضع هنا رابط التوجيه" rel="”nofollow”" target="_blank" class="HB-button HB-butt HB-buttlater HB-butticon"><span>اقرأ المزيد</span></a>

<a href="ضع هنا رابط التوجيه" rel="”nofollow”" target="_blank" class="HB-button HB-butt HB-buttlater HB-butticon"><span>التحميل</span></a>