Today's tutorial is about ‘How to add page number widget in Blogger’.
Page number Navigation is really an awesome feature in Blogger.


Okay let’s start…………..
First of all…….who are bad at HTML they can easily add page number widget blogger. Just click the link and add your page navigation. :) It’s easy.

Now the complicated part for the advance users.

If you installed the widget you shouldn’t be here.. Scroll down to the label fix..

• Login to your Blogger Dashboard.
• Go to design>Edit HTML
• Keep unchecked “Expand Widget Templates”
• Now search

]]></b:skin>

and replace it with

.showpageArea a {

text-decoration:underline;

}

.showpageNum a {

text-decoration:none;

border: 1px solid #cccccc;

margin:0 3px;

padding:3px;

}

.showpageNum a:hover {

border: 1px solid #cccccc;

background-color:#cccccc;

}

.showpagePoint {

color:#333;

text-decoration:none;

border: 1px solid #cccccc;

background: #cccccc;

margin:0 3px;

padding:3px;

}

.showpageOf {

text-decoration:none;

padding:3px;

margin: 0 3px 0 0;

}

.showpage a {

text-decoration:none;

border: 1px solid #cccccc;

padding:3px;

}

.showpage a:hover {

text-decoration:none;

}

.showpageNum a:link,.showpage a:link {

text-decoration:none;

color:#333333;

}

]]></b:skin>

This is the CSS part if want you can modify it according to your need.

• Now the java script Part now find
  

</body>

and replace it with

<!--Page Navigation Starts-->

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<script type='text/javascript'>

var pageCount=5;

var displayPageNum=5;

var upPageWord =&#39;Previous&#39;;

var downPageWord =&#39;Next&#39;;

</script>

<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>

</b:if>

</b:if>

<!--Page Navigation Ends -->

</body>

As you can see,there are some customizable parameters in this code

var pageCount=5;

This code determines the number of posts that would be displayed per page.

var displayPageNum=5;

This code determines the number of additional page navigation numbers that will be displayed on the page.

var upPageWord =&#39;Previous&#39;;

var downPageWord =&#39;Next&#39;;

These two lines determine the text that would be shown for the previous page and next page respectively.

Label Fix

Now we have another problem.By default,the blogger label pages will show 20 posts.We will have to cut this down to the value that we gave for the variable pageCount (or the posts per page).For this we will have to edit our template

How to Edit the template to cut short the posts per page?

Go to the Edit HTML page and expand the Widget Templates

Now find each occurrence of

'data:label.url'

(including the quotes) and replace each of it with

'data:label.url + &quot;?&amp;max-results=5&quot;'

Here 5 is the number of posts to be displayed per page.

Now if you are using the label cloud widget by phydeaux3,then find

a.href = &#39;/search/label/&#39;+encodeURIComponent(t);

and replace it with

a.href = &#39;/search/label/&#39;+encodeURIComponent(t)+&#39;?&amp;max-results=5&#39;;

Here also 5 is the number of posts to be displayed per page.

Now you should have the Blogger Page Navigation workng perfectly on your blog. :)

Courtesy http://www.bloggerplugins.org

Blogger [Blogspot] is a place where we can blogging for free. Most of the blogger template is not necessary widget ready. Recent post widget is one of the most important things for blogger(hosted in blogger). When a visitor come to your site he wants to know what are the most recent post of your blog.I have discussed much buzzing.I've also written "How add Related post widget in blogger?"


Now come to the point "How add Recent post widget in blogger?"
Here’s the procedure on how to install the widget on your blog :

Step 1: First Login to your Blogger account.
Step 2: Go to Layout > add a gadget
Step 3: Now copy the code paste it in to javascript/HTML widget
<br /><script style="text/javascript" src="http://scraptoall.googlepages.com/recentposts.js"></script><script style="text/javascript">var numposts = 10;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script><script src="http://yoursitename.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script> <br />
Also, don’t forget to add your sitename in the last line of HTML code where I’ve mentioned “http://yoursitename.blogspot.com”.
I mean just replace it with your sitename and you are done.

The above code refers to recent 10 postings from your blog. But if you want to change it you change it by changing the number of "numposts" in the given code

Example - If you want to show 5 posts instead of 10 then simply change numposts to 5 which will become :- numposts = 5

Now every thing has done.
I wish your Happy blogging.

xHighlighter is a script which is written in javascript. It can insert colored code snippets on a web page using client-side javascript only. It is ideal tool for users of BLOGGER because we do not have server side resource to parse and highlight the code. And we are lazy, we do not want to write a lot of CSS to just post a code snippet.

Its a little twisting to make it properly.


Step 1: Download SyntaxtHighlighter From Here

Step 2: Extract the rar file. Upload Script and Style folder's file to any host or website which can be linked from your blog.

Step 3: Login to your Blogger account go to Setting> Template > Edit HTML make the following changes. Paste this code after <!-- end outer-wrapper -->

<link href='http://[YOUR HOST]/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/> <br /><script src='http://[YOUR HOST]/shCore.js' type='text/javascript'/> <br /> <br /><script src='http://[YOUR HOST]/shBrushCpp.js' type='text/javascript'/> <br /><script src='http://[YOUR HOST]/shBrushCSharp.js' type='text/javascript'/> <br /><script src='http://[YOUR HOST]/shBrushCss.js' type='text/javascript'/> <br /><script src='http://[YOUR HOST]/shBrushJava.js' type='text/javascript'/> <br /><script src='http://[YOUR HOST]/shBrushJScript.js' type='text/javascript'/> <br /><script src='http://[YOUR HOST]/shBrushSql.js' type='text/javascript'/> <br /><script src='http://[YOUR HOST]/shBrushXml.js' type='text/javascript'/> <br /> <br /><script class='javascript'> <br />//<![CDATA[ <br /> function FindTagsByName(container, name, Tag) <br /> { <br /> var elements = document.getElementsByTagName(Tag); <br /> for (var i = 0; i < elements.length; i++) <br /> { <br /> if (elements[i].getAttribute("name") == name) <br /> { <br /> container.push(elements[i]); <br /> } <br /> } <br /> } <br /> var elements = []; <br /> FindTagsByName(elements, "code", "pre"); <br /> FindTagsByName(elements, "code", "textarea"); <br /> <br />for(var i=0; i < elements.length; i++) { <br />if(elements[i].nodeName.toUpperCase() == "TEXTAREA") { <br /> var childNode = elements[i].childNodes[0]; <br /> var newNode = document.createTextNode(childNode.nodeValue.replace(/<br\s*\/?>/gi,'\n')); <br /> elements[i].replaceChild(newNode, childNode); <br /> <br />} <br />else if(elements[i].nodeName.toUpperCase() == "PRE") { <br /> brs = elements[i].getElementsByTagName("br"); <br /> for(var j = 0, brLength = brs.length; j < brLength; j++) { <br /> var newNode = document.createTextNode("\n"); <br /> elements[i].replaceChild(newNode, brs[0]); <br /> } <br />} <br />} <br />//clipboard does not work well, no line breaks <br />// dp.SyntaxHighlighter.ClipboardSwf = <br />//"http://[YOUR HOST]/clipboard.swf"; <br />dp.SyntaxHighlighter.HighlightAll("code"); <br />//]]> <br /></script> <br /> <br /></body> <br /></html> <br /> <br />
Step 4: Now you can post code snippet on BLOGGER using either "pre" or "textarea" tag.
Step 5: You can also See tutorial HERE how to use "textarea" or "pre" tag.

Now everything has done !