Tuesday, 16 October 2012

How to Replace Newer, Older & Home Navigation Links with Image Buttons

How to Replace Newer, Older & Home Navigation Links with Image Buttons


How to Replace Newer, Older & Home Navigation Links with Image Buttons
In this tutorial i show you How to replace the Newer, Older and Home Navigation links with image butt ons. These Navigation links are located at Beneath of Post(s) Section. If you are using theNumbered Page Navigation widget, these links are visible on each post only. because the numbered page navigation is not works on single post page. and by adding these image buttons, there is no effect takes on page navigation widget.
The Icons are used in this tutorial is Designed by David Lanham – Amora Icons, You can use you own icons.

HOW TO REPLACE NEWER, OLDER & HOME NAVIGATION LINKS WITH IMAGE BUTTONS?

Important!!! Back Up your Template before Making any changes in Template.
  1. Go to Blogger Dashboard -> Design tab -> Edit HTML tab
  2. Click on  Expand Template Widgets checkbox

REPLACING THE OLDER LINK

Search for <data:olderPageTitle/> and replace with below code
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM_itH1fAOftNRh9n7AnctoPdjY1X6A2Z2tz8h5NUyYnV4ZFgwr1EF4tOhuou8rInJuaGtTpy_zrsStt70qV-nK5RVQT662AUsDjz2gUspb7D7Ues1AkwjG73gI1MvKr8Y0vNu6HlrhfQd/s1600/w2b_next.png' style='border: 0 none;vertical-align: middle;'/>

REPLACING THE NEWER LINK

Search for <data:newerPageTitle/> tag and replace with below code
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRtfdxSTGhZ1IWVlkl7BDPtqnx4vO2-_ABprcGPyb86WT8WU2CLQZcQEZBUrempp1VU0YxoznIQESeAveTYw8YHtUpikeDchjgrdvM2iel82Pb8oJzkwsgaHe8HK5-aE0GJzmOkAVIdF8j/s1600/w2b_prev.png' style='border: 0 none;vertical-align: middle;'/>

REPLACING THE HOME LINK

Search for <data:homeMsg/> tag and replace with below code
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheXS6orSZek55bUl8i3BsKiDIu0xUADcQHPp6JplHGRUraVcwbDAlf5sipZi0-OuorxNjnKGdix4LlJ67U3CAr5Z0FdW4AlrJPSWJwtnf9we6fPvou1ubnxmI8nRymVggrCRSgkaDF2104/s1600/w2b_home.png' style='border: 0 none;vertical-align: middle;'/>
You can change your own icons by replacing the image Url in the above three codes.

0 comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...