Beautiful Social Subscription Widget for Blogger

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 Lakshya (me!) 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 id="line377" style="font-family: inherit;"> <<span class="start-tag">div</span><span class="attribute-name"> class</span>=<span class="attribute-value">"btnt-chronicl-social"</span>><<span class="start-tag">ul</span>><<span class="start-tag">li</span>><<span class="start-tag">a</span><span class="attribute-name"> class</span>=<span class="attribute-value">"rss"</span><span class="attribute-name">href</span>="<span style="color: magenta;">http://feeds.feedburner.com/</span><span style="color: magenta;">TrickMark</span>">Subscribe to the RSS Feed</<span class="end-tag">a</span>></<span class="end-tag">li</span>> <<span class="start-tag">li</span>><<span class="start-tag">a</span><span class="attribute-name">class</span>=<span class="attribute-value">"twitter" </span><span class="attribute-name">href</span>="https://twitter.com/LakshyaDhillon">Follow me on Twitter</<span class="end-tag">a</span>></<span class="end-tag">li</span>> <<span class="start-tag">li</span>><<span class="start-tag">a</span><span class="attribute-name">class</span>=<span class="attribute-value">"facebook" </span><span class="attribute-name">href</span>="<span style="color: blue;">https://www.facebook.com/LakshyaDhillon</span>">Find me on Facebook</<span class="end-tag">a</span>></<span class="end-tag">li</span>> <<span class="start-tag">li</span>><<span class="start-tag">a</span><span class="attribute-name"> class</span>=<span class="attribute-value">"google" </span><span class="attribute-name">href</span>="<span style="color: orange;">https://plus.google.com/+LakshyaDhillonPro</span>" <span class="attribute-name">rel</span>=<span class="attribute-value">"author"</span>>Join me on Google+</<span class="end-tag">a</span>></<span class="end-tag">li</span>> <<span class="start-tag">li</span>><<span class="start-tag">a</span><span class="attribute-name"> class</span>=<span class="attribute-value">"linkedin" </span><span class="attribute-name">href</span>="<span style="color: #a64d79;">http://in.linkedin.com/your url</span>">Connect with me on LinkedIn</<span class="end-tag">a</span>></<span class="end-tag">li</span>> <<span class="start-tag">li</span>><<span class="start-tag">a</span><span class="attribute-name"> class</span>=<span class="attribute-value">"youtube"</span><span class="attribute-name">href</span>="<span style="color: #6aa84f;">http://www.youtube.com/user/lakshyadhillontv</span>">Watch me on YouTube</<span class="end-tag">a</span>></<span class="end-tag">li</span>></div> <div id="line384" style="font-family: inherit;"> </<span class="end-tag">ul</span>></<span class="end-tag">div</span>><<span class="start-tag">style</span><span class="attribute-name"> type</span>=<span class="attribute-value">"text/css"</span>><span style="color: red;">.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; }</span></<span class="end-tag">style</span>></div> </blockquote> <br style="background-color: white; color: #333333; font-family: Electrolize, Verdana, Geneva, sans-serif; font-size: 15px; line-height: 20.790000915527344px;" /> <h4 style="background-color: white; color: #333333; font-family: 'Shadows Into Light', arial, serif; font-size: 15px; line-height: 20.790000915527344px;"> Customization:</h4> <div style="background-color: white; color: #333333; font-family: Electrolize, Verdana, Geneva, sans-serif; font-size: 15px; line-height: 20.790000915527344px;">

 Just replace following with your respective URL

•  http://feeds.feedburner.com/Trickmark
•  https://www.facebook.com/LakshyaDhillon
• https://plus.google.com/+LakshyaDhillonPro
• http://www.youtube.com/user/lakshyadhillontv 
• http://in.linkedin.com/your url

Thats all!If you liked this widget, please share with your friends.Happy Blogging:)

Like Our Facebook Page : Computer v/s Laptops

Browse More Articles

Tweet

Written by Lakshya Dhillon

We are Creative Blogger which provides user friendly, Blogger Widgets, Tricks and Tips, SEO and about Blogging. Each support has free and providing on this blog by Lakshya Dhillon.