Header Ads

  • Breaking News

    Add Cool Subscription Box For Blogger



    Email subscribers is becoming a major concern for every blogger over the internet.Using the default subscription box by feedburner will not gain as much subscribers as a customized subscription box will gain.Take a look at the image attached with this post.The sharing buttons have a little bit nudging effect.This subscription widget contains CSS sprites.




    Follow these simple steps to add this widget in your blog,
    1).Go to Blogger Dashboard>Design>Page Elements.
    2).Select "Add a Gadget".
    3).Choose "Html/JavaScript" and paste the following code inside it

    <style>
    .sBlack {
    background: none repeat scroll 0 0 #282828;
    height: 95px;
    padding-bottom: 10px;
    }
    .sBlack .subscribeTop .mcLeft {
    background: url("http://3.bp.blogspot.com/-DxVgFqUxZbU/Toi-VHL10MI/AAAAAAAAAoM/Vg5wJ3x3S9k/s1600/CSS_Sprite-technetsavvy.png") no-repeat scroll 0 -173px transparent;
    display: block;
    float: left;
    height: 83px;
    margin: 8px;
    width: 101px;
    }
    .sBlack .subscribeTop .mcRight {
    display: block;
    float: left;
    margin: 0;
    width: 165px;
    }
    .sBlack .subscribeTop .mcRight h4 {
    background: url("http://3.bp.blogspot.com/-DxVgFqUxZbU/Toi-VHL10MI/AAAAAAAAAoM/Vg5wJ3x3S9k/s1600/CSS_Sprite-technetsavvy.png") no-repeat scroll 0 -305px transparent;
    display: block;
    height: 15px;
    margin: 10px 0 0 -2px;
    text-indent: -9999px;
    width: 164px;
    z-index: -1;
    }
    .sBlack .subscribeTop .mcRight div.getposts {
    color: #767676;
    font-size: 11px;
    line-height: 13px;
    margin: 3px 0 -5px;
    text-shadow: none;
    }
    .sBlack #mc_embed_signup fieldset {
    border: medium none;
    margin: 0;
    padding: 0;
    }
    .sBlack .subscribeTop .mcRight form.getfrom {
    margin-top: -5px;
    padding: 0;
    }
    .socialsharebuttons {
    background: none repeat scroll 0 0 #F2F2F2;
    border-bottom: 1px solid #E6E6E6;
    border-top: 1px solid #E6E6E6;
    display: block;
    margin: 10px auto 10px 0;
    overflow: hidden;
    padding-top: 6px;
    }
    .social { float: center; }
    .social li { float: left; margin: 0 0 0 5px; }
    .social li a { background: url(http://3.bp.blogspot.com/-DxVgFqUxZbU/Toi-VHL10MI/AAAAAAAAAoM/Vg5wJ3x3S9k/s1600/CSS_Sprite-technetsavvy.png) no-repeat; display: block; height: 35px; text-indent: -999em; width: 32px; }
    .social li a.rss { background-position: 0 -263px; }
    .social li a.google+ { background-position: 0 0; }
    .social li a.facebook { background-position: 0 -99px; }
    .social li a.twitter { background-position: 0 -363px; }
    .social li a.technorathi { background-position: 0 -326px; }
    .social li a.google { background-position:0 -136px; }
    .social li a.yahoo { background-position: 0 -400px; }
    .social li a.subscribe { background-position: 0 -300px; }
    .social li a.mailbox { background-position: 0 -173px; }
    .social li a.subscribe { background-position: 0 -300px; }
    .social li a.mailbox { background-position: 0 -173px; }
    .social li a:hover { position: relative; top: -2px; }
    </style>
    <div style="margin-left:0px; margin-top:-5px;" class="sbBlock sBlack">
    <div id="mc_embed_signup" class="subscribeTop clearfix">
    <div class="mcLeft"></div>
    <div class="mcRight">
    <h4>Subscribe now</h4>
    <div style="margin-bottom:2px;" class="getposts"><strong>Subscribe By Email To Receive Free Updates</strong></div>
    <div style="clear:both;"></div><form target="popupwindow" style="border:none;text-align:left;" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=ekWMe', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" method="post" class="getform" action="http://feedburner.google.com/fb/a/mailverify"><input type="text" style="width:128px; height:16px;" name="email" onblur="if (this.value == "") {this.value = "Enter your email";}" onfocus="if (this.value == "Enter your email") {this.value = ""}" value="Enter your email" /><span class="float:left;"><input type="hidden" value="ekWMe" name="uri" /><input type="hidden" value="en_US" name="loc" /><input type="submit" style="padding-top:3px; padding-left:1px; margin-bottom:-2px; margin-left:2px; padding-right:1px; border: 1px solid #333333;cursor: pointer; background-color: #828282;text-decoration:bold; color: #000; padding-bottom:4px; height:25px;" value="Go" /></span></form>
    </div>
    </div>
    </div>
    <center>
    <div style="background-color: rgb(40, 40, 40); margin-top: -5px; width: 298px; height:75px">
    <table border="0" style="border-top:1px #888 solid;"><tbody><tr></tr><tr><td>
     
    <widget class="social">
    <div id="footer-list-none">
    <li><a class="rss" href="http://feeds.feedburner.com/ekWMe" rel="nofollow" title="Subscribe Via RSS">RSS</a></li>
    <li><a href="https://plus.google.com/114093757109573967655?rel=author" class="googleplus" title="Add Me On Google+">Google+</a></li>
    <li><a class="facebook" href="http://www.facebook.com/pages/blogosphere" rel="nofollow" title="Find Us On Facebook">Facebook</a></li>
    <li><a class="twitter" href="http://twitter.com/BlogerTemplates" rel="nofollow" title="Follow Us On Twitter">Twitter</a></li>
    <li><a class="technorathi" href="http://technorati.com/faves?sub=addfavbtn&add=http://mix--er.blogspot.com" rel="nofollow" title="Add To Technorati">Technorathi</a></li>
    <li><a class="google" href="http://fusion.google.com/add?source=atgs&feedurl=http%3A//feeds.feedburner.com/ekWMe" rel="nofollow" title="Add To Google">Google</a></li>
    <li><a class="yahoo" href="http://add.my.yahoo.com/rss?url=http://feeds.feedburner.com/ekWMe" rel="nofollow" title="Add To Yahoo!">Yahoo</a></li>
     
     
    <p style=" line-height:0px; font-size:10px; font-weight:bold; text-align:right;"><a style="color:#D3D3D3;" href="http://mix--er.blogspot.com/">Get This Widget</a></p>
    </div>
    </widget>
     
     
    </td></tr></tbody></table></div></center>


    Customizations:
    Replace All the red bolded lines with the required services.If you want to remove any one of the icon you don't want to use just remove from the <li> and end with this tag </li>.





    No comments

    Post Top Ad

    Post Bottom Ad