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

موضوع اليوم عن شرح طريقه اضافه ازرار المعاينه والتحميل لقوالب بلوجر ويمكنك مشاهده المثال في الصوره الخاصه بالموضوع او من خلال مشاهده المعاينه في نهايه الموضوع . 

استخدامات ازرار المعاينه والتحميل : 

• يمكن استخدامها في مواقع التحميل مثل موقع المركز 
• كما يمكنك ان تستخدمها في مدونتك الخاصه بتحميل وتعريب قوالب بلوجر.
• والعديد من الاستخدامات والافكار يمكنك ان تستخدمها كيفما تشاء 

طريقه تركيب ازرار المعاينه والتحميل :

• نقوم بالدخول لمدونه بلوجر .
• من ثم اختيار القالب .
• والضعط علي تحرير HTML .

يجب تركيب الخطوط الخاصه بالمعاينه عن طريق : 

البحث عن</head>واضافه الكود التالي 

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

من ثم نقوم بالبحث عن ]]></b:skin> و اضف الكود التالي فوقه

#wrap {
    margin: 20px auto;
    text-align: center;
}

#wrap br {
    display: none;
}

.btn-slide, .btn-slide2 {
    position: relative;
    display: inline-block;
    height: 50px;
    width: 200px;
    line-height: 50px;
    padding: 0;
    border-radius: 50px;
    background: #fdfdfd;
    border: 2px solid #0099cc;
    margin: 10px;
    transition: .5s;
}

.btn-slide2 {
    border: 2px solid #efa666;
}

.btn-slide:hover {
    background-color: #0099cc;
}

.btn-slide2:hover {
    background-color: #efa666;
}

.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {
    right: 100%;
    margin-right: -45px;
    background-color: #fdfdfd;
    color: #0099cc;
}

.btn-slide2:hover span.circle2 {
    color: #efa666;
}

.btn-slide:hover span.title, .btn-slide2:hover span.title2 {
    right: 40px;
    opacity: 0;
}

.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {
    opacity: 1;
    right: 40px;
}

.btn-slide span.circle, .btn-slide2 span.circle2 {
    display: block;
    background-color: #0099cc;
    color: #fff;
    position: absolute;
    float: right;
    margin: 5px;
    line-height: 42px;
    height: 40px;
    width: 40px;
    top: 0;
    right: 0;
    transition: .5s;
    border-radius: 50%;
}

.btn-slide2 span.circle2 {
    background-color: #efa666;
}

.btn-slide span.title,
  .btn-slide span.title-hover, .btn-slide2 span.title2,
  .btn-slide2 span.title-hover2 {
    position: absolute;
    right: 90px;
    text-align: center;
    margin: 0 auto;
    font-size: 16px;
    font-weight: bold;
    color: #30abd5;
    transition: .5s;
}

.btn-slide2 span.title2,
  .btn-slide2 span.title-hover2 {
    color: #efa666;
    right: 80px;
  }

.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
    right: 80px;
    opacity: 0;
}

.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
    color: #fff;
}

الي هنا نكون انتهينا من تهيئه القالب لاستقبال تلك الازرار في كل موضوع ولا يتبقي سوي خطوة واحده يتم عملها اثناء كتابه كل موضوع تحتاج بداخله تلك الازرار وهي اضافه هذا الكود في صفحه HTML لكتابه الموضوع في النهايه مع تغير ما يلزمنا :

<div id="wrap">

<a href="#" class="btn-slide">
  <span class="circle"><i class="fa fa-rocket"></i></span>
  <span class="title">معاينة</span>
  <span class="title-hover">اضغط للمعاينة</span>
</a>
<a href="#" class="btn-slide2">
  <span class="circle2"><i class="fa fa-download"></i></span>
  <span class="title2">تحميل</span>
  <span class="title-hover2">اضغط للتحميل</span>
</a>
</div>

استبدل رمز # برامج التحميل والمعاينه 

استبدل اي كلمه عربيه بالكلمه الكراد ظهورها 

معاينه الازرار : 

معاينة اضغط للمعاينة تحميل اضغط للتحميل

Mazen Mohamed