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 :

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 :

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.

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%

Read more!

HTML and JavaScript inside blogger posts using custom display boxes

It is very difficult for anyone using Blogger blogs to show HTML codes and JavaScript inside the blog posts . You might have also seen people showing the scripts in small display boxes of fixed length and width. Now after applying this Blogger trick ,
you would be able to show HTML and JavaScript inside Blogger posts with custom display boxes .




Click on layout of the blog in which want show HTML or JavaScript and now select edit HTML .

Before you apply any Blogger hack ,remember to download and save your full template.

Now tick the expand widget templates and move onto the selection shown below ( towards the end of CSS code ) .





Otherwise you can press Cntrl+F and paste ]]></b:skin> on appearing search box then enter


Paste the following CSS code above that line .

pre
{
background:#efefef;
border:1px solid #A6B0BF;
font-size:120%;
line-height:100%;
overflow:auto;
padding:10px;
color:#000000 }
pre:hover {
border:1px solid #efefef;
}
code {
font-size:120%;
text-align:left;
margin:0;padding:0;
color: #000000;}
.clear { clear:both;
overflow:hidden;
}

The above code is for drawing a display box inside the Blogger post to show HTML and JavaScript.You can change the length ,width ,size and color of the box , back ground image etc. by editing the CSS code. After adding this code you can call the display box anytime into your post by following next step.








<pre>

"your HTML or JAVA script"

</pre>



In Blogger in draft , there would be a problem with this HTML and JavaScript display box . For fixing that,


Expand Post options from the Blogger text editor ( On the bottom left corner ) . From the compose settings, select Interpret typed HTML . Now everything would appear fine .



Before you add "your HTML or JAVA script " make it post friendly by following this link

Inside the box provided paste the script and click make it friendly

Now copy the generated code and paste between <pre> & </pre> to keep it inside display box




Making the script postable is the only requirement if you plan to show the HTML or Java Script alone , without a display box.



Like this post ?? Read how you can start a blogger custom domain

advertisementsK/p>

Read more!

Scripts- gAjax RSS Pausing Scroller (hosted)

Description: gAjax RSS Pausing scroller is a flexible RSS scroller that's extremely easy to set up to boot. Using the gAjax RSS Displayer script engine, there's nothing to install or host on your server. Furthermore, you can display results from multiple feeds intermixed, sort them in a variety of ways, specify how many entries to show at once, what portion of each entry to show etc. There is simply no more versatile script RSS scroller out there!
Demo: Look at my sidebar! (Recent Comments)

Step

1

: Insert the following code into the HEAD section of your page:
<head>code</head>

<script src='http://www.google.com/jsapi?key=YOUR-API-KEY' type='text/javascript'></script>
<script src='http://putratoo.googlepages.com/gfeedfetcher.js' type='text/javascript'></script>
<script src='http://putratoo.googlepages.com/gajaxscroller.js' type='text/javascript'>
</script>
<style type='text/css'>

.titlefield{ /*CSS for RSS title link in general*/
text-decoration: none;
}

.labelfield{ /*CSS for label field in general*/
color:brown;
font-size: 90%;
}

.datefield{ /*CSS for date field in general*/
color:gray;
font-size: 90%;
}

#example1{ /*Demo 1 main container*/
width: 316px;
height: 30px;
border: 1px solid black;
padding: 4px;
background-color: lightyellow;
}

#example2{ /*Demo 2 main container*/
width: 316px;
height: 180px;
border: 1px dashed black;
padding: 4px;
background-color: #EEEEEE;
}

#example2 div ul{ /*Demo 2 UL container*/
margin: 0;
padding-left: 18px;
}

#example2 div ul li{ /*Demo 2 LI that surrounds each entry*/
margin-bottom: 4px;
}

#example3{ /*Demo 3 main container*/
width: 316px;
height: 280px;
border: 1px solid navy;
padding: 4px;
}

#example3 div p{ /*Demo 3 P element that separates each entry*/
margin-top: 0;
margin-bottom: 7px;
}

code{ /*CSS for insructions*/
color: red;
}

</style>

IMPORTANT: Notice the "YOUR-API-KEY" portion at the very top of the code. You need to replace that with your free Google API Key. Go to this page and enter your site's domain (aka the domain you wish to display this script on). A key that is super-long is generated. Replace "YOUR-API-KEY" with this key!

The generate key will work on any page within the specified domain. If you need to use this script on another domain, generate another key.

Step

2

: Finally, to display the desired RSS feeds, just add the below sample HTML to your page, which illustrates 3 different examples using various feeds (Slashdot, Digg, CSS Drive, CNN etc):
Back to Page Elements => Add A Gadgat => HTML/JavaScript and Past this code:

<h3>"<code>Recent Comments</code>"</h3>

<script type="text/javascript">

var cssfeed=new gfeedpausescroller("example1", "example1class", 2500, "")
cssfeed.addFeed("CSS Drive", "http://www.yuljet.co.cc/feeds/comments/default") //Specify "label" plus URL to RSS feed
cssfeed.displayoptions("date") //show the specified additional fields
cssfeed.setentrycontainer("div") //Wrap each entry with a DIV tag
cssfeed.filterfeed(30, "date") //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()

</script>

<h3>"<code>Yul Jet</code>, "</h3>

<script type="text/javascript">

var socialfeed=new gfeedpausescroller("example2", "example2class", 3000, "")
socialfeed.addFeed("Yul Jet", "http://www.yuljet.co.cc/feeds/posts/default") //Specify "label" plus URL to RSS feed
socialfeed.displayoptions("label datetime") //show the specified additional fields
socialfeed.setentrycontainer("li") //Display each entry as a DIV
socialfeed.filterfeed(100, "label") //Show 95 entries, sort by label
socialfeed.entries_per_page(5)
socialfeed.init() //Always call this last

</script>

<h3>"<code>Other Post</code>"</h3>

<script type="text/javascript">

var newsfeed=new gfeedpausescroller("example3", "example3class", 2500, "_new")
newsfeed.addFeed("Pyruos", "http://www.pyruos.co.cc/feeds/posts/default") //Specify "label" plus URL to RSS feed
socialfeed.displayoptions("label datetime") //show the specified additional fields
newsfeed.addFeed("Movies", "http://www.pyruos.co.cc/feeds/posts/default") //Specify "label" plus URL to RSS feed
newsfeed.addFeed("Theme", "http://www.themesg.co.cc/feeds/posts/default") //Specify "label" plus URL to RSS feed
newsfeed.displayoptions("datetime snippet") //show the specified additional fields
newsfeed.setentrycontainer("p") //Display each entry as a paragraph
newsfeed.filterfeed(20, "date") //Show 15 entries, sort by date
newsfeed.entries_per_page(5)
newsfeed.init() //Always call this last

</script>

Read more!