Tuesday, January 20, 2015

5+ best Blogger Social Widgets

Adding a social gadget to your blog make it look professional. Social gadget not only looks good to your website but, also adds a feature to your blog to interact your visitors with you socially. It also helps to increase number of visitors to your blog.  If your blog is popular on social networking website then it can pull lots of traffic from it.

Social gadgets

If you want a custom social network widget to your blogger then this post is for you.  In this post you can find 5 different social gadgets which you can add to your blogger. Select your favorite gadget from the below listed gadgets and follow the steps in order to add it to your blogger.

Download all the gadgets code from the link at ends of this post.

Social Gadget#1

Gadget#0

 

<tr> <td width="245" height="35"> <!-- www.eknwomax.com --><ul id="socialbar">
<li id="facebook"><a target="_blank" href="http://www.facebook.com/username"><img src="https://lh6.googleusercontent.com/-P5L90vs9HJE/VL1BHlCmzYI/AAAAAAAAAdI/gOM0V0shUoM/h120/facebook.png" /></a></li>
<li id="twitter"><a target="_blank" href="http://twitter.com/username"><img src="https://lh4.googleusercontent.com/-kJVMpxoNwMA/VL1BIP5Ct5I/AAAAAAAAAdU/e3aF0tf6M68/h120/twitter.png" /></a></li>
<li id="Googleplus"><a target="_blank" href="https://plus.google.com/u/0/GOOGLEPLUSID"><img src="https://lh4.googleusercontent.com/-xcL71UEpgmQ/VL1BHgqw90I/AAAAAAAAAdM/h9fkG-Pp-B0/h120/Googleplus.png" /></a></li>
<li id="Pinterest"><a target="_blank" href="http://pinterest.com/username"><img src="https://lh4.googleusercontent.com/-MzylKkrILfM/VL1BHrJ0EyI/AAAAAAAAAdo/RlR6cosEpvM/h120/Pinterest.png" /></a></li>
<li id="linkedin"><a target="_blank" href="https://www.linkedin.com/profile/view?id=LINKEDINID&trk=nav_responsive_tab_profile"><img src="https://lh4.googleusercontent.com/-aXGiBHpHWSc/VL1BHy9ndkI/AAAAAAAAAdQ/5lgKDkXVIFU/h120/linkedin.png" /></a></li>
</ul>
<style>
#socialbar img
{
border
:0px;
}
#socialbar li img
{
width
:36px;
height
:36px;
}
#socialbar li a:hover
{
position
:relative;top:2px;
}
#socialbar
{
list-style
: none outside none;
margin
:0px;
position
: static;
}
#socialbar li
{
display
:inline;
padding-right
:2px;
}
#socialbar
{
padding
:10px;
text-align
:center;
}
</style>
</td> </tr>

Social Gadget#2


Gadget#1


<tr> <td width="245" height="35"> <!-- W --><ul id="socialbar">
<li id="facebook"><a target="_blank" href="http://www.facebook.com/username"><img src="https://lh6.googleusercontent.com/-nsVNCfrR0MQ/VL6aG5zwgvI/AAAAAAAAAfE/j0NQ9k_gJfw/w140-h140-p/facebook.png" /></a></li>
<li id="twitter"><a target="_blank" href="http://twitter.com/username"><img src="https://lh6.googleusercontent.com/-0VPgXhh9NMI/VL6aHCT_7tI/AAAAAAAAAe8/jVmruFIhcdI/w140-h140-p/twitter.png" /></a></li>
<li id="Googleplus"><a target="_blank" href="https://plus.google.com/u/0/profilepageaddress"><img src="https://lh4.googleusercontent.com/-kcXRELugCGA/VL6aGmcjuxI/AAAAAAAAAe0/SE7TmkgHodQ/w140-h140-p/google%252B.png" /></a></li>
<li id="Pinterest"><a target="_blank" href="http://myspace.com/username"><img src="https://lh3.googleusercontent.com/-tsNb26wSUpw/VL6aORsvzOI/AAAAAAAAAfM/1AhKZrZC3PM/w140-h140-p/myspace.png" /></a></li>
<li id="linkedin"><a target="_blank" href="http://www.linkedin.com/username"><img src="https://lh4.googleusercontent.com/-25aWZSTAXUI/VL6aGtAjXBI/AAAAAAAAAfA/SiLV8kd-AZk/w140-h140-p/linkedin.png" /></a></li>
</ul>
<style>
#socialbar img
{
border
:0px;
}
#socialbar li img
{
width
:50px;
height
:50px;
}
#socialbar li a:hover
{
position
:relative;
top
:2px;
}
#socialbar
{
list-style
: none outside none;
margin
:0px;
position
: static;
}
#socialbar li
{
display
:inline;
padding-right
:2px;
}
#socialbar
{
padding
:9px;
text-align
:center;
}
</style>
</td> </tr>


