Thursday, 17 May 2012

Stylish Social Subscription Box For Blogger - Version 2.0

Important: All scripts hosted on widcraft.googlecode.com don't work anymore because Google has blocked that SVN repository.

This attractive widget will surely help you to gain some subscribers and also navigate them on your social accounts like twitter and facebook.....version 2.0 
  • Go To Blogger > Layout > Add New > HTML/JavaScript
<style type='text/css'>
.mbt a{
    color: #6e6e6e;
    font: bold 12px Helvetica, Arial, sans-serif;
    text-decoration: none;
    padding: 7px 12px;
    position: relative;
    display: inline-block;
    text-shadow: 0 1px 0 #fff;
    -webkit-transition: border-color .218s;
    -moz-transition: border .218s;
    -o-transition: border-color .218s;
    transition: border-color .218s;
    background: #f3f3f3;
    background: -webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
    background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
    border: solid 1px #dcdcdc;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
}
.mbt a:hover {
    color: #333;
    border-color: #999;
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2)
    -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.mbt a:active {
    color: #000;
    border-color: #444;
}
.mbtbar{ width:280px; float: left; margin-left:3px; margin-top:5px; padding:0;}
.mbtbar .emailsub{border-bottom: 0px solid #e6e6e6; padding: 0px 0 15px 0; float: left; width: 100%; font-family: Helvetica, Arial;}
.mbtbar .emailsub .emailupdatesform{width: 100%; float: right; padding:0px;}
.mbtbar .emailsub .emailupdatesform input.emailupdatesinput{background: #F3F3F3;  float: left; border: 1px solid #dcdcdc; padding: 0px 8px; color: #989898; font-size: 14px;  width: 130px; height:30px;   border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;}
.mbtbar .emailsub .emailupdatesform input.emailupdatesinput:hover{
border-color: #999;
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2)
    -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.mbtbar .emailsub .emailupdatesform input.joinemailupdates:hover{ border-color: #666;
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2)
    -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); cursor:pointer;
}
.mbtbar .emailsub .emailupdatesform input.joinemailupdates{
border: solid 1px #dcdcdc;
    background: #F3F3F3;
   font-family:Helvetica, Arial;
text-transform: none; color: #989898; height: 25px; padding: 0 10px; margin: 0 0 0 5px; font-weight:bold; font-size:14px; height:30px;
  border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
}
.mbtbar .emailsub .emailupdatesform input.emailupdatesinput{background: #F3F3F3;  float: left; border: 1px solid #dcdcdc; padding: 0px 8px; color: #989898; font-size: 14px;  width: 145px; height:28px;   border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;}
.mbtbar .emailsub .emailupdatesform input.joinemailupdates{
border: solid 1px #dcdcdc;
    background: #F3F3F3;
   font-family:Helvetica, Arial;
text-transform: none; color: #989898; height: 25px; padding: 0 0px; margin: 0 0 0 5px; font-weight:bold; font-size:14px; height:30px;
  border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
}
</style>
<!--[if IE 8]> <style>
.mbtbar .emailsub .emailupdatesform input.emailupdatesinput{background: #F3F3F3;  float: left; border: 1px solid #dcdcdc; padding: 5px 10px; color: #989898; font-size: 12px;  width: 130px; height:18px;   border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;}
.mbtbar .emailsub .emailupdatesform input.joinemailupdates{
border: solid 1px #dcdcdc;
    background: #F3F3F3;
   font-family:Helvetica, Arial;
text-transform: none; color: #989898; height: 25px; padding: 0 5px; margin: 0 0 0 5px; font-weight:bold; font-size:14px; height:30px;
  border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
}

</style> <![endif]-->

<div class="mbt" style="padding: 0pt 0pt 0pt 5px;">
<table><tbody><tr>
<td>
<a   href="ADD-FEEDBURNER-LINK-HERE" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc1J3Ddj3YD36i5c6fiDYM4rpp8Vznhq7RSLAifqDEbd1rltxzA-3cQitwb2Rz1ky9Wx_18GoqzjoAndBobqtHFdPp_60BKJXyN93oy4DyeUGLeTs4BRla9gTY2Pq-7MCCq9_aHDlJ6s0/s1600/rss.png" border="0"></a>
</td>
<td>
<a style="margin-left:5px;"href="ADD-TWITTER-FAN-PAGE-LINK-HERE" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4eeRV9ieUIyS_U7VIoE__6D3kfY8TtfeQJ-mIk22yauH9xqLS36SDsyK4t9fcXlv6KnpHIKAQxBp3mIqbhvpMk0xpErtevXUJX5zTDjT_IrwBosn8fkQiVPqnGzocF61wOPgOMSpCMrY/s1600/twitter.png" border="0"></a>
</td>
<td>
<a style="margin-left:5px;"href="ADD-FACEBOOK-FAN-PAGE-LINK-HERE" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh28tCpL1qSCHf8GThBgW006E4uMnoGjaR7IaLUUkCHVI-OG446abFe6FsZC0Syth2zeBc3na8xAia4cZkasA1aVL-0fPm7XB0BWyRiti9cWqpTmZBb0pcByK-QeZx4NBlwG9Ay7wqJUP0/s1600/facebook.png" border="0"></a>
</td>
</tr></tbody></table>
<table><tbody><tr>
<td>
<a   href="ADD-YOUR-GOOGLE-PLUS-LINK-HERE" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3g8zMTj2umAFTYuXFULnjssP_0WJTTca6IdsL9jGFtkOeQzXN7yZr4-65yOsW_yZP6LH2ca13USsIaI9zMupEYxAskZvrhtJxCC_1IzX74_-_cpBHV4FayII_sKi9NrdQPLDJAflOiU0/s1600/+1.png" border="0"></a>
</td>
<td>
<a style="margin-left:5px;"href="ADD-PICASA-LINK-HERE" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpcgGRnIYRH6CxAiEgZPhwtsUvEGhUEhq1b4t-H5_i3tr9dDL1e9Fv-OqIyTyt0iV89MQmmpQwcgddo2pXaFBbeVSW6GHq9LFUdALHfYCJfvahZ3zm-BUbx7svnTT714cCNbAQKSafLUk/s1600/picasa.png" border="0"></a>
</td>
<td>
<a style="margin-left:5px;"href="ADD-YOUTUBE-LINK-HERE" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcgwgBJ28poG-aIyecKDEWPBmdv7mB5tlho9RZAYw2MFkw6J7tcO9W62FeW-154vQ64wctMmCdzQG6p7MnujpJPnL6qnC8S5e-e_d1VSWwx51dIEXrXYP854j8MBv0wiASTEscL2scfXw/s1600/youtube.png" border="0"></a>
</td>
</tr></tbody></table>
<div class="mbtbar">
<div class="emailsub">
<div class="emailupdatesform">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=WWFansNation', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="Submit email..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Submit email...&#39;;}" onfocus="if (this.value == &#39;Submit email...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="WWFansNation" name="uri" type="hidden" /><input value="Subscribe" class="joinemailupdates" type="submit" /></form></div></div></div></div>
</div>
  • Change RSS/Facebook/Twitter/Google+/Picasa/Youtube links with your account links and Change WWEFansNation with your RSS feed code. For Example -   If your feed code is http://feeds.feedburner.com/WidgetCraft then replace it   with WidgetCraft
Important: Check our new website TricksPanda.com for WordPress tutorials, plugins and more.
 
Powered by Blogger.