Ads Top

New Stylish Sidebar Subscription Box Widget For Blogger

Hello and Welcome to GetWebInfo.Com. Here on this Post you can learn that How can you add A New Stylish Sidebar Subscription Box Widget In to Your Blogger. More Subscribers mean more power to you in terms of free and instant highly targeted traffic to your every new blogger blogspot. So i came up with another version of sidebar subscription box widget for blogger which is more elegant than the previous version of this widget, just evolving by the time.



You can Customize this widget on to your own demand. This is super easy to customize and you need not to play with CSS part except changing the color codes which is super easy task, anyone can do it.


Features of This Subscription Box Widget

  1. Fully Responsive Design
  2. Super Easy to Customize the colors and text content
  3. Social Profiles Links in the bottom
  4. Use of Font Awesome icons with beautiful hover effect
  5. Made with pure CSS and HTML so it loads very fast
  6. Needs not to mention but it is stylish and Beautiful


Bonus Tip

I have included a backlunk in the bottom of subscription box and you can remove it simply from the HTML part if you wish to. Choice is yours My Blogger widgets are always neat and clean just all what you need it.

Here is we go with the Demo screen shot of our new stylish subscription box widget.



Installing Sidebar Subsription Box Widget to Blogger Template

First of all you need to add the Font Awesome icons CSS stylesheet link to out blog in case you are not using it already.

Step 01: Logged in to your blogger blog account. Now you can select your Blog> Go to Template> Click on Edit HTML and let the template code box load.

Step 02: Now click anywhere inside the template code box and press CTRL+F to open a search box inside. Now find out this opening <head> tag and just below it, paste the FontAwesome icons link given below.
<link href='http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css' rel='stylesheet'/>
Note: I have used Oswald font family in demo but i am not including it in the code below because your template may be using a different font family already. So avoid using multiple font families to maintain out blog load speed. 

