Stylish – Sidebar Subscription Box Widget For Blogger

Stylish Subscription Boxes

Influenza A virus subtype H5N1 subscription box widget helps spider web log owners to grow their mailing listing together with spider web log readers to acquire complimentary electronic mail updates immediately into their inbox. More electronic mail subscribers hateful to a greater extent than ability to yous because yous don’t receive got to hold off or promote the hell out of your novel epic spider web log content to acquire targeted visitors who are inward demand of it. They are already at that topographic point waiting for your email. You acquire complimentary traffic, social shares, comments, followers together with readers for free. So this is how of import it is to receive got a subscription box merely below the posts together with inward your blog’s sidebar hence that people who are interested inward your spider web log niche, tin subscribe alongside 1 click.

Although a subscription box is of no role if it is non oculus catchy which attracts visitors similar a magnet together with lures them plenty that they can’t aid but merely seat their electronic mail address together with sign up. Overall this is why nosotros role this widget, right?

This widget I am going to part is actually unique together with I seat several hours to blueprint it & acquire inward perfect. Influenza A virus subtype H5N1 lot of trial together with fault made it possible for me to come upwards up alongside this fashionable widget working perfectly on every template.

Note:-
New Version two Released:- New Stylish Sidebar Subscription Box Widget For Blogger

Previously yous may receive got installed hence many other sidebar subscription box widgets together with I bet nearly of them were non inward alignment alongside your template when installed. Because of wretched CSS styling together with Sidebar Widgets’ settings of one’s template brand these things problematic.

This widget volition definitely move alongside every template every bit it is shown inward the screenshot because I receive got taken aid of everything. I tested it on dissimilar templates together with made changes accordingly to everything that was preventing it from appearing every bit I wanted it to be.

Influenza A virus subtype H5N1 alive illustration of it tin live on seen at that topographic point on my blog’s sidebar. Although, it is lilliputian dissimilar but basic subject is same. Older sidebar widgets provided on this spider web log powerfulness non receive got worked on your spider web log merely because of the same work but this fourth dimension I learned it. Let us start alongside the process.

(Note:  What You Can together with What You Can’t?
1) You do non receive got permission to part my code on your spider web log or making pocket-size fry changes to CSS class/id names together with proverb yous did it.
2) You tin role this widget on your whatever (personal or commercial blog) without bespeak for permission.
3) You tin Remove the footer credit link. You heard it right. You create non receive got to maintain intact the footer credit link which is a link dorsum to this post. This is your choice. If yous desire yous tin demonstrate your gratitude or else merely take away it together with taste every bit it is. You came to my spider web log for a argue together with if that argue is fulfilled, I got my vantage 🙂
4) You can Not Remove the comments added to CSS agency code. Remain them intact, they create non impairment inward whatever case.

Baca Juga:  Jquery Embed Youtube Videos With Defer Iframe Responsive

Recommended: Feedburner Email Subscription Popup Blogger Plugin

Here is How To Get This Widget Working Step past times Step

See this screenshot together with sympathise a few things hence that yous tin alter them subsequently easily without frustration.
Things to Change inward Subscription Box
First of all yous must brand a habit of taking the backup of your blog’s template code earlier proceeding alongside the installation of whatever widget because yous may halt upwards doing things incorrect together with screw it. So it is ever improve to receive got a backup hence that if inward whatever instance yous did things incorrect or merely yous did non similar your novel widget, yous tin acquire dorsum quickly.
Important Note: Font menage unit of measurement I used inward this widget is “Oswald” which is a Google font. You tin role this font menage unit of measurement on your spider web log easily. Just follow the steps below.

Installing CSS code together with Font Family “Oswald” into Your Blog

Step 1) What it could live on other than logging dorsum to your blogger account. 🙂 Select your spider web log >> Choose Template >> Click Edit HTML together with allow the template code box load
Step 2) Save your template code into notepad every bit a backup.
Step 3) Open a search box past times clicking within the code box together with pressing Ctrl+F on Windows or Cmd+F on Mac.
Step 4) Find this opening tag <head> together with merely below that glue the Google font menage unit of measurement URL given below.

