How to change "Older post, Newer post and Home" links with images in blogger templates
Monday, December 06, 2010 | 
Posted by
ArtisTutor
1. Log in to your dashboard--> layout- -> Edit HTML
2. Click on "Expand Widget Templates"
3. Search "Ctrl+F" and find the following cod:
<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>
4. Replace the upper code with the next one:
<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 alt='Back Page' border='0' src='http://img696.imageshack.us/img696/4351/prev1.png?imgmax=800' title='pagina precedenta'/></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 alt='Next Page' border='0' src='http://img214.imageshack.us/img214/4452/netol.png?imgmax=800' title='urmatoarea pagina'/></a>
</span>
</b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><img alt='home' border='0' src='http://img230.imageshack.us/img230/9030/homex.png?imgmax=800' title='Home'/></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>
5. Change the red links with your images links and then save the template.
Get Latest Updates For Free!
Subscribe via Email
2 comments
hi..
How i can change older post and newer post with next post title?
Change the blue lines in the tutorial with your text.
Click to Add a New Comment
Leave your comment
- If you're asking a question click the Subscribe By Email link, below the comment form, to be notified of replies.
- Do NOT add links to the body of your comment as they will not be published.
- Only the comments posted in ENGLISH will be approved.
- If you have a problem check first the comments , maybe you will find the solution there.