Wednesday, 24 August 2016

Blogging Bro

Cool Wordpress Styled Blogger Subscription Box


There are many bloggers who are using FeedBurner subscription service for their blogs. By increasing your website subscribers you can easily increase your daily blog traffic. Your blog readers will directly get notifications to their email address whenever you publish new content on your blog.


Add-Wordpress-Styled-Blogger-Subscription-Box

This gradually increases the chances for getting more website readers and also increases your blog's user interaction. So it's very important to give your subscription link to your blog readers. There are many options to enable user subscription on a website or blog. There are lots of third party subscription services available for your blog. In all of those, I personally love Google Feedburner.

Users can easily use Feedburner subscription service for their blogs. Your website readers simply have to enter their email address and click subscribe button.

If you have used Subscription box before, then you know that by default subscription blog has a very clean and simple design. That's the reason why I've made this beautiful subscription box, so that you can easily attract more readers. In this way both the chances of getting subscribers and blog traffic will get improved.


live-demo-button

I've personally worked on this Feedburner subscription box for blogger. But you can use this subscription box on any blogging platform which is using Google's Feedburner subscription service. You don't have to worry about it's size, It has 100% responsive design. You just need to add this widget in your blog and that's all. I'm personally using this widget and is totally verified.

I'll show you how to add this awesome wordpress styled Feedburner subscription box in your blog. You can add this cool blog widget in sidebar as well as below your blogposts.
Cool Wordpress Styled Blogger Subscription Box

As I've already mentioned it above that this blogger newsletter subscribe widget is 100% responsive, So you don't need to make any changes in it's size according to your blogger sidebar. This stylish feedburner subscription box for blogger will automatically adjust itself with any sidebar. You just need to copy and paste the following code in your blogspot blog.

Here, I'll provide you two variant for this blogger subscription box. One is Orange and other is Blue. You can select the color and add it to your blog. Not only these two colors but by editing few color codes you can easily generate your own color according to your blog design.

Now let's begin with how to add this cool wordpress styled blogger subscription box widget :-

Adding CSS

Step 1 : Open your Blogger Dashboard and click on Template option.

Step 2 : Under Template Option, click Edit HTML.

By pressing Ctrl+F  find ]]></b:skin>.

Step 3 : Carefully copy the complete css code given below :-

CODE :

/* Wordpress Styled Blogger Subscription Box WidgetDesigned by : http://www.bloggingbro.com/ */#blogging-bro-subscribe { background: #ea5c35; padding: 26px; }#blogging-bro-subscribe h4.title { color: #ffffff; font-family: 'Oswald', sans-serif; font-size: 22px; text-align: center; line-height: 1; margin-bottom: 0; text-transform: uppercase; margin-top:10px; }#blogging-bro-subscribe p { color: #ffffff; margin: 0; text-align: center; }#blogging-bro-subscribe p.text { opacity: 0.8; margin: 15px 0; }#blogging-bro-subscribe input { width: 100%; margin: 0; border: none; box-sizing: border-box; box-shadow: none; text-align: center; padding: 10px 0; height: 45px; border-radius: 0; }#blogging-bro-subscribe input.email-field {background: #F1F1F1 url(https://3.bp.blogspot.com/-E-vcFluZTmU/V7yL5QohlvI/AAAAAAAABpo/6HRQXCaRB0Iw49zFnC0Wn8QU-Dn8yQhfgCLcB/s1600/email-button.PNG) no-repeat;background-position: 5px 14px !important;padding: 10px;border: 1px solid #CCC;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;-webkit-box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF;box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF;}#blogging-bro-subscribe input:focus{background-color: #FFF;border-color: #898989;outline: none;-moz-box-shadow: 0 0 0 1px #e8c291 inset;-webkit-box-shadow: 0 0 0 1px #898989 inset;box-shadow: 0 0 0 1px #898989 inset;}#blogging-bro-subscribe input:focus::-webkit-input-placeholder { color: transparent !important }#blogging-bro-subscribe input:focus::-moz-input-placeholder { color: transparent !important }#blogging-bro-subscribe input:focus:-moz-input-placeholder { color: transparent !important }#blogging-bro-subscribe input.submit { font-weight: 500; font-size: 18px; background: #ffffff; margin-top: 20px; text-transform: uppercase; color: #ea5c35; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05); cursor: pointer;border: 1px solid #CCC;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out;}#blogging-bro-subscribe input.submit:hover{background:#2e3639;color:#fff;}

Step 4 : Simply paste the above code before ]]></b:skin>.


