اضافة ازرار مواقع التواصل الاجتماعي في السايدبار .

إعلان أدسنس

آخر المواضيع

breaking/قوالب بلوجر/9
مقالات

السبت، 20 مايو، 2017

10:14 ص

تكبير النص تصغير النص أعادة للحجم الطبيعي
بسم الله الرحمن الرحيم في هذه التدوينة احبابي واخواتي في الله اقدم لكم اضافة احترافية في السايدبار وهي [اضافة ازرار مواقع التواصل الاجتماعي في السايدبار] ولن اطيل عليكم احبابي ☺☺

كيفية التركيب

  1. افتح بلوجر ثم التخطيط 
  2. واضغط اضافة اداه ثم HTML/JAVASCRIPT
  3. واضف هذا الكود في المكان الفارغ
<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/fayssalwb" 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/fayssalweb" target="_blank"> <div class="icon"><span><i class="fa fa-twitter"></i></span></div> <div class="content"> <span class="display">@fayssalfarrouj</span> <span class="count">3k</span> </div> </a> <a class="sq google" href="https://plus.google.com/" 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>

قم بتغير اللون الاحمر والاخضر فقط !


إرسال تعليق

مقالات