الرئيسية / blogger / أزرار التحميل والمعاينة بشكل رائع ومميز لمدونات بلوجر

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

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

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

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

إخواني الكرام في هذه التدوينة سأضع لكم إضافة مميزة وهي عبارة عن أزرار التحميل والمعاينة التي تستعمل بكثرة في العديد من المدونات لعرض بعض القوالب أو بعض الأمور الأخرى التي يتم وضع معاينة وتحميل لها والان يمكنك جعل تلك الازرار أكثر جادبية

 

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

 

لتركيب الشكل كل ما عليك هو تحرير القالب والبحث عن وسم  ]]></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 {
    left: 100%;
    margin-left: -45px;
    background-color: #fdfdfd;
    color: #0099cc;
}

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

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

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

.btn-slide span.circle, .btn-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%;
}

.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;
    left: 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;
    left: 80px;
}

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

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

 

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

 

أولا عند كتابة الموضوع حدد المكان الذي تريد ان تضهر فيه الازرار هل في الاسفل ام في الوسط يكفي فقط ان تكتب كلمة “أزررررررار” مثلا في المكان الذي تريد أن تضع فيه الازرار وبعد ان تنتهي من الموضوع قم بتحويل المحرر من تأليف إلى HTML ثم قم بالبحث عن الكلمة التي كتبتها في البداية وأٌقصد هذه الكلمة “أزررررررار” بعد أن تجدها ضع مكانها الكود التالي :

 

<div id="wrap">
<a href="رابط المعاينة" class="btn-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="btn-slide2" target="_blank">
  <span class="circle2"><i class="fa fa-download"></i></span>
  <span class="title2">تحميل</span>
  <span class="title-hover2">إضغط هنا</span>
</a>
</div>

 

ثم ضع رابط التحميل ورابط المعاينة في المكانين المحددين في الكود ثم قم بحفظ الموضوع هذا فقط لو لديك أي استفسار او واجهتك أي مشكلة لا تتردد في وضعها في رد هذا كل شيئ بالتوفيق للجميع ودمتم في رعاية الله وحفظه

.

 

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

شاهد أيضاً

اجعل زوارك يشاركون مقالات مدونتك على السوشيال ميديا(فيسبوك - تويتر- جوجل بلس)

اجعل زوارك يشاركون مقالات مدونتك على السوشيال ميديا(فيسبوك – تويتر- جوجل بلس)

اجعل زوارك يشاركون مقالات مدونتك على السوشيال ميديا(فيسبوك – تويتر- جوجل بلس) تريد من زوار …

5 خطوات سهلة للفوز بأكبر عدد زيارات بلوجر

5 خطوات سهلة لنشر مدونتك و كيفية زيادة زيارات بلوجر

كنت تعمل بجد على مدونتك ، تشعر أنك راسخ. حان الوقت الآن أن تكون جادًا …

كيفية عمل نسخة احتياطية من مدونة Blogger الخاصة بك (المحتوى والنماذج والصور )

طريقة أخد نسخة احتياطية لمدونة بلوجر الخاصة بك (المحتوى والنماذج والصور )

أخد نسخة احتياطية لمدونة بلوجر أخد نسخة احتياطية لمدونة بلوجر أخد نسخة احتياطية لمدونة بلوجر …

10 طرق لحماية بلوجر من الهكر blogger

10 طرق لحماية بلوجر من الهكر

نظرًا لأن ووردبريس هي أداة شائعة لإعداد المدونات ، فيمكنها بسهولة جذب انتباه المتسللين. يمكنك …

2 تعليقان

  1. Shoot, who would have thuohgt that it was that easy?

  2. where to buy cialis online safely

    It’s going to be finish of mine day, however before ending I am reading this impressive piece of writing to improve my knowledge.

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *