Amazing Subscription Widget Below Post For Blogger

HomeSubscription Box Amazing Subscription Widget Below Post For Blogger

Amazing Subscription Widget Below Post For Blogger

In Blogger

Saturday, 20 July 2013

kode adsense dalam posting

Adding subscription box below posts makes your readers get attracted to your articles and makes him/her to subscribe for more and more updates. I have already wrote an article in adding a good subscription widget in your blogger sidebar. It is a gadget. But this time, I want to make something more and came forward to add a subscription widget below your posts by default. Ok getting into the tutorial is quite simple. You have a CSS code and also HTML CODE. This time inorder to make the subscripiton box widget for blogger to appear below every posts by default, we have to add the code into your HTML TEMPLATE. So kindly follow the process without no mistakes. I always recommend you to have a backup to your template.

Live Demo Is Below Check It By Entering Your Email Id And Name And Click On Sign Up

Learn How to Make Passive Income via Blogging!

Login into blogger.com
Goto --> TEMPLATE --> EDIT HTML
Then search for " </head> " then copy the below code and paste above it.

<style>
/** http://www.bloggerbulk.com **/
div#singlesubscribe {padding:10px; border-radius:3px; margin:5px auto 0; background: #f7f7f7 url('http://cdn.allbloggingtips.com/wp-content/uploads/2012/08/email.png') no-repeat 98% center; box-shadow:0 0 30px #EEE inset;
height:84px; border: 1px solid rgba(221, 221, 221, 0.43);
}
    div#singlesubscribe .headline{ height: 28px; font-weight: bold;
font-family: 'Ubuntu Condensed'; color: #555; font-size: 26px;
margin: 8px 0 -20px 10px; }

    div#singlesubscribe .arrow{width:3px; height:60px; float:left; margin:0 0 0 6px;}

    div#singlesubscribe form input.txt{background:#FFF; border: 1px solid #DDD; border-radius: 5px; box-shadow: 0 0 5px #DDD inset; color: #333; float:left; margin: 25px 10px 0 0; padding: 5px 10px; width: 165px;}
        div#singlesubscribe form input.feedburner{width:250px;}

    div#singlesubscribe form input.btn{

background: #30a146; background: linear-gradient(top, #30a146 0%, #249334 100%); background: -moz-linear-gradient(top, #30a146 0%, #249334 100%);   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #30a146), color-stop(100%, #249334)); background: -webkit-linear-gradient(top, #30a146 0%, #249334 100%);   text-shadow: 1px 1px 0 rgba(0, 0, 0, .4); font-weight:bold;    font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif;

border: 0; border-radius: 5px; color: #FFF; float: left; font-weight: bold; margin: 25px 7px 0; padding: 5px 10px; width: 100px;
}

        div#singlesubscribe form input.btn:hover{
opacity: .8 }

/** http://www.bloggerbulk.com **/
</style>

Next search again for " <data:post.body/> " then copy the below code and paste after it.
Remember pasting the code below " <data:post.body/> "gives the widget by default. It may vary in some templates. Hope you can fix the exact place.

<div id="singlesubscribe">
<div class="headline">
Learn How to Make Passive Income via Blogging!</div>
<span class="arrow"></span>
<br />
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggerbulk', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" type="hidden" value="bloggerbulk" /><input name="loc" type="hidden" value="en_US" />
<input class="txt" name="name" onfocus="this.value=''" placeholder="Your Name" style="background: url(http://i.imgur.com/XrHTe.png) no-repeat scroll right center #FFFFFF; margin-right: 5px;" type="text" value="Your Name" />
<input class="txt" id="email" name="email" onfocus="this.value=''" placeholder="Your Email" style="background: url(http://i.imgur.com/2BCD0.png) no-repeat scroll right center #FFFFFF; margin-right: 5px;" type="text" value="Your Email" />
<input class="btn" id="submit" name="submit" type="submit" value="Sign Up" />
</form>
</div>

ALSO READ : HOW TO ENABLE FEED COUNT IN FEEDBURNER

Change The Highlighted Code And Click On Save Template Remember Always You Should Have A Backup To Your Template

Christian Songs

Amazing Subscription Widget Below Post For Blogger

Contact Form