Pages

Wednesday, April 11, 2012

Cute Subscription Box With Social Bookmaking Icons For Blogger

Subscription and Sharing is the best way to increase traffic to your site and also has also turns your visitors into valuable readers by subscribing to your posts.An attractive Subscribe box along with social bookmarking button will attract more visitors.Today i am going to share another cool subscription box with facebook,twitter and feed button.More Subscription boxes  like this will be added to blogger widget series.Follow the steps to add beautiful Subscribe box for your blogger side post with hover effects on Social bookmarking icons.



To Add this Subscribe Box follow these steps,

1, Go To Blogger - Design
2, In Page Elements choose Add a gadget
3, Choose HTML/JAVASCRIPT option

And add the following code,



<div class='widget-content'>
<table align="center" width="317px" cellspacing="0px" cellpadding="1px"><tbody><tr><td><a target="_blank" rel="nofollow" href="http://www.facebook.com/forblog"><img src="http://2.bp.blogspot.com/-qMRqkcoAT0s/Tz06uOJ0WII/AAAAAAAAAHY/
gLqbjiBuBfc/s1600/
woden+board+facebook_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="http://twitter.com/freeclassified6/" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX8ffacJShKv-UMQf9QdWY4LCD-339X1nJrfesRSO7pzJ4vhJqVrA3_RsBe-lpdC7L-0SA7KEq7F0ghhAv9yF05krwJK7rTUEWlaFUpfFlh76vNfVYP6u1eTrd1oFlcCj6AcwBy85zN3I/s1600/
woden+board+twitter_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="http://feeds.feedburner.com/FreeClassifiedsAndSEOSites" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-9mDfKvCnKxvJD11kdJjVOUsxHI7n7LN-dCMAatxoHJZyLlmhn5rLc4BLuHIhdNiRbVw_Y75aek29ma4ZgQ2f8tp1N9nN4hlqTdOx84mzYwKvAN9Y_a92AIlzSDRF3kVjJp_bdth7s4U/s1600/woden+board+RSS1_netoops.png" class="beintouch" /></a></td></tr></tbody></table>
<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/AVvXsEiAEMoA0GnaGRD7zNq-Y1Z0RU0kqvrEN3O6FBKAlQ6FbLPasXbUJcoSD7vZT-EBHzxMWSQ_mzCiRKY4VLgKbHCg1vPEk2GXpM2zb7Wg__UNiWAMdz8CZzspdIJ1SMHZjt8T7EwJkroDgpY/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;
    padding: 7px 15px 7px 35px;
    text-decoration: none;
width:176px;
margin-left:2px;
}
.ebutton {
   background: -moz-linear-gradient(center top , #FBFBFB 0%, #F4F4F4 100%) repeat scroll 0pt 0pt transparent;
background: -webkit-linear-gradient(top , #FBFBFB 0%, #F4F4F4 100%);
background: -o-linear-gradient(top , #FBFBFB 0%, #F4F4F4 100%);
background-color:#abab12;
     border-radius: 4px 4px 4px 4px;
     border: 1px solid #D3D3D3;
     color: #444444;
     cursor: pointer;
     font-weight: bold;
     margin-left: -18px;
     margin-top: 5px;
     padding: 6px 15px;
     text-decoration: none;
}
</style>
<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=FreeclassifiedsAndSeoSites', '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="FreeclassifiedsAndSeoSites" name="uri" />
<input type="hidden" value="en_US" name="loc" />
<input type="text" value="Enter your email..." onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" name="email" class="emailtext" />
<input type="submit" value="Subscribe" title="" class="ebutton" alt="" />
</form>
</div>


Save your changes.

Before that make some changes to the code,


*Replace freeclassified6 with your own twitter username.

*Replace forblog with your facebook username.

*Replace FreeclassifiedsAndSeoSites with your feedburner title.

Now you check your post.You can see the cute subscription box along with facebook like and google plus button.

0 comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...