Tuesday, October 8, 2013

How to add a Metro Style Social Icons to Blogger blog.


If you want your readers and guests to catch up with you easily on your social network then this is the widget you need to be using for your social links. It’s attractive and people will like to click on it. It’s simple and easy to install into your blogger blog. Thanks to the person who converted this widget from that wardpress widget to blogger widget so that you can also be able to use it as I am here. This widget will help your blog to gain more social media optimized audience. The elegant look of this widget can make many people click it.


It’s very simple to add into your blog, just follow this easy steps:
1. Log in to blogger
2. Go to blogger dashboard
3. Go to the layout section
4. Press on Add widget
5. Choose the HTML/JavaScript option
6. You may choose to name the widget or leave it blank, it’s your option
7. Paste the code below into the given widget


<center>
<ul id="abt-social-icons">
<li class="rss-icon"><a href="http://feeds.feedburner.com/
Rumyblog" target="_blank"><img height="147" src="http://1.bp.blogspot.com/-0M62-Stfcdc/Ud1ZFcVvCRI/AAAAAAAABuY/9_o8SRGny8U/s1600/rss.png" width="147" /></a></li>
<li class="twitter-icon"><a href="http://www.twitter.com/
Rumishael101" target="_blank"><img height="147" src="http://2.bp.blogspot.com/-7qVkCzvGlC4/Ud1ZF3wqNlI/AAAAAAAABuc/6V0lQLdtvnk/s1600/twitter.png" width="147" /></a></li>
<li class="facebook-icon"><a href="http://www.facebook.com/
kingfaznelcaseb" target="_blank"><img height="147" src="http://1.bp.blogspot.com/-ReX8Fx2MrOk/Ud1ZFBIvvSI/AAAAAAAABuI/hX1cGTGVWZ0/s1600/facebook.png" width="147" /></a></li>
<li class="google-icon"><a href="https://plus.google.com/
100608324356951958873" target="_blank"><img height="147" src="http://3.bp.blogspot.com/-9gpsltkgVP0/Ud1ZFcm_cyI/AAAAAAAABuM/0u5oe5uRmuQ/s1600/google.png" width="147" /></a></li>
</ul>
</center>
<style>
#abt-social-icons li {
 float: left;
 width: 147px;
 height: 147px;
 margin: 0 6px 6px 0;
 padding: 0 0 0 0;
 border-bottom: none;
        list-style: none;
}
#abt-social-icons li a {
 line-height: 1px;
 display: block;
}

#abt-social-icons li a:hover img {
 -webkit-opacity: 0.8;
 -moz-opacity: 0.8;
 opacity: 0.8;
}

#abt-social-icons li a span {
 display: none !important;
}
</style>


8. Before you can save it, change the Link in BOLD RED with your own IDs. Now save the widget and ultimately save the template. Super awesome right! I know, cheers and enjoy it, For more blogging tips and tricks Click Here.

0 comments:

Post a Comment

Twitter Delicious Facebook Digg Favorites More