Add Sexy Social Media Follow Us Widget in Blogger Template

Add Sexy Social Media Follow Us Widget in Blogger Template

data:blog.title
social media

We can see in almost every blog or website has a follow Us widget with social media icons with a variety of buttons or icons. By installing a social media widget on your blog, you can invite your readers / visitors of the blog to get involved in your social network, and thus can enhance the reputation of your blog.

I won't say that this widget will automatically increase your blog followers in different social net but at least we can attract them to at least click once on the button to create / display the widget.

THE FEATURES OF THIS VERSION

  • The Features of This widget are as follows-
  • Widespread effect hover
  • Smooth and Sexy
  • Hover effect that created with the help of CSS3 transitions.
This widget made without Javascript and JQuery , purely with CSS . Widget will look neat and clean in your blog sidebar. But It won't suit in black background.
So please see the widget demo first, if you find it amazing or interesting then add it to your blog.




Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Go to your Layout tab.

Step 3 Click on "Add a Gadget" then select "HTML/JavaScript" Gadget.

Step 4 Now Copy the below code and paste it in "HTML/JavaScript" Gadget and Save it.


<div dir="ltr" style="text-align: left;" trbidi="on">
<style>
#bssose{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}
#bssose a{text-decoration:none; font-family:trebuchet ms,sans-serif;}
#bssose li{position:relative; height:38px; cursor:pointer; padding: 0 !important;}
#bssose .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(http://2.bp.blogspot.com/-05soRH2FN0M/URs3FjSpiBI/AAAAAAAABYc/UjN-swK_7yc/s320/sprites.png) no-repeat; background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px; box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap; line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;}
#bssose li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt); line-height:32px;}
#bssose .icon{overflow:hidden; color:#fafafa;}
#bssose .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}
#bssose .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}
#bssose .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}
#bssose .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}
#bssose .rss{ width:32px; height:32px; background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}
#bssose li:hover .icon,
.touch #bssose li .icon{width:210px;}
.touch #bssose li .facebook, #bssose li:hover .facebook{background-color:rgba(59,89,152,1);}
.touch #bssose li .twitter, #bssose li:hover .twitter{background-color:rgba(64,153,255,1);}
.touch #bssose li .googleplus, #bssose li:hover .googleplus{background-color:rgba(228,69,36,1);}
.touch #bssose li .pinterest, #bssose li:hover .pinterest{background-color:rgba(174,45,39,1);}
.touch #bssose li .rss, #bssose li:hover .rss{background-color:rgba(255,102,0,1);}
</style>
<br />
<ul id="bssose">
<li data-alt="Follow us on Facebook"><a class="icon facebook" href="http://www.blogger.com/blogger.g?blogID=4756312408149898454#">Follow us on Facebook</a></li>
<li data-alt="Follow us on Twitter"><a class="icon twitter" href="http://www.blogger.com/blogger.g?blogID=4756312408149898454#">Follow us on Twitter</a></li>
<li data-alt="Follow us on Google+"><a class="icon googleplus" href="http://www.blogger.com/blogger.g?blogID=4756312408149898454#">Follow us on Google+</a></li>
<li data-alt="Follow us on Pinterest"><a class="icon pinterest" href="http://www.blogger.com/blogger.g?blogID=4756312408149898454#">Follow us on Pinterest</a></li>
<li data-alt="Subscribe with RSS"><a class="icon rss" href="http://www.blogger.com/blogger.g?blogID=4756312408149898454#">Subscribe with RSS</a></li>
</ul>
</div>


Customization:

  • Change http://www.blogger.com/blogger.g?blogID=4756312408149898454# with your name or ID
Open Comment Box

I got this widget before without Pinterest. But I was looking for this widget with Pinterest. Thanks for the widget and your effort.

Lawrence Abiodun says: 3/02/2013

This wonderful tutorial has really solved my problem, going to share it on blog and give the credit back to you!

Muhammad Amir says: 3/03/2013

idget will look neat and clean in your get more instagram followers blog sidebar. But It won't suit in black background.

Louie Ramos says: 3/15/2013

Great widget, thanks. Looks beautiful on my blog. Wish it had a link to Linkedin also.

SEO Tips says: 4/08/2013

Thanks for your nice widget. It's very beautiful & attractive to look at.

Contact Form

Name

Email *

Message *