Add Simple Minimal Style Social Subscription Widget

Having a site not integrated to any social media then you must surely integrate it soon by installing our minimal style social subscription widget. Because impact of social media is very much on bringing traffic to your sites and helping your brand or group to grow and get recognized soon.

Here in this tutorial we will be adding minimal style social subscription widget to your blogger sites. This widget is simple and sleek in look, it integrates the various social media platform to your sites or blogs, so that visitors can easily land on your social media fan pages to connect with you there socially.

Step#1

• Open Blogger Dashboard → Layout → Add Gadget → Html/Javascript Editor
• Now copy paste the below code to Html editor and save the gadget.

<style>
.social { width: 100%; margin:0;float:none }
.social ul { border: 1px solid #CCCCCC; margin:  0 0 0 0; padding: 0; display:table }
.social ul li { list-style:none; padding: 0 0 0 0 !important;margin:0 0 0 0; text-transform: none; border-bottom: 1px solid #CCCCCC; border-top: 1px solid #FFFFFF; width:100% }
.social ul li:first-child { border-top: 0 none; }
.social ul li:last-child { border-bottom: 0 none; }
.social ul li a { background-color: #F2F2F2 !important; color: #404040; display:block; }
.social ul li a:hover { background-color: #fafafa !important; }
.social ul li .rss { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPf2WjsJ7dPlYm-DuO6V3c2gW4_hVfratSKx4Vzr5pH8fIM7aoLFf86w8sF00YFy9zyQ-L4MfXjxW1th8oEErV5b6zheynyVVDRdVWD2b9nlS08_6qCgHwqZMC-b6kM-cqAPkH8LQVwg/s1600/RSS-1.png") no-repeat scroll 10px center #F87E12; padding: 17.5px 60px; }
.social ul li .twitter { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_TVVKyLi7qTXNDLB_oAl20El9DklKoVZd16VUiLZyqQ7NVcoSvyh6GGl4ScRo37e5y-9HZ8-CJiBTlC6tbdSpxNB3gW-n9ls2SPueZ1ie7CPN_BaSPKqhpxpAUGpMerNzYkJ3NxrmTw/s1600/Twitter.png") no-repeat scroll 10px center #4CACEE; padding: 17.5px 60px;}
.social ul li .facebook { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbxdrnvoQClTc5jDcjAp52JYfbF0YqvurBa8m_FuKJpOe5QGWPLx6ULmasD2n0ivj57t-TXv-vaiHugWQOEOLU2_WhxUCmayiuCA1dVONJequ2EJuomll3m5TFg3R4udggUKE2YXrBnA/s1600/Facebook-1.png") no-repeat scroll 10px center #3B5998; padding: 17.5px 60px; }
.social ul li .google { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvP4q-SFW0OgkHPjuierOb_qQsIOMP2qqdE_tSNBWdKfr6Awvj0u2KXfvaxUAGLoBgZ1YebBror-d23-fsKWh8a3iUWMELlcs1fDep4d4VUXRYRxCU7HUxxrnR7fTH_4Kziu3ugvh-Zw/s1600/google.png") no-repeat scroll 10px center #D44937; padding: 17.5px 60px; }
.social ul li .linkedin { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcF_-8Ylzubd__-K7nxnEFjFPtLi-C-lShNOpGQipLPmuAjvv_tS_qRdD35DH4DImTZ1S1E-QQuOXbTxkoGEv3TJJVe15j9Mb15CQQ7J90beIeS-1REnHjrRvwKg9avMCk9lvdcsdJoA/s1600/LinkedIn-1.png") no-repeat scroll 10px center #3692C3; padding: 17.5px 60px; }
.social ul li .youtube { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY63Ond_BOyQhTH9Almf5wY2M7tu0OrPVZhI8g_EQWMNYSlpzd8KcYdsW7032jvQs4DOAOZUhyphenhyphen4RlPr-S-tdSmAcUQFxhjCX-GbWHWw2Um2XGmglaQHZfObeVmPeae5ToBVj7I54CBbg/s1600/Youtube-1.png") no-repeat scroll 10px center #C6312B; padding: 17.5px 60px; } .social-about { display: none; }
</style>

<div class="social">
<ul>
<li><a class="rss" href="http://feeds.feedburner.com/xxxxxxxxxx">Subscribe to the RSS Feed</a></li>
<li><a class="twitter" href="https://twitter.com/xxxxxxxxxx">Follow me on Twitter</a></li>
<li><a class="facebook" href="https://www.facebook.com/xxxxxxxxxx">Find me on Facebook</a></li>
<li><a class="google" href="https://plus.google.com/xxxxxxxxxx" rel="author">Join me on Google+</a></li>
<li><a class="linkedin" href="http://in.linkedin.com/xxxxxxxxxx">Connect with me on LinkedIn</a></li>
<li><a class="youtube" href="http://www.youtube.com/xxxxxxxxxx">Watch me on YouTube</a></li>
</ul>
</div>

Step#2

• There are little modifications are to be done before adding this widget to your blog.
• Replace 

  xxxxxxxxxx

   with your site's/blog's username.
• After you have replaced the username with yours save the widget now it's all yours.