View Basnet Blog In Any Colours
  • CREATE A FREE BLOG

    Creating a blog is very easy than you might be thinking. You don't have to be a computer or programming genius, clear instructions provided in this blog....

  • FREE MINIMA TEMPLATE

    Unlike previous two column Minima blogger template this new three column Minima blogger template has been edited for better results. New features for better seo has been....

  • COLOUR GENERATOR

    Generate matching color schemes to use it while editing your blog or a website. Like never before with this free colour code generator tool....

  • ADVERTISE HERE

    Now you can reach our highly involved audience and generate huge Traffic. Its simple Promote Your Business On Basnet Blog and see the difference.

  • MAKE MONEY

    Now you can reach our highly involved audience and generate huge Traffic. Its simple Promote Your Business On Basnet Blog and see the difference.

8 May 2012

1 CHANGE BLOGGER NAVIGATION LINKS


In my previous tutorial categorized in blogger tricks I have written about replacing default page navigation links in blogspot blog similar to Wordpress style Older Posts Link, Home Link and Newer Posts Link with Older Posts Image Link, Home Image Link and Newer Posts Image Link respectively, you can refer the article How to Change Newer, Older & Home Navigation Links with Image Buttons. Similarly today, I will guide you on changing those page navigation links which I have also applied for my blog tricks and tips tutorial blog Basnet Blog. First of all check the location of the link I am writing about if you are not sure than refer the image below. Yes, at the bottom of the blog page it shows two links: “Older Posts”, “Home” and “Newer Posts“. Using some HTML edits we can rename these navigation links and can also customize them to look different from other blogs online.
................................................................................................................
Suggested Reading
................................................................................................................ 
Replace "Older Posts","Home","Newer Posts" with Images

................................................................................................................
Things to Note
................................................................................................................
  • Important!!! Back Up your Template before making any changes in the Template. Download the full template and save it so that you can get back the original template even if something goes wrong while editing the template. If you don’t know how to download the template of your blogger blog template read this How to Download Blogger Template ?
  • I have used Minima template in this tutorial. If you don't have Minima installed, you can simply install it by going to this link Minima template download. Please also make sure that it is not mandatory to install Minima. Compulsion of download is to those individuals who cant trace the above given codes.

Step wise instructions on how to replace the Newer, Older and Home Navigation links with image buttons in blogspot hosted blogger blog.
................................................................................................................
Steps to add navigation links (Old Interference) 
................................................................................................................
1. Log in to Blogger dashboard if not already logged in.
2. Now Navigate to Design > Edit HTML

................................................................................................................
Steps to add navigation links (New Interference)
................................................................................................................
1. Log in to Blogger dashboard if not already logged in.
2. Now Navigate to click down arrow before View Blog Link
3. Select Edit Html and click on proceed.

"Directly editing HTML may affect the way some features work and is only recommended for advanced users. Editing template HTML may unpredictably affect other Blogger features.We recommend using the Template Designer first, where you can Add CSS under the Advanced section"

................................................................................................................ 
Changing Links With Text
................................................................................................................
STEP 1: Now search for the below codes in your template.

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

 STEP 2: Search for these codes in red.

<data:olderPageTitle/> Refers to Older Posts in your template

<data:homeMsg/> Refers to Home in your template.

<data:newerPageTitle/> Refers to  Newer Posts in your template

Change this set of codes to whatever text you desire. See for example below:

<data:olderPageTitle/> Read Older Posts

<data:homeMsg/> Go To Home Page

<data:newerPageTitle/> Read Newer Posts

................................................................................................................ 
Changing with Images
................................................................................................................
Replace "Older Posts","Home","Newer Posts" with Images

................................................................................................................ 
Changing with CSS Customization
................................................................................................................
STEP 1 : Search for these codes in red.

#blog-pager-newer-link {
float: $startSide;
}

#blog-pager-older-link {
float: $endSide;
}

#blog-pager {
text-align: center;
}

Replace the above code in red with the following:
#blog-pager-newer-link {
float: $startSide;
}

#blog-pager-older-link {
float: $endSide;
}

#blog-pager {
text-align: center;
font: $navfont;
}

#blog-pager a, #blog-pager a:visited {
color: $navcolor;
background: $navbgcolor;
padding: 5px;
}

#blog-pager a:hover {
color: $navhovercolor;
background: $navhoverbgcolor;
padding: 5px;
}
STEP 2: Search for these codes in red.

/* Variable definitions
====================
<Variable name="bgcolor" description="Page Background Color"
type="color" default="#fff" value="#ffffff">

Add this set of codes
<Variable name="navcolor" description="Links Text Color"
type="color" default="#fff" value="#ffffff">
<Variable name="navhovercolor" description="Links Text Hover Color"
type="color" default="#000" value="#000000">
<Variable name="navbgcolor" description="Links Background Color"
type="color" default="#FE6602" value="#FE6602">
<Variable name="navhoverbgcolor" description="Links Background Hover Color"
type="color" default="#FFD25F" value="#FFD25F">
<Variable name="navfont" description="Links Font"
type="font"
default="normal normal 15px 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 15px 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">

Simply note that below given CSS code and variables are responsible for the style and look of navigation links. Its easy you can go to the variables codes and start editing the "Older Posts" & "Newer Posts" links, colors, fonts. You can edit Links Text Color, Links Text Hover Color, Links Background Color, Links Background Hover Color, Links Background Color, Links Background Hover Color, Links Font.

1 comment:

  1. Thanks this is helpful for me and continue helping others
    For any Blogger infor visit
    FAQ Blogger Tricks
    My Website is http://faq-bloggear.blogspot.com

    ReplyDelete

This Is a DO FOLLOW BLOG. So Leave Your valuable Comments and get a Quality BacklinkS and of course high Google Page Rank.

CONDITIONS APPLY:

1. Comments made simply to get backlink profit WILL BE DELETED.

2. We don't accept Spam Comments.

3. We don't accept more than 1 link in comments post body.

4. Please refer to TERMS AND CONDITIONS for more information on posting comments.

 

BASNET BLOG | Copyright © 2011 | Powered by Blogger | Blog Designed By Yogen Basnet

Get Latest Updates: Subscribe Now | Like Us Facebook |