Monday, June 27, 2011

How To Add Images For Blogger Page Navigation

This is a cool trick for your blog.some Templates don't have
this icons. so you can add this icons as your like.
its easy , follow these steps.


1. Log it to blogger and go to Design > Edit HTML

2.Make sure you put check mark to “Expand Widget Templates

3.Find this code by using Ctrl+F 
(This is for previous page)


title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>


In this above code select  <data:olderPageTitle/> code and replace with below code 
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPzTuT0EzhSbY5gw6Tij6pumTry9OBdw3efEqd-0_incpVu2UB3Rz6IUFU1-V2HHBR6YgBax0mjSZz8-lHEMYtZ4dxWICfQWUpkgzC67bWK0FQTmRUCWUXB9Mhqmqs-ePOx-M0UlrqYeWq/s320/Button-Previous-icon.png'/>


4. Find this code by using Ctrl+F
(This is for Next page)

title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
    </b:if>


In this above code select  <data:newerPageTitle/> code and replace with below code 
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCLECe65U5N-HOvWg7X6BhbYnfBeO0K51wZ73ZoplB2IgJ1LMJFd-h-QJ4W9fxy9HrqqrtcDeTkNlAPjATpiAWTXVeL0ZuR6AE4gRZiT3xYNhGxm9DT7E3clRA4E4h0fKWOa163Jng9bRF/s320/Button-Next-icon.png'/>


5. Find this code by using Ctrl+F
(This is for Home page)

<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
In this above code select  <data:homeMsg/> code and replace with below code 
 <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2lzcCNHlw2H9fc2bE99ijcJZXfpDlkGfTQtXnA91Ix3tXYNf4osrCmbhkXLnhUgi18JQ-_CR98O9_ooSLA9OEoPQC-8TtfUjIfa509j1EFd829xSX3LQUSkXfIMWcIyfe6IYRhPg1NAM5/s320/Home.png'/>

6. Save your template.

7. Now you are done.
You can change icon URL as your like

0 comments:

Post a Comment