أخر الموضوعات

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

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

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

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

قُم بالدخول الى مدونتك ثم إختر تبويت المظهر وقم بنسخ الكود التالى: ]]></b:skin> والبحث عنه بالقالب عن طريق الضغط على CTRL+F 

،وبعد أن تقوم بنسخ الكود السابق والبحث عنه ،ستقوم بوضع الكود التالى فوقه 

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

#warch br {
    display: none;
}

.mo-slide, .mo-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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

ثم تقوم بالبحث عن <head> عن طريق أزرار CTRL+F بلوحة الكيبورد ،وتضع الكود التالى فوقه 


<link href=' https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.0/css/font-awesome.css' rel='stylesheet' type='text/css'/>

ثم تضغط على حفظ النموذج 

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

قم بانشاء مشاركة جديدة وقم بالضغط على تبويت الـ HTML وضع الكود التالى بها 


<div id="warch">
<a href="#" class="mo-slide" target="_blank">
  <span class="circle"><i class="fa fa-rocket"></i></span>
  <span class="title">معاينة</span>
  <span class="title-hover">إنقر هنا</span>
</a>
<a href="#" class="mo-slide2" target="_blank">
  <span class="circle2"><i class="fa fa-download"></i></span>
  <span class="title2">تحميل</span>
  <span class="title-hover2">إنقر هنا</span>
</a>
</div>
هاكذا تكون اضفت الاضافة الى التدوينة الخاصة بك ولكن إتبع التعليمات الاتية :

قم بازالة علامة الهشتاج الحمراء (#) وضع بدلا منها رابط المعاينة

قم بازالة علامة الهشتاج الزرقاء (#) وضع بدلا منها رابط التحميل 


اعلانات - Advertisement
ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

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

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