إبحث في هذه المدونة

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

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

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

الشكل الاول:

كيفية اضافة أزرار المعاينة والتحميل احترافية لمدونات بلوجر
كيفية اضافة أزرار المعاينة والتحميل احترافية لمدونات بلوجر
- قم بدخول لمدونتك وابحث عن الوسم التالي.
]]></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)}}
- تأكد من وجود الكود التالي في مدونتك ان لم تجد قم باضافته فوق الوسم </head>.
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
بعد انتهاء قم بحفظ القالب.
- وعندما تريد وضع زر من ازرار سواء للمعاينة او تحميل استخدم احد الكودين التاليين، وقم بوضعه فى خانة 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>
هذا كل شئ لتدوينة اليوم اذا واجهتك اى مشكلة فى تركيب الإضافة او تريد التعديل عليها، فأترك استفسارك في تعليق، وسنرد عليك في اقرب فرصة، سلام.

ليست هناك تعليقات:

إرسال تعليق