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

موضوع اليوم يتمحور حول اضافات بلوجر، وهناك الكثير من الاضافات التي تضيف لمسة جميلة لمظهر المدونة للزوار، منها ما يظهر لمسة جميلة ومنها ما يضيف اداة معينة والكثير من الاضافات على حسب احتياجات صاحب المدونة، والاضافة التي ساشرحها اليوم تتعلق بايقونات التحميل او التوجيه الى موقع معين، تنقسم هذه الاضافة الى كودين الكود الاول عبارة عن 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;
}