connect with us on
PROMOTE UR MUSIC IMG

Upload Your Music

Hurray you can now upload your music and video on Nijaweb .

UPLOAD NOW

Advertise Your Buissness

Advertise your Buissness Here on Nijaweb for good and qaulity Promotion.

Advertise Now
nijaweb-app

Nijaweb Mobile App

Download Nijaweb Mobile App For free to recieve latest updates quick/easy.

DOWNLOAD NOW

Friday, March 31, 2017

how to Add Nijaweb FeedBurner Subscription Box For Blogger

Chibueze Ogbonna     8:09 AM     No comments

feedbunner.jpg
feedbunner

Feedburner is an awesome tool to collect emails (subscriptions) from your blog readers in other to send them latest posts automatically. Nijaweb utilises this free tool awesomely well by placing 

a Feedburner subscription box at the post footer.

On our Nijaweb 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 Nijaweb's Subscription widget for blogger, this is why this post will show you how to add Nijaweb'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 Nijaweb Subscription Box To Blogger.
In NijawebBog, 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:#FFFFF;
    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;
}
.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;
}
.emailsub:hover {
    background:#222;
}
.emailform {
    font-size: 16px;
    margin-left: 8px;
    margin-top: 8px;
    letter-spacing: 0.4px;
    font-family: Lora;
}

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 Nijaweb 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.

Nijaweb 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/Nijaweb" sl-processed="1"><img alt="" height="26" src="http://feeds.feedburner.com/~fc/Nijaweb?bg=99CCFF&amp;fg=444444&amp;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=Nijaweb', 'popupwindow', 'scrollbars=yes');return true" target="popupwindow"><p><input class="emailtext" name="email" type="text"/></p><input name="uri" type="hidden" value="Nijaweb"/><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 Nijaweb 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 Blogger 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.
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.Designing a professional Blogger template requires adding important widgets at strategic part of your blog. Installing Nijaweb Feedburner subscription widget to the footer and sidebar of your blog is a great step to success.

Tools Used.
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.



Thanks For Visiting Nijaweb.com Dont Forget To Drop your Comments And Share Using The Share Button Below


Author:

Is a Proffesional Nigerian Blogger, A Webdeveloper, Who Loves To Blog And Also Writting Codes

0 comments :

RECENT POST

Put your ad code here

dmca

DMCA.com Protection Status NIJAWEB.COM do not claim ownership of any of the Songs that we upload and any copyright infringement complaints will be executed immediately! It is our policy to honor all take-down requests!
If You Feel Your Rights Are Being Infringed Upon, Contact Us Not Our Host By Send a Email Through Our Contact Form

MEET NIJAWEB CEO

Total Pageviews

Blogroll

Subscribe to our Newsletter

We'll never share your Email address.
© 2016 - NIJAWEB | NAIJA NO1 INFORMATION AND TECHNOLOGY BLOG. All Rights Reserved - Crafted by Stephenice . Blogger.