header ads

Replace Home, Older And Newer Navigation Links With Image Buttons

Unknown 7:36 AM
In our blog the most important page is our homepage because it is front view of our blog if it looks good then our user will also experience a professional work. So it is too much necessary to give professional touch to each and every part of our blog. If you have blog you may notice that if have large number posts in blog but all the posts are not listed on homepage. Only few number post like 9 or 10 posts  are on homepage and to reach other post their are navigation buttons like older post and newer post.
But these navigation links are very simple by default. So it is necessary to change them with stylish buttons. In this post i will teach you how you can change them easily and replace with your own image button. If you want to change these navigation button them follow the below steps carefully.

navigation button

Steps To Change Navigation Buttons.


  •  Go To Your Blogger Dashboard >> Template
  • Click the Edit HTML

Replacing Newer Link


  • Now search For the code which look like  <data:newerPageTitle/>
  • After finding similar code replace it with below code 

 <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKnku4yXvBPGxMCPDaKh2w_AayNuix_xr9eN0aiRDda-8cVdTASgRuwFB5rvvt-f-z62NfM8pq0WeFKWjS4g7zUvqrhmUZgJ1W8DHQdJxeQHiWtra7wuQbtlABD8jddJZ6j4tgKptCrzE/s85/Previous-blue2.png' style='border: 0 none;vertical-align: middle;'/>

Replacing Older Link


  • Now search For the code which look like <data:olderPageTitle/>
  • After finding similar code replace it with below code

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfohLMZ7sCGJ5vfnRDgrAqmCF7u4jpfbHIK9oSqKOsU4Z-6-8rH2bY0tdgrXCTPHLqA1qEgqerW5mUJfyAhm1vhlY500nHuaeg6hQD5595WGtVHgkAd2mBfM4_rhwQjQ6Ptm1ZXc8-L6Y/s85/Next-blue2.png' style='border: 0 none;vertical-align: middle;'/>

Replacing Home Link


  • Now search For the code which look like <data:homeMsg/>
  • After finding similar code replace it with below code

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrGUCIctpAmfYkIFSVn5nwggD7SEw3Ij_FAeqI5oWBitL2BOXHPMLczI9_F_1Es_mt3UJ9ro8O4YqFeuOBurultgGtlJSpVpfCVe1i6c3fi_4DzszgddmxmGCR1aG8GAJxQvwsTmxXaN8/s60/Home-blue2.png' style='border: 0 none;vertical-align: middle;'/>

  • After Replacing all codes with images, Then save your template and refresh your blog.

I hope you like this tutorial about replacing navigation buttons. If you have any doubt ask me in comments.
 
Tags:

Post a Comment

0 Comments