Usually the blogger template only provides the "Older Posts" or "Newer Posts" link to let the reader navigate, and browse to another page on the site, archives, categories and page labels. Unlike a blog like wordpress that supports plugins to customize the page navigation links to the page number list to make it user friendly.

However, it is still possible to modify and replace the typical classical "Posts Older" and "Newer Posts" navigation links on Blogger blogs to navigation numbered pages. You can see the demo here, the navigation links consist of page numbers, next page and previous page (if applicable) is the display on Blogger blogs are not "older Items" and "Newer Items" link text.

To change your link navigation to page number on your Blogspot blog
simply add the script below before ]]></b:skin> :

.showpageNum a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
border:1px solid #999;
-webkit-border-radius:3px;-moz-border-radius:3px;
background: #ddd;
}

.showpageOf {
margin:0 8px 0 0;
}
.showpageNum a:hover {
border:1px solid #888;
background: #ccc;
}

.showpagePoint {
color:#fff;
text-shadow:0 1px 2px #333;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
-webkit-border-radius:3px;-moz-border-radius:3px;
border:1px solid #999;
background: #666;
text-decoration: none;
}

Second, you need to replace </body> with :

<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=4;
var numshowpage=5;
var upPageWord ='Prev';
var downPageWord ='Next';
</script>
<script src='http://all-in-one-blogger-widget.googlecode.com/files/pagenaviv202-min.js' type='text/javascript'></script>

</body>

Source : Abu Farhan

First, go to Layout -> Edit HTML Tab

Insert this code before </style> :

.rbbox{border: 1px solid rgb(192, 192, 192);padding: 5px; background-color: #f0f0f0;-moz-border-radius:5px; margin:5px;
}

.rbbox:hover{background-color: rgb(255, 255, 255);
}

Save templates.

Second, check 'Expand Widget Templates'

Note :
If your template use 'Read more', there will be two <data:post.body/>
Insert the script below the last <data:post.body/> on your template.

Look for this code <data:post.body/> then insert the code below that :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<span style="font-weight:bold;">Related Article :</span>
<DIV class='rbbox'>
<DIV style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<DIV id='albri'/>
<SCRIPT type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 5;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 2;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;albri&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</SCRIPT>
</DIV>
<script type="text/javascript">RelPost();</script>
</DIV>
</b:if>

Save Template.

Many Bloggers were asking how to create a rolling label or tag cloud, so I wanna share how to create it.

This the following steps :

1. Sign in to Blogger.com
2. Select layout tab
3. Select Edit HTML
4. Check Expand Widget Templates
5. Copy-paste code after this code
<b:section class='sidebar' id='sidebar' preferred='yes'>

<b:widget id='Label129' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://elmubarok.fileave.com/labelclouds.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.marewa.info'>marewa</a></div>
<script type='text/javascript'>
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "180", "100", "7", "#000000");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0xfffffff");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='24'><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

7. Save Template

Note:

1. The numbers 180 and 100 width and height of the label cloud, you can change the size of your blog's sidebar
2. Color Code #000000 (Black) is the color of labels Clouds layout, change the color code in accordance with you want.
3. Code FFFFFF (White) is the code of the text will appear, change its color, the color of your choice
4. 100 is the speed in the Clouds label, the higher the number, the faster Clouds will rolling
5. 24 is a measure of size of the text that appears in the label Clouds.

Source : rasiqzonetwork

Usually a blog that contains HTML tutorials required a HTML Encoder, such as my blog. In this post I will discuss one of the easiest ways to add script / HTML code in your post, this will add the encode HTML button in the message column on bloggers.

So you don't need open Web sites to code HTML. All Javascript, XML and HTML code can be encoded this way. Only in this case only for the browser Firefox, cause the applications from Mozilla plugin will be installed to enable this button encode HTML.

Some steps that you need to do:

1. Install Greasemonkey. After the first installed restart Firefox browser.

2. Install the Javascript by clicking on the link here.

Then click install and automatically installed in a column posted on Blogger, as shown below.


IF you wanna use it you, simply enter the script you want encoded into the post box and highlighted,


then click the 'HTML ENCODE SELECTION' button. Finish! :)