Social widgets
is one of important widget in blogger blogs.They makes your users to
easily spread your words all around the world.Social network also play a
major role in your website traffic.Today I camed with a social widget
which looks beautiful , Elegant and adopts with your blog width.This
widget enable your user to connect with your blog in all top social
sites like Facebook, RSS ,Twitter,Google plus, LinkedIN and Youtube.This widget is used by Chandeep in his blog.Lets see the Demo
How to Add this Widget to Blogger ?
Adding this widget to blogger is very simple just follow these steps:
- Go to your Blogger Dashboard
- Then Go To Layouts----> Add A Widget-----> Html Javascript
- Just paste these Codes in your respective gadget box.
<div class="btnt-chronicl-social"><ul><li><a class="rss" href="http://feeds.feedburner.com/your">Subscribe to the RSS Feed</a></li> <li><a class="twitter" href="https://twitter.com/tbloggertricks">Follow me on Twitter</a></li> <li><a class="facebook" href="https://www.facebook.com/hotbiz">Find me on Facebook</a></li> <li><a class="google" href="https://plus.google.com/+kivandanu" rel="author">Join me on Google+</a></li> <li><a class="linkedin" href="http://in.linkedin.com/kivandanu">Connect with me on LinkedIn</a></li> <li><a class="youtube" href="http://www.youtube.com/user/kivandanu">Watch me on YouTube</a></li></ul></div><style type="text/css">.btnt-chronicl-social { width: 100%; } .btnt-chronicl-social ul { border: 1px solid #CCCCCC; margin: 0; padding: 0; } .btnt-chronicl-social ul li { list-style:none; padding: 0; text-transform: none; border-bottom: 1px solid #CCCCCC; border-top: 1px solid #FFFFFF; } .btnt-chronicl-social ul li:first-child { border-top: 0 none; } .btnt-chronicl-social ul li:last-child { border-bottom: 0 none; } .btnt-chronicl-social ul li a { background-color: #F2F2F2 !important; color: #404040; display:block; } .btnt-chronicl-social ul li a:hover { background-color: #fafafa !important; } .btnt-chronicl-social ul li .rss { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/RSS-1.png") no-repeat scroll 10px center #F87E12; padding: 17.5px 60px; } .btnt-chronicl-social ul li .twitter { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Twitter.png") no-repeat scroll 10px center #4CACEE; padding: 17.5px 60px;} .btnt-chronicl-social ul li .facebook { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Facebook-1.png") no-repeat scroll 10px center #3B5998; padding: 17.5px 60px; } .btnt-chronicl-social ul li .google { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/google.png") no-repeat scroll 10px center #D44937; padding: 17.5px 60px; } .btnt-chronicl-social ul li .linkedin { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/LinkedIn-1.png") no-repeat scroll 10px center #3692C3; padding: 17.5px 60px; } .btnt-chronicl-social ul li .youtube { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Youtube-1.png") no-repeat scroll 10px center #C6312B; padding: 17.5px 60px; } .social-about { display: none; }</style>
Customization:
Just replace following with your respective URL
- http://feeds.feedburner.com/your
- https://www.facebook.com/your
- https://plus.google.com/your
- http://www.youtube.com/user/your
- http://in.linkedin.com/your url
Thats all!If you liked this widget, please share with your friends.Happy Blogging:)