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

ربما قد تكون بحثت كثيرأ عن طريقة لأظافة أزرار المعاينة والتحميل أو أزرار التتحميل فقط لمدونتك الخاصة,وربما قد تكون بحثت كذلك عن أزرار أحترافية لمدونتك ولم تجد ماتريد ولكن لاتقلق,لقد قمنا بتخصيص هذه المقال للأشخاص الذين يرغبون بأضافة أزرار المعاينة والتحميل لمدوناتهم وبشكل أحترافي.
هذ الأزرار أحترافية جدأ وقد تم صنعها من خلال لغة الترميز او css3 والتي تعد من أشهر اللغات الخاصة بالمحترفين,وهذه الزر وبمجرد النقر سوف يعمل بشكل متحرك ويمكنك التحكم بالأزرار من خلال تحرير HTML الموجودة من ضمن المشاركات واليك الأن طريقة تركيب الأزرار على مدونتك:

1-توجة الى لوحة التحكم في بلوجر
2-أختر المظهر ومنها أنقر على تحرير HTML
3-قم بالبحث عن كود   <body/>
4-قم بنسخ ولصق الكود التالي فوق الوسم أو كود <body/>

<style>
.abt-button {
    margin: 50px auto;
    width: 200px;
}
 /* Get this button at mdwanblog.blogspot.com */ 
.abt-button a {
    background: -moz-linear-gradient(center top , #00B7EA 0%, #009EC3 100%) repeat scroll 0 0 transparent;
    color: white;
    display: block;
    font: 17px/50px Helvetica,Verdana,sans-serif;
    height: 50px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 200px;
    position: relative;
    z-index: 2;
  /*TYPE*/
  color: white;
  font: 17px/50px Helvetica, Verdana, sans-serif;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  /*GRADIENT*/ 
  background: #00b7ea; /* Old browsers */
  background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom,   color-stop(0%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* IE10+ */
  background: linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(   startColorstr='#00b7ea',   endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */
}
.abt-button a, .abt-button p {
    -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;
  -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
     -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
          box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
}
.abt-button p {
    background: #222222;
    color: #FFFFFF;
    display: block;
    font: 12px/45px Helvetica,Verdana,sans-serif;
    height: 40px;
    margin: -40px 0 0 10px;
    position: absolute;
    text-align: center;
    transition: margin 0.5s ease 0s;
    width: 180px;
    z-index: 1;
  /*TRANSITION*/ 
  -webkit-transition: margin 0.5s ease;
     -moz-transition: margin 0.5s ease;
       -o-transition: margin 0.5s ease;
      -ms-transition: margin 0.5s ease;
          transition: margin 0.5s ease;
}
.abt-button:hover .up {
    margin: -5px 0 0 10px !important;
}
.abt-button:hover .down {
    line-height: 35px !important;
    margin: -85px 0 0 10px !important;
}
.abt-button a:active {
background: #00b7ea; /* Old browsers */
background: -moz-linear-gradient(top,  #00b7ea 36%, #009ec3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom,   color-stop(36%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+   */
background: -webkit-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* IE10+ */
background: linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(   startColorstr='#00b7ea',   endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */
}
.abt-button:active .up {
    margin: -20px 0 0 10px !important;
}
.abt-button:active .down {
    margin: -70px 0 0 10px !important;
}
</style>

5-توجة الى المشاركات ومن ثم أختر محرر HTML وضع كود المعاينة والتحميل الأتي:

<div class="abt-button">
      <a href="#">تحميل</a>  
      <p class="up">انقر للتحميل</p>
      <p class="down">1.2MB .zip</p>
    </div>
<div class="abt-button">
      <a href="#">معاينة</a>

6-في حال تريد وضع زر التحميل فقط قم بوضع الكود التالي في محرر

<div class="abt-button">
      <a href="#">تحميل</a>  
      <p class="up">انقر للتحميل</p>
      <p class="down">1.2MB .zip</p>
    </div>

المعاينة