Header Ads

  • Breaking News

    How to Add Stylish Subscription Widget With Hover Effect




    The main aim of the subscription widget is to make the visitors into readers or followers, so as to increase the traffic of your blog. Today lets learn how to implement a stylish, eye-catching subscription widget. Other than an email subscription form, the widget consist of social icons with hover effect. The widget is quiet catchy and is sure that the widget will force your visitors to subscribe to your updates. Its proven that the most effective position for your subscription widget is top of your sidebar, as it is easily visible to visitors.




    Take a look at live prewiev



    Submit your Email Address to Get Free Blogger Tips Directly to your Inbox
     

    Icon
    Icon
    Icon

    Add Stylish Subscription Widget With Hover Effect To Your Blog

    1)  In the Blogger dashboard click the drop down menu for your blog > Choose 'Layout' > Click 'Add A Gadget' > Choose 'Html/Javascript' > Paste In The Following Code > Click Save:

    <a href="http://feeds.feedburner.com/CINHv" imageanchor="1" rel="nofollow" style="margin-left: .5em; margin-right: 1em; float: center;" target="blank"><img border="0" height="40" src="http://1.bp.blogspot.com/-0XcZX4EV36k/UKZo21Ff0rI/AAAAAAAAAqQ/3RG3EOCjM3M/s1600/Untitled-5.png" width="290" /></a>
    <style type="text/css">.tweaks-email{
    background:Fff no-repeat 0px 12px ;
    width:270px;
    float:center;
    font-size:1.4em;
    font-weight:bold;
    margin:2px 20px 0px 35px;
    color:#686B6C;
    }
    .tweaks-emailsubmit{
    background:#0084CE;
    cursor:pointer;
    color:#fff;
    border:none;
    padding:3px;
    margin:0 0 0px 0;
    text-shadow:0 -1px 1px rgbaundefined0,0,0,0.25);
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    border-radius:2px;
    font:12px sans-serif;
    }
    .tweaks-emailsubmit:hover{
    background:#E98313;
    }
    .textarea{
    padding:2px;
    margin:0px 2px 0px 2px;
    background:#f9f9f9;
    border:1px solid #ccc;
    resize:none;
    box-shadow:inset 1px 1px 1px rgbaundefined0,0,0,0.1);
    -moz-box-shadow:inset 1px 1px 1px rgbaundefined0,0,0,0.1);
    -webkit-box-shadow:inset 1px 1px 1px rgbaundefined0,0,0,0.1); font-size:13px;
    width:170px;
    color:#666;}
    </style>
    <style class="text/css" type="text/css">.center
    {
    text-align:center;
    font-weight:bold;
    margin:10px;
    }
    </style>
    </p>

    <div class="center" style="text-align: left;">Submit your Email Address to Get Free Blogger Tips Directly to your Inbox</div>
    <div class="tweaks-email">
    <form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=blogspot/CINHv', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input class="textarea" gtbfieldid="3" name="email" onblur="if undefinedthis.value == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}" onfocus="if undefinedthis.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}" type="text" value="Enter email address here..." /> <input name="uri" type="hidden" value="blogspot/CINHv" /><input name="loc" type="hidden" value="en_US" /> <input class="tweaks-emailsubmit" type="submit" value="Submit" />&nbsp;</form>
    </div>
    <style class="text/css" type="text/css">table
    {
    border-bottom: 0px solid #E6E6E6;
    float: center;
    width: 300px;
    margin:10px 0 0 15px;
    }
    .subicons
    {
    border-right: 1px solid #E6E6E6;
    }
    #social a:hover {background-color: transparent;opacity:0.7;} #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }
    </style>
    <div class="table">
    <table>
        <tbody>
            <tr>
                <td>
                <div class="subicons">
                <div id="social"><a href="http://feeds.feedburner.com/blogspot/CINHv" rel="nofollow" target="_blank" title="Grab Our Rss Feed"><img alt="Icon" src="http://4.bp.blogspot.com/-m3xgJspNUEM/UKZuywSh7VI/AAAAAAAAAq4/7lIchfowqnQ/s1600/RSS-48x48.png" style="margin-right: 1px; border-width: 0px; border-style: solid;" /></a></div>
                </div>
                </td>
                <td>
                <div class="subicons">
                <div id="social"><a href="https://www.facebook.com/blogosphere" rel="nofollow" target="_blank" title="Like Our Facebook Page"><img alt="Icon" src="http://2.bp.blogspot.com/-fGM0ekp9njU/UKZuxJihU3I/AAAAAAAAAqs/F9JOMQ8Tji0/s1600/FACEBOOK-48x48.png" style="margin-right: 1px; border-width: 0px; border-style: solid;" /></a></div>
                </div>
                </td>
                <td>
                <div class="subicons">
                <div id="social"><a href="https://twitter.com/BlogerTemplates" rel="nofollow" target="_blank" title="Follow Our Updates On Twitter"><img alt="Icon" src="http://3.bp.blogspot.com/-V9vyKkB7XG8/UKZuzuEU9WI/AAAAAAAAArA/DtoPgX98zYM/s1600/TWITTER-48x48.png" style="margin-right: 1px; border-width: 0px; border-style: solid;" /></a></div>
                </div>
                </td>
                <td>
                <div id="social"><a href="https://plus.google.com/u/0/114093757109573967655" rel="nofollow" target="_blank" title="Follow Us On Google+"><img src="http://3.bp.blogspot.com/-iK2W1nj0LJ8/UKZux9P0w3I/AAAAAAAAAqw/fZdYU_WnZak/s1600/GOOGLE-PLUS-48x48.png" style="margin-right:1px;" /></a></div>
                </td>
            </tr>
        </tbody>
    </table>
     2) Replace the red sections with your social profiles and feed URLs. 
    That's it you have a very cool subscribe section on your blog.

    No comments

    Post Top Ad

    Post Bottom Ad