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

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

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

1- أدخل إلى مدونتك | ثم أختر تحرير قالب .

2- إبحث عن الوسم : ]]></b:skin>

3- ضع الكود التالي فوقه :

/* Custom Button by www.homeblog7.blogspot.com */
a.rabbi-button{border:none;cursor:pointer;padding:10px 20px;display:inline-block;margin:15px;text-transform:uppercase;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.rabbi-button:after {
content: '';position:absolute;z-index:-1;transition:all .3s;}
a.rabbi-button:before{font-family:Fontawesome;font-style:normal;font-weight:400;font-variant:normal}
a.rabbi-butt{background:#06A3ED;color:#fff!important;overflow:hidden;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;backface-visibility:hidden}
a.rabbi-butt:active {background:#06A3ED;top:2px;}
a.rabbi-butt span {display:inline-block;width:100%;height:100%;transition:all 0.3s;backface-visibility:hidden;}
a.rabbi-butt:before{position:absolute;height:100%;width:100%;line-height:2.2;font-size:130%;transition:all .3s}
a.rabbi-butt:active:before {color:#fff;}
a.rabbi-buttlater:hover span {-webkit-transform: translateY(300%);-moz-transform: translateY(300%);-ms-transform: translateY(300%);transform: translateY(300%);}
a.rabbi-buttlater:before {right:0;top:-110%;}
a.rabbi-buttlater:hover:before {top:0;padding-right:40%;text-decoration:none;}
a.rabbi-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)}}

4- بعد ذلك ضع الكود التالي تحت الوسم مباشرة : ]]></b:skin>

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

5- أستخدم أحد الأزرار التالية في HTML في مشاركتك :

<a href="www.homeblog7.blogspot.com" rel="”nofollow”" target="_blank" class="rabbi-button rabbi-butt rabbi-buttlater rabbi-butticon"><span>معاينة الإضافة</span></a>

<a href="www.homeblog7.blogspot.com" rel="”nofollow”" target="_blank" class="rabbi-button rabbi-butt rabbi-buttlater rabbi-butticon"><span>تحميل القالب</span></a>

<a href="www.homeblog7.blogspot.com" rel="”nofollow”" target="_blank" class="rabbi-button rabbi-butt rabbi-buttlater rabbi-butticon"><span>أكمل القراءة</span></a>

- التعديلات :
- عدّل رابط مدونتي برابط التوجيه الذي تريده .

- عدّل : معاينة الإضافة أو تحميل القالب ، أو أكمل القراءة بما ترغب .