.

Friday, September 6, 2013

Fancy Social Subscribe Widget For Blogger


Fancy+Social+Subscribe+Widget+For+Blogger-skillblogger.com

Hi readers!! Social Subscribe widget helps you to let your blog readers to subscribe your blog all over the internet through various social media  websites like Google plus, Facebook, Twitter, Pinterest etc. So, Today we will Share "Fancy Social Subscribe widget for blogger". It will also help you to drive traffic from various Social bookmarking sites to your blog.This blogger widget is purely based on css and html, So it will not affect your blog speed and will load very rapid.The widget also has hover effect, so it will attract your readers, whenever they will place their cursor on the Social icons.Lets start the tutorial but before that let's see the demo 

Features of this widget:-

  • Looks elegant and stylish.
  • Loads rapidly.
  • Based on CSS, So easy to edit.
  • Supports all most every browser.

How to install the widget:-

These  steps are so simple and easy that any new blogger will not face any kind of problem to install it in their blog.
  • Go To Blogger.com >> Your Blog >> Template
  • Now Backup your template.
  • Then select Edit HTML >> Proceed
  • Don’t forget to Click/Tick the Expand Template Widgets box.
  • Search for ]]></b:skin> and just above it paste the following  CSS code.
.sb-social{
overflow: hidden;
margin-bottom: 20px;
}
.sb-social a{
display: block;
padding-left: 20px;
color: #FFFFFF !important;
font-weight: 600;
font-family: "Open Sans","Tahoma","Verdana","Arial", sans-serif;
border-radius: 15px 15px 15px 15px;
transition: border-radius 0.50s;
-webkit-transition: border-radius 0.50s;
-moz-transition: border-radius 0.50s;
}
.sb-social a:hover{
border-radius: 0px 0px 0px 0px;
}
.sb-social div{
float: left;
margin-right: 10px;
width: 138px;
}
.sb-social .sbfacebook a{
padding: 7px 10px 7px 26px;
background: #3B5999 url('http://3.bp.blogspot.com/-yqD2363XuAo/UeDk98twSlI/AAAAAAAAArg/kXIzFBWmczM/s1600/fb14.png') no-repeat 10px center;
}
.sb-social .sbfacebook a:hover{
background: #555 url('http://3.bp.blogspot.com/-yqD2363XuAo/UeDk98twSlI/AAAAAAAAArg/kXIzFBWmczM/s1600/fb14.png') no-repeat 10px center;
}
.sb-social .sbtwitter a{
padding: 7px 10px 7px 32px;
background: #01BBF6 url('http://3.bp.blogspot.com/-0u8P4VQmEeU/UeDlVdilwcI/AAAAAAAAAro/lGTnlvHGyVw/s1600/twitter14.png') no-repeat 8px center;
}
.sb-social .sbtwitter a:hover{
background: #555
url('http://3.bp.blogspot.com/-0u8P4VQmEeU/UeDlVdilwcI/AAAAAAAAAro/lGTnlvHGyVw/s1600/twitter14.png') no-repeat 8px center;
}
.sb-social .sbgoogleplus a{
padding: 7px 10px 7px 32px;
background: #D54135 url('http://3.bp.blogspot.com/-A8fFRexz_zk/UeDlgadvpiI/AAAAAAAAArw/TRd7NWNwo9s/s1600/gplus14.png') no-repeat 10px center;
}
.sb-social .sbgoogleplus a:hover{
background: #555
url('http://3.bp.blogspot.com/-A8fFRexz_zk/UeDlgadvpiI/AAAAAAAAArw/TRd7NWNwo9s/s1600/gplus14.png') no-repeat 10px center;
}
.sb-social .sblinkedin a{
padding: 7px 10px 7px 35px;
background: #167FB1 url('http://4.bp.blogspot.com/-yuEMxhpIXPc/UeDltjBGR1I/AAAAAAAAAr4/kgidavlGbY8/s1600/linkedin14.png') no-repeat 10px center;
}
.sb-social .sblinkedin a:hover{
background: #555 url('http://4.bp.blogspot.com/-yuEMxhpIXPc/UeDltjBGR1I/AAAAAAAAAr4/kgidavlGbY8/s1600/linkedin14.png') no-repeat 10px center;
}
.sb-social .sbpinterest a{
padding: 7px 10px 7px 32px;
background: #CB2027 url('http://1.bp.blogspot.com/-v-ZkEQhYpug/UeDl6uIio-I/AAAAAAAAAsA/9rqq2cXT08k/s320/pinterest14.png') no-repeat 10px center;
}
.sb-social .sbpinterest a:hover{
background: #555 url('http://1.bp.blogspot.com/-v-ZkEQhYpug/UeDl6uIio-I/AAAAAAAAAsA/9rqq2cXT08k/s320/pinterest14.png') no-repeat 10px center;
}
.sb-social .sbdelicious a{
padding: 7px 10px 7px 32px;
background: #3173D1 url('http://2.bp.blogspot.com/-J9p31gkQfXw/UeDmILHMQwI/AAAAAAAAAsI/bEws_iRNx7g/s320/delicious14.png') no-repeat 10px center;
}
.sb-social .sbdelicious a:hover{
background: #555 url('http://2.bp.blogspot.com/-J9p31gkQfXw/UeDmILHMQwI/AAAAAAAAAsI/bEws_iRNx7g/s320/delicious14.png') no-repeat 10px center;
}
.sb-social .sbdelicious{
margin-right: 0;
}

Now let’s add the final  part of the widget, Search for <data:post.body/> and just below/after it paste the following coding.
<div class="sb-social">
<div class="sbfacebook">
<a href="https://www.facebook.com/MYThemelab" target="_blank">Facebook</a>
</div>
<div class="sbtwitter">
<a href="https://twitter.com/SkillBlogger" target="_blank">Twitter</a>
</div>
<div class="sbgoogleplus">
<a href="https://plus.google.com/113080363911944909191/" target="_blank">Google+</a>
</div>
<div class="sblinkedin">
<a href="http://in.linkedin.com/in/skillblogger" target="_blank">Linkedin</a>
</div>
<div class="sbpinterest">
<a href="http://pinterest.com/deepsinha/" target="_blank">Pinterest</a>
</div>
<div class="sbdelicious">
<a href="http://www.Skillblogger.com/Your_Delicious_Profile" target="_blank">Delicious</a>
</div>
</div>

Link change:-

Change our social links with with your social profile links.

All Done : Now everything is completed just  Save your Widget by pressing Save  button.

From Team Skill Blogger Desk:-

Hope you have enjoyed the session of cool and interesting tutorial.we are trying to create more widgets that benefits to you and your users. If you would face any problem to add this widget feel free to ask till then, blessings and Happy Subscribing.

Note: This widget is created by Skill Blogger. Don't forgot to link back if you want to share this tutorial.otherwise dmca is waiting for some spammers.
Like the Post? Share with yo
Spread The Love, Share Our Article

0 comments:

Post a Comment

 

 about US


SoftGlad is a leading blog which providing Latest News, Social Media, Web Design, Blogging, PC tutorials and many other stuffs. We will always trying to relate with our valuable readers by updating the quality contents. There are millions of blogs which providing technological knowledge but our goal is to provide dainty articles and useful technological knowledge.
See More

RECENT POSTS


RECENT Comment