بسم الله الرحمن الرحيم والصلاة والسلام علي اشرف المرسلين سيدنا ومولانا محمد عليه افضل الصلاة والسلام اما بعد اليوم في هذه التدوينة احبابي واخواتي في الله اقدم لكم اضافة احترافية في السايدبار وهي [اضافة ازرار مواقع التواصل الاجتماعي في السايدبار] ولن اطيل عليكم احبابي ☺☺
صورة الاضافة
كيفية التركيب
- افتح بلوجر ثم التخطيط
- واضغط اضافة اداه ثم HTML/JAVASCRIPT
- واضف هذا الكود في المكان الفارغ
<div class="widget-content"> <style> .zd-social { min-width: 250px; margin: 10px 0 } .zd-social a { color: #fff; position: relative; display: block; overflow: hidden } .zd-social .sq { width: 50%; height: 0; padding-bottom: 50%; float: left } .zd-social .icon { left: 0%; top: 0; width: 100%; height: 100%; position: absolute; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out } .zd-social a:hover .icon { left: -100% } .zd-social a:hover .content { left: 0 } .zd-social .content { -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; position: absolute; top: 0; left: 100%; word-wrap: break-word; width: 90%; height: 100%; margin: 0 5%; font: 400 14px 'open sans', sans-serif; text-align: center } .zd-social .display { margin-top: 40px; display: block } .zd-social .count { font-weight: bold; display: block; margin-top: 5px } .zd-social .icon span { position: Absolute; left: 50%; top: 50%; color: #fff; text-align: Center; width: 40px; height: 40px; text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); display: block; margin-top: -20px; margin-left: -20px; border: 2px solid #fff; font: 400 20px 'fontawesome'; line-height: 40px } .zd-social .facebook { background: #3b5998 } .zd-social .twitter { background: #00aced } .zd-social .google { background: #dd4b39 } .zd-social .instagram { background: #9b6954 } .zd-social .email { background: #ffaa09 } .zd-social .rec { height: 0; padding-bottom: 40% } </style> <div class="widget-content"> <div class="zd-social"> <a class="sq facebook" href="https://www.facebook.com/th3pro.tk" target="_blank"> <div class="icon"><span><i class="fa fa-facebook"></i></span></div> <div class="content"> <span class="display">nak1ha</span> <span class="count">2.5k</span> </div> </a> <a class="sq twitter" href="https://twitter.com/th3protk" target="_blank"> <div class="icon"><span><i class="fa fa-twitter"></i></span></div> <div class="content"> <span class="display">@th3protk</span> <span class="count">3k</span> </div> </a> <a class="sq google" href="https://plus.google.com/u/0/111340758804846478110" target="_blank"> <div class="icon"><span><i class="fa fa-google-plus"></i></span></div> <div class="content"> <span class="display">+ nak1ha</span> <span class="count">2.5k</span> </div> </a> <a class="sq instagram" href="https://www.instagram.com/" target="_blank"> <div class="icon"><span><i class="fa fa-instagram"></i></span></div> <div class="content"> <span class="display">@nak1ha</span> <span class="count">5.2k</span> </div> </a> <div style="clear:both"> <a class="rec email" href="#" target="_blank"> <div class="icon"><span><i class="fa fa-envelope"></i></span></div> <div class="content"> <span class="display">nomar3889@gmail.com</span> </div> </a> </div></div> </div> <div class="clear"></div> </div>
تعليقات: 0
إرسال تعليق