September 19, 2009

Page Number Navigation For Blogger

Blogger uses a pretty limited navigation features that only display “Older Posts” or “Newer Posts” link to let readers navigate and browse to other pages on homepage, archive, category and label pages.

However, it’s still possible to change and replace to the Page Number Navigation, as illustrated in figure by using a CSS and JavaScript hack wrote by Mohamed Rias and recenly js was updated by Abu Farhan.
Thanks to Mohamed Rias and Abu Farhan.

To add the “new” navigation link with Page Number Navigation to Blogger,
follow the guide below:
Login to Blogger account Dashboard.
Click on the Layout link for the blog that you want to modify (if you’re viewing the blog and logged in to Blogger or Google Account, just Click on Customize on the Next Blog toolbar).
Go to Edit HTML tab (there is no need to expand widget templates).
Search for the following line:

]]></b:skin>

Copy the following CSS code and paste or append the code above the line:

.showpageArea {padding: 0 2px;margin-bottom:10px;margin-top:10px;
}
.showpageArea a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
.showpageNum a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #333;
color: #fff;
background-color: #000000;
}
.showpage a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;
}
.showpageNum a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

Next, search for the following line of code in the template’s HTML code:

<b:section class=’main’ id=’main’ showaddelement=’no’>
<b:widget id=’Blog1′ locked=’true’ title=’Blog Posts’ type=’Blog’/>
</b:section>

Add and append the following JavaScript code right after the </b:section> line:

var pageCount=7;
var displayPageNum=5;
var upPageWord =’Previous’;
var downPageWord =’Next’;

function showpageCount(json) {
var thisUrl = home_page_url;
var htmlMap = new Array();
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= ”;
var upPageHtml =”;
var downPageHtml =”;

for(var i=0, post; post = json.feed.entry[i]; i++) {

var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);

var title = post.title.$t;

if(title!=”){
if(itemCount==0 (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!=”) postNum++;
htmlMap[htmlMap.length] = ‘/search?updated-max=’+timestamp+’&max-results=’+pageCount;
}
}
itemCount++;

}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
upPageHtml = ‘<span class="showpage"><a href="/">’+ upPageWord +’</a></span>’;
}else{
upPageHtml = ‘<span class="showpage"><a href="’+htmlMap[p]+’">’+ upPageWord +’</a></span>’;
}

fFlag++;
}

if(p==(thisNum-1)){
html += ‘<span class="showpagePoint">’+thisNum+’</span>’;
}else{
if(p==0){
html += ‘<span class="showpageNum"><a href="/">1</a></span>’;

}else{
html += ‘<span class="showpageNum"><a href="’+htmlMap[p]+’">’+ (p+1) +’</a></span>’;
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = ‘<span class="showpage"> <a href="’+htmlMap[p]+’">’+ downPageWord +’</a></span>’;
eFlag++;
}
}
}

if(thisNum>1){
html = ”+upPageHtml+’ ‘+html +’ ‘;
}

html = ‘<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages (‘+(postNum-1)+’)</span>’+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
}

if(postNum==1) postNum++;
html += ‘</div>’;

var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html =”;
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html =”;
}

if(blogPager){
blogPager.innerHTML = html;
}

}

function showpageCount2(json) {

var thisUrl = home_page_url;
var htmlMap = new Array();
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= ”;
var upPageHtml =”;
var downPageHtml =”;

var labelHtml = ‘<span class="showpageNum"><a href="/search/label/’+thisLable+’?&max-results=’+pageCount+’">’;
var thisUrl = home_page_url;

for(var i=0, post; post = json.feed.entry[i]; i++) {

var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);

var title = post.title.$t;

if(title!=”){
if(itemCount==0 (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!=”) postNum++;
htmlMap[htmlMap.length] = ‘/search/label/’+thisLable+’?updated-max=’+timestamp+’&max-results=’+pageCount;

}
}
itemCount++;
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
upPageHtml = labelHtml + upPageWord +’</a></span>’;
}else{
upPageHtml = ‘<span class="showpage"><a href="’+htmlMap[p]+’">’+ upPageWord +’</a></span>’;
}

fFlag++;
}

if(p==(thisNum-1)){
html += ‘<span class="showpagePoint">’+thisNum+’</span>’;
}else{
if(p==0){
html = labelHtml+’1</a></span>’;
}else{
html += ‘<span class="showpageNum"><a href="’+htmlMap[p]+’">’+ (p+1) +’</a></span>’;
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = ‘<span class="showpage"> <a href="’+htmlMap[p]+’">’+ downPageWord +’</a></span>’;
eFlag++;
}
}
}

if(thisNum>1){
if(!isLablePage){
html = ”+upPageHtml+’ ‘+html +’ ‘;
}else{
html = ”+upPageHtml+’ ‘+html +’ ‘;
}
}

html = ‘<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages (‘+(postNum-1)+’)</span>’+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
}

if(postNum==1) postNum++;
html += ‘</div>’;

var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html =”;
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html =”;
}

if(blogPager){
blogPager.innerHTML = html;
}

}

</script>

1 : var pageCount=7;
The Pagecount represents number of posts to be shown in single page. Change the digit to show as many pages you want.

