Social portion is very important part of our website because a huge number of people comes from there.So its being very important to make it easy to people should connect with your site.Solution of this problem is " social widgets". So today i am going to show you how to insert all in one social widget on your blogger website.
When you done this tutorial your widget look like this.
Step-1
Go to your Blogger dashboard -> Layout
Step-2
Click on add a gadget.Than select a HTML
Step-3
Select a subject and Copy & Paste this code to there.
Note- Find and change that following by yours
Congratulation,you have done this tutorial. for more tutorial follow our website on facebook or you can follow us only by your email address.
When you done this tutorial your widget look like this.
Step-1
Go to your Blogger dashboard -> Layout
Step-2
Click on add a gadget.Than select a HTML
Step-3
Select a subject and Copy & Paste this code to there.
<div class="btnt-chronicl-social"><ul><li><a class="rss" href="http://feeds.feedburner.com/ShivamBlogspot">Subscribe to the RSS Feed</a></li> <li><a class="twitter" href="https://twitter.com/viewandroid">Follow me on Twitter</a></li> <li><a class="facebook" href="https://www.facebook.com/shivamblogspot">Find me on Facebook</a></li> <li><a class="google" href="https://plus.google.com/106038532455092952029" rel="author">Join me on Google+</a></li> <li><a class="linkedin" href="http://in.linkedin.com/your url">Connect with me on LinkedIn</a></li> <li><a class="youtube" href="http://www.youtube.com/user/sbstvable">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>
Note- Find and change that following by yours
- http://feeds.feedburner.com/ShivamBlogspot
- https://twitter.com/viewandroid
- https://www.facebook.com/shivamblogspot
- https://plus.google.com/106038532455092952029
- http://www.youtube.com/user/sbstvable
Congratulation,you have done this tutorial. for more tutorial follow our website on facebook or you can follow us only by your email address.
.png)
