February 11, 2016

Pro Subscription Box For Blogger Widget Sidebar

- Advertisement -
Pro Subscription Box For Blogger Widget Sidebar
Most of the bloggers like using subscription box to enhance internet marketing by membership from loyalty site visitors. The Feed Heater subscription device is a most prominent one considering that it currently offered blogger blog site and the blog writers are easy to install it.

 In this tutorial, you will obtain a new variation of Feed Burner Subscription box, blogger plugin that I have invested 2 days for style and also examination this brand-new variation of the registration box that is a power of CSS Code. The tool prepares added some more features that could be a lot more earnings for individuals. Besides the subscription box there are some more functions such as;
  • Entirely Pro Variation design.
  • Privacy backlinks: that will be described to customers regarding your privacy. 
  • Social plugins for blogger: You can connect them to your social networks profiles. 

How To Install Feed Burner Subscription Box On Your Blog? 


Step 1: Currently login to your blog writer account.

Step 2: On control panel go to "Template" menu and afterward click "Edit HTML" button.

Blogger Edit HTML Function


Step 3: Now you are on the HTML Code area, just click anywhere in it then press Ctrl + F or Command + F for Mac to search for <head> tag.

Step 4:  Now after you found the <head> tag, please copy this Awesome Font Code below and place below it then click "Save Template" button. If you are not able to save this code please convert it to text before you place it below <head> tag or Click Here To Use Convertor Tool. If you already added this Awesome Font just jump to step 5.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

Step 5: It is a time to add CSS code to your blog. Choose one of these two CSS styles then Press Ctrl + F or Command + F for Mac to search for </b:skin> then copy this below CSS code  and paste it and after that click on "Save Template" button.

Style #1

Feed Burner Subscription Pro Style

/*----[Subscribe Widget Sidebar]---------------*/
#sidebar-subscribe {
   padding-bottom: 5px;
   font-family: inherit;
   display: block;
   margin: 10;
   width: 100%;
   border-radius: 0px;
 background: #152e48;
}
#sidebar-subscribe .email_icon {
   display: table;
   margin: -35px auto 0px;
   font-size: 40px;
   padding: 12px;
   height: 25px;
   width: 25px;
   background-color: #152e48;
   color: #fff;
   border-radius: 50px;
   border: 7px solid #0c4068;
   line-height: 0;
}
#sidebar-subscribe .main_tagline {
   padding-top: 10px;
   line-height: 2.2em;
  font-size: 20px;
 font-weight: bold;
   margin: 0;
   height: 75px !important;
   overflow: hidden;
   font-weight: normal;
   color: #fff;
   text-align: center;
 text-shadow:1px 1px 1px rgba(0,0,0,0.7);
   border: 0;
   background-color: #0c4068;
}
#sidebar-subscribe p {
   font-size: 15px;
   color: #fff;
   line-height: 27px;
   padding: 5px 10px 5px;
   text-align: center;
   width: 80%;
   margin: 5px auto 20px;
   border-bottom: 0px dotted #fff;
   border-radius: 0px;
}
#sidebar-subscribe .rssform {padding:0;margin:0 auto;display: block;color: #444;}
#sidebar-subscribe .rssform input {
   padding: 8px;
   margin: 20px auto 15px;
   font-size: 13px;
   color: #444;
   text-align: center;
   display: block;
   font-family: inherit;
   font-weight: normal;
   width: 90%;
   height: 45px;
   text-transform: normal;
   outline: none !important;
   border: 1px solid #ddd;
   border-radius: 4px;
   background: #fff;
   box-sizing: border-box !important;
}
#sidebar-subscribe .rssform .button {
   background: #fecc0a;
   color: #000!important;
   border: 0px solid #FFFFFF;
 border-radius: 4px;
   margin-top: 15px;
   outline: none !important;
   transition: all .3s ease-in-out;
   padding: 5px 2px !important;
   float: none;
 box-shadow:1px 1px 1px rgba(0,0,0,0.3);
   text-transform: uppercase;
   font-size: 19px;
   font-weight: bold;
   cursor: pointer;
}
#sidebar-subscribe .rssform .button:hover {background: #e1d91b;}
#sidebar-subscribe .policy {
   color: #fff;
   text-align: center;
   font-size: 15px;
   margin: 0;
   padding: 3px;
   line-height: 25px;
}
#sidebar-subscribe .policy a {
   color: #fff;
   text-decoration: none !Important;
}
#sidebar-subscribe form {margin-bottom: 10px !important;}
/*---[The Awesome Social]------------------ */
#socialfontawesome {
 text-align:left;
 float: center;
 float:left;
 color: #fff;
 margin-top: -5px;
 margin-bottom: 3px;
 padding-bottom: 6px;
 margin-left:8px;
 background: transperance;
}
#socialfontawesome a {
 display: inline-block;
 font-size: 40px;
 background:none;
 color:#fff;
 width: 30px;
 height:30px;
 line-height: 28px;
 padding: 6px;
 margin: 0px 5px 4px;
 border: 0px solid #152e48;
 text-shadow: 1px 1px 5px rgba(0, 0, 0, .2);
}
#socialfontawesome a:hover{
 background:none; #0198be;
 color: #2193b4;
 -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -o-transform: rotate(10deg);  border: 0px solid #0198be;
 -moz-transform: scale(1.3);
 -webkit-transform: scale(1.3);
 -o-transform: scale(1.3);
 transform: scale(1.3);
}

