OgbongeBlog FeedBurner Subscription Box For Blogger Blog
Feedburner is an awesome tool to collect emails (subscriptions) from your blog readers in other to send them latest posts automatically. OgbongeBlog utilises this free tool awesomely well by placing a Feedburner subscription box at the post footer.
On our OgbongeBlog template series, I posted how we can place share buttons, subscription and related post widgets at the end of each post, but in that article, I didn't offer OgbongeBlog's Subscription widget for blogger, this is why this post will show you how to add OgbongeBlog's Feedburner subscription box below each post on your blog and at the sidebar.
Before using this widget, you would have to create a Feedburner account, burn your feed and also optimise your feeds. For free social media promotion, you would want to automatically tweet all your latest post to twitter with hashtags, short URL and links. Learn to do all this here - How To Setup FeedBurner On BlogSpot Blog (Free Email Subscription Service)
How To Add OgbongeBlog Subscription Box To Blogger.
In OgbongeBog, this widget was placed at the post footer (below every post) you can also do this but as a reminder, you can make more money by placing Adsense Ads Before, Between And After Posts In Blogger Blog.
Adding CSS Code.
First thing first is to decide the look and feel of this widget. I earlier posted on how to Add WordPress Style ShortCode Tabs And Accordions To Blogger and how to properly SEO optimise your BlogSpot blogs; all these tips together will help you make a better blog.
input[type=text] {
width: 180px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 0px !important;
font-size: 16px;
background-color: white;
background-image: url(searchicon.png);
background-position: inherit;
background-repeat: no-repeat;
padding: 15px 20px 12px 40px !important;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgajWRmBH1db13TFZM39rFPbm9DcV_FucZDRNbXcyn4IvIDuci6v2hyphenhypheno9B3JaIzo2gfvpnN_S2cJhLGnSPR5BEao0F-ArL5QMZB9gXiJBjHEbm61Un1imI4L_WDZ2JNo8FZnGROEjsrdqk/s1600/email.png) no-repeat scroll 7px 6px transparent !important;
border: 1px solid #98A0A9 !important;
height: 25px !important;
padding-left: 33px !important;
width: 80% !important;
font-size: 16px;
color: #151515;
letter-spacing: 0.2px;
}
a.sub-credit {
float: right;
font-size: 12px;
}
input[type=text]:focus {
max-width:80% !important;
}
.emailsub:hover {
background:#222;
}
.emailform {
font-size: 16px;
margin-left: 8px;
margin-top: 8px;
letter-spacing: 0.4px;
font-family: Lora;
}
.emailtop {
margin-left: 8px;
margin-bottom: 12px;
}
.emailsub {
background: #666666;
border: medium none !important;
color: #FFFFFF;
cursor: pointer;
font-size: 17px;
letter-spacing: 0.4px;
padding: 3px 8px;
}
.emailtop p {
margin-bottom: 14px !important;
margin-top: 12px !important;
}
There are two ways of adding CSS to a blogger template, you can add CSS to BlogSpot template either through the "HTML Editor" or "Customise Tab". Choose the simplest method.
Method 1 - Via HTML Editor.
Go To Blogger.com >> Templates >> Edit HTML.
Using CRTL + F search for ]]></b:skin> and paste the above Ogbonge Subscription widget CSS code right above ]]></b:skin> . Save when done.
Method 2 - Customise Tab
Go To Blogger.com >> Template >> Customize >> Advanced >> Add CSS.
Copy the above CSS code and paste it into the code box. Press enter once after adding the CSS before saving.
OgbongeBlog Responsive Subscription Box HTML CODE.
Below is the HTML Code which will define where the widget is to be shown. You can add this Feedburner code to the sidebar, below post title and below posts.
<div class="emailform" style="text-align:center;clear:both;">
Join over 10,000 Email Subscribers
<p style="text-align:center;clear:both;"><a href="http://feeds.feedburner.com/ObhiabaBlog" sl-processed="1"><img alt="" height="26" src="http://feeds.feedburner.com/~fc/ObhiabaBlog?bg=99CCFF&fg=444444&anim=1" style="border:0" width="88"/></a></p>
<form action="http://feedburner.google.com/fb/a/mailverify" class="emailtop" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=ObhiabaBlog', 'popupwindow', 'scrollbars=yes');return true" target="popupwindow"><p><input class="emailtext" name="email" type="text"/></p><input name="uri" type="hidden" value="ObhiabaBlog"/><input name="loc" type="hidden" value="en_US"/><input class="emailsub" type="submit" value="Subscribe"/></form>
<a class="sub-credit" href=" " rel="dofollow" target="_blank" >Get This Widget></a>
</div>
<div style='clear: both;'/>
HTML Code Customization
Replace all the occurrences of ObhiabaBlog in the code with your FeedBurner username.Adding Subscription Widget To Sidebar
One of the best performing spots for a Feedburner subscription box is in the sidebar. Users get to see it both when on the homepage, post page and static page. That surely will increase your daily subscribers.Go To Blogger.com >> Layout >> Sidebar >> Add Widget >> HTML/Javascript.
Paste the edited version of the HTML code above into the "HTML/Javascript" box. You can leave the title space empty or input an attractive title e.g Get Latest Posts Free.
Responsive Blogspot Subscription Widget Below Posts
Post footer (below post) is a high conversion spot to place BlogSpot Social Media Follower Counter Widget, High paying CPM/PPC affiliate banners etc. You could also add Jumbo social share counters to increase post engagement.Go To Blogger.com >> Template >> Edit HTML.
Using CTRL + F search for the below code.
<div class="post-footer">
Note: You will find this code twice, but for the purpose of adding a subscription box to the post footer of BlogSpot blog, we will be making use of the second one.
Paste the above HTML code right below the second <div class="post-footer"> and save when done.More From Author
Designing a professional Blogspot template requires adding important widgets at strategic part of your blog. Installing OgbongeBlog Feedburner subscription widget to the footer and sidebar of your blog is a great step to success.Post References And Tools Used.
Total widget credits and design awesomeness to Jide of OgbongeBlog. Every now and then, he keeps installing wonderful widgets into his blog which has really made me know more about BlogSpot template designing.I have made use of Google Inspect tool in getting the HTML code of the widget while I used Chrome View page source for getting the CSS. Want to Learn more? follow the below guides to learn Inspect Tool.
- Complete Guide To Google Inspect Tool
- How To Find ID of widgets and sections using Inspect tool.
BERITA LENGKAP DI HALAMAN BERIKUTNYA
Halaman Berikutnya
0 Response to "OgbongeBlog FeedBurner Subscription Box For Blogger Blog"
Posting Komentar