Popular Posts

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 wooden theme.




 

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/AVvXsEgUCt4P5Z15Lvq1akQzfnaT4F8Lyqb5HoXx18H3PpbHC4ocxcEIFocQYGsaD_U5i5jzKm_ZFC4KG7K_4ZNfUGp75EdJBOC-ov-GshFudlFTb8Bl0kqQahBFPsJllo0viB2eOrlKeMSQosY/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/AVvXsEjba3-L8fSJKnlzvyf24LpXqH8BRH2_BxOv230BqnwL3PRB3zS9s4iKD2MYfQUVSChcFIsP_Mu6AfOI6-vd-0b7OaLpnHXvjiAd8kPuggl1YmJ8Of6olIZOWubsWjR3rVrTVRWwa4UxuLk/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/AVvXsEja4Ibqa-DnPYOyYGPKAMQYfXCCr8J-c4K21rdaWaOGW5hM7n-yOp2LzgSY9FJ6QCm7clf6Fs0IJhffbTTYqcJCwXqb93L0lEdp0zU0X7AzMcvX7hHZpOM4QIq-Ro_Y9ORd2rSgJ232T5E/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEirXbko2EdmtS2-g_J5GWnSCfQJHB9kizMZp5b_zjnfuWkxAzyu4ZLZgLOWdZyicfjOmGNAsVqdl-Iq99vojaPBZACv9U0pqG4OZlsiMFzgbNcOQdfq5Xh5OPPgUWUneOlwpPlcFWuvE/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=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, 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="http://www.facebook.com/pages/NetOops-Blog/159796530791611"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjba3-L8fSJKnlzvyf24LpXqH8BRH2_BxOv230BqnwL3PRB3zS9s4iKD2MYfQUVSChcFIsP_Mu6AfOI6-vd-0b7OaLpnHXvjiAd8kPuggl1YmJ8Of6olIZOWubsWjR3rVrTVRWwa4UxuLk/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/AVvXsEja4Ibqa-DnPYOyYGPKAMQYfXCCr8J-c4K21rdaWaOGW5hM7n-yOp2LzgSY9FJ6QCm7clf6Fs0IJhffbTTYqcJCwXqb93L0lEdp0zU0X7AzMcvX7hHZpOM4QIq-Ro_Y9ORd2rSgJ232T5E/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEirXbko2EdmtS2-g_J5GWnSCfQJHB9kizMZp5b_zjnfuWkxAzyu4ZLZgLOWdZyicfjOmGNAsVqdl-Iq99vojaPBZACv9U0pqG4OZlsiMFzgbNcOQdfq5Xh5OPPgUWUneOlwpPlcFWuvE/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=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, TWTTER, FEED URL, FEED ID respectively.

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

    Digg Google Bookmarks reddit Mixx StumbleUpon Technorati Yahoo! Buzz DesignFloat Delicious BlinkList Furl

    { 0 comments... read them below or add one }

    Post a Comment