» » » Add Labnol like Social Subscribe Buttons in Blogger

04:03 ,
A+ A-
Add Labnol Like Social Subscribe Buttons In Blogger
   Everyone knows that Labnol is most popular tech blog. All the widgets are officially created by Amit Agarwal. One of those gadgets is Social Subscribe buttons. These buttons are very lovely. Get the code here.
              
              These buttons are with hover effect and are made with CSS and HTML. These buttons are modern in style and free of cost. To get this gadget you have came to correct place. Also Subscribe Us! for latest updates.
Features :

  • Customization available.
  • This gadget is free of cost.
  • Easy and fast to navigate.
  • In modern style.
  • With hover effect.

Add this Gadget :
  • First you have to open Blogger in your favorite browser. When it opens, directly click on Layout option from the homepage.
  • When layout opens, simply click on Add a Gadget option.
    • Now, paste the CSS and HTML code in that area and after that click on Save button.
          Copy below CSS and HTML code of Labnol Buttons. 

    <style>
    .labnolSocial{display:inline-block;margin:10px
    0}.labnolSocial
    a{text-decoration:underline !important;float:right}.labnolSocial
    span{float:left;display:inline;margin-right:10px}.labnolSocial
    span.last{margin-left:0}.labnolSocial span
    a{display:block;width:32px;height:32px;text-indent:-9999px;background-color:none;background:transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI2DA5ZI63pwi6cFmOcQzdlRoDQS5bxmquTIJ6fDPcYrPIOQVO0DLfHqamtBnZJvNvhQ8qxeayE3lRwxqeQa9fcqvV-5eNZS3ocbM3JgtsyJuo5UKFhm15GOUEEKmLXjBvo-41aTEG_UaB/s1600/labnolcss.png") 0 0 no-repeat}
    #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 0}#iconYouTube{background-position:-99px -33px}#iconYouTube:hover{background-position:-99px 0}#iconGooglePlus{background-position:-132px -33px}#iconGooglePlus:hover{background-position:-132px 0}.logo{background:url("labnol.org/wp/wp-content/themes/baba/logo-XL.png") no-repeat scroll 0 0 transparent;margin:0
    auto;width:420px;padding:0
    0 20px 0}
    </style>
    <div class="labnolSocial">
     <span> 
    <a title="RSS Feed" href="http://feedburner.google.com/fb/a/mailverify?uri=KBTricks" target="_blank" id="iconRSS" onclick="_gaq.push(['_trackEvent', 'Subscribe', 'RSS', document.location.pathname]);">RSS</a> 
    </span> <span> 
    <a title="Follow on Twitter" href="http://twitter.com/kbtricks" target="_blank" id="iconTwitter" onclick="_gaq.push(['_trackEvent', 'Subscribe', 'Twitter', document.location.pathname]);">Twitter</a> 
    </span> <span> 
    <a title="Facebook Page" href="http://www.facebook.com/KBTricks" target="_blank" id="iconFacebook" onclick="_gaq.push(['_trackEvent', 'Subscribe', 'Facebook', document.location.pathname]);">Facebook</a> 
    </span> <span> 
    <a title="YouTube Channel" href="http://www.youtube.com/user/xxx" target="_blank" id="iconYouTube" onclick="_gaq.push(['_trackEvent', 'Subscribe', 'YouTube', document.location.pathname]);">YouTube</a> 
    </span> <span>
    <a title="Google Plus" href="https://plus.google.com/112749596503128004613" target="_blank" id="iconGooglePlus" onclick="_gaq.push(['_trackEvent', 'Subscribe', 'Google Plus', document.location.pathname]);">YouTube</a></span></div>

       If you have any kind of problem or suggestion about this article, please tell us by comments. You can also contact us. Also Share it with your friends. Don't forget to Subscribe Us!

Share to:

 
Top