Social Gadget#3


Gadget#2


<tr> <td width="245" height="35"> <!-- W --><ul id="socialbar">
<li id="facebook"><a target="_blank" href="http://www.facebook.com/username"><img src="https://lh3.googleusercontent.com/-5xFkw9pZsFI/VL6pt0sREWI/AAAAAAAAA7w/5dTUpLXiLBk/h120/fb.png" /></a></li>
<li id="twitter"><a target="_blank" href="http://twitter.com/username"><img src="https://lh3.googleusercontent.com/-sOh0LCCUXpw/VL6pzJdgb4I/AAAAAAAAA8U/Y9I44H9P3t4/h120/twitter.png" /></a></li>
<li id="Googleplus"><a target="_blank" href="https://plus.google.com/u/0/profilepageaddress"><img src="https://lh4.googleusercontent.com/-ZsPjOzVhweo/VL6ptzI6_gI/AAAAAAAAA7s/Y_XtSOu4OZM/h120/google%2B.png" /></a></li>
<li id="Pinterest"><a target="_blank" href="http://pinterest.com/username"><img src="https://lh3.googleusercontent.com/-Fs-bFI8U5mc/VL6puDAcXjI/AAAAAAAAA70/jxC4R_PnNI0/h120/pinterest.png" /></a></li>
<li id="linkedin"><a target="_blank" href="http://www.linkedin.com/username"><img src="https://lh6.googleusercontent.com/-XsehxoJ4mYs/VL6puGj3yHI/AAAAAAAAA8I/XhU-BMG-w-c/h120/linkedin.png" /></a></li>
</ul>
<style>
#socialbar img
{
border
:0px;
}
#socialbar li img
{
width
:36px;
height
:36px;
}
#socialbar li a:hover
{
position
:relative;
top
:2px;
}
#socialbar
{
list-style
: none outside none;
margin
:0px;
position
: static;
}
#socialbar li
{
display
:inline;
padding-right
:2px;
}
#socialbar
{
padding
:10px;
text-align
:center;
}
</style>
</td> </tr>

Social Gadget#4


Gadget#3


<tr> <td width="245" height="35"> <!-- Www.eknowmax.com --><ul id="socialbar">
<li id="facebook"><a target="_blank" href="http://www.facebook.com/username"><img src="https://lh3.googleusercontent.com/-3fBKCUT1CHs/VL6rZ6hFUTI/AAAAAAAAA8s/MHr4J-lRLiw/h120/Facebook.png" /></a></li>
<li id="twitter"><a target="_blank" href="http://twitter.com/username"><img src="https://lh3.googleusercontent.com/-BU6oa489bos/VL6raeALodI/AAAAAAAAA84/DgkAtqcgMs8/h120/Twitter.png" /></a></li>
<li id="Googleplus"><a target="_blank" href="https://plus.google.com/u/0/profilepageaddress"><img src="https://lh6.googleusercontent.com/-YG9n42iqMNA/VL6rZhU1RDI/AAAAAAAAA8o/M6560AEEWOY/h120/Google%2B.png" /></a></li>
<li id="Pinterest"><a target="_blank" href="http://pinterest.com/username"><img src="https://lh5.googleusercontent.com/-ZTJ21EanBKk/VL6raAWOHgI/AAAAAAAAA80/YP3DJYITn_0/h120/Pinterest.png" /></a></li>
<li id="linkedin"><a target="_blank" href="http://www.linkedin.com/username"><img src="https://lh6.googleusercontent.com/-LDJMDEb_FAQ/VL6rZ7kkhNI/AAAAAAAAA8w/KYdLeBwb9cU/h120/Linkedin.png" /></a></li>
</ul>
<style>
#socialbar img
{
border
:0px;
}
#socialbar li img
{
width
:50px;
height
:50px;
}
#socialbar li a:hover
{
position
:relative;
top
:2px;
}
#socialbar
{
list-style
: none outside none;
margin
:0px;
position
: static;
}
#socialbar li
{
display
:inline;
padding-right
:2px;
}
#socialbar
{
padding
:5px;
text-align
:center;
}
</style>
</td> </tr>


Social Gadget#5


Gadget#4


