Awesome NetOopsblog Subscription Widget For 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 wooden theme.

Follow Widgets For Blogger

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.
  
  

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/AVvXsEgTJBVzyOq3mXH49JFkZad8PFM1SbHNRXfYueeSqt9ey6pIjzpWUkHDNO01EQLivkjVe2QbBiD1EbMmEwS5abJy5yT9kWTknBBodUeFFmb_f4K9_IUoP7pTl_nxzsRlAQ4QZyyyD89tN4M/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiadwX5Xq1iRgEM4a5ds-nyjb7gDxIaiQ-tMdFvKAOK8yVCp_4FHZcCsbTE51XysvaJZi1xbKKbHGVVDCEgsGGUMIjSTyTAmLHPdgMNzxoSDf_npeUzdm4LfRJAkErnWeHJPoS1dH_ipA0/s1600/woden+board+facebook_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="http://twitter.com/netoopsblog/" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiweRLldO2-ObGMJEqMcUzZZM5ZDwLNy_b1Ca_fgOv_zQzyZpjCrkHLpr7MtS8mc3WwGWEy0ou67IBxBROwxS-69JclYFAR_zbMxUBTmE6oypZYQ9gt3Ca9KHGiUPZ9OLdhNpI-gR6JQ9g/s1600/woden+board+twitter_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="http://newmastifun.blogspot.com/" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF-L36q-dJtLvbd47oGR_vRJvPh-pEhrz5nNRNcmq5ALtq-6N757lxoLbjHM8vswTVSedX_3RS2D5yuX5wGMF4nFW61I9zb3OlfXpUpinVn6vUxp1-XFj6oEB4UCmX3v8N6o2TtxsLWi8/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=http://newmastifun.blogspot.com/', '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="http://newmastifun.blogspot.com/" 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.