PPSMI: February 2012

Usually a header consist of the company logo but now a days it is used as an important place where people use to put there advertisement.Some of the Blogger templates has this feature.Commonly it is a simple container which can contain 2 widgets at one time one after the other side by side normally it consist of your logo and advertisement or etc.So please but your attention towards this tutorial carefully,don't worry its not very difficult to splitter your header but it needs your little attention because templates are differently coded but the method remains the same

Here is the screenshot which will help you what we are talking about,and this will give you the fine idea about the tutorial.the header which is not slitted into 2 parts

In New Interface

In Old Interface

Now in this screenshot you can see what will going to happen after you successfully applied the code

In New Interface

In Old Interface

To Splite Header in Two Different Parts:

1.Go to blogger.com >> Your Blog >> Design >> Edit Html / Template

2.Backup your template in case some thing went wrong.If you don't know how to backup template simple visit the tutorial how you can backup your template in blogger

3.Uncheck the "Expand the Widget'' if it is checked

4.Search for the following code in the template

#header-wrapper {
width:960px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}
#header a {
color:$pagetitlecolor;
text-decoration:none;
}
#header a:hover {
color:$pagetitlecolor;
}
#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}
#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}

Important:Due to different template coding the code above might be different.For example#header might be .header so look for the related code

5.Now after finding the code,replace the entire code with the following code

/*------Header-----*/
#header-wrapper{
    width: 960px;
    color: #000;
    margin: 30px auto 0;
    padding: 0px;
    overflow: hidden;
}
#header-inner {
    background-position: left;
    background-repeat: no;
}
.headerleft h1, .headerleft h1 a,.headerleft h1 a:hover,.headerleft h1 a:visited {
    color: #BF0100;
    font-size: 36px;
    font-family: 'Ultra', serif, Arial;
    font-weight: bold;
    margin: 0;
    padding: 0px 0 5px 0;
    text-decoration: none;
      text-shadow: 6px 6px 4px #ccc;
       line-height:1.2em;
}
.headerleft h3 {
    font-family: arial, tahoma, Sans-Serif;
    font-weight: normal;
    margin: 0;
    padding: 0;
}
.headerleft .description {
        color:  #3B3B3B;
    font:bold 12px Helvetica, arial, sans-serif;
    margin: 0px;
    padding: 0 0 20px 0;
        text-shadow: 4px 4px 6px #ccc;
}

.headerleft {
         width: 450px;
         float: left;
         margin: 0;
         padding: 0;
         height:80px;
}
.headerright {
         width: 468px;
         height:80px;
         float: right;
         margin: 0px;
         padding:1px 0 0 0;

}

6.After Replacing the code search for the following code,if you could not find the code then look for the similar code which should include div section of your header

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title=' My Blogger Lab (Header)' type='Header'/>
</b:section>

Rememeber: the code must contain <b:section and </b:section> tags to make the whole process work

7.After you find the code above or similar code replace the entire code with the following code

<div id='header-wrapper'>
<div class='headerleft'>
<b:section class='headerleft' id='headerleft' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='My Blogger Lab (Header)' type='Header'/>
</b:section>
</div>
<div class='headerright'>
<b:section class='headerright' id='headerright' maxwidgets='1' showaddelement='yes'>
</b:section>
</div>

8.Now press the Save Now button and to save the whole process and then visit layout page to see the difference

Customizing your header design:
To change the width of you header simply replace 960px;
To Change the colour of the title simply replace #BF0100;
To Change the colour of the header description replace #3B3B3B;

source : http://www.mybloggerlab.com/2012/01/splitting-your-header-section-into-two.html

Usually a Subscribe Now box is for user's it provide user's facilities they can get all the updates related to the blog directly into there inbox so adding a Subscribe Box is not only useful for a user but also for a publisher.By using Rss Feed,Email Subscription,Facebook Like and etc you can increase your blog's Traffic big time.This is the reason why we will today add a Dashing Subscribe Now Box to your Blogger Enabled blog before adding it.You should know what it will posses

1.The subscribe Box will have one RSS Feed Option

2.It will also have a Facebook Page option

3.It will have a Rss Email Subscription option

4.It will have a link to your Twitter page

5.And it will have a link to your Google Plus Page

So without wasting any time let us directly go to the point and let us start adding a Dashing Subscribe Now box to Blogger

Simple go to Blogger.com >> Then Yourblog >> Then Layout >> Then Add a Gadget >> Then Add Html/Javascript >> Then simply copy paste the following code

