Knowledge is good only if it is shared. As a new blogger, I had learned to change the Web template, and found out the tips, tricks, hacks, and tweaks of altering the Blogger template, customizing CSS, widgets, layout, blog design, inserting JavaScripts, HTML codes, Google AdSense, and other settings the hard way, through many trials and errors. For the purposes of this guide, I had started with the old Blogger “Minima” template. As I made the changes or learned something new, I had documented them. Before changing any template, please remember to save a copy of the current template. After editing the template, preview it, and save it when you are satisfied with the change. Hope this guide will help those who are finding the way around, just like me.

Search Tips for New Bloggers

We have extended our month-long vacation by a couple of days. We shall be posting articles the moment we return. We noticed that Google had updated the Page Ranks. New bloggers who have been waiting anxiously for this can check their blogs' Page Ranks. We have the PR checker link in our SEO Tools - Search Engine Optimization article.

The blog we created recently in Aug 2007, Blogger FAQ and Help, has also got its first Page Rank, a PR4. All our blogs are now ranked:-

Tips for New Bloggers - PR6
Business Fables and Management Lessons - PR4
Famous Motivational and Inspirational Quotes - PR4
Blogger FAQ and Help - PR4

Thanks to everyone for the support!

Jun 18, 2007

Digg This Story

Status Message and Older Post picture link

This tutorial covers 2 aspects. First, we shall customize the template to remove the status message “Showing posts for query link. Show all posts” appearing at the top of the posts when you enter a search word in the Blogger Navigation bar. Secondly, in the previous article, we discussed the ways to remove or hide the Newer Posts, Home, and Newer Posts links at the bottom of every post. We shall now talk about how you can change the text links to some other words or to replace these links with pictures. You will also learn how to switch the positions, to have the Older Posts link on the left and the Newer Posts link on the right.

Status Message

The status message “Showing posts for query link. Show all posts” appears at the top of the Post Body when readers perform a search of the Blog by entering the search word at the Navbar. If there is no post matching that search query, you will see a message “No posts match your query. Show all posts” instead.

Status Message and Older Post picture link

Similarly, if you click a label at the sidebar, the status message “Showing posts with label. Show all posts” will be automatically displayed at the top of the Posts.

Status Message and Older Post picture link

Some people may want to remove this message entirely either because it does not fit into the design of the Blog or that they think it redundant. If you do not want this message displayed, you can follow this guide to edit the template.

As a precautionary measure, before changing any part of the template, it is always good to backup the template. After making any change to the code, you should always preview the template before saving. In the event that you are too quick on the fingers and click Save before you confirm that you want the change, you can reload the previous template that you have backed up.

Login in to your Dashboard and go to Template -> Edit HTML. Check the “Expand Widget Templates” box. Backup your template by copying the template and saving it in an MS Notepad text file. You can also click the “Download Full Template” link that appears right after the words “Before editing your template, you may want to save a copy of it.”



With the “Expand Widget Templates” box still checked, scroll to where you see these lines and delete the line (shown in red). Preview, save and refresh the template. At any time in future if you want to reinstate the message status, simply insert this line back into the code.

<!-- posts -->
<div class='blog-posts'>

<b:include data='top' name='status-message'/>


Older Posts, Home, Newer Posts

These links are shown at the bottom of your Post Body. If you do not want to display these links, follow our earlier guide to Remove Older Post and Posts (Atom) Links.

1. Change the text links

If you want to change the words, for example, “Older Posts” to “Past”, “Home” to “Present”, and “Newer Posts” to “Future”, under Template -> Edit HTML, see that the “Expand Widget Templates” box is checked. Scroll to these lines:-

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>

</div>



Change the colored portions of the code to this:-

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'>Future</a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'>Past</a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'>Present</a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'>Present</a>
</b:if>
</b:if>

</div>



This is what you will see:-

Status Message and Older Post picture link