<link href=’http://fonts.googleapis.com/css?family=Oswald%3A400&subset%3Dlatin%2Clatin-ext&ver%3D4.1′ rel=’stylesheet’ type=’text/css’/>

Now Google font family, “Oswald” is installed on your spider web log 🙂

Note: In-case yous create non desire to role the Oswald font menage unit of measurement together with then delight supersede every appearance of the font-family Oswald from the CSS code below together with add together your ain font-family.

If yous desire to role the default font of your spider web log together with then merely supersede every appearance of font-family: “Oswald”,sans-serif; with font-family: inherit; and yous practiced to acquire alongside it. Otherwise sans-serif fonts volition live on applied together with it volition hold off awkward to you.

Step 5) Find this code ]]:</b:skin> together with merely earlier that, glue the CSS code given below
(Note: To sympathise how to brand changes similar colors or font size together with then merely follow the sixth measuring below the code)

/*——- Stylish Sidebar Subscription Box Widget past times TwistBlogger.com——*/
#twist-blogger-sbox {
  padding: 0;
  margin: 0;
  width: 100%; /*—- Change width hither – You tin role pixels or inward percent —–*/
  height: 355px;
  border-radius: 1px;
  border: 0;
  background: #3A3939; /*—— Change background color of widget here——–*/
}
#twist-blogger-sbox .tagline {
  padding: 5px 0px 0px 0px;
  line-height: 35px;
  height: 45px;
  font-size: 25px; /*—– Change the Font Size of Main Tagline hither —–*/
  font-weight: normal;
  font-family: “Oswald”,sans-serif;
  text-shadow: 0px -1px 0px #999;
  color: #FFF;
  text-align: center;
  background: #FF7400; /*—- Change background color of Tagline hither —–*/
  border: 5px corporation #FD6A00;
  border-bottom: 7px corporation transparent;
  border-bottom-left-radius: 50px;
}
#twist-blogger-sbox .sub-tagline {
  font-family: “Oswald”, sans-serif;
  font-size: 19px;      /*–Sub Tagline Font Size – Change hither —*/
  color: #FFF;
  text-shadow: 0px -1px 0px #000;
  line-height: 30px;
  padding: 0px 10px 0px 10px;
  text-align: center;
  margin: 0;
}
#twist-blogger-sbox .item-list {
  margin: 10px 0px 0px 0px !important;
}
#twist-blogger-sbox .item-list > ul {
  padding: 0px 0px 0px 50px !Important;
  margin: 0 !important;
}
#twist-blogger-sbox .item-list > ul > li {
  font-family: “Oswald”, sans-serif;
  font-size: 15px; /*—– Change Font Size of List hither ——*/
  margin-left: 10px;
  color: #E8E8E8; /*—— Change font color of List hither —-*/
  line-height: 24px;
  text-align: left;
  text-shadow: 0px -1px 0px #000;
  list-style: none !important;
  list-style-type: none !important;
  margin: 0px !important;
  padding: 0px !important;
  border: 0 !important;
}
#twist-blogger-sbox .rssform {
  padding: 0px 20px;
  margin: 16px 0px 16px 0px;
}
#twist-blogger-sbox .rssform input {
  padding: 8px;
  font-size: 13px;
  font-family: “Oswald”, sans-serif;
  font-weight: normal;
  width: 100%;
  text-transform: uppercase;
  outline: none !important;
  border: none;
  border-radius: 1px;
  box-sizing: border-box !important;
  -moz-box-sizing:border-box;
}
#twist-blogger-sbox .rssform .button:hover {
  background: #ED6D00; /*—– Change Subscribe push clit hover color hither —–*/
}
#twist-blogger-sbox .rssform .button {
  background: #FF7400; /*—– Change Subscribe push clit background color hither —–*/
  color: #FFF!important; /*—— Change Font color hither ——*/
  border: 0;
  margin-top: 15px;
  outline: none !important;
  transition: all .3s ease-in-out;
  width: 100%;
  padding: 6px !important;
  float: none;
  text-transform: uppercase;
  font-family: “Oswald”, sans-serif;
  font-size: 18px;
  font-weight: normal;
  cursor: pointer;
}
#twist-blogger-sbox .lock-policy a {
  color:#818181;
  text-decoration:none !Important;
}
#twist-blogger-sbox .lock-policy {
  font-family: “Oswald”,sans-serif;
  background: url(http://4.bp.blogspot.com/-kYVqV9JYDHY/VPMC8jPKTGI/AAAAAAAAA28/zxv0TYRIZe4/s1600/Lock-twistblogger.png) no-repeat 10px -2px; /*— picture URL of Lock appears inward footer —*/
  color: #818181;
  text-align: center;
  font-size: 12px; /*— Font size of footer work —-*/
  margin-left: 10px;
  padding: 0px;
  line-height: 30px;
  margin-top: -5px;
}

