Date: - Time:

For Questions and Quick contact
Call us - FB: Oscar Lee

1.19.2016

How to Customize your blog with this advanced 'Subscribe to Post' widget

 how-to-make-$25-on-payoneer
How to set-up this advanced Subscribe to Post widget

 oscarleeblog.com
Subscribing to Posts on a Blog, makes your subscribed readers get Notifications on their E-mail boxes whenever you publish any post,making them quickly come to Your blog and read it...Really Helps to Increase Blog Traffic.
There is a Default Subscribe to Posts widget on Blogger which so many of we Bloggers use,I still use it,But I found a better widget which is colorful and Attractive,Not to talk of Easy to set up also.


See the screenshot of the widget below.

How to Set it up



Firstly,You need your Feedburner Address ID.If you don't know yours,go tohttps://feedburner.google.com/
when signed in to your Gmail account,then click on "Edit Feed details"

Thats a screenshot of mine.You are to copy what's in that box,where the Arrow faces, and paste in your Notepad because you will need it in this next step.

1. Copy The Code Below but make sure you substitute my Feedburner ID to yours where ever you see "uri"
I colored them Yellow for easy reference

<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,300,600,700" rel="stylesheet" type="text/css" />
<div id="Subscription">
<div class="heading">
Subscribe to posts via E-mail</div>
Sign up with your email address to receive latest updates straight in your inbox.
<div class="emailsub">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify? uri=WelcomeToOscarLeesBlog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="email" placeholder="Your Email" type="text" /><input name="uri" type="hidden" value="WelcomeToOscarLeesBlog" /><input name="loc" type="hidden" value="en_US" /><input class="button" type="submit" value="Sign Up Now!" />
</form>
</div>
</div>
<style type="text/css">
#Subscription { width: 300px; height: 200px; border: 1px solid #51C0F9; border-radius: 5px 5px 0px 0px; }
#Subscription .heading { padding: 10px 20px; line-height: 20px; font-size: 20px; font-weight: 600; font-family: open sans; color: rgb(38, 38, 38); text-align: center; text-shadow: 0px 1px rgba(255, 255, 255, 0.75); background: none repeat scroll 0% 0% rgb(81, 192, 249); }
#Subscription p { font-family: open sans; font-size: 13px; color: rgb(12, 12, 12); line-height: 25px; padding: 5px 15px 0 15px; margin: 0; }
#Subscription .emailsub { padding: 0px 20px 10px 20px; }
#Subscription .emailsub input { color: rgb(170, 170, 170); padding: 10px; margin-top: 10px; font-size: 15px; font-family: open sans; width: 92%; border: 1px solid #ccc; border-bottom: 2px solid #ccc; border-radius: 5px; transition:border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s; }
#Subscription .emailsub input:focus { border-color:#F4836A; outline: none; box-shadow: 0 0 2px 1px #F4836A; }
#Subscription .emailsub .button { background: #F4836A; color: white!important; border:none; outline: none; border-bottom: 3px solid #B3614E; transition:background .4s linear; width: 90%; margin-right: 5%; margin-left: 5%; font-weight: 600; cursor:pointer; }
#Subscription .emailsub .button:hover{background: #DD7761;}
#credit {margin: -5px 0 0px 15px!important;text-shadow:none; opacity:.6;}
</style>

2.After you Input your Address ID, Copy the whole code and Put in HTML/Javascript Gadget in Layout,Arrange the widget by putting it where you like,but put it where your readers can see it,Probably under the blog post.

If you Have good Knowledge of HTML Coding,you can tweak the above code a little to adjust size to your taste.

Was this Post Helpful,Let me know through the comment Box.Want more Blogging tips? check them out Here

1 comment:

We love to hear from you!

RECENT COMMENTS

Featured post

JAMB 2017 Results are online now - check yours here

JAMB - the Joint Admission matriculation board , has started the release of the 2017 UTME RESULTS online for the examinations that start...