Saturday, June 27, 2009

Customizing Blogger post Navigation script





Blogger Blogs have default post navigation script which allows user to navigate between posts.It consists of ” older posts” , “Newer posts” and ” Home page” link. Since it’s default , no CSS codings are added for the navigation script. So in this post I will explain how to modify the script and to add background images and then aligning the older posts and newer posts links properly.



Know the script codes


Before explaining how to customize the codes , I would like to explain the tags involved in the blogger templates which control the blogger post navigation script.




CSS codes


Firstly, let us see the default code included in minima or Rounders blogger template.


#blog-pager-newer-link {

float: $startSide;

margin-$startSide: 13px;

}

#blog-pager-older-link {

float: $endSide;

margin-$endSide: 13px;


}


#blog-pager {

text-align: center;

}


instead of startside and endside we can have left and right respectively.

#blog-pager-newer-link : this code contains the css necessary for newer posts link

#blog-pager-older-link : this code contains the css necessary for older posts link

and #blog-pager controls the contains necessary for Home page links.


If you are using custom blogger template , then you will find something like this :


#blog-pager-newer-link {

padding-left : 20px;

border : none;

float : left;

}

#blog-pager-older-link {

float : right;

padding-right : 20px;

border : none;


}

#blog-pager {

padding : 0 15px 0;

text-align : center;

}

.blog-pager a {

color : #cc0000;

}

.blog-pager a:hover {


color : #cc0000;

}



XML tags which shows the post navigation links


Now let us see the default tags included in the blogger templates which shows post navigation links.To see this tag , you need to check ” expand widget templates” option in EDIT HTML page of the blogger template.


There you can find the following tag


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


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


</div>

<div class=’clear’/>

</b:includable>


As mentioned in the CSS codes itself,



  • <b:if cond=’data:newerPageUrl’> contains the code to show newer post links.


  • <b:if cond=’data:olderPageUrl’> contains the code necessary to show older posts link.

  • <b:if cond=’data:blog.homepageUrl != data:blog.url’> will contain the code necessary to show Home Page Link.


Hope now you know about the code which controls the Older post and Newer post links for post navigation. Now let us see how to customize this script to suit our blogger template.



Adding background image along with text


Let us see how to add Background image to the text Older Posts and Newer Posts.


Go to EDIT HTML SUBTAB and then search this following code or similar.


#blog-pager-newer-link {

float: $startSide;

margin-$startSide: 13px;

}

#blog-pager-older-link {

float: $endSide;

margin-$endSide: 13px;

}



#blog-pager {

text-align: center;

}


Now replace the whole code with



#blog-pager-newer-link {

background : url(http://i43.tinypic.com/11bro1s.jpg) no-repeat left 0%;

padding-left : 20px;

border : none;


float : left;

}

#blog-pager-older-link {

float : right;

background : url(http://i44.tinypic.com/2n6dirp.jpg) no-repeat right 0%;

padding-right : 20px;

border : none;

}

#blog-pager {


padding : 0 15px 0;

text-align : center;

}

.blog-pager a {

color : #cc0000;

}

.blog-pager a:hover {

color : #cc0000;

}


In that you can change the background images and then customize the color of the text. That’s it now save your template , you can find something like this :

post navigation image



Replace Image with Background images


To replace the “older posts” , ” Newer Posts” and “Home” text with background images , follow these simple steps.


replace the css code for blog post navigation widget with this code



#blog-pager-newer-link {

padding-left : 20px;

border : none;


float : left;

}

#blog-pager-older-link {

float : right;

padding-right : 20px;

border : none;

}

#blog-pager{

padding:50px 10px 10px 10px;


text-align:center;

}

.blog-pager a{

color:#A10000

}

.blog-pager a:hover{

color:#15FFED

}


and then save your template. Now check ” Expand Widget Templates” option and now replace the



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


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


</div>

<div class=’clear’/>

</b:includable>



with this code


<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 alt=’techieblogger.com’ src=’http://i69.photobucket.com/albums/i42/queenofdreamsz/NextIcon.gif’ title=’Newer Post’/></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’><img alt=’Techie Blogger’ src=’http://i69.photobucket.com/albums/i42/queenofdreamsz/BackIcon.gif’ title=’Older Post’/></a>


</span>

</b:if>


<b:if cond=’data:blog.homepageUrl != data:blog.url’>

<a class=’home-link’ expr:href=’data:blog.homepageUrl’><img alt=’Techie Blogger’ src=’http://i85.photobucket.com/albums/k47/bongmalove/icon/home.gif’ title=’Home Page’/></a>

<b:else/>


<b:if cond=’data:newerPageUrl’>

<a class=’home-link’ expr:href=’data:blog.homepageUrl’><img alt=’Techie Blogger’ src=’http://i85.photobucket.com/albums/k47/bongmalove/icon/home.gif’ title=’Home Page’/></a>

