This is awesome looking follow me widget with subscription box.This widget is officially made by Netoopsblog. Thanks to netoopsblog to provide the tutorial of this such an awesome widget.This widgets icons look as if they are made of decomposing wood hanging on the wall of your blog.And below the follow me buttons there is a subscription box which is also very important in increasing traffic.
<style type="text/css">
img.beintouch:hover {
background: none repeat scroll 0 0 #D6D6D6;
border-radius: 16px 16px 16px 16px;
box-shadow: 0 0 10px #565656;
}
.emailtext {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsqFgMGaYh5p0wQnYOjj4748NKRToVdQqJoGu-S9m18Lybqi7CA0zF2FJ6MV-mmrSnx7BJ5WVUF6jsYsPTWZyR8YTCLgJagL95uOtKT5tnjBoyFA9eJU1G01LV86TN1v5rZ2VLZAcfaxI/s1600/mailbox.png") no-repeat scroll 4px center transparent;
border: 1px solid #D3D3D3;
border-radius: 4px 4px 4px 4px;
box-shadow: 1px 1px 2px #CCCCCC inset;
color: #444444;
font-weight: bold;
margin-left: 2px;
padding: 7px 15px 7px 35px;
text-decoration: none;
width: 176px;
}
.ebutton {
background: -moz-linear-gradient(center top , #FBFBFB 0%, #F4F4F4 100%) repeat scroll 0 0 #ABAB12;
border: 1px solid #D3D3D3;
border-radius: 4px 4px 4px 4px;
color: #444444;
cursor: pointer;
font-weight: bold;
margin-left: -18px;
margin-top: 5px;
padding: 6px 15px;
text-decoration: none;
}
</style>
<table align="center" width="317px" cellspacing="0px" cellpadding="1px"><tbody><tr><td><a target="_blank" rel="nofollow" href="http://www.facebook.com/BloggingTrickzAndToolz"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn6qzN8qrRTe8xuGUT2vyElpBQiYAgi5vvkp5hRmev9-_fw9fr-6D_XTxHQfAK9sDIZhVrIKDrllXtIiwzRQkSDlxuRZDF8ofxBOwCzJlVPGfAR1DsAQoPVEsPcb4rXpWizh9GVxtupzY/s1600/woden+board+facebook_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="http://twitter.com/AdityaThakker13/" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx062RHZ4XOD3G4W0HaBifThrj_CFMLgx4CldPjibu3Zy4_hb8V4xQ77E5w5ALl-nHk7Qef90CYtf33odXAmCq51Kcm7NgQ8cw1OH4jIIOaLZTLby5HzEhIBfHZ4ZJ58TdED8TN5pAUdg/s1600/woden+board+twitter_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="http://feeds.feedburner.com/blog-toolz" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4QU7-GEkaBO_uXJLfU1ZElwc2KZ2MhN0xndOZfYLCEcWKg8eJigpG6kPa8rtwIJZ-Z1WOzXITG1V3hW4shNAfdbyHF70E3IgoCDbHCBmGCAWa2jMoEtUVDqHxQU2J7saCKsiWZ_TFT9I/s1600/woden+board+RSS1_netoops.png" class="beintouch" /></a></td></tr></tbody></table>
<center><div>Get Latest Tips via e-mail</div>
<form target="popupwindow" style="margin: 0pt;" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blog-toolz', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" method="post" class="emailform" action="http://feedburner.google.com/fb/a/mailverify">
<input type="hidden" value="blog-toolz" name="uri" />
<input type="hidden" value="en_US" name="loc" />
<input type="text" value="Enter your email..." onfocus="if (this.value == "Enter your email...") {this.value = ""}" onblur="if (this.value == "") {this.value = "Enter your email...";}" name="email" class="emailtext" />
<input type="submit" value="Subscribe" title="" class="ebutton" alt="" />
</form></center>
Note: Change the above red text as per your requirement.
Steps to Add This Follow Me Buttons To Blogger
- Login to your Dashboard.
- Go to Layout.
- Add a Gadget >>Html/javascript.
- Paste the below code there.
<style type="text/css">
img.beintouch:hover {
background: none repeat scroll 0 0 #D6D6D6;
border-radius: 16px 16px 16px 16px;
box-shadow: 0 0 10px #565656;
}
.emailtext {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsqFgMGaYh5p0wQnYOjj4748NKRToVdQqJoGu-S9m18Lybqi7CA0zF2FJ6MV-mmrSnx7BJ5WVUF6jsYsPTWZyR8YTCLgJagL95uOtKT5tnjBoyFA9eJU1G01LV86TN1v5rZ2VLZAcfaxI/s1600/mailbox.png") no-repeat scroll 4px center transparent;
border: 1px solid #D3D3D3;
border-radius: 4px 4px 4px 4px;
box-shadow: 1px 1px 2px #CCCCCC inset;
color: #444444;
font-weight: bold;
margin-left: 2px;
padding: 7px 15px 7px 35px;
text-decoration: none;
width: 176px;
}
.ebutton {
background: -moz-linear-gradient(center top , #FBFBFB 0%, #F4F4F4 100%) repeat scroll 0 0 #ABAB12;
border: 1px solid #D3D3D3;
border-radius: 4px 4px 4px 4px;
color: #444444;
cursor: pointer;
font-weight: bold;
margin-left: -18px;
margin-top: 5px;
padding: 6px 15px;
text-decoration: none;
}
</style>
<table align="center" width="317px" cellspacing="0px" cellpadding="1px"><tbody><tr><td><a target="_blank" rel="nofollow" href="http://www.facebook.com/BloggingTrickzAndToolz"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn6qzN8qrRTe8xuGUT2vyElpBQiYAgi5vvkp5hRmev9-_fw9fr-6D_XTxHQfAK9sDIZhVrIKDrllXtIiwzRQkSDlxuRZDF8ofxBOwCzJlVPGfAR1DsAQoPVEsPcb4rXpWizh9GVxtupzY/s1600/woden+board+facebook_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="http://twitter.com/AdityaThakker13/" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx062RHZ4XOD3G4W0HaBifThrj_CFMLgx4CldPjibu3Zy4_hb8V4xQ77E5w5ALl-nHk7Qef90CYtf33odXAmCq51Kcm7NgQ8cw1OH4jIIOaLZTLby5HzEhIBfHZ4ZJ58TdED8TN5pAUdg/s1600/woden+board+twitter_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="http://feeds.feedburner.com/blog-toolz" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4QU7-GEkaBO_uXJLfU1ZElwc2KZ2MhN0xndOZfYLCEcWKg8eJigpG6kPa8rtwIJZ-Z1WOzXITG1V3hW4shNAfdbyHF70E3IgoCDbHCBmGCAWa2jMoEtUVDqHxQU2J7saCKsiWZ_TFT9I/s1600/woden+board+RSS1_netoops.png" class="beintouch" /></a></td></tr></tbody></table>
<center><div>Get Latest Tips via e-mail</div>
<form target="popupwindow" style="margin: 0pt;" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blog-toolz', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" method="post" class="emailform" action="http://feedburner.google.com/fb/a/mailverify">
<input type="hidden" value="blog-toolz" name="uri" />
<input type="hidden" value="en_US" name="loc" />
<input type="text" value="Enter your email..." onfocus="if (this.value == "Enter your email...") {this.value = ""}" onblur="if (this.value == "") {this.value = "Enter your email...";}" name="email" class="emailtext" />
<input type="submit" value="Subscribe" title="" class="ebutton" alt="" />
</form></center>
Note: Change the above red text as per your requirement.
- Now, click on Save.
It's done.
Categories:
Blogger Widgets
,
Social Media Gadgets
2 comments:
nice work brother hope you will help me in my blog
www.beatindia.co.cc
Whats the problem pal???
Post a Comment