Home        About        Contact

February 17, 2013

How to: Create a Home, Previous Post and Newer Post Button

As requested by Lexie of Oh Pink Candyfloss.


If you all can't do this, I'd be happy to help you! Email me or contact me! This is quite confusing. So, It's full of codes and HTML's. So relax after reading this post. Drink a cola or whatever.

1. Click on your 'template'
2. Click on 'Edit HTML' BACKUP YOUR TEMPLATE! IF ANYTHING GOES WRONG, YOU STILL HAVE YOUR OLD HTML BLOG. IT'S HARD TO FIX THE HTML. 
3. Click on 'expand widget templates'
Find for (Ctrl+F) 

This is for the 'Newer Posts' 

<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>

This is for the 'Older Posts'

<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/></a>
</span>
</b:if>

This is for the 'Home' button.

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>

If you want to change the text only. Here is how.

You need to REPLACE following parts in original code with ANY TEXT you like:
► replace <data:newerPageTitle/> with, for example NEXT POST
► replace <data:olderPageTitle/> with, for example PREVIOUS POST
► replace <data:homeMsg/> (only the first one) with, for example OMEPAGE

NEXT POST
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<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'>change it here!</a>
</span>
</b:if>



OLDER POST
<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'>change it here!</a>
</span>
</b:if>



HOME 
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'>Change it here!</a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>

</div>
<div class='clear'/>
</b:includable>


And if you want to use images you can follow this. 

This is the HTML for the image: <img src='URL ADDRESS'/>
Upload a photo on photo-bucket or where ever in the web and get the HTML image code. 

eplace <data:newerPageTitle/> with the pic for newer (next) posts
► replace <data:olderPageTitle/> with the pic for older (previous) posts
► replace <data:homeMsg/> (only the first one) with the pic for homepage...



Next Post
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<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'><img src='URL ADDRESS'/></a>
</span>
</b:if>


 Older Post
<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'><img src='URL ADDRESS'/></a>
</span>
</b:if>


 Home
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><img src='URL ADDRESS'/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>

</div>
<div class='clear'/>
</b:includable>




If the codes aren't working or my instruction isn't clear, please do leave a comment. 



5 comments:

  1. Thank you so much! I'm doing this straight away! xx

    ReplyDelete
    Replies
    1. Thanks! :) Can you be my 90th follower? I just became your follower. :) Sure no problem. I hope the HTML codes won't make your head ache. Hahah! :) Remember to back up for safety.

      Delete
    2. Thanks! I already follow your blog, it's awesome! xx

      Delete
  2. Thanks, this was really helpful! :)

    ReplyDelete

"The words of the reckless pierce like swords, but the tongue of the wise brings healing." ~ Proverbs 12:18