</b:if>

</b:if>


</div>


<div class=’clear’/>

</b:includable>


You can change the images included with your own blog navigation images. After that save your template and check your blog. You can find a blog navigation links something like this :



post navigation


Show blog post navigation above posts title


You can also show the blog post navigation script above post title too. In order to implement this hack , go to EDIT HTML page of your blog and check ” EXPAND WIDGET TEMPLATES” option. Now search this tag in your template.



  • <b:includable id=’main’ var=’top’>



Now paste the following code immediately below it




  • <b:include name=’nextprev’/>



Troubleshooting problems with blog post navigation script


Few might have noticed that the Blog post navigation links will be misaligned sometimes. Newer post , Older post and Home page links will get together. So it means that the CSS codes are missing for the file. To overcome this problem , just copy and paste the corresponding CSS code you need above ]]></b:skin> .


Blog post navigation missing



Sometimes the blog post navigation may be missing in your blog. It’s because the blog post navigation code may be missing in your template. To overcome this problem , search this tag in your template with ” expand widget templates” option enabled.


<b:include name=’nextprev’/>


if the tag is missing , then add the above tag in your template below <b:includable id=’main’ var=’top’> as shown in the image.


troubleshooting Customizing Blogger post Navigation script


Hope this post will be helpful for all blogger newbies. If you need any other customization then feel free to ask in comment form below.


Popularity: 7%


Related Posts by Categories



Widget by Hoctro | Jack Book

5 comments:

ភី ឧត្តម said...

អាយូយយ!! ច្រើនណាស់ តាពិនហ្នឹងអស់ម៉ោងដេកហើយខ្ញុំ តែខ្ញុំត្រូវតែធ្វើអោយបានចំរេច ក្មះគេណាស់ខ្ញុំអត់ចេះអី ((អាយីង)) អអអគូណណ!!

ភី ឧត្តម said...

««កាលពីព្រេងនាយមានរឿងមួយ រឿងនោះគឺ!»»
មានមនុស្សពីរនៅផ្ទះជាប់គ្មា ​ (ពូកគេស្គាល់គ្មាយូហើយ) នាថ្ងែមួយពីរនាក់នោះក៏បានជួបគ្មា ដោយចែដន្នហើយមាននម្នាក់ស្រែកសួរថា
មនុស្ស A​»
មេកហើយ!! ដល់ណាហ្នើយយើង?
មនុស្ស B ​»
គ្មានអី ស្រួលទេវើយ គេអោយតែងថ្ទាំងតែងថ្ទាំងហើយ នូវអត់ចេះទៀត សង្ស័យតាគេឈប់ប្រាប់ផង
មនុស្ស A »
អើ!! សារីយើង ទាល់ ១+១=២ ហស៎! បានចេះ តស់ទៅផ្េទះវិញ សុី បាយកក
រួចពីរនាក់នោះក៏ដើរទៅផ្ទះដោយទឺកមុខដូចច្កូតបាត់ទៅ។ ចាប់ពីពេលនោះមកគេទាំថ្វេ ក៍បានប្រកបមុខរប រើសអេតចាយជា Primary Job​ ទៅ !!!

​​​​​

Khmer iT, Blogger Template, Worpress Themes, Movie, Music download said...

អរគុណ​ :) សំរាប់​រឿង​កំប្លែង។ តែចង់សួរមួយ​ដាក់​រឿង​ហ្នឹង​ចង់​សំដៅ​លើអ្វីហ្នឹង? ខ្ញុំដូចជាមិនយល់សេចក្ដីសោះ មើលបង​ប្រុសជួយបក​សេចក្ដី កុំប្រើរឿងកង្កប់ន័យ ខ្ញុំអានមិនយល់​ទេ

ភី ឧត្តម said...

តាមពិតទៅរឿងនេះគ្មានអីទេ គឺខ្ញុំនិនាយពីខ្លួនខ្លុំនិងមិត្តខ្ញុំម្នាក់ ដែលព្យាយាមបង្កើត Web blog អត់បានល្អ ហើយក៍ទៅរកជំនួយផ្សេងៗ រកបានហើយធ្វើមិនកើតទៀត។ សរុបមក គឺខ្លុំបន្ទោសខ្លួនឯង តែចង់អោយមានរឿងកំប្លែងៗទៅ។ OK take a time to Visit my blog ~~www.khmerzip.blogspot.com~~ ផង I'll upgrade to become like Pro

ភី ឧត្តម said...

zZZZ :-/ There are to many code (needed and unneeded in 1 place).
Would you please separate the code for copies? i mean I'll see only code for copy and past it into my HTML files.

CUZ I think that's it make me clear and easy to collect all needed code . Thanks for your shared. :) I'm noob

Post a Comment

 

©2009 daily news | by TNB