Wednesday 10 July 2013

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.

<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 

  1. http://feeds.feedburner.com/ShivamBlogspot
  2. https://twitter.com/viewandroid
  3. https://www.facebook.com/shivamblogspot
  4. https://plus.google.com/106038532455092952029
  5. 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.





Subscribe to RSS Feed Follow me on Twitter!