Add Social Media Follow us Widget Buttons with Hover Effect to Blogger

Social media has growing up day by day and its creating a wide connection between students, families, colleagues and co-workers. This will create a special relation between every field of world that connects with internet. Social media sites are increasing day by day but their are some popular social media sites like Facebook, Google Plus, Twitter, YouTube, Linked In, RSS Feed, Flicker, Digg, Stumble Upon and Pinterest. These social media sites having million of thousands of active users that are still connecting with each other every time.

The active and offline users are the plus point for bloggers to increase their pageviews and adsense earning with sharing the posts of tips and tricks and share professional tutorials with them. So they see your posts on their timeline. They will force to click and see the description of the headlines. These social media users may Like, Tweet, Follow, 1+ and subscribe for your blog to stay updates at their home. There is Social follow us with CSS3 hover widget also posted a few days ago.

How to Add Social Media Follow us Widget Buttons with Hover Effect to Blogger

<style>
.toptop {
filter:alpha(opacity=30);
-moz-opacity:0.3;
opacity: 0.3;
}
.toptop:hover {
filter:alpha(opacity=90);
-moz-opacity:0.9;
opacity: 0.9;
}
</style>

<div class='StarsBlogging-Follow'>
<ul><div style='float:center;text-align:right;padding:0px;padding-
right:0px;margin-top:-3px'>
<a class='toptop' href='http://twitter.com/StarsBlogging'><img alt='Twitter'
height='30' src='http://2.bp.blogspot.com/-
fgv4ILBTgPw/UQhUIsjtq2I/AAAAAAAABIc/ZFj81cuAkHo/s000/twitter-icon.png'
width='30'/></a>
<a class='toptop'
href='https://www.facebook.com/pages/Starsblogging/324532194302709'><img
alt='Facebook' height='30' src='http://2.bp.blogspot.com/-
N10LSw5mpHk/UQhUJKSVkkI/AAAAAAAABIk/dk1iA9tjmzY/s000/facebook-icon.png'
width='30'/></a>
<a class='toptop' href='http://feeds.feedburner.com/StarsBlogging'><img
alt='Feedburner' height='30' src='http://3.bp.blogspot.com/-
kxaAmna3YYI/UQhUJne2jgI/AAAAAAAABIs/3TtY_Olj828/s000/rss-icon.png'
width='30'/></a>
<a class='toptop' href='https://plus.google.com/110363707893612306708'><img
alt='Google +1' height='30' src='http://2.bp.blogspot.com/-
iEaJmXNJi00/UQhUJziVtrI/AAAAAAAABI0/W_tHrgIR9wY/s000/gplus-icon.png'
width='30'/></a>
<a class='toptop' href='http://youtube.com/YOUR_USERNAME'><img alt='youtube'
height='30' src='http://1.bp.blogspot.com/-
xfbrlrDRtcE/UQhUKXGREwI/AAAAAAAABI8/SNPnqG8UdTY/s000/youtube-icon.png'
width='30'/></a>
<a class='toptop' href='http://flickr.com/YOUR_USERNAME'><img alt='flickr'
height='30' src='http://2.bp.blogspot.com/-
cmplB1EqoSI/UQhUNeK9ZQI/AAAAAAAABJE/KV0_jTmw_sQ/s000/flickr-icon.png'
width='30'/></a>
</div></ul>
</div>

Customization of Social Media Follow us Widget in Blogger

• Change all the Red color links with your own blogger links to assure the widget is yours.
• You can easily changes the dimensions of every picture with changing the highlighted in Pink color width and height with your own choice.
• You can easily add or remove a picture with link. You can add or delete from <a class='toptop' to </a> tag.
• Just add a new link, create a picture of your desired social website like pinterest. Add a new link, upload the picture and just replace or create a new link.

Posted in: CSS, Facebook, Google-Plus, RSS, Social, Twitter, YouTube