Multi Social Widget (Veritcal)

                                                               

STEP 1

Open your Blog account .

STEP 2

Select the "LAYOUT" tab appearing at the bottom left corner.

STEP 3

Click on "ADD A GADGET" and select "HTML/JAVASCRIPT"

STEP 4

Copy the code given below and paste it in the "HTML/JAVASCRIPT" page and insert ur social account id and then save it.

              <style> #WSG {width: 260px;margin: 5px 20px;padding:5px;} #WSG li {cursor: pointer;height: 48px;position: relative;list-style-type: none;} #WSG .icon {background: #D91E76 url('http://tinyurl.com/ogd3qz5') 0 0 no-repeat;background-color: rgba(217, 30, 118, .42);border-radius: 30px;display: block;color: #0033CC;float:none;height: 48px;line-height: 48px;margin: 5px 0;position: relative;text-align: left;text-indent: 50px;text-shadow: #333 0 1px 0;white-space: nowrap;width: 48px;z-index: 5;-webkit-transition: width .25s ease-in-out, background-color .25s ease-in-out;-moz-transition: width .25s ease-in-out, background-color .25s ease-in-out;-o-transition: width .25s ease-in-out, background-color .25s ease-in-out;transition: width .25s ease-in-out, background-color .25s ease-in-out;-webkit-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;-moz-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;-o-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;text-decoration: none;} #WSG span:hover {visibility: hidden;} #WSG span {display: block;top: 15px;position: absolute;left: 90px;} #WSG .icon {color: #fafafa;overflow: hidden;} #WSG .fb {background-color: rgba(45, 118, 185, .42);background-position: 0 -382px;}#WSG .twit {background-color: rgba(0, 161, 223, .42);background-position: 0 -430px;} #WSG .google {background-color: rgba(167, 0, 0, .42);background-position: 0 -478px;} #WSG .pint {background-color: rgba(204, 0, 0, .42);background-position: 0 -526px;} #WSG .linked {background-color: rgba(0, 87, 114, .42);background-position: 0 -574px;} #WSG .ytube {background-color: rgba(170, 0, 0, .42);background-position: 0 -670px;} #WSG .rss {background-color: rgba(255, 109, 0, .42);background-position: 0 -718px;} #WSG li:hover .icon {width: 200px;} #WSG li:hover .icon {background-color: #d91e76;} #WSG li:hover .fb {background-color: #2d76b9;background-position: 0 2px;} #WSG li:hover .twit {background-color: #00A1DF;background-position: 0 -46px;} #WSG li:hover .google {background-color: #A70000;background-position: 0 -94px;} #WSG li:hover .pint {background-color: #C00;background-position: 0 -142px;}#SP li:hover .linked {background-color: #005772;background-position: 0 -190px;} #WSG li:hover .ytube {background-color: #A00;background-position: 0 -286px;} #WSG li:hover .rss {background-color: #EC5601;background-position: 0 -334px;} #WSG .icon:active {bottom: -2px;-webkit-box-shadow: none;-moz-box-shadow: none;-o-box-shadow: none;}</style> <ul id="WSG"> <!--FACEBOOK--> <li><a href="https://www.facebook.com/USERNAME" class="icon fb">Like us on Facebook</a><span></span> </li> <!--TWITTER--> <li> <a href="https://twitter.com/USERNAME" class="icon twit">Follow us on Twitter</a><span></span> </li> <!--GOOGLE+--> <li><a href="https://plus.google.com/GOOGLE+ ID" class="icon google">Follow us on Google+</a><span></span> </li> <!--Pinterest--> <li><a href="http://www.pinterest.com/USERNAME" class="icon pint">Follow us on Pinterest</a><span></span> </li> <!--LINKEDIN--> <li><a href="http://in.linkedin.com/USERNAME" class="icon linked">Follow us on LinkedIn</a><span></span> </li> <!--YOUTUBE--> <li><a href="http://www.youtube.com/user/CHANNEL ID" class="icon ytube">Follow us on Youtube</a><span></span> </li> <!--FEEDBURNER--> <li><a href="http://feeds.feedburner.com/USERNAME" class="icon rss">Subscribe via RSS</a><span></span></li> </ul>