Style #2

Feed Burner Subscription Pro Style

/*----[Subscribe Widget Sidebar]----------------------*/
#sidebar-subscribe {
   padding-bottom: 5px;
   font-family: inherit;
   display: block;
   margin: 10;
   width: 100%;
   border-radius: 0px;
 background: #def7e1;
 background-image: -webkit-linear-gradient(top, #a2d3fb, #dedede);
 background-image: -moz-linear-gradient(top, #a2d3fb, #dedede);
  background-image: -ms-linear-gradient(top, #a2d3fb, #dedede);
  background-image: -o-linear-gradient(top, #a2d3fb, #dedede);
  background-image: linear-gradient(to bottom, #a2d3fb, #dedede);
}
#sidebar-subscribe .email_icon {
   display: table;
   margin: -35px auto 0px;
   font-size: 40px;
   padding: 12px;
   height: 25px;
   width: 25px;
   background-color: #152e48;
   color: #fff;
   border-radius: 50px;
   border: 7px solid #0c4068;
   line-height: 0;
}
#sidebar-subscribe .main_tagline {
   padding-top: 10px;
   line-height: 2.2em;
  font-size: 20px;
 font-weight: bold;
   margin: 0;
   height: 75px !important;
   overflow: hidden;
   font-weight: normal;
   color: #fff;
   text-align: center;
 text-shadow:1px 1px 1px rgba(0,0,0,0.7);
   border: 0;
   background-color: #0c4068;
}
#sidebar-subscribe p {
   font-size: 15px;
   color: #fff;
   line-height: 27px;
   padding: 5px 10px 5px;
   text-align: center;
   width: 80%;
   margin: 5px auto 20px;
   border-bottom: 0px dotted #fff;
   border-radius: 0px;
}
#sidebar-subscribe .rssform {padding:0;margin:0 auto;display: block;color: #444;}
#sidebar-subscribe .rssform input {
   padding: 8px;
   margin: 20px auto 15px;
   font-size: 13px;
   color: #444;
   text-align: center;
   display: block;
   font-family: inherit;
   font-weight: normal;
   width: 90%;
   height: 45px;
   text-transform: normal;
   outline: none !important;
   border: 1px solid #ddd;
   border-radius: 4px;
   background: #fff;
   box-sizing: border-box !important;
}
#sidebar-subscribe .rssform .button {
   background: #fecc0a;
   color: #000!important;
   border: 0px solid #FFFFFF;
 border-radius: 4px;
   margin-top: 15px;
   outline: none !important;
   transition: all .3s ease-in-out;
   padding: 5px 2px !important;
   float: none;
 box-shadow:1px 1px 1px rgba(0,0,0,0.3);
   text-transform: uppercase;
   font-size: 19px;
   font-weight: bold;
   cursor: pointer;
}
#sidebar-subscribe .rssform .button:hover {background: #e1d91b;}
#sidebar-subscribe .policy {
   color: #fff;
   text-align: center;
   font-size: 15px;
   margin: 0;
   padding: 3px;
   line-height: 25px;
}
#sidebar-subscribe .policy a {
   color: #fff;
   text-decoration: none !Important;
}
#sidebar-subscribe form {margin-bottom: 10px !important;}
/*---[The Awesome Social]-------------------- */
#socialfontawesome {
 text-align:left;
 float: center;
 float:left;
 color: #fff;
 margin-top: -5px;
 margin-bottom: 3px;
 padding-bottom: 6px;
 margin-left:8px;
 background: transperance;
}
#socialfontawesome a {
 display: inline-block;
 font-size: 40px;
 background:none;
 color:#fff;
 width: 30px;
 height:30px;
 line-height: 28px;
 padding: 6px;
 margin: 0px 5px 4px;
 border: 0px solid #152e48;
 text-shadow: 1px 1px 5px rgba(0, 0, 0, .2);
}
#socialfontawesome a:hover{
 background:none; #0198be;
 color: #2193b4;
 -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -o-transform: rotate(10deg);  border: 0px solid #0198be;
 -moz-transform: scale(1.3);
 -webkit-transform: scale(1.3);
 -o-transform: scale(1.3);
 transform: scale(1.3);
}

