Portal of all Blogger widget, Airtel USSD Codes, Facebook Hack, Free Internet Tips, PC and Blogger Tricks

Breaking

Saturday 19 October 2013

Black Metro Style Social Widget


How To Add This Gadget

  • Go To Blogger DashBoard
  • Go To Layout Tab
  • Click On Add Gadget and Select HTML/JavaScript
  • Now Copy Following code and paste there.

Code:

<style>
.allin1-web-button .mj_btnbg {
    color: #141414;
    font-weight: bold;
    height: 35px;
    line-height: 35px;
    padding: 0 10px;
    text-transform: uppercase;
}
.ul_hm li div {
    background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF9NDmV-_ltR87-GLlM88SMDbg8wgqmfBxto4YIlNfkrUfpoXR4LlnikR3zAx4PlWoQQDFjTV4VzhCXiFkMt5i2z3rO83w5g5LbiNgAwqruDJh-ij8oKg0QH9Vd5BXqQeHs0nls7W2UC0/s1600/social_icon_sprite.png");
    float: left;
    height: 83px;
    margin-right: 3px;
    width: 83px;
}
.allin1-weblinks {
    font-size: 0;
}
#allin1-webfb:hover {
    background-position: 0 -86px !important;
}
#allin1-webtwit:hover {
    background-position: -86px -86px !important;
}
#allin1-weblink:hover {
    background-position: -172px -86px !important;
}
#allin1-web-tube:hover {
    background-position: -258px -86px !important;
}
#allin1-webblog:hover {
    background-position: -344px -86px !important;
}
#allin1-webstore:hover {
    background-position: -430px -86px !important;
}
ul li {list-style: none outside none;}
</style>
<ul class="ul_hm">
<li>
<a class="allin1-weblinks" target="_new" href="Facebook link">
<div id="allin1-webfb" style="background-position: 0px 0px;">Facebook</div>
</a>
<a class="allin1-weblinks" target="_new" href="Twitter Link">
<div id="allin1-webtwit" style="background-position: -86px 0px;">Twitter</div>
</a>
<a class="allin1-weblinks" target="_new" href="LinkedIn link">
<div id="allin1-weblink" style="background-position: -172px 0px;">Linkedin</div>
</a>
<a class="allin1-weblinks" target="_new" href="YouTube link">
<div id="allin1-web-tube" style="background-position: -258px 0px;">You Tube</div>
</a>
<a class="allin1-weblinks" href="Blog link">
<div id="allin1-webblog" style="background-position: -344px 0px;">Blog</div>
</a>
</li>
</ul>
</div>

Customization:

  • Change RED COLOUR Text With Your Link
You May Like:

No comments:

Post a Comment

Notice: Don't add "backlink". Text with Link will automatically Removed.