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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCg-bZjkCmfYaOIqPIZ2oZNmWwTl4CezpXo6sPi7hJZ1DoQipIVKCGlCHuW6phACnyNF4wWcvje0E3o8vq8nxQ63CbC1j9gJxA2BCDOCpB6HXAoht_gsrAviwlucs7NBycPmdrA3xh6Rrl/s1600/fb14.png') no-repeat 10px center;
}
.sb-social .sbfacebook a:hover{
background: #555 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCg-bZjkCmfYaOIqPIZ2oZNmWwTl4CezpXo6sPi7hJZ1DoQipIVKCGlCHuW6phACnyNF4wWcvje0E3o8vq8nxQ63CbC1j9gJxA2BCDOCpB6HXAoht_gsrAviwlucs7NBycPmdrA3xh6Rrl/s1600/fb14.png') no-repeat 10px center;
}
.sb-social .sbtwitter a{
padding: 7px 10px 7px 32px;
background: #01BBF6 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioG9zXBCvs0FyP6yuKzR9j9pbXG5kkZ-wzDMn4pKl8ENkgU9jKDj8a6pPIFjh96U_HN9KCJhH4-f40ATa8hPnZidkE-VweYue0F6PHiHS_p-q2gXwVAev3nvG_HEg3kUHWEDjcya9ZGKOW/s1600/twitter14.png') no-repeat 8px center;
}
.sb-social .sbtwitter a:hover{
background: #555
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioG9zXBCvs0FyP6yuKzR9j9pbXG5kkZ-wzDMn4pKl8ENkgU9jKDj8a6pPIFjh96U_HN9KCJhH4-f40ATa8hPnZidkE-VweYue0F6PHiHS_p-q2gXwVAev3nvG_HEg3kUHWEDjcya9ZGKOW/s1600/twitter14.png') no-repeat 8px center;
}
.sb-social .sbgoogleplus a{
padding: 7px 10px 7px 32px;
background: #D54135 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7FHZZBpEzhJTA9CzUyDJm5qcjw65bheGqR8ysWL6thWfE-sJCzHdzh_nuxJpw2A93SmMYUk2rqO1WzKsEsWSc-tkh6d7wIOJt3INEo9eHC0MkTX9XeBKbxxW6CACtU0r1V7pKlaOfgh_Q/s1600/gplus14.png') no-repeat 10px center;
}
.sb-social .sbgoogleplus a:hover{
background: #555
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7FHZZBpEzhJTA9CzUyDJm5qcjw65bheGqR8ysWL6thWfE-sJCzHdzh_nuxJpw2A93SmMYUk2rqO1WzKsEsWSc-tkh6d7wIOJt3INEo9eHC0MkTX9XeBKbxxW6CACtU0r1V7pKlaOfgh_Q/s1600/gplus14.png') no-repeat 10px center;
}
.sb-social .sblinkedin a{
padding: 7px 10px 7px 35px;
background: #167FB1 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOStqCdPe6GiHadyyQ8LgI6ocfEqRQWw4zoWv8ezIJY3DSykuW9Dmj81kMHfIZh2_oMMiEFBq03XTwO5N7MCyZuj3Vgr1zjBQf9My6BJBZxebjJLEGtYxhZk7e8pPIDmqFgsm31irQBFVs/s1600/linkedin14.png') no-repeat 10px center;
}
.sb-social .sblinkedin a:hover{
background: #555 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOStqCdPe6GiHadyyQ8LgI6ocfEqRQWw4zoWv8ezIJY3DSykuW9Dmj81kMHfIZh2_oMMiEFBq03XTwO5N7MCyZuj3Vgr1zjBQf9My6BJBZxebjJLEGtYxhZk7e8pPIDmqFgsm31irQBFVs/s1600/linkedin14.png') no-repeat 10px center;
}
.sb-social .sbpinterest a{
padding: 7px 10px 7px 32px;
background: #CB2027 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglVHXZy6ULO0kJpTpaLzsjdX4qHtZd2oyAloAPTNozMZf2NSVQd5zqOit4Lb6xXTLymV4AKT-83NcvbVR9iPB3ioPHqrV5h58zNDUox8kGeFw9RanCL67VXkybuCFfyqzv6UF0DGM-tLmu/s320/pinterest14.png') no-repeat 10px center;
}
.sb-social .sbpinterest a:hover{
background: #555 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglVHXZy6ULO0kJpTpaLzsjdX4qHtZd2oyAloAPTNozMZf2NSVQd5zqOit4Lb6xXTLymV4AKT-83NcvbVR9iPB3ioPHqrV5h58zNDUox8kGeFw9RanCL67VXkybuCFfyqzv6UF0DGM-tLmu/s320/pinterest14.png') no-repeat 10px center;
}
.sb-social .sbdelicious a{
padding: 7px 10px 7px 32px;
background: #3173D1 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-omhKcHYnU5Pd9tF8DdVGSTPS9oiQkbaEfDj_2RjBogHQKe1U79_aC_FGxbFmpgF6Qe_xpX_I_RB9lTGTvndh9KEJR7iIi10D_-VvtO0qO58D5PLgMEgtheXdN6hTALdvlYRMCjo8eLPF/s320/delicious14.png') no-repeat 10px center;
}
.sb-social .sbdelicious a:hover{
background: #555 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-omhKcHYnU5Pd9tF8DdVGSTPS9oiQkbaEfDj_2RjBogHQKe1U79_aC_FGxbFmpgF6Qe_xpX_I_RB9lTGTvndh9KEJR7iIi10D_-VvtO0qO58D5PLgMEgtheXdN6hTALdvlYRMCjo8eLPF/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