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

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

أولا نذهب للوحة التحكم بلوجر ثم القالب.

نقوم بأخذ نسخة إحطياطية دائما لتفادي أي غلط بالرغم من سهولة الشرح

بعد ذلك نقوم بالضغط على تحرير html و ننقر وسط الأكواد.

نبحث عن هذا الوسم ]]></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> وضع الكود التالي بعده مباشرة و قم بحفظ القالب.

الآن طريقة التعامل مع الأزرار في المواضيع.

عند قيامك بكتابة موضوع قم بالنقر على زر "خيارات" و قم بتعديلها كما تلاحظ في الصورة.

أما بالنسبة للأزرار فسوف تضع هذا الكود في المكان الذي يعجبك وذلك في واجهة html الخاصة بالمواضيع.

قم بتغير الرابط http://hayegy.blogspot.com برابط المعاينة و الرابط http://hayegy.blogspot.com برابط التحميل.
ملاحظة : هذا الكود يحتوي على نموذج التحميل و المعاينة أي زرين في نفس الوقت يمكنكم إستعملهما كما تريد.

هذا كل ما في موضوع اليوم أتمنى لكم التوفيق في عملكم ، دمتم بود في أمان الله.

بحث هذه المدونة الإلكترونية

عرب داونز |ألعاب_برامج_شروحات_اسلاميات_ثقافة_أخبار_كتب_أدوات

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

المشاركات الشائعة من هذه المدونة

اتصل بنا

تحميل الفيديوهات من اليوتيوب

الربح من النقرات مع NeoBux