Before adding Preview the Subscribe Now Box Now

<div dir="ltr" style="text-align: center;" trbidi="on"><div style="text-align: -webkit-auto;"><span style="background-color: white;"><img alt="button_subscribenow.png (314×89)" height="60" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLwWz61ShAtciF3ZG8zWt0nZr5_B4vaQlhXxvIX17U7F-axsKj3D8xAIBMA0lbNDjkzU6tJnMZZ8YOtM_hte5AJ2x3Cmn-uCTAIr8UDC8CG1GT-JfWUbuOutQvwCdRbHfgKGwmdmUphrqU/s1600/1.gif" width="300" /></span></div></div><b></b><div class="subicons" style="background-color: white; border-bottom-color: rgb(230, 230, 230); border-bottom-style: solid; border-bottom-width: 1px; color: #666666; float: left; font-family: Helvetica, Arial; font-size: 12px; line-height: 18px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-align: -webkit-auto; width: 300px;"><div class="rssicon" style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg46rhBhYTgCxGnO6aLMIyornWTwKgLL2WVkAPbGYhZmxKaO7FXo8LyGqNy4RQWOgm6cSvlONGCn1wBMxoKhzra8Zmgfpwbu_64XWiK85G1Psyr6eUZRVs2BWqiw8hBmeeVPSC9OMg9uLi-/s400/rsssprite.png); background-origin: initial; background-position: 0px 5px; background-repeat: no-repeat no-repeat; border-right-color: rgb(230, 230, 230); border-right-style: solid; border-right-width: 1px; float: left; height: 48px; line-height: 57px; margin-bottom: 0px; margin-left: 5px; margin-right: 0px; margin-top: 0px; min-width: 2px; padding-bottom: 0px; padding-left: 30px; padding-right: 10px; padding-top: 0px; vertical-align: middle;"><b> <a href="http://feeds.feedburner.com/everfreetech" rel="nofollow" style="color: #333333; text-decoration: none;" target="_blank"> RSS</a></b></div>
<div class="googleicon" style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg46rhBhYTgCxGnO6aLMIyornWTwKgLL2WVkAPbGYhZmxKaO7FXo8LyGqNy4RQWOgm6cSvlONGCn1wBMxoKhzra8Zmgfpwbu_64XWiK85G1Psyr6eUZRVs2BWqiw8hBmeeVPSC9OMg9uLi-/s400/rsssprite.png); background-origin: initial; background-position: 0px -37px; background-repeat: no-repeat no-repeat; border-right-color: rgb(230, 230, 230); border-right-style: solid; border-right-width: 1px; float: left; height: 48px; line-height: 57px; margin-bottom: 0px; margin-left: 5px; margin-right: 0px; margin-top: 0px; min-width: 2px; padding-bottom: 0px; padding-left: 30px; padding-right: 10px; padding-top: 0px; vertical-align: middle;">
<b> <a href="http://plus.google.com/107381172453188253394" rel="author" style="color: #333333; text-decoration: none;" target="_blank"> G+</a></b></div>
<div class="fbicon" style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg46rhBhYTgCxGnO6aLMIyornWTwKgLL2WVkAPbGYhZmxKaO7FXo8LyGqNy4RQWOgm6cSvlONGCn1wBMxoKhzra8Zmgfpwbu_64XWiK85G1Psyr6eUZRVs2BWqiw8hBmeeVPSC9OMg9uLi-/s400/rsssprite.png); background-origin: initial; background-position: 0px -79px; background-repeat: no-repeat no-repeat; border-right-color: rgb(230, 230, 230); border-right-style: solid; border-right-width: 1px; float: left; height: 48px; line-height: 57px; margin-bottom: 0px; margin-left: 5px; margin-right: 0px; margin-top: 0px; min-width: 20px; padding-bottom: 0px; padding-left: 30px; padding-right: 10px; padding-top: 0px; vertical-align: middle;">
<b> <a href="https://www.facebook.com/pages/EverFreeTech/242545022467391" rel="nofollow" style="color: #333333; text-decoration: none;" target="_blank">FB</a></b></div>
<div class="twittericon" style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg46rhBhYTgCxGnO6aLMIyornWTwKgLL2WVkAPbGYhZmxKaO7FXo8LyGqNy4RQWOgm6cSvlONGCn1wBMxoKhzra8Zmgfpwbu_64XWiK85G1Psyr6eUZRVs2BWqiw8hBmeeVPSC9OMg9uLi-/s400/rsssprite.png); background-origin: initial; background-position: 0px -121px; background-repeat: no-repeat no-repeat; float: left; height: 48px; line-height: 57px; margin-bottom: 0px; margin-left: 5px; margin-right: 0px; margin-top: 0px; min-width: 20px; padding-bottom: 0px; padding-left: 30px; padding-right: 10px; padding-top: 0px; vertical-align: middle;">
<b> <a href="http://twitter.com/Fosterzone" rel="nofollow" style="color: #333333; text-decoration: none;" target="_blank">Twitter</a></b><br />
<br /></div></div>
<div class="emailsub" style="background-color: white; border-bottom-color: rgb(230, 230, 230); border-bottom-style: solid; border-bottom-width: 0px; color: #666666; float: left; font-family: Helvetica, Arial; font-size: 12px; line-height: 18px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 15px; text-align: -webkit-auto; width: 300px;">
<div class="emailicon" style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjlmSwIw6A0fP0l9XCusyrtrsHEnANCer4ZBTYHSgGcTN6mvReBlj0aj_zZzI3jI47vzP5Ypsg-vC0b99PYveyyOBSVnlkgUkFBsuu0RIDWYkKPpQK-x_5FnzgO7IqurCw8cXUL_y1-i4/s400/email.png); background-origin: initial; background-position: 0px 2px; background-repeat: no-repeat no-repeat; color: #333333; float: left; font-size: 14px; line-height: 20px; margin-bottom: 0px; margin-left: 5px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 40px; padding-right: 15px; padding-top: 0px; vertical-align: middle; width: 300px;">
<div style="color: #3a3a3a; font-size: 13px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; width: 270px;">
Receive Quality Updates Straight in your    Inbox by submitting your Email ID below<b>.</b></div></div>
<div class="emailupdatesform" style="float: left; margin-bottom: 5px; margin-left: 5px; margin-right: 0px; margin-top: 15px; width: 300px;">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=Everfreetech" method="post" target="popupwindow">
<b><input class="emailupdatesinput" gtbfieldid="10" name="email" style="background-attachment: initial !important; background-clip: initial !important; background-color: rgb(255, 255, 255) !important; background-image: initial !important; background-origin: initial !important; border-bottom-color: rgb(210, 210, 210); border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(210, 210, 210); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(210, 210, 210); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(210, 210, 210); border-top-left-radius: 5px; border-top-right-radius: 5px; border-top-style: solid; border-top-width: 1px; color: #a19999; float: left; height: 25px; padding-bottom: 0px; padding-left: 8px; padding-right: 8px; padding-top: 0px; width: 185px;" type="text" value="Enter your email here..." /><input class="joinemailupdates" style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(87, 171, 254)), to(rgb(0, 128, 255))); background-origin: initial; border-bottom-color: rgb(0, 128, 255); border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(0, 128, 255); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 128, 255); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 128, 255); border-top-left-radius: 5px; border-top-right-radius: 5px; border-top-style: solid; border-top-width: 1px; color: white; cursor: pointer; font-family: arial; font-weight: bold; height: 25px; margin-bottom: 0px; margin-left: 5px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 12px; padding-right: 12px; padding-top: 0px; text-transform: uppercase;" type="submit" value="Submit" /></b></form></div></div><b>

Now to modify it yo your setting do the following changeing to make it as it is yours

To add your own Facebook page Url

Look for https://www.facebook.com/pages/EverFreeTech/242545022467391 once you find it replace it with your own facebook page url

To Add your own Twitter Page Url

Look for http://twitter.com/Fosterzone once you find it replace it with your own twitter page url

To Add your own Rss Feed Url

Look For http://feeds.feedburner.com/everfreetech once you find it replace it with your own Rss feed url

To Add your own Email Subscription Url

Look For http://feedburner.google.com/fb/a/mailverify?uri=Everfreetech once you find it replace onlyEverFreetech with your own feed's url name

To Add your own Google plus Page Url

Look For http://plus.google.com/107381172453188253394 once you find it replace with your own Google Plus page url

And then hit Save button and you are done with adding A Dashing Subscribe Now box to blogger if you have any trouble with adding this widget feel free to ask

source : http://www.mybloggerlab.com/2011/12/adding-dashing-subscribe-now-box-to.html

PPSMI

Splitting Your Header Section into two different parts in Blogger

Adding a Dashing Subscribe Now Box to Blogger

Labels

About B-G

About Author

Subscribe in Reader

Access B-G on Go