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

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

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

موضوع اليوم يتمحور حول اضافات بلوجر، وهناك الكثير من الاضافات التي تضيف لمسة جميلة لمظهر المدونة للزوار، منها ما يظهر لمسة جميلة ومنها ما يضيف اداة معينة والكثير من الاضافات على حسب احتياجات صاحب المدونة، والاضافة التي ساشرحها اليوم تتعلق بايقونات التحميل او التوجيه الى موقع معين، تنقسم هذه الاضافة الى كودين الكود الاول عبارة عن CSS ويتم اضافته الى مظهر القالب في تحرير HTML مرة واحدة فقط فوق الوسم المخصص لاكواد CSS وهو وسم <b:skin/> وهذا الكود يختص في اظهار شكل الايقونة من الوان وما الى ذلك والكود التاني هو عبارة عن كود HTML ويتم اضافته في المكان المراد اظهار الاضافة او ايقونة التحميل ويمكن اضافته العديد من المرات حسب احتياجاتك شاهد الشرح للتفاصيل
كود HTML
<div style="text-align: center;"><div id="wrap"><a class="btn-slide2" href="https://www.elyazpro.tech/" 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; }