Now I am
going to share a wonderful tutorial about- how to add smart social media widgetfor blogger. With this widget you can link your social media profile Facebook,
Twitter and Rss Google plus,linkedin and YouTube.
How to
add Smart Social Media Widget
1. Log in to
blogger account >> Layout .
2. Click Add
Gadget and select 'HTML/Javascript
4. Now Paste
below code in the box.
<style
type="text/css">
.btrix_socialwidget
{ width: 280px; }
.btrix_socialwidget
ul { border: 1px solid #CCCCCC; margin: 0; padding: 0; }
.btrix_socialwidget
ul li { list-style:none; padding: 0; text-transform: none; border-bottom: 1px
solid #CCCCCC; border-top: 1px solid #FFFFFF; }
.btrix_socialwidget
ul li:first-child { border-top: 0 none; }
.btrix_socialwidget
ul li:last-child { border-bottom: 0 none; }
.btrix_socialwidget
ul li a { background-color: #F2F2F2 !important; color: #404040; display:block;
}
.btrix_socialwidget
ul li a:hover { background-color: #949494 !important;color: #0d0354; }
.btrix_socialwidget
ul li .rss { background:
url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj4x6cOd5f-O-nmV9Ba_nmg6XxheEPjlTKqEkX1OLyPq0-P7fh9V-Ww9KaNluyXwaJt0KL4PaMPITEkho84xiVR-wwdDZD8YxAlkB_5vkIJsMpi4bFrD_tz6PJePuMEr1D2sP8QMWSMc0/s1600/bt-RSS.png")
no-repeat scroll 10px center #F87E12; padding: 17.5px 60px; }
.btrix_socialwidget
ul li .twitter { background:
url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUJZ6wIMUZxNgqh39p5aMQ0ITR9cLj8MypsVnt9QiSvays-t15dIIWUIqMwnNV0ATNVxrBi8hWadkR3KNSPxUCZHn1MPSEu2a1OTFDvfkV3Ryxag_CeRMZk4y0NuuLEBoHyDEmmkYDnMg/s1600/bt-Twitter.png")
no-repeat scroll 10px center #4CACEE; padding: 17.5px 60px;}
.btrix_socialwidget
ul li .facebook { background:
url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJYsnrfv6K9Sd1XWsuVbodke4QLIyEE-XbVd6jYSaCiZ3x0O6NMzjLNyzfp1FUEGvb_XDinumtPrVHQ_JHjTXZdnSWBqUqWSc4dT0Kdj-M1bB4K9TIz9lN8BHNZ7sO4-yia4uW5rbD-CQ/s1600/bt-Facebook.png")
no-repeat scroll 10px center #3B5998; padding: 17.5px 60px; }
.btrix_socialwidget
ul li .google { background:
url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZVvOvKKKNWYsfVc3bcAoy6S2lsJBJSRvNZ1WjNDII5dEkqdriZfsm6qFANElUdRJwTvbKFP5L3edYfcPjgIj2fDtkqb5XmAj570ZkUyq874fZlO0c8qGF4rOaWapincIpv7Ux5AGnmJk/s1600/bt-google.png")
no-repeat scroll 10px center #D44937; padding: 17.5px 60px; }
.btrix_socialwidget
ul li .linkedin { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6peunFXsVmXXyblYDHrg7TnZRypy3sWnM3llhB9p-Of5fWMhruSWYTWCyTDKbXme155TAGSTSxV0i_KqwazLM4W4dBWlyCPi1zsJ-yOtphBri-fM7HXmLjywLr_ORYHdueFWR8oTioEY/s1600/bt-LinkedIn.png")
no-repeat scroll 10px center #3692C3; padding: 17.5px 60px; }
.btrix_socialwidget
ul li .youtube { background:
url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7bFCaTCBcwGJuGhqc1YaGQaA73mPYhdw3IKIFN9Fw8VlVeqcAcReaRr2XaQIFy2fJpbXTrPjIUbfNGobW8ItKgGfoB4llGUOfFZvIwbTlqs-_GLUR5Ps3N03Ka7nrF5OJ20MV4fDOrbI/s1600/bt-Youtube.png")
no-repeat scroll 10px center #C6312B; padding: 17.5px 60px; }
.social-about {
display: none; }
</style>
<div
class="btrix_socialwidget">
<ul>
<li><a
class="rss" href="http://feeds.feedburner.com/bloggertrix">Subscribe
to the RSS Feed</a></li>
<li><a
class="twitter" href="https://twitter.com/bloggertrix">Follow
me on Twitter</a></li>
<li><a
class="facebook" href="https://www.facebook.com/bloggertrix">Find
me on Facebook</a></li>
<li><a
class="google" href="https://plus.google.com/107955298793879607964"
rel="author">Join me on Google+</a></li>
<li><a
class="linkedin" href="http://linkedin.com/Username">Connect
on LinkedIn</a></li>
<li><a
class="youtube" href="http://www.youtube.com/Username">Watch me on
YouTube</a></li>
</ul>
</div>
Now need to
change the counters manually, just change deferent color number according to
profile.
Replace bloggertrix with your
Feedburner ID
Replace bloggertrix
with your Facebook username
Replace bloggertrix
with your Twitter Username
Replace 107955298793879607964 with your Google plus ID
Replace
Username with your linkedin Username
Replace
Username with your Youtube Username
5. Now save and
you are done.
Ishwarkag.blogspot.com
ReplyDeleteNice post... I recommend installing some minimal widgets for your blogger website from http://barrel.im .Thanks
ReplyDelete