How to add Social Media Icons to blogger-Blogger Widgets.

Social Interaction plays an important role on your blog. You can get traffic, subscribers, followers and indeed new friends from all over the world. Blogger platform is an easy interface for beginners. It provides a flexible environment for the beginners to make them move to the advance level.

Sidebar widgets provide readers a shortcut to different directions. To link your social media URL’s in sidebars make it easy for readers to get interaction with the author. We have found a CSS based very light simple and clean social media icons to direct your readers to your social media profiles. It is not designed by OZY NETWORK and we are not taking it's ownership.

DEMO

Let’s see how it works.

How to add CSS section

Open to your blogger dashboard
Click on Template >> Edit Html
Now Press CTRL+F and find ]]></b:skin>
Paste the below code above/before it.

.subscribe{width:289px !important;background: #fbfbfb;height:59px; border: 1px solid #A3A3A3; font-size: 90%; margin-left:-11px !important; margin-bottom:15px !important;
margin-top:0px !important;margin-right:0px !important;padding: 7px 0px 4px 10px !important;}
.subscribe a{padding:40px 11px 0px 0px; display: block;}
.subscribe a:hover {opacity:0.8;}
#subscribe-icon li{font-size: 11px; margin: 0 2px 5px 2px; width: 52px; text-align: center;height: 42px;display:inline;float:left;}
.sub-youtube a{background: url(http://3.bp.blogspot.com/-RSnY0aqLC9M/UXp2bGmRAoI/AAAAAAAAA2E/UCRb8Vh7iZA/s1600/icon-youtube.png) no-repeat 0 0;}
.sub-twitter a{background: url(http://1.bp.blogspot.com/-S4XgwbX9MGQ/UXp2cwpbGaI/AAAAAAAAA2M/C2l_npg4lzw/s1600/icon-twitter.png) no-repeat 0 0;}
.sub-facebook a{background: url(http://4.bp.blogspot.com/-90OYXK2FmSU/UXp2eI7Lk6I/AAAAAAAAA2Y/TCubqtQ2LlA/s1600/icon-facebook.png) no-repeat 0 0;}
.sub-rss a{background: url(http://4.bp.blogspot.com/-qwZ3rbj5uxc/UXp2eZBRKcI/AAAAAAAAA2U/8hjCEXcHvZo/s1600/icon-rss.png) no-repeat 0 0;}
.sub-email a{background: url(http://2.bp.blogspot.com/-GcCWYpIpUHc/UXp2e30KdQI/AAAAAAAAA2c/8ilWCLWMWUQ/s1600/icon-email.png) no-repeat 0 0;}

Save your template and the CSS part is done!

How to add Social Icons in Side bar-HTML

Now follow the easy steps :

Open your blogger dashboard.
Click on Layout.
Click on a widget section where you want to add it and choose html/javascript.
Paste the follow code there.

<div class='subscribe'>
<ul id='subscribe-icon'>
<li class='sub-youtube'><a href='YOUR-YOUTUBE-URL' rel='nofollow' target='_blank'>Youtube</a></li>
<li class='sub-twitter'><a href='YOUR-TWITTER-URL' rel='nofollow' target='_blank'>Twitter</a></li>
<li class='sub-facebook'><a href='YOUR-FACEBOOK-URL' rel='nofollow' target='_blank'>Facebook</a></li>
<li class='sub-rss'><a href='YOUR-FEED-URL' rel='nofollow' target='_blank'>RSS</a></li>
<li class='sub-email'><a href='YOUR-NEWSLETTER-URL' rel='nofollow' target='_blank'>Email</a></li>
</ul>
</div>

What More

It is clearly mentioned that where you have to put your Social Media Profile Url's. Its is a CSS based very light Social Media Icons and it will not affect your blogger speed anyway. If you are facing any problem regarding this widget, we are here to help you.