كيفية اضافة ايقونات التحميل احترافية لتدوينات بلوجر بيسر
موضوع هذا النهار يتمحور بشأن اضافات بلوجر، وهناك العديد من الاضافات التي تضيف لمسة جميلة لمظهر المسجلة للزائرين، منها ما يتضح لمسة جميلة ومنها ما يضيف اداة محددة والكثير من الاضافات على حسب احتياجات صاحب المسجلة، والاضافة التي ساشرحها هذا النهار تتعلق بايقونات التحميل او التوجيه الى موقع محدد، تنقسم تلك الاضافة الى كودين الكود الاول عبارة عن CSS ويحدث اضافته الى هيئة خارجية القالب في تحرير HTML مرة واحدة لاغير فوق الوسم الخاص لاكواد CSS وهو وسم وذلك الكود يختص في اظهار شكل الايقونة من الوان وما الى هذا والكود التاني هو عبارة عن كود HTML ويحدث اضافته في المقر المرغوب اظهار الاضافة او ايقونة التحميل ويمكن اضافته الكثير من المرات حسب احتياجاتك شاهد التفسير للتفاصيل
كود HTML
-----------------------------------------------------------------------------------------------------------
<div style="text-align: center;">
<div id="wrap">
<a class="btn-slide2" href="https://androidgolds1.blogspot.com/" rel="nofollow" target="_blank">
<span class="circle2"><i class="fa fa-download"></i></span>
<span class="title2">تحميل البرنامج</span>
<span class="title-hover2">اضغط هنا</span>
</a>
</div>
</div>
-------------------------------------------------------------------------------------------------------------
كود 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;
}
---------------------------------------------------------------------------------------------------------------
