Social Buttons With Hover Effect Like labnol.org --classifieds

مواضيع مفضلة

Thursday, November 14, 2019

Social Buttons With Hover Effect Like labnol.org --classifieds


How to add a beautiful social networking buttons to your blogger blog. these networking buttons are inspired from labnol.org . social networking buttons are one of the best way to engaged your users and it will create a better relation of you with your readers
here's the live demo of social networking buttons
and i also add link below with which you can easily take a view of social networking buttons.
You can easily install this widget to your blogger blog and these buttons are really beautiful.

Installation:
  • Goto blogger dashboard
  • now Goto page layout tab
  • Then add a gadget and select html/javascript
  • Now paste below code in it.
<style> /************************** Social Buttons from zain-net.blogspot.com *************************/ .haseebnetgotsocial {padding: 2em 0 1.5em 50px;} .haseebnetgotsocial span  a {display: block;width: 32px;height: 32px;text-indent: -9999px;background-color: none;background: transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2oxiACC1q1C8ANxhu8SQbXLej8nn7CgFINweJhis_Y4ZccA0YHguCVOWFLAu8LFcOD-FGTLxygucDT7KTQJB1ZR94_7gpI5tG2Hpopg1FknD2dRB_j5zqZLK2fEukF_5euULJk0VkoABK/s1600/socialbuttons.png") 0 0 no-repeat;} .haseebnetgotsocial span {float: left;display: inline;margin-right: 8px;}
#iconTwitter,#iconFacebook,#iconRSS,#iconYouTube,#iconGooglePlus {transition:background-position .4s ease-in-out;-webkit-transition:background-position .4s ease-in-out; -o-transition:background-position .4s ease-in-out; -moz-transition:background-position .4s ease-in-out; -ms-transition:background-position .4s ease-in-out;}
#iconTwitter {background-position: -33px -33px;} #iconTwitter:hover {background-position: -33px 0;}
#iconFacebook {background-position: -66px -33px;} #iconFacebook:hover {background-position: -66px 0;}
#iconRSS {background-position: 0 -33px;} #iconRSS:hover {background-position: 0 0px;}
#iconYouTube {background-position: -99px -33px;} #iconYouTube:hover{background-position:-99px 0}
#iconGooglePlus {background-position: -132px -33px;} #iconGooglePlus:hover {background-position: -132px 0;}
.ads67 {border: 1px solid gainsboro;border-right-style: none;border-left-style: none;}
</style>
<div class="haseebnetgotsocial"> <span><a href="http://twitter.com/xxxxxxx" id="iconTwitter" target="_blank" title="Twitter: carelexx malik">Twitter</a></span> <span><a href="http://www.facebook.com/xxxxxxx" id="iconFacebook" target="_blank" title="Facebook: Carelexx malik">Facebook</a></span> <span><a href="http://feeds.feedburner.com/xxxxxx" id="iconRSS" target="_blank" title="RSS Feed: haseebnet blog post feed">RSS</a></span> <span><a href="https://www.youtube.com/user/xxxxxxx" id="iconYouTube" target="_blank" title="YouTube Channel: carelexx malik on youtube">YouTube</a></span> <span><a href="https://plus.google.com/10886765464645435354353?rel=author" id="iconGooglePlus" target="_blank" title="Google Plus: haseeb malik">Google</a></span> </div>



  • Now kindly replace all yellow colored links with your links
  • Now save it and its done.

    • روابط التحميل والمشاهدة، الروابط المباشرة للتحميل من هنا
    ---------------------------------------------------------------
    شاهد هذا الفيديو القصير لطريقة التحميل البسيطة من هنا
    كيف تحصل على مدونة جاهزة بآلاف المواضيع والمشاركات من هنا شاهد قناة منتدى مدونات بلوجر جاهزة بألاف المواضيع والمشاركات على اليوتيوب لمزيد من الشرح من هنا رابط مدونة منتدى مدونات بلوجر جاهزة بآلاف المواضيع والمشاركات في أي وقت حــــتى لو تم حذفها من هنا شاهد صفحة منتدى مدونات بلوجر جاهزة بألاف المواضيع والمشاركات على الفيس بوك لمزيد من الشرح من هنا تعرف على ترتيب مواضيع منتدى مدونات بلوجر جاهزة بآلاف المواضيع والمشاركات (حتى لا تختلط عليك الامور) من هنا
    ملاحظة هامة: كل عمليات تنزيل، رفع، وتعديل المواضيع الجاهزة تتم بطريقة آلية، ونعتذر عن اي موضوع مخالف او مخل بالحياء مرفوع بالمدونات الجاهزة بآلاف المواضيع والمشاركات، ولكم ان تقوموا بحذف هذه المواضيع والمشاركات والطريقة بسيطة وسهلة. ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــسلامـ.

    Post a Comment

    المشاركة على واتساب متوفرة فقط في الهواتف