Stylish Social Widget For Blogger

0 Reviews Post a Review Posted by: Unknown Published On: 23:29 Avaliability Product Avaliable For Sale

widget

Add to Cart

View Cart Checkout

With the ever increasing popularity of social networks, Social sharing have become the best method for a blogger to increase his readership and popularity. But to get subscribers for your blog on facebook, twitter etc, it is important for the social links in your blog to be beautiful so that the reader will be tempted to click on it.

Here is a beautiful social connect widget with hover effect for your blog .

You can preview this widget in this webpage

Search for sidebar-wrapper to find the following line 

<div class='sidebar-wrapper'>  
        <b:section class='sidebar' id='sidebar' showaddelement='yes'>  

Paste the below code after this.

 <b:widget id='HTML2' locked='true' title='Social Profile Icons' type='HTML'>  
          <b:includable id='main'>  
   <h2>Connect</h2>  
 <ul class='socialwidget'>  
 <li class='facebook'>  
 <a href='http://www.facebook.com/' rel='nofollow' target='_blank' title='facebook'>  
 </a></li>  
 <li class='googleplus'>  
 <a href='https://plus.google.com/' rel='nofollow' target='_blank' title='googleplus'>  
 </a></li>  
 <li class='pinterest'>  
 <a href='http://pinterest.com/' rel='nofollow' target='_blank' title='pinterest'>  
 </a></li>  
 <li class='twitter'>  
 <a href='http://twitter.com/' rel='nofollow' target='_blank' title='twitter'>  
 </a></li>  
 <li class='rss'>  
 <a href='http://feedburner.com/' rel='nofollow' target='_blank' title='rss'>  
 </a></li>  
 <li class='skype'>  
 <a href='http://www.skype.com/' rel='nofollow' target='_blank' title='Skype'>  
 </a></li>  
 <li class='vimeo'>  
 <a href='http://www.vimeo.com/' rel='nofollow' target='_blank' title='vimeo'>  
 </a></li>  
 <li class='dribbble'>  
 <a href='http://www.dribbble.com/' rel='nofollow' target='_blank' title='dribble'>  
 </a></li>  
 <li class='flickr'>  
 <a href='http://www.flickr.com/' rel='nofollow' target='_blank' title='flickr'>  
 </a></li>  
 <li class='linkedin'>  
 <a href='http://www.linkedin.com/' rel='nofollow' target='_blank' title='linkedin'>  
 </a></li>  
 <li class='youtube'>  
 <a href='http://www.youtube.com/' rel='nofollow' target='_blank' title='youtube'>  
 </a></li>  
 </ul>  
 <style>  
 ul.socialwidget {float:left;}  
 ul.socialwidget li {float:left;list-style: none outside none;border:none;}  
 ul.socialwidget li a{background-color:transparent;background-image:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLhQpc7R6hkgVZC0tDCjkxqOGENtNlkaF2NGo0grLuyb00xDYO_T93n2U66iQATCtUKWdgEJiFZqJ4t-XhdpiEZvSSDZqtdJnZ9EQqyq7zoG4jU4rSw7gZRlOcesMNDpvctk8qxEELZQZj/s1600/spice-social-gadget-sprite.png&#39;);background-repeat:no-repeat;background-size:auto 96px;border:0 none;color:white;direction:ltr;display:block; height:32px;overflow:hidden;text-align:left;text-decoration:none;text-indent:-999em;transition:all 0.2s ease 0s;width:32px}  
 .ie7 ul.socialwidget li a, .ie8 ul.spicesocialwidget li a{background-image:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLhQpc7R6hkgVZC0tDCjkxqOGENtNlkaF2NGo0grLuyb00xDYO_T93n2U66iQATCtUKWdgEJiFZqJ4t-XhdpiEZvSSDZqtdJnZ9EQqyq7zoG4jU4rSw7gZRlOcesMNDpvctk8qxEELZQZj/s1600/spice-social-gadget-sprite.png&#39; )}  
 ul.socialwidget li.facebook a{ background-position:0 0}  
 ul.socialwidget li.flickr a{ background-position:-32px 0}  
 ul.socialwidget li.dribbble a{ background-position:-64px 0}  
 ul.socialwidget li.googleplus a{ background-position:-96px 0}  
 ul.socialwidget li.linkedin a{ background-position:-128px 0}  
 ul.socialwidget li.pinterest a{ background-position:-160px 0}  
 ul.socialwidget li.rss a{ background-position:-192px 0}  
 ul.socialwidget li.skype a{ background-position:-224px 0}  
 ul.socialwidget li.twitter a{ background-position:-256px 0}  
 ul.socialwidget li.vimeo a{ background-position:-288px 0}  
 ul.socialwidget li.youtube a{ background-position:-320px 0}  
 ul.socialwidget li.facebook a:hover, #sidebar ul.socialwidget li.facebook a:hover{ background-position:0 -32px}  
 ul.socialwidget li.flickr a:hover, #sidebar ul.socialwidget li.flickr a:hover{ background-position:-32px -32px}  
 ul.socialwidget li.dribbble a:hover, #sidebar ul.socialwidget li.dribbble a:hover{ background-position:-64px -32px}  
 ul.socialwidget li.googleplus a:hover, #sidebar ul.socialwidget li.googleplus a:hover{ background-position:-96px -32px}  
 ul.socialwidget li.linkedin a:hover, #sidebar ul.socialwidget li.linkedin a:hover{ background-position:-128px -32px}  
 ul.socialwidget li.pinterest a:hover, #sidebar ul.socialwidget li.pinterest a:hover{ background-position:-160px -32px}  
 ul.socialwidget li.rss a:hover, #sidebar ul.socialwidget li.rss a:hover{ background-position:-192px -32px}  
 ul.socialwidget li.skype a:hover, #sidebar ul.socialwidget li.skype a:hover{ background-position:-224px -32px}  
 ul.socialwidget li.twitter a:hover, #sidebar ul.socialwidget li.twitter a:hover{ background-position:-256px -32px}  
 ul.socialwidget li.vimeo a:hover, #sidebar ul.socialwidget li.vimeo a:hover{ background-position:-288px -32px}  
 ul.socialwidget li.youtube a:hover, #sidebar ul.socialwidget li.youtube a:hover{ background-position:-320px -32px}  
 </style>  
 </b:includable>  
         </b:widget> 

Add your social links replacing _blank and save template.
Thats It!!