طريقة اضافة ايقونات التحميل احترافية لتدوينات بلوجر بسهولة

موضوع اليوم يتمحور حول اضافات بلوجر، وهناك الكثير من الاضافات التي تضيف لمسة جميلة لمظهر المدونة للزوار، منها ما يظهر لمسة جميلة ومنها ما يضيف اداة معينة والكثير من الاضافات على حسب احتياجات صاحب المدونة، والاضافة التي ساشرحها اليوم تتعلق بايقونات التحميل او التوجيه الى موقع معين، تنقسم هذه الاضافة الى كودين الكود الاول عبارة عن CSS ويتم اضافته الى مظهر القالب في تحرير HTML مرة واحدة فقط فوق الوسم المخصص لاكواد CSS وهو وسم <b:skin/> وهذا الكود يختص في اظهار شكل الايقونة من الوان وما الى ذلك والكود التاني هو عبارة عن كود HTML ويتم اضافته في المكان المراد اظهار الاضافة او ايقونة التحميل ويمكن اضافته العديد من المرات حسب احتياجاتك شاهد الشرح للتفاصيل
كود HTML

كود CSS

ELYAZPRO.TECH */

#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: #363050;
    border: 2px solid #0099cc;
    margin: 10px;
    transition: .5s;
}

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

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

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

.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: #DB5252;
}

.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: #2e9fff;
    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: #DB5252;
}

.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: #2FA8D1;
    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;
}

هناك 8 تعليقات:

karim14 ديسمبر 2017 في 8:20 ص
merci khoya ilyazpro ;
ردحذف
الردود
مكتبة امير15 ديسمبر 2017 في 12:50 م
موضوع جيد لكن ما حقيقة اسم ELYAZPRO.TECH */ الموجودة في الوسم لاالخاص ب css في القالب اريد اجابة من فضلك..؟؟؟
ردحذف
الردود
مكتبة امير15 ديسمبر 2017 في 12:56 م
موضوع جيد لكن ما حقيقة وجود اسم مدونتك ELYAZPRO.TECH */ في الكود الخاص بالقالب اريد اجابة واضحة من فضلك؟؟؟؟
ردحذف
الردود
غير معرف15 ديسمبر 2017 في 12:58 م
موضوع جيد لكن ما حقيقة وجود اسم مدونتك ELYAZPRO.TECH */ في الكود الخاص بالقالب اريد اجابة واضحة من فضلك؟؟؟؟
ردحذف
الردود
غير معرف15 ديسمبر 2017 في 1:00 م
موضوع جيد لكن ما حقيقة وجود اسم مدونتك ELYAZPRO.TECH */ في الكود الخاص بالقالب اريد اجابة واضحة من فضلك؟؟؟؟
ردحذف
الردود