Editing blog pager (Home, Newer Post &Older Post links)

Do you know something about Page of Blog.You may find them at below of post.There are 3 types of pager.They are Home,Newer post and Older Post.They acts as a link because when you click them they will redirect you to another page.Today we are customizing the pager in our own Styles.They are be done by adding Html code,Adding or editing CSS.We are customizing by following steps.

• Identifying Pager Code in HTMl.
• Changing pager to image.
• Adding background for pager
• Changing sides of Pager.
• Changing title of pager
• Removing pager.

Customizing Blog Pager.

The goal of our is to make pager is looks attractive to visitor.We just need to focus how we can make pager more attractive.

I.Identifying pager HTML code.

Customization cannot be done with out Identifying pager.To identify do this.

1. Go to Blogger.com
2. Click on design or Template
3. Click on Edit Html
4. Tick on expand widget.
5. Find the Highlighted Codes from below codes.

   <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'><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 + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
         </span>
       </b:if>
   
       <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
   
   

6. Do you have noticed the Highlighted lines.You may have if not find the lines 4,10,14 from the code.Different template may have different customization so just find the lines 4,10,14 only.

The main tag of the line 4,10,14 are for.

Pager main Tag list	Pager Name
<data:olderPageTitle/>	Older pager Title
<data:homeMsg/>	Home
<data:newerPageTitle/>	Newer Pager Title

The pager tag list are responsible for showing the text.

II.Changing Pager to Image.

Do you want to make pager beautiful by replacing with image.Then your can do so.Just you need to change the Pager Tag list.To Change image replace pager main Tag with this.

<img src="YourImageUrlHere" />

Replace ImageUrlHere with the direct link of your Image.You can get direct link by uploading own image to photo hosting server like photobucket.com .You can use picasa as well.

III.Changing Pager Title.

Do You want to Change pager Title line Newer Post to Newer entries.You can do so.Just replace the Pager Main Tag list with your own text.

Eg.  <data:olderPageTitle/>  to  <data:olderPageTitle/> To older entries.

You may want to add special character like <>/ etc.Then you need to encode it.For encoding just go to HTML Encoder.Paste the code there and get the encoded got and use it in changing page to your own text.If you don’t encode you may damage your template.

IV.Adding background to Pager.

You may want to design your color with your Blog pager.For that just you need to add simple CSS in Html code.The CSS of Three pager are

CSS Pager Code	Pager Name
.blog-pager-older-link	Older pager Title
.home-link	Home
.blog-pager-newer-link	Newer Pager Title

V.To add Background with HTML color Code.

If you want to Add background by coloring just add color code like this.

.blog-pager-newer-link {background: #91C278;}

There you can see the color code #91C278 you can change that by replacing the code.You can get that color code Form my blog.For older just change CSS page code i.e changing newer to older.

To add image with Url background

Instead of using  {background: #91C278;}  use this  {background: url(YOUR_IMAGE_URL) no-repeat;} change YOUR_IMAGE_URl to your direct link of image.

VI.Changing sides of Page.

Do you want to switch the side of newer pager and older pager.it is very easy.In HTML editor find the below code .

#blog-pager-newer-link {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #CCCCCC;
    float: left;
    padding: 7px;
}
#blog-pager-older-link {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #DEDEDE;
    float: right;
    padding: 7px;
}

Just change from float:left to right and right to left.of the code.

VII.Removing pager.

You can remove pager as your wish.For this place the code  .home-link {display:none} just before ]]></b:skin> .For removing all pager add this #blog-pager {display:none} Your work will be done.

Subscribe At free
Thank you for visiting FacebookSinker.blogspot.com. Please don't miss any of the updates by subscribing to our RSS feed or email updates.