You can of course replace these with other words. For example, you may substitute the Older Posts (in red) with other words like Previous Rants, Yesterday's words, Lost Files. Choose your own words for Home (in blue) and Newer Posts (in green).

2. Replace with picture links

Update:

When we first wrote this article, we had no problems replacing the “Older Posts” and “Newer Posts” text links with image links. Not long after, it seemed that the link was not clickable on the home page. We had to click the bottom right corner of the image for it to work. They functioned well on the other pages though. Lately, it seemed that clicking the Older Posts image link on the home page will give an error code bX-v40b2j. This happened when the link had to check for posts before or after a certain date. Somehow, when we were viewing a posted article, the image links worked since they pointed to a definite post url. We have not found out the cause of this anomaly. In the meantime, the only icon that seemed to work is the Home Page icon. In the code below, ignore and do not change the part shown in red and green as they are images for the Older Posts and Newer Posts. The part shown in blue is for the Home Page icon and you can have that if you'd like. If the problem is resolved, we shall update this article accordingly.

You can also replace these texts with icons, cliparts, or other images and pictures. Many people use arrows to point to the previous page or next page. You should first have the pictures that you want to use.

Use photo editing softwares like Google's Picasa to crop and resize to a small picture. Upload the image onto a free image server. You can read about using free hosts like Google Page Creator and Google Groups. We also have a rather comprehensive list of free Image Hosts and File Hosting Services in our article on Manage Blogger Image Storage Space. Check out those sites and choose one that is fast, reliable and enables hotlinking to the uploaded files. Take note of the Image URL.

In the above codes, instead of replacing the red, blue and green portions with text, insert this code instead. Remember to type in the Image URL:-

<img src="Image URL" />


If you want to know more about the attributes for an image tag, you may refer to the article on Hyperlinks and Image Links (II).

We have created and uploaded some sample pictures that you can use. If you like something like this:-

Status Message and Older Post picture link

You can change your template to the following:-

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><img src="http://www.blogpulp.com/imagehost/images/733257041.jpg" /></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><img src="http://www.blogpulp.com/imagehost/images/180881814.jpg" /></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><img src="http://www.blogpulp.com/imagehost/images/139275805.jpg" /></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><img src="http://www.blogpulp.com/imagehost/images/139275805.jpg" /></a>
</b:if>
</b:if>

</div>



3. Switch Position of Older and Newer Posts

You would have noticed that the “Older Posts” link is on the right whereas the “Newer Posts” link is on the left. If we are using arrows to depict the Previous article and the Next article, we may prefer to have the Previous article or Older Posts on the left instead of the right. To switch the positions, we go to these lines in the template and amend the parts (shown in red).

#blog-pager-newer-link {
float: right;
}

#blog-pager-older-link {
float: left;
}


With this change, we now have the Older Posts link on the left and the Newer Posts link on the right.

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

19 comments:

Patricia said...

First time on your site and new blogger, found info very good, will definitely be back. Thanks


SoccerOverload

BlogmasterPg said...

Hi, how are you? I follow your instructions of your post, but I can't see the images I add in the HTLM script, I don't unerstand: the only 'strange thing i done is to use .gif images -in moviment-...2) question: I copy and upload my first Blog in other one this: http://archeoastronomia.blogspot.com , but all feeds data are lose... My rist Blog where i take the codes is www.BlogmasterPg.blogspot.com , of course. You cand answer to me also in private e-mail. Bye from Italy.

BlogmasterPg said...

Ok, scuse me, I used Image schuk, now I change with Googlepages and it's all right! (the only thing is the problrm to my template, but this is another story...)

bizwhiz said...

Hello Blogmasterpg

So is everything ok now? I am trying to understand your question about the images. The gif image in your Header is working fine.

BlogmasterPg said...

