Thursday, 23 October 2014

Wooden Subscription Widget for blogger

Wooden Subscription Widget for blogger

Wooden Subscription Widget for blogger

In the Name of Allah who is the Most Kind and Merciful, In this Post I will teach you how to add Wooden Subscription Gadget to your blogger as shown in picture. A new Email Subscription box is also added with this widget. Enjoy and Don't Forget to Share and Comment !


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/AVvXsEj_mzRsnzUFheVCuDJfn4n7-DTTqyC4FPj1T_zbXXy94-YZaTcc7BOjI_qnlPk5rmKKAgq9I8-P1NxDWQIgX3E7PbQ8_RAluAhydx-fuTanT8H8HnCdBFQ9u21FnjB2Wg9rSPm8EX3bxog/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/l0nelyprincex64"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm2iVhAk5Ro6Qw-5Vrkj8axHOlzpVNr6z_K9nHqEsj6X4A7NExbTmStz8nsx37x1MABDULNFNMA1foU-_5xKRTiP_mFgwBJLgrJrBr0fi35QrWxxpv1ANvyX2GwMzH6kf58w02Vr_b6bM/s1600/woden+board+facebook_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="http://twitter.com//" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZH4JGlwPK6RQBKvNygxP5N_XjVpIcAjvwrQqav9hA-E4FPCTtWfFhkfJ9AxwWsCQlNOEFKCNF5oQo75mDaRWVLZBAI0gf8rZ99_TG-6-yUzegToPfopVsQk7uGHWzYMzzMQWD0dwBFko/s1600/woden+board+twitter_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="http://feeds.feedburner.com/" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh76V14MoEU2NMhQ4zQaj2Jf7oDbAbcBJ1Btw4IxwtdpA9-Ng9LjuOfzKP0bDeMje2e4DZOgyAYcYWL8XY46b6ALZWVG98PFe4QdglOSygNWGBKpxJZHYuzuYCv2Z2D1ojdmFRR7ChJFHY/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=
    ITGooglepk', '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. 

    No comments:

    Post a Comment