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

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

كيفية اضافة أزرار المعاينة والتحميل:

الشكل الاول لأزرار المعاينة والتحميل:

ازرار معاينة و تحميل
ازرار معاينة و تحميل
- من مظهر مدونتك ابحث عن الوسم التالي.
]]></b:skin>
عندما تعثر عليه ضع الكود التالى فوقه.
#wrap {margin:20px auto;text-align:center;}
a.btn {display:inline-block;position:relative;font-family: Electrolize,ge_dinar_tworegular;text-decoration:none;font-weight:100;background:#30abd5;letter-spacing:.5px;padding:10px 20px;margin:10px;color:#fff;box-shadow:inset 0 0 0 #22313F;font-size:16px;text-transform:uppercase;border-radius:3px;transition:all 0.3s ease-out;}
a.btn:hover {background:#30abd5;color:#fff;box-shadow:inset 0px -50px 0px #22313F;}
a.btn:active {color:#05555e;box-shadow:inset 0px -50px 0px #f5f7fa;}
a.btn.warn {background:#f5f7fa;color:#05555e;box-shadow:inset 0 0 0 #30abd5;}
a.btn.warn:hover {background:#f5f7fa;color:#fff;box-shadow:inset 0px -50px 0px #30abd5;}
a.btn.warn:active {color:#fff;box-shadow:inset 0px -50px 0px #30abd5;} 0px -50px 0px #30abd5;}
ثم احفظ المظهر.
- وعندما تريد استخدام هذه ازرار اختر احد الكودين التاليين، وقم بوضعه فى التدوينة وذلك بتغير العرض الى html مع تغيير الـ # بالرابط الذي تريد.
<div id="wrap"><a class="btn" href="#">تحميل او معاينة</a></div>
<div id="wrap"><a class="btn warn" href="#">تحميل او معاينة</a></div>

الشكل الثاني لأزرار المعاينة والتحميل:

ازرار معاينة و تحميل
ازرار معاينة و تحميل
- قم بالبحث عن الوسم التالي.
]]></b:skin>
عند ايجاده قم بوضع الكود التالي فوقه.
.button2{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}
.button2 ul{margin:0;padding:0}
.button2 li{display:inline;margin:5px;padding:0;list-style:none}
.button2 li a.demo,.button2 li a.download{position:relative;padding:14px 48px 14px 16px;background:#f39c12;display:block;color:#fff!important;font-weight:100;font-size:14px;text-align:left;text-transform:uppercase;letter-spacing:.2px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s;max-width:170px;margin:auto;overflow:hidden;font-family: Electrolize,ge_dinar_tworegular;}
.button2 li a.download{background:#3498db}
.button2 li a.demo:hover,.button2 li a.download:hover{background:#666}
.button2 li a.demo:active,.button2 li a.download:active{cursor:pointer}
.button2 li a.demo:after,.button2 li a.download:after{content:'\F054';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:16px 24px;font-family:fontawesome;transition:all .3s}
.button2 li:hover a.demo:after,.button2 li:hover a.download:after{background:transparent;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}
@-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}
@keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}
بعد انتهاء قم بحفظ المظهر.
-وعندما تريد استخدام هذه ازرار اختر احد الكودين التاليين، وقم بوضعه فى التدوينة وذلك بتغير العرض الى html مع تغيير الـ # بالرابط الذي تريد.
<div style="text-align: center;">
<ul class="button2">
<li><a class="demo" href="#" target="_blank">معاينة الرابط</a></li>
<li><a class="download" href="#" target="_blank">تحميل الرابط</a></li>
</ul></div>
<div class="clear"></div>
في حال ظهرت لك الاسهم على شكل مربع هذا مهناه ان مدونتك لا يوجد بها مكتبة الفونت اوسم ويمكنك اضافتها من خلال التدوينة التي نشرح فيها كيفية اضافة مكتبة الفونت اوسم لبلوجر.