In this tutorial i show you How to replace the Newer, Older
and Home Navigation links with image buttons. These Navigation links are
located at Beneath of Post(s) Section. If you are using the Numbered 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.
How to Replace Newer, Older & Home Navigation Links with
Image Buttons?
Important!!! Back Up your Template before Making any changes
in Template.
Go to Blogger Dashboard -> Design tab -> Edit
HTML tab
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/AVvXsEglYpO0RLIPTLXotWc9v9UYINRHMkxYfm5z4cpvxz_1NUmBevIo5f1eROoTEgzPTMYUw350J6_tifJSs3iepsKfb6p2D1ZU1_sj4v8dJjch-X3y1Pt_dHELDKKj5Nwur9vP_6_DLyd98_kl/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/AVvXsEjbYI5BhuLkFqeyJvnvifrf32lf3j7yPxy6nqregEEAP1qPkmKJDe2JWd45QWUhOAYxkReoUG7xrdmdtGsif3Jx5Kjk_f7_QXbjE3Q7zxtr7u6UzFn4sMrERyxr1RKdCbNJPmNQxAu0mLq2/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/AVvXsEjsKI_WKAbogXS2N1UVDOcvCO6trL0ardy-sraiLoU_83-ZrJjPyv3JbXwM-PVckqu7jgl7RVp9hsGmsQ2vWDsKkLftH1DeNnDWwMnPR_fzC5kGpUFXRx5iE1wccxmUAkJ8YbGnuzu4kbeR/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.
No comments:
Post a Comment