2 : var displayPageNum=5;
The digit represents number of pages to be listed.
Modification Step for Label :
Add Label Gadget (Layout –> page elements –> Add Gadget –> Select Labels)
From Layout –> Edit HTML . Don’t Forget to backup your template (Download Full Template)
Search this code

<a expr:dir=’data:blog.languageDirection’ expr:href=’data:label.url’><data:label.name/></a>

Change to this code

Posted in Blog
Leave a comment

September 10, 2009

Show related posts below each blogger post

Its essential tactic to show related Posts in Blogger, to improve usage statics and page views. If a definite number of related articles are shown at the bottom of each posts, there is chance for the reader to click on those links and head over to the next page. Related posts widget on Blogger depends on how you name your post labels .

1. Open your Blogger template’s Layout and select Edit HTML .
2. Download full template for future use .
3. Click on expand widgets templates.
4. Press Cntrl+F and search for

</head>

and insert the following script above that line

Anything you post under this line would appear at end of each posts.
6. Now paste the following code below that line.

<b:if cond=’data:blog.pageType == “item”‘>
<div id=”related-posts”>
<h2>Other Related Posts on <b:loop values=’data:post.labels’ var=’label’><data:label.name/><b:if cond=’data:label.isLast != "true"’>,</b:if><b:if cond=’data:blog.pageType == "item"’>
<script expr:src=’"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"’ type=’text/javascript’/></b:if></b:loop> </h2>
<script type=’text/javascript’> removeRelatedDuplicates(); printRelatedLabels(); </script>
</div></b:if>

Now if everything went fine, your post pages would show related articles depending on the applied label. You can customize the color and font size of the widget by editing the bold elements in the CSS code.

#related-posts .widget h2, #related-posts h2 {
color : #333333;
font-size : 13px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}

The default number of related posts are 5 as set on the code. You change it by editing max-results=5 in the JavaScript code to a suitable value.

Posted in Blog
6 Comments

September 10, 2009

Limit number of posts displayed in label page blogger

By default, readers can only read the recent 20 posts on a Blogger blog label before clicking on “Older posts” to read the rest in case of this label with more than 20.
If you do not like to see them at the same time you can limit the number of posts for each label by reading the instructions below.

Log in your Dashboard blog, click Layout tab | Edit HTML and check the “Expand Widget Templates” box. Please backup your template before any change. Now, pay attention to the gadget labelIDs. If you have only one label on the blog layout, this is a keyword “id=’Label1′” for finding it out (Use Ctrl + F to show the search box):

<b:widget id=’Label1′ locked=’false’ title=’Label Title’ type=’Label’>
<b:includable id=’main’>
<b:if cond=’data:title’>
<h2><data:title/></h2>
</b:if>
<div class=’widget-content’>
<ul>
<b:loop values=’data:labels’ var=’label’>
<li>
<b:if cond=’data:blog.url == data:label.url’>
<span expr:dir=’data:blog.languageDirection’><data:label.name/></span>
<b:else/>
<a expr:dir=’data:blog.languageDirection’ expr:href=’data:label.url’><data:label.name/></a>
</b:if>
<span dir=’ltr’>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>
<b:include name=’quickedit’/>
</div>
</b:includable>

When you have found, replace with code as below:

<b:widget id=’Label1′ 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’>
<ul>
<b:loop values=’data:labels’ var=’label’>
<li>
<b:if cond=’data:blog.url == data:label.url’>
<span expr:dir=’data:blog.languageDirection’><data:label.name/></span>
<b:else/>
<a expr:dir=’data:blog.languageDirection’ expr:href=’data:label.url + “?max-results=10“‘><data:label.name/></a>
</b:if>
<span dir=’ltr’>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>
<b:include name=’quickedit’/>
</div>
</b:includable>

Finally, save your template.

Posted in Blog
1 Comment

August 29, 2009

Automatic Thumbnail and Read More Function for Blogger

Read more function is used to cut our post on homepage, post will appear fully when we click read more link. It’s cut automatically and if we insert image, it appears thumbnail.
This is automatic read more function with thumbnail. We just need to set up our HTML code.

Follow steps:
1. Go to “Layout” click “Edit HTML”
2. Tick on “Expand Widget Templates”
3. Find this code

<data:post.body/>

4. Replace with this code below

5. Save / Check your blog

clarification code above:
summary_noimg = 430; is post cut height without image
summary_img = 340; is post cut height with image
img_thumb_height = 100; is thumbnail image height
img_thumb_width = 120; is thumbnail image width

Posted in Blog
Leave a comment

July 16, 2009

How to post XML or HTML code on Blogger

Since my site is contains article about programming. I often post sample source code, XML and HTML scripts. My previous dilemma was, I can’t simply copy and paste the codes directly to blogger editor because it will translate all entities enclosed with greater & less than sign such as . The simplest way to do it is to encode the XML/HMTL code first using encoder tools which are available online.

Here’s a step-by-step procedure:

1. Go to http://centricle.com/tools/html-entities/

2. Copy and Paste your code on the textbox then click encode.

3. Copy the encoded code to your Blogger editor.

Posted in Blog
Leave a comment

HENDIO

Information Around The World

Category Archives: Blog