<tr> <td width="245" height="35"> <!-- W --><ul id="socialbar">
<li id="facebook"><a target="_blank" href="http://www.facebook.com/username"><img src="https://lh4.googleusercontent.com/-81QpKAuIg3U/VL6zRqRrW3I/AAAAAAAAA9s/hu89FseC_tQ/h120/facebook.png" /></a></li>
<li id="twitter"><a target="_blank" href="http://twitter.com/username"><img src="https://lh6.googleusercontent.com/-b3G1bnQ3oGg/VL6zSYLKggI/AAAAAAAAA-E/UlyW8B9c2L4/h120/twitter.png" /></a></li>
<li id="Googleplus"><a target="_blank" href="https://plus.google.com/u/0/profilepageaddress"><img src="https://lh6.googleusercontent.com/-KCa9daGH63A/VL6zRrp99WI/AAAAAAAAA-U/mdEEPPy4fmU/h120/google.png" /></a></li>
<li id="Pinterest"><a target="_blank" href="http://pinterest.com/username"><img src="https://lh4.googleusercontent.com/-yh90lRM3f7U/VL6z2bRwJzI/AAAAAAAAA-c/qOtig5QSO-8/h120/posterous.png" /></a></li>
<li id="linkedin"><a target="_blank" href="http://www.linkedin.com/username"><img src="https://lh6.googleusercontent.com/-4RYCPuHnh_U/VL6zRuUZ1rI/AAAAAAAAA9w/eQ30DTUrUJM/h120/linkedin.png" /></a></li>
</ul>
<style>
#socialbar img
{
border
:0px;
}
#socialbar li img
{
width
:50px;
height
:50px;
}
#socialbar li a:hover
{
position
:relative;
top
:2px;
}
#socialbar
{
list-style
: none outside none;
margin
:0px;
position
: static;
}
#socialbar li
{
display
:inline;
padding-right
:2px;
}
#socialbar
{
padding
:5px;
text-align
:center;
}
</style>
</td> </tr>


Social gadget#6


Gadget#5


<tr> <td width="245" height="35"> <!-- W --><ul id="socialbar">
<li id="facebook"><a target="_blank" href="http://www.facebook.com/username"><img src="https://lh5.googleusercontent.com/-2MPHC4rtGO4/VL606nMsEtI/AAAAAAAAA-8/6w9j367a--s/w140-h140-p/facebook.png" /></a></li>
<li id="twitter"><a target="_blank" href="http://twitter.com/username"><img src="https://lh5.googleusercontent.com/-oXzFZzYymaA/VL607J_6qnI/AAAAAAAAA_M/y8r4OMd4m0o/w140-h140-p/twitter.png" /></a></li>
<li id="Googleplus"><a target="_blank" href="https://lh4.googleusercontent.com/-Ce_rRTxSGEY/VL6065x6mLI/AAAAAAAAA_Q/Jfti_ITnRCY/h120/google%2B.png"><img src="https://lh4.googleusercontent.com/-Ce_rRTxSGEY/VL6065x6mLI/AAAAAAAAA_U/J2pH20LCgo0/w140-h140-p/google%252B.png" /></a></li>
<li id="MySpace"><a target="_blank" href="http://myspace.com/username"><img src="https://lh4.googleusercontent.com/-iBixhqjJ7ow/VL6068mGJOI/AAAAAAAAA-4/IIb5cbadaKc/h120/myspace.png" /></a></li>
<li id="linkedin"><a target="_blank" href="http://www.linkedin.com/username"><img src="https://lh5.googleusercontent.com/-nBQ-7osT8lE/VL606gn4cOI/AAAAAAAAA-w/vCjAXphIw-8/h120/linkedin.png" /></a></li>
</ul>
<style>
#socialbar img
{
border
:0px;
}
#socialbar li img
{
width
:36px;
height
:36px;
}
#socialbar li a:hover
{
position
:relative;
top
:2px;
}
#socialbar
{
list-style
: none outside none;
margin
:0px;
position
: static;
}
#socialbar li
{
display
:inline;
padding-right
:2px;
}
#socialbar
{
padding
:5px;
text-align
:center;
}
</style>
</td> </tr>


How to add these custom Social Gadget to your Blogger. Follow the below steps.


1. Login to your Blogger account and open blogger dashboard. Click on Layout option from left pane of the webpage.


Step 1 Blogger layout


2. Click on Add a Gadget (Highlighted in the above screen shot). A new add a gadget page opens up.


step 2 add a gadget


3.  Click on step 21 to add Html\JavaScript gadget. A configure Html\JavaScript page opens up. Enter title and the above Social Gadget code snippet in content section. Before pasting the code snippet in the content section of the configure Html\JavaScript page make the below mentioned changes.


In code snippet search for http://www.facebook.com/username. Make sure you remove the username with your user name. For example, I will replace the username with eknowmax  and make it to http://www.facebook.com/eknowmax. Remove all the username with your respective username for all the social link.


step 3 add a gadget code


4. Click on Save. That’s it. You have successfully added the gadget to you blog. Do not forget to test it by clicking on every link, if it redirected to your page then the gadget is working. You can download the code snippet of all the 5 gadgets from the below link.


Download all the 5+ gadget code snippets.


If you have any queries or feedback  please do let me know in comments section.

3 comments:

badge