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

إعلان أدسنس

آخر المواضيع

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

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

مايو 20, 2017

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

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

  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>

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


إرسال تعليق

مقالات