Another problem with my gif images that I see only today: new images bottom works fine when you are in one single post , but if you go to Home page, where shows only "back" bottom it doens't works... What do you think about it? PS: Have you see my news Template? Do you like its? I made for optimise it for new ad-sense images ads: 250X250 in the 2 sidebars; a link with 4 elements after ever 3 first post titles and 468X60 image ads at the end of each post. I'm very happy do made this : is my first template!

Sara said...

Such useful info. What if you want the Past, Present and Future links to be at the TOP of your page, so people don't have to scroll all the way to the bottom? I've seen blogs like this, but can't figure out how to change this in the template code.

Or is there at least a very quick, visible at the top way to click HOME if someone surfs to a specific link on your page and then wants to to check out your most current post?

Zsommand said...

Hi
I really like your blog lot of usefull info so far, but I can find info about how to hide the end of your post (with "read more" or "continue" or sg). Usually it works with "< !- -more - ->" but it doesnt work here. Thanks anyway:)

Moli said...

Got the solutions to all my problems.
thanks

dave said...

how do i replace it with a post title?any idea?

-Flickzzz- said...

Hi!
Nice article!
But is it possible to replace newer/older post links with newer/older post titles?
Thanks!
Flickzzz.com

Rikki said...

Hi -does anyone know how to replace Older / Newer Post with the ACTUAL title of that post? Thanks in advance!

admin said...

hi..i just find your blog and see that you know a lot of tricks and tips.. i have a problem? i revert my template to classic because i got a classic template which i really like. but i can't see the "newer post, home, older post" link at the bottom ..could u tell me how do i do that and in classic template i can't put layouts,thats my problem..is there any html/javascript code that u know i can use to figure this out?? please help i have over 200 poste and 15 post on main page ..

Dj roshan said...

i have successfully chaged the picture of older newer and home footer but i had the problem that all the link appear in vertical i have also defined the right left too as u have told in ur article
plz help me

Sanna99 said...

Thanx for all the greatly helpful stuff here! :-))
So far everything worked, and now I just tried to add some arrow pics left and right of those tiny text links "older/newer posts". So far that works too - YES!! :-)

kikki said...

Hi, I followed your instructions, they worked to change "Newer Post" and "Older Post" to "Next page" and "Previous page". It worked great, however, when my cursor hovers over either of them, an info box appears saying the original names. If you are not sure what I mean just put your cursor over "older post" on your blog and wait for the box to pop up. How do I get rid of these boxes or if I can't how can I change the wording to match my new wording. Also, is it possible for me to change the colour and font and where do I do this? Thanks so much. Your site is great btw, really well written.

Stuti Kalra said...

Hi,
I have recently started blogging. With no knowledge of HTML ,I have tried on some changes in my blogs thanks to your site.

I ahve a few queries which i cud not get answered:
Please help,thanks:-)

1.I want my older posts to be visible first and newer posts to follow them.However inspite of checking the box "show older posts first" in the blog archive,my newer post comes up on top.Is there no way other than changing dates?(my blog: thinkconstructive.blogspot.com)

2.If i ahve selected 2 posts to be visible on main page.woudl that mean that only 2 posts would come on every other page too?Can I not opt for more posts on next pages of my blog?

3.The slideshows on the left of my blog physicsenjoyable.blogspot.com are visible on every page.Can I have different slideshows (on the left bar) for different pages?Also can i ahve different number of page elements on left side for different blog pages?

4. I followed ur instruction of bullet listing of blogs.But the numbers come within the blog itself(as in the second blog in pysicsenjoyable.blogspot.com)
I want my archive list to be bulleted-is it possible?

Lastly,how oudl i knw where to look for the answers to my questions in ur blog?

Anonymous said...

Hi there, was wondering if it is possible to only remove the 'Home' link and still have the Newer/Older Posts links active?

Anonymous said...

Thanks a lot it is working perfectly without any hassle.

You've made a really awesome blog

Vanessa D. Alexander said...

You are a wonderful source. Even when I forget how I did something I can usually come here and find it. Thanks for all the hard work!