Black Social Media Vertical Bar Widget For Blogger

Today there are lots of social networking websites available online where we can promote our blogs/website to get more traffic. We often see various social sharing widgets on different websites but if you want that your website look different than others then its a great widget for you. This widget contains only the leading social networking website buttons and hence it does not take too much space on your website/blog. Today there are many websites available online that can provide you such sharing buttons, one of the best website that i know is Add This but the problem with these websites they provide you only few choices and that are all common. So if you want to decorate your blog with something different then you can try this. This widget is really easy to install and does not takes your much time in installing and customizations.



To install this widget just follow the below steps:

•  Log in to your Blogger Account.
• Go to Layout >> Add a gadget >> HTML/JavaScript.
• Then copy and paste the below code in HTML/JavaScript box.

<style type="text/css">
.barrightblogger{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiux6g2upgG8y3x5aL2I70tmgBj8W36BLdBgeD2O0ljnetq_clhcaDFuP9CqLormAiuWdhADfJNWDLzq0xgWnuEMUAyPdxIuaRL67Fg2YdogKgGgR5uobSQBiy9oW45i-FvaNOZ4xK2U4lO/s1600/FB.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:160px; z-index:1000;}

.barrightbloggerc{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7BWZGXjlLB5aYRz7y1KbJ3ukfB3dIpP9Q9rse1PP6vIWN3mAxAn3S-a05ZzuUPFZJj07Z8-o0Nh2WRVQfKB6dATiqKLK6IFEUybfQb64yXO5qEbgOv1_OWvyBGrRawaR0RhPRuS-s42gZ/s1600/FB-open.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:160px; z-index:1100;}

.barconteblogger{margin:0px 0 0 43px}

.barrighttwitter{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDeCDY3HPf5GuKdOk-PS5Em7LxBec-YsCOcm_hVE_zM4IQkCTzyEbrx3RaQOWX4mVhOd9eoh5qDp4nvUZHaVfM-mBQpUJSE0Jn641-f0c30kLLklNUtsl1_q1Je5G8MpPdi9jOU2k561Na/s1600/TW.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:205px;z-index:1000;}

.barrighttwitterc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAuRtjEaAQQooBHcYv4oBp7Rl5bRGHSbgMWhP-LkUa3i7GFnMONs_YB56OJEYFyUh8ROdXUfPjMlcO08In-UC7XY1KefcQwEsxXBLdwBaBnQPqLK2da7qixBQ4COl8uGhIt-X8Z5aE0xFE/s1600/TW-open.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:205px; z-index:1100;}

.barcontetwitter{margin:0px 0 0 43px}

.barrightfacebook{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicmnepAEIIGoft8pg-_l_KlgqwiTIG8XMPL1kqdyJLGFZ0s5Mr_vZHMnjzizvd9uP6EN2Bd5r99rn7AuOxR4sCt_49vvN5-7IDX3AZDkW9UXtHkuLQWS2h74x0ukk9iVwU6L-RvPQSkout/s1600/G+.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:250px; z-index:1000;}

.barrightfacebookc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3uMIlYr8-xhjdzHuuxS48DUJH3yHuQTERcv32JFwCFfyY0-EIX2XYo3_DMfSJBYM8RjGNQE__30pbtWRFgTOAdpxQIbKk2dgICe3yxzwTBcNWw_2tyrrNhoitLBFIc-VyNh45v43tUtYE/s1600/G+-open.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:250px; z-index:1100;}

.barcontefacebook{margin:0px 0 0 43px}

.barquestionmark{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZbpGItb8u74-ONEbGbBBSagylsC97tXGwk3RVWNdDrOknf0dOx_fgquKFFGY7ntSyQsRrtraX-kT0dpaww_bchnWoqFbjedHoL2vUgn7SDRuUS7-xfUH0lyjNUgkqlvWxrzLvhtYqLuY/s1600/rss3.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:295px; z-index:1000;}

</style><br />

<div class="barrightblogger" onmouseover="this.className='barrightbloggerc'" onmouseout="this.className='barrightblogger'"><div class="barconteblogger"><a href="https://www.facebook.com/thebravesandsmarts" target="_blank"><img alt="Like The us on Facebook" title="Like us on Facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVm6rCETiRpIlkRwx80dLl8Ihd_hOtogV2kgeBeXSvwco5uABXG7s2xGCj9tTOS6egKlRYmtj7Xec4A45JhVhKMOU9hvgZfNqk9H5MCxq_-x00-i_FSG_TvR4VX8feVNYR59QprM4vdZR4/s1600/FB-open-new.png"/></a><br />
</div></div>

<div class="barrighttwitter" onmouseover="this.className='barrighttwitterc'" onmouseout="this.className='barrighttwitter'"><div class="barcontetwitter"><a href="https://twitter.com/TheBrvsAndSmrts" target="_blank"><img alt="Follow us on Twitter" title="Follow us on Twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivCcQ7IdnrnYNBnFkMISJ2qJbrEVahfVnexYF5sgC74vJjNrztYFyHG6vNSn67-RUgCgtLHgnbEQPpz4ccxKQdqQ6Z5aQpeHAi2Sue9LCb2FslckRPSZRn-WomEj7IqcLR5yjG9CZ1Bgkl/s1600/TW-open-new.png"/></a><br />
</div></div>

<div class="barrightfacebook" onmouseover="this.className='barrightfacebookc'" onmouseout="this.className='barrightfacebook'"><div class="barcontefacebook"><a href="https://plus.google.com/103268075528632314965/posts" target="_blank"><img alt="Recommend The Braves And Smarts on Google Plus" title="Recommend The Braves And Smarts on Google Plus" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvOFEfNmhcE7Ev0xqDKjdPb6za-ZVGnaLLW51Ni58V6TpJKC1uqCmDx8JPx0bCymxRP44qb4_D8qO_B7Yehe63EA-Rcnn1jbd1_GlL0uoecln1rgPc1Gb2jDU56YUPO34Lvqk-n8JrUhM1/s1600/G+-open-new.png"/></a><br />
</div></div>

<div class="barquestionmark"><a href="http://feeds.feedburner.com/thebravesandsmarts" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyza4XNaw7VHMDtlrirDhYRWmTJkh1c_tGAxUM44iMY3dUlNZ7XOMpSCfzfxZW35nzUGS3ywvRV9AQRcHvB_iB4Hiqhyphenhyphen7LN4nsScuq-Y6p2a8MqgqrTd_pCp2nY1zntyDj7IVSe55RNXdx/s1600/blank.png" alt="Subscribe in reader" title="Subscribe in reader"/></a><br />
</div>

• Then replace the colored texts with your fan pages name and id's.
• Now click on save tab and you are done.

Also read:

• Stylish slide out Don't Forget To Join Our Community widget for Blogger (Recommended)
• Protect your blog with stylish Copyscape banners