Replace Older, New, Home Link With Image In Blogger





when you make a blog you can see the at the end of the post Older Posts, Newer Posts and Home Link was present , mostly people hate this thing because it was not look nice in you blog not fix with your template style or or see not good in look . so many peoples thik to change this links with images like you see in screenshot on in my blog . you can see that i am replace Older Posts Link with next button or Newer Posts Link with Previous button . you can also do same with your blogger . If You Also Replace Older, New, Home Link With Image In Blogger Then Follow This Steps :

How To Replace Older, New, Home Link With Image In Blogger ?

1. Go to Blogger > Template .
2. Backup Your Template .
3. Click On Edit HTML and click on ' Expand Widget Templates ' Box.
4. Find (Ctrl+F) 
<data:newerPageTitle/>

5. You can look code like :

<b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
    </b:if>
6. Now in this code paste this thing code before </a>
<img src='YOUR_IMAGE_URL'/>
YOUR_IMAGE_URL   Replace this with Your image Url .

For Older Post and Home Find (Ctrl+F)
 For older post -- > <data:olderPageTitle/>
For Home --> <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

After all Done Your Code look like :

<b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/><img src='YOUR_IMAGE_URL'/></a>
      </span>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/><img src='YOUR_IMAGE_URL'/></a>
      </span>
    </b:if>

    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/><img src='YOUR_IMAGE_URL'/></a>

Change all This ' YOUR_IMAGE_URL '  with Your Image Links .

Note - You can add your Next pic image in older page Link and Previous pic image in Newer Post Link .

7. Click on Save template button .

Go to Blog And See ..

Enjoy Blogging !!
If you have any question . please comment :]

0 comments:

Post a Comment

Share
 
Copyright © . TheFreeTrick - Info: Company Info | Contact Us | Privacy policy
Thetricksfree : Site map | DMCA | Powered by Blogger