Jumat, 06 Mei 2011

Change Older Post and Newer Post With Buttons

Author : Djendral's Jack


Change Older Post and Newer Post With Buttons - Generally, the pagination on bloggers inscribed with Older Post or  Newer Post or in accordance with the selected language for your blog.
remove older post newer post
Have you ever seen a blog that pagination using button as shown below?
blogger pagination
The buttons use in pagination are considered more attractive for some bloggers, but many bloggers doesn’t like it. If you consider that the use of buttons on pagination is more interesting but don't know how to apply it to your blog, then blogger tutorial try to discuss it this time.

Create HTML Image Code for Button

The first step you should prepare is the icon for the button. You can create yourself or download on free icons website provider. Example for free icons website provider  is http://www.iconspedia.com. For example, I will use the icon as follows:
left arrow buttonhome buttonright arrow button
Upload those icons to bloggers. For how to upload images to blogger has been discussed in posts How to upload images in Blogger and how to create HTML code to display the image on the blog in Create HTML Code to Display Image on Blog article. For example, button code will be used are as follows:
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9nMx3Nfh-pC0Ixz49Rnx8ybtDK4klRKzO1AdopMZHSMYZu1Kpjqx4T6uWY_TDMtXECpy7V0mKLQw17Ouchxa-9e-8KfrsgzLrFzMEpCLVi_u72BRzL09sbtPFb5DEim3UHTWUrPPDafnP/s1600/left.png" />  <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv1iBdafBDSe2AAkRa9goSPpQMKL024TotKa2wwB2nWQKCMkFkxKUStnQit0ja7LgPm_JnF1-hxaSHaycdRbWSMeLFeUYVn3sC7t8wHCkbJykSVuOQoGQOclQDP3QCIf2KfTiHXgnXzCRZ/s1600/home.png" />  <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpUMK7gU5CyUYSSC2XeCa_qHup1TWb1wWHi9FRj-YoDVADhKsvcfKYvm1NB-DPih7FNW7VPSR3_Vi0MmJMlr0V6tNOzp-1T0EvDDQhjhU-V8pMwvE0eSDk2UAzI36dXzCWEAOzkVFJDCxv/s1600/right.png" />

Change Older Post and Newer Post with Buttons

Now it’s time to change your blog pagination code with button code which has been prepared.
Here are the steps:
  1. Please login to blogger with your ID
  2. Click Design
    blogger design
  3. Click Edit HTML tab
    blogger edit html
  4. Please backup your template first then click Download Full Template
  5. Check the small box next to Expand Widget Templates
    expand widget templates
  6. Find the following code: 
    <span id='blog-pager-newer-link'>       <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></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 + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>       </span>     </b:if>      <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
  7. Delete the code above and replace with the following code: 
    <span id='blog-pager-newer-link'>       <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9nMx3Nfh-pC0Ixz49Rnx8ybtDK4klRKzO1AdopMZHSMYZu1Kpjqx4T6uWY_TDMtXECpy7V0mKLQw17Ouchxa-9e-8KfrsgzLrFzMEpCLVi_u72BRzL09sbtPFb5DEim3UHTWUrPPDafnP/s1600/left.png" /></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 + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpUMK7gU5CyUYSSC2XeCa_qHup1TWb1wWHi9FRj-YoDVADhKsvcfKYvm1NB-DPih7FNW7VPSR3_Vi0MmJMlr0V6tNOzp-1T0EvDDQhjhU-V8pMwvE0eSDk2UAzI36dXzCWEAOzkVFJDCxv/s1600/right.png" /></a>       </span>     </b:if>      <a class='home-link' expr:href='data:blog.homepageUrl'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv1iBdafBDSe2AAkRa9goSPpQMKL024TotKa2wwB2nWQKCMkFkxKUStnQit0ja7LgPm_JnF1-hxaSHaycdRbWSMeLFeUYVn3sC7t8wHCkbJykSVuOQoGQOclQDP3QCIf2KfTiHXgnXzCRZ/s1600/home.png" /></a>
  8. Click Save Template
  9. Finish
If you didn't do any mistakes, then your pagination inscribed with Older Post, Newer Post, and Home should has been turned into buttons.
Change Older Post and Newer Post With Buttons is a post from: Blogger Tutorial for beginners

Another useful blogger tutorials:
|

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)

Powered byEMF Form Builder
Report Abuse