Step 03: Now save your Template code and go to Layout Area of your blog. This time click on "Add a Gadget" link in the sidebar and add a HTML/JavaScript widget. Now paste the whole CSS and HTML code given below after making requiring changes given just below it.
<style>
/* ----------------------------------------------------
Sidebar Subscription Box Widget = V.2
Designed by :: https://www.getwebinfo.com
Keep These Credits Intact, Do Not Remove it
-----------------------------------------------------*/
#twist-blogger-sbox-v2 {
  padding: 0;
  padding-bottom: 5px;
  font-family: inherit;
  display: block;
  margin: 0;
  width: 100%;
  border-radius: 1px;
  border: 0;
  background: #363636;
}
#twist-blogger-sbox-v2 .main_tagline {
  padding: 0px 0px;
  line-height: 2.5em;
  font-size: 26px;
  margin: 0;
  height: 95px !important;
  overflow: hidden;
  font-weight: normal;
  color: #FFF;
  text-align: center;
  border: 0;
  background-color: #FF5959;
}
#twist-blogger-sbox-v2 .email_icon {
  display: table;
  margin: -35px auto 0px;
  font-size: 25px;
  padding: 12px;
  height: 25px;
  width: 25px;
  background-color: #363636;
  color: #FFF;
  border-radius: 50px;
  border: 10px solid #FFFFFF;
  line-height: 0;
}
#twist-blogger-sbox-v2 p {
  font-size: 15px;
  color: #F9F9F9;
  text-shadow: 0px -1px 0px #000;
  line-height: 27px;
  padding: 5px 10px 5px;
  text-align: center;
  width: 80%;
  margin: 5px auto 20px;
  border-bottom: 2px solid #6A6A6A;
  border-radius: 20px;
}
#twist-blogger-sbox-v2 .rssform {
  padding: 0;
  margin: 0 auto;
  display: block;
}
#twist-blogger-sbox-v2 .rssform input {
  padding: 8px;
  margin: 20px auto 15px;
  font-size: 13px;
  color: #000;
  text-align: center;
  display: block;
  font-family: inherit;
  font-weight: normal;
  width: 90%;
  height: 38px;
  text-transform: uppercase;
  outline: none !important;
  border: 1px solid #FFFFFF;
  border-radius: 1px;
  background-color: #FCFCFC;
  box-sizing: border-box !important;
}
#twist-blogger-sbox-v2 .rssform .button:hover {
  background: #000000;
}
#twist-blogger-sbox-v2 .rssform .button {
  background: #FF5959;
  color: white!important;
  border: 1px solid #FFFFFF;
  margin-top: 15px;
  outline: none !important;
  transition: all .3s ease-in-out;
  padding: 5px 2px !important;
  float: none;
  text-transform: uppercase;
  font-size: 18px;
  font-weight: normal;
  cursor: pointer;
}
#twist-blogger-sbox-v2 .bottom_lock_policy {
  background: url(http://4.bp.blogspot.com/-kYVqV9JYDHY/VPMC8jPKTGI/AAAAAAAAA28/zxv0TYRIZe4/s1600/Lock-twistblogger.png) no-repeat 3% -2px;
  color: #959595;
  text-align: center;
  font-size: 12px;
  margin: 0;
  padding: 3px;
  line-height: 25px;
}
#twist-blogger-sbox-v2 .bottom_lock_policy a {
  color: #959595;
  text-decoration: none !Important;
}
#twist-blogger-sbox-v2 .social_profiles {
  line-height: 1.2em;
  display: table;
  float: none;
  margin: 0px auto;
  text-align: center;
  min-width: 157px;
  padding: 5px 0px;
  border: 0;
}
#twist-blogger-sbox-v2 .social_profiles a:hover {
  color: #FFF;
  background-color: #FF5959;
  border-color: #FFF;
}
#twist-blogger-sbox-v2 .social_profiles a {
  color: #000000;
  margin: 0 5px;
  text-align: center;
  float: left;
  display: table;
  padding: 4px 5px;
  background-color: #FFFFFF;
  border-radius: 50px;
  border: 2px solid #2D2D2D;
  width: 15px;
  height: 15px;
  line-height: 0;
  font-size: 16px;
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
}
#twist-blogger-sbox-v2 form {
  margin-bottom: 10px !important;
}
</style>
<div id="twist-blogger-sbox-v2">
            <div class="main_tagline">Join Our Newsletter</div><div class="email_icon"><i class="fa fa-envelope"></i></div>
                 <p>Get All The Latest Updates Delivered Straight Into Your Inbox For Free!</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=GetWebInfo', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
            <input type="text" name="email" placeholder="Enter your email address...">
            <input type="hidden" value="GetWebInfo" name="uri">
            <input type="hidden" name="loc" value="en_US">
            <input value="Join Now" class="button" type="submit">
            </form>
            </div>
      <div class="bottom_lock_policy">We Respect Your Privacy | <a href="https://www.getwebinfo.com/2018/12/new-stylish-sidebar-subscription-box.html">Get This Widget</a>   </div>
   <div class="social_profiles">
   <a href="http://www.facebook.com/getwebinfo" target='_blank' rel='nofollow' title="Join on Facebook"><i class="fa fa-facebook"></i></a>
   <a href="http://www.twitter.com/getwebinfo1" target='_blank' rel='nofollow' title="Follow on Twitter"><i class="fa fa-twitter"></i></a>
   <a href="http://plus.google.com/#" target='_blank' rel='nofollow' title="Follow on Google+"><i class="fa fa-google-plus"></i></a>
   <a href="http://www.pinterst.com/#" target='_blank' rel='nofollow' title="Follow on Pinterest"><i class="fa fa-pinterest"></i></a>
   </div>
            </div>

Edit This Widget

01: Changing The Color Scheme

For changing the default color just find out this color code #FF5959 and replace it with the color code of your choice. Please note that you'll find this code three times in the above CSS so just replace it three times with same color code of your choice. Be careful with the text color too because white text may not appear properly in some colors so just change the text color too.


02: Changing Main Headlines

They are highlighted in the very beginning of above HTML code so change those all of you wish to or let them as it is.


03: Changing FeedBurner Address

this is the important step so change my feedburner address GetWebInfo which is highlighted two time in the HTML just replace mine with yours two times.


04: Remove The Backlink 

My Backlink to this post you can remove it or keep it.


05: Final Step 

Final step is just to remove my Social Profile links and add your own. These links are also highlighted at the bottom of HTML so replace them with yours own.

Finally Save your HTML/JavaScript widget and visit your blog to check if it is working.
If you have any issue or some thing went wrong or you can not be able to understand this method so just comment on this post i will reply you as soon as possible.

1 comment:

Powered by Blogger.