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

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

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

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

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

2- من لوحة التحكم اختر قالب ثم اضغط على تحرير قالب .

3- ابحث عن الوسم :  

4- ضع  كود CSS فوقه .

::: الشكل الأول :::

 .button {
 -moz-border-radius:5px 5px 5px 5px;
 -webkit-border-radius:5px 5px 5px 5px;
 border-radius:5px 5px 5px 5px;
 -moz-box-shadow:0 1px 3px rgbaundefined0, 0, 0, 0.25);
 -webkit-box-shadow:0 1px 3px rgbaundefined0, 0, 0, 0.25);
 box-shadow:0 1px 3px rgbaundefined0, 0, 0, 0.25);
 background:urlundefined"http://www.zurb.com/images/overlay-button.png") repeat-x scroll 0 0 #222222;
 border-bottom:1px solid rgbaundefined0, 0, 0, 0.25);
 color:#FFFFFF !important;
 cursor:pointer;
 font-weight:bold;
 line-height:1;
 overflow:visible;
 font-size:17px;
 padding:8px 19px 9px;
 position:relative;
 text-decoration:none;
 text-shadow:0 -1px 1px rgbaundefined0, 0, 0, 0.25);
 width:auto;
}
.demobutton {
 background-color:#999999;
 text-align:center;
 width:150px;
}
 .demobutton:hover {
  background-color:#00A0EE;
 }
.downloadbutton {
 background-color:#91BD09;
 text-align:center;
 width:150px;
}
 .downloadbutton:hover {
  background-color:#00AC00;
 }
.button:hover {
 -moz-box-shadow:0 1px 11px rgbaundefined0, 0, 0, 0.45);
 -webkit-box-shadow:0 1px 11px rgbaundefined0, 0, 0, 0.45);
 box-shadow:0 1px 11px rgbaundefined0, 0, 0, 0.45);
}

- استخدم هذا الكود في وضعية " HTML " .

 

<a class="demobutton button" href="ضع هنا رابط التوجيه" rel="nofollow" style="float: center;" target="_blank">
  <span style="display: inline-block;">
    المعاينة المباشرة
  </span>
</a>



<a class="button downloadbutton" href="ضع هنا رابط التحميل" rel="nofollow" style="float: center;" target="_blank">
  <span style="display: inline-block;">
    التحميل
  </span>
</a> 

انقر هنا للمعاينة

::: الشكل الثاني :::

 #wrap { margin:20px auto; text-align:center; }
#wrap br { display:none; }
.bie-slide,.bie-slide2 { position:relative; display:inline-block; height:50px; width:200px; line-height:50px; padding:0; border-radius:50px; background:#fdfdfd; border:2px solid #F9690E; margin:10px; transition:.5s; }
.bie-slide2 { border:2px solid #36D7B7; }
.bie-slide:hover { background-color:#F9690E; }
.bie-slide2:hover { background-color:#36D7B7; }
.bie-slide:hover span.circle,.bie-slide2:hover span.circle2 { left:100%; margin-left:-45px; background-color:#fdfdfd; color:#F9690E; }
.bie-slide2:hover span.circle2 { color:#36D7B7; }
.bie-slide:hover span.title,.bie-slide2:hover span.title2 { left:40px; opacity:0; }
.bie-slide:hover span.title-hover,.bie-slide2:hover span.title-hover2 { opacity:1; left:40px; }
.bie-slide span.circle,.bie-slide2 span.circle2 { display:block; background-color:#F9690E; color:#fff; position:absolute; float:left; margin:5px; line-height:42px; height:40px; width:40px; top:0; left:0; transition:.5s; border-radius:50%; }
.bie-slide2 span.circle2 { background-color:#36D7B7; }
.bie-slide span.title,.bie-slide span.title-hover,.bie-slide2 span.title2,.bie-slide2 span.title-hover2 { position:absolute; left:90px; text-align:center; margin:0 auto; font-size:16px; font-weight:bold; color:#F9690E; transition:.5s; }
.bie-slide2 span.title2,.bie-slide2 span.title-hover2 { color:#36D7B7; left:80px; }
.bie-slide span.title-hover,.bie-slide2 span.title-hover2 { left:80px; opacity:0; }
.bie-slide span.title-hover,.bie-slide2 span.title-hover2 { color:#fff; }
 

- استخدم هذا الكود في وضعية " HTML " .

 <div id="wrap">
<a class="bie-slide" href="ضع هنا رابط مدونتك" target="_blank">
  <span class="circle"><i class="fa fa-laptop"></i></span>
  <span class="title">للمعاينة</span>
  <span class="title-hover">انقر هنا</span>
</a>
</div>



<div id="wrap">
<a class="bie-slide2" href="http://www.askwithloud.com" target="_blank">
  <span class="circle2"><i class="fa fa-download"></i></span>
  <span class="title2">تحميل</span>
  <span class="title-hover2">انقر هنا</span>
</a>
</div>

انقر هنا للمعاينة

::: الشكل الثالث :::

.bton-grup{width:500px;text-align:center;margin:5px auto}
.bton{display:inline-block;height:50px;line-height:50px;padding-right:20px;padding-left:70px;position:relative;background:#1abc9c;color:#fff;font-size:22px;font-family:'Yanone Kaffeesatz',sans-serif;text-transform:uppercase;letter-spacing:1px;margin:5px;border-radius:1px;text-shadow:0 1px 0 rgba(0,0,0,0.5);box-shadow:0 2px 2px rgba(0,0,0,0.2)}
.bton span{text-align: center;position:absolute;left:0;width:50px;background:rgba(0,0,0,0.5);border-top-left-radius:1px;border-bottom-left-radius:1px;border-right:1px solid rgba(0,0,0,0.15)}
.bton:hover span{background:#222;border-right:1px solid rgba(0,0,0,0.3)}
.bton.orange{background:#FF7F00}
.bton.purple{background:#8e44ad}
.bton.blue{background:#297fb8}
.bton.red{background:#e74c3c} 

- استخدم هذه الكواد في وضعية " HTML " .

 <div class='bton-grup'>
<a href='ضع هنا رابط التوجيه' class='bton'><span><i class="fa fa-download"></i></span>مثال</a>
<a href='ضع هنا رابط التوجيه' class='bton orange'><span><i class="fa fa-file-text"></i></span>مثال</a>
<a href='ضع هنا رابط التوجيه' class='bton purple'><span><i class="fa fa-folder-open"></i></span>مثال</a>
<a href='ضع هنا رابط التوجيه' class='bton blue'><span><i class="fa fa-paperclip"></i></span>مثال</a>
<a href='ضع هنا رابط التوجيه' class='bton red'><span><i class="fa fa-link"></i></span>مثال</a>
</div> 

انقر هنا للمعاينة