Step 5 : Next, Click on "Save Template" Button.

#1. Style : By default you will get an Orange colored subscription box. In case you want to change the color of this subscription box widget on your blog, you have to change the highlighted color codes.


#2. Style : You can get Blue subscription box widget by editing the css code. I have highlighted the background box color in the above css code. So, In case you want a Black subscription box widget you have to change button text and button hover background color too.


Change first highlighted color code from #ea5c35 to #3399ff
Change second highlighted color code form #ea5c35 to #3399ff
Change the third highlighted color code form #2e3639 to #003366

Now, after changing the color codes click on "Save Template" Button.

Adding HTML :


After adding the above css code on your blog, it's now turn to add the feedburner html subscribe box widget in blog sidebar. Start Following the below steps :-

Step 1 : Login to Blogger.com and open your blogger dashboard.

Step 2 : On the left sidebar, Click on Layout option.

Step 3 : Now, in sidebar section click on "Add a Gadget" and choose HTML/JavaScript.


Step 4 : There you've to add the following subscribe box widget code.
Copy the below code.

Code :
<div id="blogging-bro-subscribe"><h4 class="title">Subscribe to our Newsletter</h4><p class="text">Sign up now and Don't Miss Any Updates, Stay Connected...</p><form action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=Bloggingbroblog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input class="email-field" name="email" placeholder="Enter email address" type="text" /><input type="hidden" value="Bloggingbro" name="uri"/><input type="hidden" name="loc" value="en_US"/><input class="submit" value="Sign Up" type="submit" /></form></div>

Customization :


Now you need to replace the highlighted text "Bloggingbroblog" with your feedburner feed name.


Then simply click on "Save  Button" and that's all. Have a look to the following screenshot :-

Step 5 : Reload your blog homepage and see the cool subscription box.

Cool Wordpress Styled Blogger Subscription Box Below Blog Posts

We have successfully added a Cool Wordpress Styled Blogger Subscription Box in blog's sidebar. Now it's turn to add this box after each blogposts. This will be working more effectively for getting more subscribers.


Live-Demo-Button

Many webmasters choose this location to add their email subscription box. Now I'll show you how to add this Cool Wordpress Styled Blogger Subscription Box after each blog posts.

I've similarly divided this procedure in two parts i.e, adding css and html code. Let's get started :-

Adding CSS code :

Follow the same steps which we have followed earlier to add css code. Change color codes according to your blog color scheme.

Adding HTML code :

This time you have to follow different steps for adding html code. Start Following the below steps and get started :-

Step 1 : Open your Blogger Dashboard > Template > Edit HTML.

Step 2 : By pressing Ctrl+F search for "<div class='post-footer-line post-footer-line-3'>".

Step 3 :  Copy the following code and paste it right before the above code line.

Code :
<b:if cond='data:blog.pageType == &quot;item&quot;'><div id="blogging-bro-subscribe"><h4 class="title">Subscribe to Our Newsletter</h4><p class="text">Sign up now and Don't Miss Any Updates, Stay Connected...</p><form action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=bloggingbroblog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input class="email-field" name="email" placeholder="Enter email address" type="text" /><input type="hidden" value="Bloggingbro" name="uri"/><input type="hidden" name="loc" value="en_US"/><input class="submit" value="Sign Up Now" type="submit" /></form></div></b:if>

Note : 1. Before Editing your blog's HTML code, do not forgot to Backup blog template on your pc.
2. Just Replace the above highlighted text "Bloggingbroblog" With your feedburner feed name.

Here's what you have :-



Step 5 : Now Click on "Save Template" Button and that's all. Open any of your blog posts and see the subscription box widget.  

Hope, you have liked this tutorial. So, How's the subscription box ? If you have any type of questions related to the above tutorial then leave your comments below. Also don't forget to send me your valuable feedback by using below comment section. At last, Kindly share this post among your friends...  :)

Blogging Bro

About the Author -

Hey there ! This is me Abhishek. I’m a passionate blogger from Madhya Pradesh, India. I always keep of learning new things about Blogging, Seo, WordPress and Internet Marketing. I mostly like to spend time with my computer and working on my blog.

Subscribe to this Blog via Email :

2 comments

Write comments
Sagar Vaghela
AUTHOR
24 August 2016 at 01:47 delete

Thank you for providing the tutorial on request.

Reply
avatar
Blogging Bro
AUTHOR
24 August 2016 at 01:57 delete

Stay Connected Sagar, for more interesting blogposts :)

Reply
avatar