Changing the Header Template In Blogger - So that your blog look unique or different from the others. 
Then you have to change the look of your blog. There are many ways to do it. For example, by changing the template created by a third party but the average template is already using it. Unless you create your own templates, but this method requires a long time and is not easy to make a good template. 

So one of the most convenient and effective way is to change the header on a template . 

Header is the most important element in a template for every visitor that comes to your blog first seen is a header. So changing the header is the most appropriate way. Header does not have to be a picture. You can also use the text as an important header unsightly. 

If you want to use an image as a header but could not make it. Do not worry, because now there are many websites that provide free header images so you just download it. 

Some websites have a pretty good header like: 100pixel.blogspot.com , freewebpageheaders.com ,smashingmagazine.com , and much more. In this post I will discuss about changing the header of freewebpageheaders.com . 

To download it, please follow the steps below: 

1. Go to website http://freewebpagesheaders.com/gallery 

2.To download headers. You must have an account first. Click register to register. 

3.Click Agree . 

Then you will be asked to fill out the Registration form. 

This form consists of 2 parts: Required information and optional information . Required information is the info you need to provide for the registration while the optional information is information that is used to display your data when you login to the visitor. If you feel no need then ignored for this section 

4. Then click Submit Registration Form . If it is you will get a message like this. 

5. Open the email you used to register. Click on the link provided to mengakftifkan your account.

 6. If you have, you will get a message that your account has been activated.

 7. click Return to the front page of free Web Page Headers . 

8. Then click Login to download the image header. 

9. Select a category header you want. If you have found a suitable picture. Click on the image and then click Download . 1

0. Then the picture will open in a new page. Right click on the image and choose Save Image As and press Save . 

11. Completed. 

Now the image is stored on your computer the next step you should do is find out how the size of the header in your template so that when mamasang size fit your template header. 

How: 

1. Click the Layout -> Edit HTML . 

2. Find code # header-wrapper . So that's easy to search for, press Ctrl + Ftype "header-wrapper" and then press Next . 

3. If you have found there is usually a code width and height around. For example, # header-wrapper {background: url} no-repeat; width: 980px; height: 100px; Width is the length of the header andHeight are the width of the header. Meaning you have to resize the image to 980x100 pixels. You can use an image processing program such as MS Paint, ACD See, photoshop for meresizenya. 

4. Once completed. Go to Blogger , go toDesign -> Page Elements . 

5. Click Edit on the Header. 

6. Then a new page will appear. 

7. Select Browse from your computer if the picture is stored dikomputer or Browse from the web if the images are stored on image hosting such as Imageshack, Photobucket, and Geocities. 

8. In the "Placement". Select Behind title and description if you want to showing the picture behind the blog title and description or select Instead of title and description if you want to cover the blog title and description. 

9. Then click Save . 

Click View Blog to see the results. 

Note:Not all templates can be mounted image. Some use text only. So choose the template as needed. luck. Good luck ...

<b:includable id='status-message'> 
<b: if 










style = 'clear: both;' /> 
</ b: if> 
</ b: includable>

4. Replace the code above with the code below

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</ div>
<div style='clear: both;'/>
</ b: if>
< / b: includable>

5. If so click Save Template . 6. Completed. Please see the results. Hopefully useful

<b:include data='post' name='post'/>

4. Replace the code above with the code below

<B: if cond = 'data: blog.homepageUrl
! = date: blog.url '>
<b:if cond='data:blog.pageType != "item"'>
<a expr: href = 'data: post . url '> <data:post.title/> </ a>
<br/>
<b:else/>
<b:include data='post' name='post'/>
</ b: if>
<b:else/>
<b:include data='post' name='post'/>
</ b: if>

5. If you already click Save Template . Please try results

<b:if cond='data:top.showAuthor'> 
<data:top.authorLabel/> <data:post.author/> 
</ b: if>

Replace the words are printed in red with the name you want to use. Examples

<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/> Admin
</ b: if>

5. If so click Save Template . 6. Completed. Please see the results.

<script src='http://hbhost.googlecode.com/files/rainbow-link.js'/>

3. Click Save Template . 4. Completed. Please see the results.

<script src='http://hbhost.googlecode.com/files/snow.js' type='text/javascript'> </script>

4. Press Save . Finish is tough is not it? If you do not want to bother ya use any of the following ways 1. clicking the Add Effect Snow In the blog below

2. Select the blog you want to install snow effect and then click Add Widget 3.Finish. luck ... 

5. Delete the code are then tap Save Template . Finish. If at any time you want to bring back titlenya stay just add code <h2 class='title'> <data:title/> </ h2> in the same place or remove the widget and create a new one. Gampangkan? May be useful. those of you who have a more effective way could share here. thanks 

Page navigation widget is a widget that serves to open the back page on the blog.Its function is similar to the "older posts" and "recent posts" on the blog. The difference is that with this widget you can be faster to browse the backyard of a blog because you do not have to open one page that can directly jump there but kehalamman next. So that could save your search time. 

Ok for those of you who are interested to apply. Here's how to installation. 

1. Log in to blogger. Open the menuDesign -> Page Elements

2. Click Add a Gadget -> HTML / Javascript and then put the code below into the box

<style>
.showpageArea a {
text-decoration:underline;
}

.showpageNum a {
text-decoration:none;
border: 1px solid #bbb;
margin:0 3px;
padding:3px;
}

.showpageNum a:hover {
border: 1px solid #bbb;
background-color:#bbb;
}
.showpagePoint {
color:#fff;
text-decoration:none;
border: 1px solid #fff;
background: #000;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #bbb;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333;
}

</style>



<script type="text/javascript">

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';


var pageCount=5;
var displayPageNum=3;
var firstPageWord = 'Awal';
var endPageWord = 'Akhir';
var upPageWord ='Sebelumnya';
var downPageWord ='Selanjutnya';



var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '&nbsp;<span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 1px solid #333;background-" class="showpage">Page '+thisNum+' of '+(postNum-1)+': </span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
}

if(postNum==1) postNum++;
html += '</div>';

if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
</script>

<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>
<div style="text-align:right;font-size:10px;color:000000;margin-top:15px;display:none;"> <a href="http://www.hermanblog.com">Grab this Widget ~ Navigasi Halaman</a></div>

Number five on the " var PageCount "shows the number of posts that will appear on each page. Please be replaced according to your wishes. 3. If you already clickSave . Then place the widget below Blog post like the example below

4. Click on View Blog and see what happens. Good luck ..