Recently some bloggers developed a simple and professional template style which called Flat Design, not only blogger are using these kinds of templates but wordpress also using the same design as well even that Flat design inspired by one of the Wordpress theme :) and these kinds of themes are looks professional and they also have some unique and professional look and feel but one of the most interesting part of these templates are, developers shows the one widget below header and when we open any article then that widget automatically goes hide, and we can use any kind of widget in that section. (which we want to show and hide) Mostly people use a subscription widget in that section, to increase their fan following and customers.
 |
| These Kinds of Widgets Below Header |
So, we planned to tell you that how can we add that kind of widget.
First of fall we need to understand that this tutorial will be helpful for those people who can edit their blog's template as avergely but not for those who are newbies in blogger, if you can't add this widget and you want it then you can send me your templates at vhemant03@gmail.com and I'll do this for you.
How to Add Full Width Widget
It's totally depend on you where you want to see this widget in your blog like at below header, after end of the content wrapper, at the footer etc. We are just providing codes and technique for it.
- Login to Blogger > Dashborad
- Click on Drop Down Menu and select Template
- Backup your Template before making any changes to your blog
- Press Ctrl + F and search the code shown below.
]]></b:skin>
- Paste below code just before it.
#subscriptionboxerwrap {
width:940px;
margin:auto;
}
#subscriptionboxer {
float:left;
width:100%;
background:#333333;
padding-bottom:10px;
padding-top:10px;
}
.imagebox {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYUZ-OW-Bf5hfkLI-yo6G4QJ2Z_KWQrqx1Gz1pzwrt4OAnxh56MqfRSR_gZMqStlDCnyK20jz49Sj7kEkfymFE5_xftHQlK64ssWY1Fx35ddJMrUzXV7cmL6ILZI8R_H2PDXRscOb02-JY/s1600/logo.png) no-repeat;
width:267px;
height:284px;
float:left;
}
#suberrighter h4 {
font-size:51px;
line-height:50px;
color:#89c63d;
font-weight:600;
margin:0;
font-family:oswald;
}
#suberrighter p {
font-size:26px;
line-height:25px;
border-bottom:1px solid #ddd;
color:#fff;
padding-bottom:20px;
margin:10px 0 0;
font-family:oswald;
}
#suberrighter {
float:right;
margin-right:80px;
margin-top:55px;
}
#subbutton {
background-color:#89c63d;
border:3px solid #70ad24;
cursor:pointer;
color:#FFF;
width:140px;
height:45px;
font-size:14px;
font-family:'Open Sans', sans-serif;
font-weight:700;
float:right;
transition:all .3s ease-out;
margin:0;
}
#subbox {
border-bottom:3px solid #F1F0F0;
font-size:14px;
font-weight:300;
border:1px solid #d2d2d2;
color:#838383;
font-style:italic;
height:33px;
font-family:Lora, Arial, Helvetica, Verdana;
outline:none;
width:375px;
margin:0;
padding:5px 30px 5px 10px;
}
#subscribe {
margin-top:10px;
margin-bottom:10px;
}
#subbutton:hover {
background-color:#292929;
border:3px solid #292929;
}
- Now go on that area where you want to add this widget and paste below code any where in the body section where you want to see that widget.
- 1) If you want to see this widget permanently in home page then use below codes.
<div id='subscriptionboxer'>
<div id='subscriptionboxerwrap'>
<div class='imagebox'/>
<div id='suberrighter'>
<h4>Let's Taste Our RECIPES</h4>
<p>Subscribe Us to Get Free Premium Stuff</p>
<form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open( 'http://feedburner.google.com/fb/a/mailverify?uri=WidgetGenerators', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input id='subbox' name='email' onblur='if ( this.value == '' ) { this.value = 'Enter your email address...'; }' onfocus='if ( this.value == 'Enter your email address...') { this.value = ''; }' type='text' value='Enter your email address...'/>
<input name='uri' type='hidden' value='WidgetGenerators'/>
<input name='loc' type='hidden' value='en_US'/>
<input id='subbutton' type='submit' value='SUBSCRIBE NOW'/>
</form>
</div>
</div>
</div> </div>
- Now take a preview first and then save your template.
- 2) If you want to see this widget only in home page and hide in the articles then use below codes.
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='subscriptionboxer'>
<div id='subscriptionboxerwrap'>
<div class='imagebox'/>
<div id='suberrighter'>
<h4>Let's Taste Our RECIPES</h4>
<p>Subscribe WG to Get Free Premium Stuff</p>
<form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open( 'http://feedburner.google.com/fb/a/mailverify?uri=WidgetGenerators', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input id='subbox' name='email' onblur='if ( this.value == '' ) { this.value = 'Enter your email address...'; }' onfocus='if ( this.value == 'Enter your email address...') { this.value = ''; }' type='text' value='Enter your email address...'/>
<input name='uri' type='hidden' value='WidgetGenerators'/>
<input name='loc' type='hidden' value='en_US'/>
<input id='subbutton' type='submit' value='SUBSCRIBE NOW'/>
</form>
</div>
</div>
</div></div>
</b:if>
- Now take a look at the preview and if All izz Well then Hit on Save button.
Make Changes....!
You have to do some changes before saving this article.
- Replace it WidgetGenerators with your RSS username 2 times.
