Add a Pro White Collar Social Sidebar Widget in Blogger

Social Reforms in the widgets are going on its best way. Hello frnds, we are here again for you all, as our blog is related with the widgets but in these days we are not able to post widgets as much as we should post but we are trying our best for you all. Today here is a simple but WordPress like Social Sidebar Widget for blogger which will give a very professional look to your blog like we see on the WordPress.

It simply made by the CSS and by HTML Codes. So, there would be no problem gonna come to
So, get ready to make your blog like a Pro.

See Also:- Add a Multi Color Social Bookmarking Widget

Install White Collar Social Plugin

Follow below steps carefully to add it in Blogger

• Login to Blogger > Dashboard
• Click on Drop Down Menu and select Layout
• Add a HTML/JavaScript Gadget
• Paste below code in it.

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet'/>

<style>
.wg-social {
width:100%;
float:none;
margin:0;
}

.wg-social ul {
border:1px solid #CCC;
display:table;
margin:0;
padding:0;
}

.wg-social ul li {
list-style:none;
text-transform:none;
border-bottom:1px solid #CCC;
border-top:1px solid #FFF;
width:100%;
margin:0;
padding:0!important;
}

.wg-social ul li:first-child {
border-top:0 none;
}

.wg-social ul li:last-child {
border-bottom:0 none;
}

.wg-social ul li a {
background-color:#F2F2F2!important;
color:#404040;
display:block;
font-family: oswald;
text-decoration: none;
}

.wg-social ul li a:hover {
background-color:#fafafa!important;
}

.wg-social ul li .rss {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaBQKoiY3vxoFyf1h3CMc-l9EKid9RXs04ExL2deJJV-VRja3GVskQss2K2-pTi42o52j2N4oMHGPwmlfOHKumezQ7jz3_KrP8cfTIVa2SXLRY7kKKVG6B7AXolV-ilJ7d6yM8PyIEZA/s1600/RSS-1.png) no-repeat scroll 10px center #F87E12;
padding:17.5px 60px;
}

.wg-social ul li .twitter {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhSXexF8Fn464q1b6DmN1ZUq0NPTI_zd1QYbgbvpfEpEtYgV6cA5AOf13bPhmz4477MwDNmiJEZjHYq0fAdKCinMBjdeDGAqFV3h7BGrLPkeQlCKr8Cp_BhDrJXLUNAwcmz4AG51Ya1Q/s1600/Twitter.png) no-repeat scroll 10px center #4CACEE;
padding:17.5px 60px;
}

.wg-social ul li .facebook {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE1C6x96j-0uA-369bRwGQpDByVf4QXDtVmmyE6mKg7a4hNdiNuIzXs7vlZiwG5Xx0afB970ufXF030udsZuLljS01LjTbiYsg0OjQ-keebeNB7I7N0YxSjHcAaYN5R2Z-b_-H_fBgwA/s1600/Facebook-1.png) no-repeat scroll 10px center #3B5998;
padding:17.5px 60px;
}

.wg-social ul li .google {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEvfj7dr6xJzlO0kQ85t2ZhsTLwWj1XhBzM6GHr83q3oTTIkjXfvnwjp04ReoBe2IFD23ZViIW-c8X0VX-WAXL75nQ6ZMn20fdykNIqyr0TXlN7qTXAgNu-SUAvcCgF-r0D46X1ku9nA/s1600/google.png) no-repeat scroll 10px center #D44937;
padding:17.5px 60px;
}

.wg-social ul li .linkedin {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTx5K9b2XENI3HrpN6cGt64BxvpkPXE226mpC0Y7774uNwP06GZ8ehJGUQIXH4Xor6mTjFVQ5kAXlmAL7Nhvih8m-Nc7F3JXcb_z6QXchKodvnUdmrr7u1NBzU3Bb2jAIVAuOD1PLV7g/s1600/LinkedIn-1.png) no-repeat scroll 10px center #3692C3;
padding:17.5px 60px;
}

.wg-social ul li .youtube {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2NKdQd0HqZIqu3WF4QnTcCrvkt8xrEK2zZ1anVwKbkSG8oXVWSVTuwK7ETJ9lo-TewIS_X7BSF0JvWtxCuf-4GY9CvE1GY8z-zGs9f2vsdoDSUvxfZlEGJLPMzimU8vCFFjvX7o60cw/s1600/Youtube-1.png) no-repeat scroll 10px center #C6312B;
padding:17.5px 60px;
}

.wg-social-about {
display:none;
}
</style>

<div class="wg-social">
<ul>
<li><a target="_self" class="rss" href="http://feeds.feedburner.com/#">Subscribe to Our RSS Feed</a></li>
<li><a target="_self" class="twitter" href="https://twitter.com/#">Follow me on Twitter</a></li>
<li><a target="_self" class="facebook" href="https://www.facebook.com/#">Find Us on Facebook</a></li>
<li><a target="_self" class="google" href="https://plus.google.com/#" rel="author">Join Us on Google+</a></li>
<li><a target="_self" class="linkedin" href="http://in.linkedin.com/#">Connect with Us on LinkedIn</a></li>
<li><a target="_self" class="youtube" href="http://www.youtube.com/#">Watch me on YouTube</a></li>
</ul>
</div>
</div>
<center>
<h6>Widget by:-<a href="http://www.widgetgenerators.com">Widget Generators</h6>

</center>

•  Save your Widget.

Make Changes....!

Do some changes before save your widget.

• Replace # with the usernames of all social networks.