Awesome Social Follow Us Buttons For Blogger

Hello Bloggers, Today I will share you how to add social follow us buttons in blogger. This is somewhat different from other social buttons. This is very stylish and attractive too. You have seen many social follow us buttons in another blog but I always try something new for you all. Thats why Iam sharing this beautiful widget for you. This widget allows you to gain followers to your social networking accounts. I added Facebook, Twitter, Google+, Twitter, RSS Feed and Pinterest buttons. If you know about CSS, you can add more buttons but I think these buttons will be enough for all blogger users. This widget is done with CSS3 and some hover effects. This widgetis done with stylish effectes so you don't need to customize much in your blogger. You can add this widget below posts, sidebar or anywhere. This widget was created by me topbloggingideas.

Also See : Add Stylish Related Posts Widget to Blogger

                                     VIEW DEMO

Social Follow Us Buttons : Features

♠ Added with Popular Social Follow Us buttons. 

♠ Designed with latest Hover effects

♠ Very fast to load

♠ Designed with pure CSS

♠ Beautiful sliding effect 

Add Social Follow Us Buttons To Blogger :  

Step 1: Now open you Blogger account and then Template >> Edit HTML

Step 2: Now search for ]]></b:skin> and paste the following code before ]]></b:skin>

 .tbisbox { font: 25px/24px normal 'Denk One', sans-serif; display: inline-block; position: relative; width: 95%; max-width: 280px; margin: 0 auto 15px auto; padding: 16px; background-color: rgbaundefined238, 238, 238, 0.1); box-shadow: 8px 8px 0 0px rgbaundefined0, 0, 0, 0.1); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .tbislso { width: 95%; max-width: 280px; padding-top: 8px; padding-left: 8px; padding-right: 8px; } .tbislso a { text-decoration: none !important; } .tbislso ul { margin: 0; padding: 0; list-style: none; } .tbislso ul li { display: inline; margin: 0; padding: 0; text-indent: 0 } .tbislso ul li a.facebook { border-left: 65px solid rgbaundefined59, 89, 152, 1); color: rgbaundefined59, 89, 152, 1); -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; } .tbislso ul li a.facebook p { margin: 2px 20px 0 -70px; display: inline-block; color: #fff; -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; } .tbislso ul li a.facebook:hover { background: rgbaundefined59, 89, 152, 1); border-left: 0px solid rgbaundefined59, 89, 152, 0.1); color: #fff; -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; } .tbislso ul li a.facebook:hover p { opacity: 0; -webkit-transition: all 1ms ease-in-out; -moz-transition: all 1ms ease-in-out; -ms-transition: all 1ms ease-in-out; -o-transition: all 1ms ease-in-out; transition: all 1ms ease-in-out; } .tbislso ul li a.twitter { border-left: 65px solid rgbaundefined64, 153, 255, 1); color: rgbaundefined64, 153, 255, 1); -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; } .tbislso ul li a.twitter p { margin: 2px 20px 0 -70px; display: inline-block; color: #fff; -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; } .tbislso ul li a.twitter:hover { background: rgbaundefined64, 153, 255, 1); border-left: 0px solid rgbaundefined64, 153, 255, 1); color: #fff; -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; } .tbislso ul li a.twitter:hover p { opacity: 0; -webkit-transition: all 1ms ease-in-out; -moz-transition: all 1ms ease-in-out; -ms-transition: all 1ms ease-in-out; -o-transition: all 1ms ease-in-out; transition: all 1ms ease-in-out; } .tbislso ul li a.gplus { border-left: 65px solid rgbaundefined219, 74, 57, 1); color: rgbaundefined219, 74, 57, 1); -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; } .tbislso ul li a.gplus p { margin: 2px 20px 0 -70px; display: inline-block; color: #fff; -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; } .tbislso ul li a.gplus:hover { background: rgbaundefined219, 74, 57, 1); border-left: 0px solid rgbaundefined219, 74, 57, 1); color: #fff; -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; } .tbislso ul li a.gplus:hover p { opacity: 0; -webkit-transition: all 1ms ease-in-out; -moz-transition: all 1ms ease-in-out; -ms-transition: all 1ms ease-in-out; -o-transition: all 1ms ease-in-out; transition: all 1ms ease-in-out; } .tbislso ul li a.pinterest { border-left: 65px solid rgbaundefined174, 45, 39, 1); color: rgbaundefined174, 45, 39, 1); -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; } .tbislso ul li a.pinterest p { margin: 2px 20px 0 -70px; display: inline-block; color: #fff; -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; } .tbislso ul li a.pinterest:hover { background: rgbaundefined174, 45, 39, 1); border-left: 0px solid rgbaundefined174, 45, 39, 1); color: #fff; -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; } .tbislso ul li a.pinterest:hover p { opacity: 0; -webkit-transition: all 1ms ease-in-out; -moz-transition: all 1ms ease-in-out; -ms-transition: all 1ms ease-in-out; -o-transition: all 1ms ease-in-out; transition: all 1ms ease-in-out; } .tbislso ul li a.rss { border-left: 65px solid rgbaundefined255, 102, 0, 1); color: rgbaundefined255, 102, 0, 1); -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; } .tbislso ul li a.rss p { margin: 2px 20px 0 -70px; display: inline-block; color: #fff; -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; } .tbislso ul li a.rss:hover { background: rgbaundefined255, 102, 0, 1); border-left: 0px solid rgbaundefined255, 102, 0, 1); color: #fff; -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; } .tbislso ul li a.rss:hover p { opacity: 0; -webkit-transition: all 1ms ease-in-out; -moz-transition: all 1ms ease-in-out; -ms-transition: all 1ms ease-in-out; -o-transition: all 1ms ease-in-out; transition: all 1ms ease-in-out; }

Note :  There is no need to customize this code as it is designed with advanced effects. If you know about CSS, you can customize fonts, effects according to your wish.

Step 3: Now you have to add the widget. You can add this widget anywhere. Now Iam showing how to add this follow us widget in sidebar. Goto Layout >> Add a Gadget >> HTML/Javascript.

Step 4: Now Add the following code in HTML/Javascript.

<div class="tbislso">
 <ul>
   <li><a class="tbisbox facebook" href="#"><p>15K+</p>Facebook </a></li>
   <li><a class="tbisbox twitter" href="#"><p>10K+</p>Twitter</a></li>
   <li><a class="tbisbox gplus" href="#"><p>5K</p>Google+</a></li>
   <li><a class="tbisbox pinterest" href="#"><p>4K</p>Pinterest</a></li>
   <li><a class="tbisbox rss" href="#"><p>10K+</p>RSS</a></li> </ul>
</div>

Customization :

•  Replace # with your social networking links.

•  Replace Blue Numbers with your toal fans, readers and followers.

This is it. Now you can succesfully added this social follow us buttons widget in blogger. If you have any problems, comment your opinions below.

Recommended : Add Vertical Floating Social Media Sharing Buttons to Blogger

Subscribe Today And Discover All Tips And Tricks !

Note : Don't forget to click the confirmation link in youe email inbox!