 |
| Sliding Profile Social Media Widget For Blogger 2014 |
Sliding Profile Social Media Widget For Blogger 2014
1. Log in to blogger account and Click drop down.
4. Paste below code.
<style>
#socialmenu_btrix {
margin:0;
padding:0;
width: 30em;
height: 4.5em;
overflow:hidden;
}
#socialmenu_btrix li {
display:inline;
list-style-type:none;
}
#socialmenu_btrix li a {
display:block;
float:left;
text-decoration:none;
margin:0;
}
#socialmenu_btrix li a img {
opacity:0.7;
margin:0.5em;
border:0;
float:left;
}
#socialmenu_btrix li a span {
display:none;
}
#socialmenu_btrix li a:hover {
background:transparent;
}
#socialmenu_btrix li a:hover span {
width:7em;
color:#aaa;
display:block;
cursor:pointer;
float:left;
}
#socialmenu_btrix .h2 {
margin:0 5px;
padding:0;
color:#fc0;
font-variant:small-caps;
font-size:1em;
border:0;
}
</style>
<ul id="socialmenu_btrix">
<li>
<a href="https://www.facebook.com/Teck92"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC8dN96VDb7dDoK2VrsATvfacNBgDDRZVp4P1PiI1KyWrOIOL_5giLxKYTsnNplP3frP5mwC4XZ3AfnVBgrE1xBQ3Foe37_5yR2JkJHAUiSnBGLuSdLbBt2o4XlMQuQy96prtcBjK-JJo/s1600/Facebook-icon_btrix.png" alt="facebook" width="50" height="50" title="Facebook" />
<span><br />
<b class="h2">Facebook</b><br />
Add to facebook
</span>
</a>
</li>
<li>
<a href="https://plus.google.com/107955298793879607964"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDyB7awCzFxJvV85ONcv-XIwHjxoLyhUyTV-Bs5AIzkPavFyLabi3BFfMSSJzljem8r5c3-zlU5Gx0mVfyx_ssRWkX1B65uWb8pAVOAlsKE5xEkXYivcND0XitEXM6O3PRRCipUx78jHU/s1600/Google-plus-icon_btrix.png" alt="Google plus" width="50" height="50" title="=Google plus" />
<span>
<br />
<b class="h2">Twitter</b><br />
Add to twitter
</span>
</a>
</li>
<li>
<a href="http://feeds.feedburner.com/Teck92"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfMlSkq5f3Qoj_H9Coxs3vvXT8lxX8frXLowdhL4Lphq6obIkxswPb-4jwDMPypQsQxTTYXkbzoN7aE_NMvFXEvl2q_XqU0zSklOH1JmXK2-aSNbPJ4nDgkRFKi4SB_fQ4l4-37XYQoD4/s1600/RSS-icon_btrix.png" alt="Rss" width="50" height="50" title="Rss" />
<span><br />
<b class="h2">Rss Feed</b><br />
Subscribe
</span>
</a>
</li>
<li>
<a href="http://stumbleupon.com/Username"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAf2QodMGHWbwvcnw2yv3EuSvMIaHlV_yv3EJzVBg6xJfA2TE6fLnYMd8KGnE7Nq47rIdZZTehQCDHhT5tOHHduFVWEW1JJJc8WjSkLo0uqCWyotxnm6LytpgxyQJx95VAE_AAWOnN65c/s1600/StumbleUpon-icon_btrix.png" alt="Stumbleupon" width="50" height="50" title="Stumbleupon" />
<span><br />
<b class="h2">Stumbleupon </b><br />
add to stumble
</span>
</a>
</li>
<li>
<a href="https://twitter.com/Teck92">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7_ldmEPtu4pLlZUgsYmOnemLlFo15Xw5Dd9ClWbssEXmKY3yxu272HTfAN6E5079wBfxC4hyPezGESp-taXuH0Xs8krBAxcjsUXnNgNfCFPMYo32arF7JRnH-t1698ubeEifCDXDQj3w/s1600/Twitter-icon_btrix.png" alt="twitter" width="50" height="50" title="twitter" />
<span><br />
<b class="h2">Twitter</b><br />
add to twitter
</span>
</a>
</li>
</ul>
You have to change the counters manually, just change red color number according to profile.Replace Teck92 with your Feedburner ID
Replace Teck92 with your Facebook username
Replace Teck92 with your Twitter Username
Replace 107955298793879607964 with your Google plus ID
Replace Username with your StumbleUpon Username
5. Now save your HTML/Javascript'.You are done.
