Awesome NetOopsblog Subscription Widget for blogger

NetOopsblog Subscription box Blogger

This post is about how to add a Subscription Box like our NetOops blog. Subscription box contains Facebook, Twitter, RSS Feed, e-mail subscription. This widget is based on a wooden theme. Facebook, Twitter, RSS Feed links are shown as Natural Wooden Sticky Boards. In this tutorial, i am adding a new e-mail subscription box with the wooden theme.

Subscription Button must look cool to attract the user’s eyes, so styling it good for your blog to attract more users.

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://2.bp.blogspot.com/-j-CXUeGodJI/T0H9qpD6cjI/AAAAAAAAAI8/uuryDfQYWVI/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=”http://www.facebook.com/pages/NetOops-Blog/159796530791611“><img src=”https://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/netoopsblog/” rel=”nofollow”><img src=”https://3.bp.blogspot.com/-xHxTM5SAVtI/Tz06umVlBnI/AAAAAAAAAHg/3X1VY6Qx3v0/s1600/woden+board+twitter_netoops.png” class=”beintouch” /></a></td><td><a target=”_blank” href=”http://feeds.feedburner.com/NetOopsBloggerTricks” rel=”nofollow”><img src=”https://2.bp.blogspot.com/-G76Bnw5v0yc/Tz06tYscrpI/AAAAAAAAAHQ/pSk4w-sEHYA/s1600/woden+board+RSS1_netoops.png” class=”beintouch” /></a><a href=”http://www.netoopsblog.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=netoopsbloggertricks‘, ‘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, TWITTER, 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*/ .emailtext { background: url(“https://2.bp.blogspot.com/-j-CXUeGodJI/T0H9qpD6cjI/AAAAAAAAAI8/uuryDfQYWVI/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/pages/NetOops-Blog/159796530791611“><img src=”https://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/netoopsblog/” rel=”nofollow”><img src=”https://3.bp.blogspot.com/-xHxTM5SAVtI/Tz06umVlBnI/AAAAAAAAAHg/3X1VY6Qx3v0/s1600/woden+board+twitter_netoops.png” class=”beintouch” /></a></td><td><a target=”_blank” href=”http://feeds.feedburner.com/NetOopsBloggerTricks” rel=”nofollow”><img src=”https://2.bp.blogspot.com/-G76Bnw5v0yc/Tz06tYscrpI/AAAAAAAAAHQ/pSk4w-sEHYA/s1600/woden+board+RSS1_netoops.png” class=”beintouch” /></a><a href=”http://www.netoopsblog.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=netoopsbloggertricks‘, ‘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, TWITTER, FEED URL, FEED ID respectively.

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

30 Responses to “Awesome NetOopsblog Subscription Widget for blogger

Leave a Reply

Your email address will not be published. Required fields are marked *