Membuat Halaman Blog | Page Navigation Hack for Blogger (V.2)

After I make a posting on the Page Navigation now I think to display the page navigation is certainly more interesting you do not have this screenshot:

and this tutorial safely try:

Using the first way with the HTML:
Step 1: Log into your blogger account and navigate to the layout. Now go to edit HTML.

Step 2: code ]]></ b: skin> and add the CSS code

. 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;
)

Step 3:
Now find this code or a similar template in your

<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</ b: section>

Add this script below </ b: section>:

<script type="text/javascript">

showpageCount function (json) (
var thisUrl = location.href;
var htmlMap = new Array ();
var isFirstPage = thisUrl.substring (thisUrl.length-14, thisUrl.length )==". blogspot.com / ";
var isLablePage = thisUrl.indexOf ( "/ search / label /")!=- 1;
var isPage = thisUrl.indexOf ( "/ search? updated ")!=- 1;
var thisLable = isLablePage? thisUrl.substr (thisUrl.indexOf ( "/ search / label /") +14, thisUrl.length): "";
thisLable = thisLable.indexOf ("?")!=- 1? thisLable.substr (0, thisLable.indexOf ("?")): thisLable;
thisNum var = 1;
postNum var = 1;
itemCount var = 0;
fFlag var = 0;
eFlag var = 0;
var html ='';
upPageHtml var ='';
downPageHtml var ='';


pageCount var = 5;
displayPageNum var = 3;
var firstPageWord = 'First';
var endPageWord = 'Last';
var upPageWord = 'Previous';
var downPageWord = 'Next';



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

for (var i = 0, post; json.feed.entry = post [i]; i + +) (
var timestamp = post.published. t.substr $ (0.10);
var title = post.title. $ t;
if (isLablePage) (
if (title !=''){
if (post.category) (
for (var c = 0, post_category; post_category = post.category [c], c + +) (
if (encodeURIComponent (post_category.term) == thisLable) (
if (itemCount == 0 | | (itemCount% pageCount == (pageCount-1))) (
if (thisUrl.indexOf (timestamp)! =- 1) (
thisNum = postNum;
)

postNum + +;
htmlMap [htmlMap.length] = '/ search / label /' + thisLable + '? updated-max =' + timestamp + 'T00% 3A00% 3A00% 2B08% 3A00 & max-results =' + pageCount;
)
)
)
) / / end if (post.category) (

itemCount + +;
)

else ()
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 + 'T00% 3A00% 3A00% 2B08% 3A00 & 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) (
if (isLablePage) (
upPageHtml = labelHtml + upPageWord + '</ a> </ span>';
else ()
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"> <u>' thisNum + + '</ u> </ span>';
else ()
if (p == 0) (
if (isLablePage) (
html = labelHtml +'1 </ a> </ span> ';
else ()
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 + +;
)
) / / end if (p> = (thisNum-displayPageNum-1) & & p <(thisNum + displayPageNum)) (
) / / end for (var p = 0; p <htmlMap.length; p + +) (

if (thisNum> 1) (
if (! isLablePage) (
html = '<span class="showpage"> <a href="/">' firstPageWord + + '</ a> </ span>' + upPageHtml + '' + html + ' ';
else ()
html + =''labelHtml + firstPageWord + '</ a> </ span>' + upPageHtml + '' + html + '';
)
)

html = '<div class="showpageArea"> <span style = "font-size: 11px; padding: 2px 4px 2px 4px; margin: 2px 2px 2px 2px; color: # 000000; border: 1px solid # 333; background-color: # FFFFFF; "class =" showpage "> Page 'thisNum + +' of '+ (postNum-1) +': </ span> '+ html;

if (thisNum <(postNum-1)) (
html + = downPageHtml;
html + = '<span class="showpage"> <a href="'+htmlMap[htmlMap.length-1]+'">' endPageWord + + '</ a> </ span> ';
)

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

if (isPage | | isFirstPage | | isLablePage) (
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>

src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" <script type="text/javascript"> </ script>


<div style='text-align:right;font-size:10px;color:000000;margin-top:15px;display:none;'> <a href = 'http://trik-tipsblog.blogspot.com/2009/03/page-navigation-hack-for-blogger-v2.html '> Grab this Widget ~ Blogger Accessories </ a> </ div>

Save the Last Template

Using two way with Javascript:
Step 1: Login to blogger
Step 2: Layout -> Page Elements -> add Gadgets
Step 3: Select the HTML / Javascript
step 4: copy-paste this script above:

<style>
. showpageArea (padding: 0 2px; margin-top: 10px; margin-bottom: 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;
)
</ style>



<script type="text/javascript">

showpageCount function (json) (
var thisUrl = location.href;
var htmlMap = new Array ();
var isFirstPage = thisUrl.substring (thisUrl.length-14, thisUrl.length )==". blogspot.com / ";
var isLablePage = thisUrl.indexOf ( "/ search / label /")!=- 1;
var isPage = thisUrl.indexOf ( "/ search? updated ")!=- 1;
var thisLable = isLablePage? thisUrl.substr (thisUrl.indexOf ( "/ search / label /") +14, thisUrl.length): "";
thisLable = thisLable.indexOf ("?")!=- 1? thisLable.substr (0, thisLable.indexOf ("?")): thisLable;
thisNum var = 1;
postNum var = 1;
itemCount var = 0;
fFlag var = 0;
eFlag var = 0;
var html ='';
upPageHtml var ='';
downPageHtml var ='';


pageCount var = 5;
displayPageNum var = 3;
var firstPageWord = 'First';
var endPageWord = 'Last';
var upPageWord = 'Previous';
var downPageWord = 'Next';



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

for (var i = 0, post; json.feed.entry = post [i]; i + +) (
var timestamp = post.published. t.substr $ (0.10);
var title = post.title. $ t;
if (isLablePage) (
if (title !=''){
if (post.category) (
for (var c = 0, post_category; post_category = post.category [c], c + +) (
if (encodeURIComponent (post_category.term) == thisLable) (
if (itemCount == 0 | | (itemCount% pageCount == (pageCount-1))) (
if (thisUrl.indexOf (timestamp)! =- 1) (
thisNum = postNum;
)

postNum + +;
htmlMap [htmlMap.length] = '/ search / label /' + thisLable + '? updated-max =' + timestamp + 'T00% 3A00% 3A00% 2B08% 3A00 & max-results =' + pageCount;
)
)
)
) / / end if (post.category) (

itemCount + +;
)

else ()
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 + 'T00% 3A00% 3A00% 2B08% 3A00 & 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) (
if (isLablePage) (
upPageHtml = labelHtml + upPageWord + '</ a> </ span>';
else ()
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"> <u>' thisNum + + '</ u> </ span>';
else ()
if (p == 0) (
if (isLablePage) (
html = labelHtml +'1 </ a> </ span> ';
else ()
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 + +;
)
) / / end if (p> = (thisNum-displayPageNum-1) & & p <(thisNum + displayPageNum)) (
) / / end for (var p = 0; p <htmlMap.length; p + +) (

if (thisNum> 1) (
if (! isLablePage) (
html = '<span class="showpage"> <a href="/">' firstPageWord + + '</ a> </ span>' + upPageHtml + '' + html + '';
else ()
html + =''labelHtml + firstPageWord + '</ a> </ span>' + upPageHtml + '' + html + '';
)
)

html = '<div class="showpageArea"> <span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 1px solid #333; background-" class="showpage"> Page' thisNum + + 'of' + (postNum-1) + ': </ span>' + html;

if (thisNum <(postNum-1)) (
html + = downPageHtml;
html + = '<span class="showpage"> <a href="'+htmlMap[htmlMap.length-1]+'">' endPageWord + + '</ a> </ span>';
)

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

if (isPage | | isFirstPage | | isLablePage) (
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>

src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" <script type="text/javascript"> </ script>
<div style="text-align:right;font-size:10px;color:000000;margin-top:15px;display:none;"> <a href = "http://trik-tipsblog.blogspot.com/2009/03/page-navigation-hack-for-blogger-v2.html"> Grab this Widget ~ Blogger Accessories </ a> </ div>

fourth step: Save
last step: move down to Javascript before posting.

You can edit the color Red Hot:

1.var pageCount = 5;

Red number represents the number of posts to be displayed in one page. Change the number to display many pages as you want.
Example:
put on my blog 6 postingan.Dalam each page you can see only 6 posts.

2. displayPageNum var = 3;

here in the red numbers represent the number of pages that will be registered.
Example:
Diblog If you choose 3, then 3 pages will be displayed.

Congratulations If you have been successful Create Page Navigation Hack for Blogger