Wednesday, October 24, 2012

Subscription Widget for blogger

  3:31 PM            No comments

Subscription box with Fully Wooden Theme

  • Go to Blogger Dashboard
  • Go to Layout 
  • Select Add a Gadget
  • You can type title any
  • And Copy the following code in the content.

Demo of Fully Wooden Theme

 

Important: If you don't want Mouse over effect of Images in the Subscription box, please delete the RED highlighted code,. If you want then leave it there. 

<style type="text/css">
 /* Delete form Here*/ 
img.beintouch:hover {
    background: none repeat scroll 0 0 #D6D6D6;
    border-radius: 16px 16px 16px 16px;
    box-shadow: 0 0 10px #565656;
}
/* Delete to Here*/
.emailtext {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYOH8vzYu5WzCTq_eDR_FY2P96A-RjS0gHX4yWiHV6Js40weA_ZYiKR7GE_Fokx2zV-CgyvhXyvoJzXBfyTptIcjcafslmnlGPUXtNRroi1l541Cd4J_nmjlga8MdGlb6sOvuaOr8It_0/s1600/mailbox.png") no-repeat scroll 4px center transparent;
    border: 1px solid #7E4E27;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 1px 1px 4px #7E4E27 inset;
    color: #444444;
    font-weight: bold;
    margin-left: 2px;
    padding: 7px 15px 7px 35px;
    text-decoration: none;
    width: 176px;
}
.ebutton {
    background: -moz-linear-gradient(-45deg, #3C1F0E 0%, #D28A47 30%, #F9E183 30%, #D28A47 55%, #3C1F0E 100%) repeat scroll 0 0 transparent;
    border: 1px solid #D3D3D3;
    border-radius: 4px 4px 4px 4px;
    color: #FFFFFF;
    cursor: pointer;
    font-weight: bold;
    margin-left: -18px;
    margin-top: 5px;
    padding: 6px 15px;
    text-decoration: none;
    text-shadow: 1px 1px 0 #000000;
}
</style>
<table align="center" width="317px" cellspacing="0px" cellpadding="1px"><tbody><tr><td><a target="_blank" rel="nofollow" href="facebook fan page url"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCG-lVZmA1uWsf8MAZMIwD7rML3r3JGMFjQiFd3pcPrpHJfzWax7q8nS6tP8l2AlSLV9mL5P1zw9vzkHQjSHyRfvIxWMCh1AePtBYr-RwgUMUcVaIvoWR8wybzzRbr3lIRu4hZUHPUzH0/s1600/woden+board+facebook_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="twitter url" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRKSZUrKBoJ2XVq4nzMb8qYsocfCt2umvzy7hmezmyeBstcqrJBQLFqoRUYohCLkFA1hzCFHq6yGhIqXtlvK7rpo57t5d0dQUqpg-Z7p9R0mmAW3SpHOZhHqtAtzTklOMO3GO3Tyu2_yo/s1600/woden+board+twitter_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="feedburner link" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlTTdiD6qFZWSd8gGyAn2zGAv_yU_hV3IRS3MQcF35i29xWHQQiVPJEE7Aj_-r7r_5En4U5rPQcLfElW0q1700ER_lhemXHitBGtpU3ybRFWuAKnPvYSxKWuvSpLrpeRJVPFiurvWtZeo/s1600/woden+board+RSS1_netoops.png" class="beintouch" /></a><a href="http://netoopsblog.blogspot.com"></a></td></tr></tbody></table>
<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=feed burner id', '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="NetOopsBloggerTricks" 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>
Change the BLUE highlighted code with FACEBOOK PAGE URL, TWTTER, FEED URL, FEED ID respectively. 

Subscription box with Default Basic Wooden theme

  • Go to Layout 
  • Select Add a Gadget
 Important: If you don't want Mouse over effect of Images in the Subscription box, please delete the RED highlighted code,. If you want then leave it there.
<style type="text/css">
 /* Delete form Here*/ 

img.beintouch:hover {
    background: none repeat scroll 0 0 #D6D6D6;
    border-radius: 16px 16px 16px 16px;
    box-shadow: 0 0 10px #565656;
}
/* Delete to Here*/
</style>
<table align="center" width="317px" cellspacing="0px" cellpadding="1px"><tbody><tr><td><a target="_blank" rel="nofollow" href="facebook fanpage url"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCG-lVZmA1uWsf8MAZMIwD7rML3r3JGMFjQiFd3pcPrpHJfzWax7q8nS6tP8l2AlSLV9mL5P1zw9vzkHQjSHyRfvIxWMCh1AePtBYr-RwgUMUcVaIvoWR8wybzzRbr3lIRu4hZUHPUzH0/s1600/woden+board+facebook_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="twitter url" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRKSZUrKBoJ2XVq4nzMb8qYsocfCt2umvzy7hmezmyeBstcqrJBQLFqoRUYohCLkFA1hzCFHq6yGhIqXtlvK7rpo57t5d0dQUqpg-Z7p9R0mmAW3SpHOZhHqtAtzTklOMO3GO3Tyu2_yo/s1600/woden+board+twitter_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="feed burner url" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlTTdiD6qFZWSd8gGyAn2zGAv_yU_hV3IRS3MQcF35i29xWHQQiVPJEE7Aj_-r7r_5En4U5rPQcLfElW0q1700ER_lhemXHitBGtpU3ybRFWuAKnPvYSxKWuvSpLrpeRJVPFiurvWtZeo/s1600/woden+board+RSS1_netoops.png" class="beintouch" /></a><a href="http://netoopsblog.blogspot.com"></a></td></tr></tbody></table>
<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=feed burner id', '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="NetOopsBloggerTricks" 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>

Change the BLUE highlighted code with FACEBOOK PAGE URL, TWTTER, FEED URL, FEED ID respectively.

I think this widget helps you, Please share and like...

0 comments:

Post a Comment

Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.

Note:
1. To add HTML CODE in comments then please use our Instant HTML Encoder
2. You can always Test the tutorial on our HTML Editor
3. Please do not spam Spam comments will be deleted immediately upon our review.
4.Click Subscribe by Email to receive Replies

Subscribe to: Post Comments (Atom)