Step 6: Now back to dashboard again and click on "Layout" menu then click on "Add A Gadget" in sidebar section then click [+] on "HTML/Javascript". Now go to Step 7 to copy HTML code.

Add Gadget in Blogger blog

Step 7: Now you can copy this below HTML code to paste into the HTML/Javascript text area and then press "Save" button.
<div id="sidebar-subscribe">
            <div class="main_tagline">JOIN OUR NEWSLETTER</div><div class="email_icon"><i class="fa fa-envelope-o"></i></div>
            <p>Every Latest Updates will Delivery Straight to Your Mail Box <i class="fa fa-archive" style="color:#fff"></i></p>
   <div class="rssform">
            <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=theblogsupporter', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
            <input type="text" name="email" placeholder="Enter your email address here..." />
            <input type="hidden" value="theblogsupporter" name="uri" />
            <input type="hidden" name="loc" value="en_US" />
            <input value="Summit Now" class="button" type="submit" />
            </form>
            </div>
<div id='socialfontawesome'>
<a href='Add Your Facebook URL Here' rel='nofollow' target='_blank' title='Facebook'><span style='color: #037dd3'><i class='fa fa-facebook-official'></i></span></a>
<a href='Add Your Twitter URL Here' rel='nofollow' target='_blank' title='Twitter'><span style='color: #03b5e1'><i class='fa fa-twitter-square'></i></span></a>
<a href='Add Your Instagram URL Here' rel='nofollow' target='_blank' title='Instagram'><span style='color: #027aa1'><i class='fa fa-instagram'></i></span></a>
<a href='Add Your Google Plus URL Here' rel='nofollow' target='_blank' title='Google Plus'><span style='color:#db1b68'><i class='fa fa-google-plus-square'></i></span></a>
<a href='Add Your Pinterest URL Here' rel='nofollow' target='_blank' title='Pinterest'><span style='color:#ff002a'><i class='fa fa-pinterest-square'></i></span></a>
</div>
<div class="policy">
Secure with us | <a href=‘Add Your Privacy URL Here’> Privacy</a> | <a href=‘http://www.blogsupporter.com/2016/02/pro-subscription-box-for-blogger-widget.html’> Get this Widget</a></div>
</div>

The Final step you need to replace, add and change some joints in step 7 such as below;

  • You need to replace the Feed Burner ID from "theblogsupporter" to your personal one.
  • Add Your Social Media Profile such as Facebook, Twitter, Instagram, Google Plus and Pinterest on Add Your ....... URL Here.
  • Add Your Privacy URL in the "Add Your Privacy URL Here".

You can also use for a simple style one that some simple design for Feed Burner Subscription From. 
The job is done and you can use this subscription box on your blog and I hope you enjoy it. Have a nice day.

Was this article helpful?

Yes
No
Thanks! Your feedback helps us improve blogsupporter.com
Keo Sopherth

I love web and I am a Blogger and Author at Blog Supporter (Siem Reap, Kingdom of CAMBODIA) / www.blogsupporter.com / info at blogsupporter dot com

- Advertisement -
- Advertisement -
Advertise Here (330 x 280)

0 comments:

*** Although every comment is appreciated, due to time constraints I could not be able to respond for some comment. Remember that comments are regulated and could spend sometimes to appear. All spam comments or "COMMENT WITH HYPERLINK" will certainly be removed. Thanks for recognising!