Add Sexy Social Media Follow Us Widget in Blogger Template

Add Sexy Social Media Follow Us Widget in Blogger Template

5
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
Add Sexy Social Media Follow Us Widget in Blogger Template
4 Stars stars - "Add Sexy Social Media Follow Us Widget in Blogger Template" We can see in almost every blog or website has a follow Us widget with social media icons wi...

Post a Comment

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

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

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

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

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

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *