Sunday, 9 June 2013

Replace Blogger Home, Newer & Older Post Link With Image Tips and Tricks


Newer Older Posts Buttons

Blogger blogs by default comes with nasty page navigation  under all the posts in the sequence of "Newer Post", "Home" and "Older Post". If you are working to convert your blog into a professional website then you must think to change these ugly links with stylish images or buttons. It will not only enhance your blog design but also attract your readers to read more posts. Hence you can increase your blog page views by doing these simple changes. You are reading this tutorial so I can hope that you already see these types of fancy next and previous buttons on some big blogs. If those blog’s owners are using these types of buttons then you should also try them. Replace older and newer posts links with images to give your blog a professional touch. So, let's see how to do it.

Replace Newer and Older Posts Links with Image

Below are some simple steps that you have to follow.
  1. Go to your blogger dashboard.
  2. Navigate to Template > Edit HTML (first Backup Your Blog Template)
  3. Tick on Expand Widget Template box.
  4. Press Ctrl+F and search for

  5. <data:newerPageTitle/>
  6. and replace it with below code.
  7. <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio8vklyp1l6u3hPOm1j1TQ8scU0ckhB1dBX2R6dp3ufAtGBMoC_qQ7pLLhvfRnYTwkbDmtTgZAwRQUvjYNDVr8R1lRPkWOSpMxIA01wbXF6XjXy_460oB8fnTx3jEywRMIatLPPHgNGcqY/s400/previous.png"/>
  8. Now search for
  9. <data:olderPageTitle/>
  10. and change it with

  11. <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdk75z7Ku4pevnZbtpGh_uEQ8x4FHI5lLEWI9xa8tATCy62GfO5FeOlWAIHMsx6mXfTI9izImRLXGuVN-isBoeTDu0lqDs_QVg4ix9bUkXXXT6ooVw4eh1oqRVYmlRSuF86sPR-NI3Ewp5/s400/Next.png"/>

  12. Now again search for
  13. <data:homeMsg/>
  14. and replace it with

  15. <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFQEGl_Qfg9LR4OV8e-3dLw7DAPWPsCkOc3UuVSGq-mTkGzWod3A2usqjYwJLhUiTvqrNuOVIkF_b7lO3q4N4IxLMN_pa2d5-CBAWxkQqfd-VwGtd1_L9jJ0mPJqsmf9FOwczuDXRBZ1p8/s1600/home.png"/>

  16. Now click on save template button.
  17. You are done!
Customization: If you want to use another images according to your choice, then simply change the URL of the images with your own images.

No comments:

Post a Comment