Step 6) So yous desire roughly changes to this widget? In the higher upwards code, I receive got added proper comments inward front end of CSS code work where yous tin alter what comment says. Read the comments together with alter what yous tin create for font family, color, size, width etc.

Baca Juga:  Cara Gampang Redirect Halaman Error 404 Di Blogger.Com

Save yous template code at nowadays because HTML business office volition live on added to the sidebar via template Layout Section.

Installing HTML Part of Widget – In Template Layout Section

Now nosotros are done alongside CSS code hence at nowadays it’s fourth dimension to add together HTML business office of this widget through Template Layout section.
Step 1) Go to Layout area of your spider web log together with then on the sidebar merely add together a novel HTML/JavaScript widget.
Step 2) Now glue the HTML code after making compulsory Changes to it.

<div id=’twist-blogger-sbox’>
            <div class=’tagline’>
            Wait! Did You Know?
            </div>
                <div class=’sub-tagline’>Why should yous subscribe?</div>
<div class=”item-list”>
<ul>
<li><div style=’color: #FF5700; display: inline-block; font-size:17px; letter-spacing: 4px;’>&#10004;</div> Free Photoshop .PSD Templates</li>
<li><div style=’color: #FFE800; display: inline-block; font-size:18px; letter-spacing: 4px;’>&#10004;</div> Adobe Illustrator Tutorials</li>
<li><div style=’color: #FF5700; display: inline-block; font-size:19px; letter-spacing: 4px;’>&#10004;</div> 3D Animation Tutorials</li>
<li><div style=’color: #FFE800; display: inline-block; font-size:20px; letter-spacing: 4px; letter-spacing: 4px;’>&#10004;</div> Straight into your &#8594; INBOX</li>
</ul>
</div>
            <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=TwistBlogger‘, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520’);return true”>
            <input type=’text’ name=’email’ placeholder=’Enter your electronic mail address…’ />
            <input type=”hidden” value=”TwistBlogger” name=”uri”/>
            <input type=”hidden” name=”loc” value=”en_US”/>
            <input value=”Subscribe Now” class=”button” type=”submit” />
            </form>
            </div>
<div class=”lock-policy”>
   Safe With Us | <a href=”http://twistblogger.com/p/privacy-policy.html“>Privacy Policy</a> | <a href=” “>Get This Widget</a>
</div>
            </div> 

Step 3) Tired? Now merely alter the highlighted things accordingly. Most of import measuring to alter is my Feedburner address TwistBlogger to yours otherwise yous volition live on giving complimentary subscribers to me :p

Baca Juga:  How To Add Google Analytics On Blogger Blog

In the footer of the widget, I receive got used a Privacy Policy link hence delight alter it to your blog’s privacy policy page URL. This is highlighted inward RED color at the bottom of HTML code. Green Color link is a link dorsum to this post every bit a Credit, but I receive got allowed yous to take away this link if yous want.

Save this HTML/JavaScript widget together with banking concern fit out your spider web log for the changes. It must live on working perfectly.

Wait, You powerfulness live on thinking that why the heck did non I tell yous to seat the whole CSS+HTML to sidebar HTML/JavaScript widget, right? Well, at that topographic point is no practiced argue or bad but I similar to seat the whole CSS code within the template code altogether. We had installed the Google font likewise 🙂

So did this widget move for you? Was it every bit construct clean every bit shown inward the Screenshots? Did yous facial expression upwards whatever problem? Need aid on template customization? Just inquire me inward comments together with I’ll create my best. Thanks for reading together with using my widget for free. :p

Share this post, create comment together with Stay blessed!!