All-in-one social widget for blogger


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&#8243; 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&#8221;) 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&#8221;) 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&#8221;) 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&#8221;) 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&#8221;) 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&#8221;) 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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s