Selamat Datang Diucapkan Kepada Semua Pengunjung Blog Ini Segala Komen Dan Saranan Teman Teman Amat Seri Hargai

Panduan Memasang Page Navigation Untuk Blogspot

Untuk memasang page navigation seperti gambar yang tertera dibawah sila ikut cara-cara pemasangan dengan teliti. Ia memerlukan sedikit pengubahsuaian dalam kode HTML ditemplate.


01 - Masuk ke Blogger - Design - Edit HTML

02 - Cari kode yang tertera seperti dibawah ini:

]]></b:skin>

03 - Copy dan pastekan kode yang dibawah ini tepat di bahagian atas ( Rujuk kepada No. 2)

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

04 - Cari kode ini

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

05 - Copy dan pastekan kode yang dibawah ini tepat diantara </b:section>----</div>

&lt;script type=&quot;text/javascript&quot;&gt;

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==&quot;.blogspot.com/&quot;;
var isLablePage = thisUrl.indexOf(&quot;/search/label/&quot;)!=-1;
var isPage = thisUrl.indexOf(&quot;/search?updated&quot;)!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.length) : &quot;&quot;;
thisLable = thisLable.indexOf(&quot;?&quot;)!=-1 ? thisLable.substr(0,thisLable.indexOf(&quot;?&quot;)) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= &#39;&#39;;
var upPageHtml =&#39;&#39;;
var downPageHtml =&#39;&#39;;
var pageCount=5;
var displayPageNum=3;
var firstPageWord = &#39;First&#39;;
var endPageWord = &#39;Last&#39;;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
var labelHtml = &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/search/label/&#39;+thisLable+&#39;?&amp;max-results=&#39;+pageCount+&#39;&quot;&gt;&#39;;
for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=&#39;&#39;){
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] = &#39;/search/label/&#39;+thisLable+&#39;?updated-max=&#39;+timestamp+&#39;T00%3A00%3A00%2B08%3A00&amp;max-results=&#39;+pageCount;
}
}
}
}//end if(post.category){
itemCount++;
}
}else{
if(title!=&#39;&#39;){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
if(title!=&#39;&#39;) postNum++;
htmlMap[htmlMap.length] = &#39;/search?updated-max=&#39;+timestamp+&#39;T00%3A00%3A00%2B08%3A00&amp;max-results=&#39;+pageCount;
}
}
itemCount++;
}
}
for(var p =0;p&lt; htmlMap.length;p++){
if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
if(fFlag ==0 &amp;&amp; p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}else{
upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;/&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}
}else{
upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}
fFlag++;
}
if(p==(thisNum-1)){
html += &#39;&amp;nbsp;&lt;span class=&quot;showpagePoint&quot;&gt;&lt;u&gt;&#39;+thisNum+&#39;&lt;/u&gt;&lt;/span&gt;&#39;;
}else{
if(p==0){
if(isLablePage){
html = labelHtml+&#39;1&lt;/a&gt;&lt;/span&gt;&#39;;
}else{
html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/&quot;&gt;1&lt;/a&gt;&lt;/span&gt;&#39;;
}
}else{
html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ (p+1) +&#39; &lt;/a&gt;&lt;/span&gt;&#39;;
}
}
if(eFlag ==0 &amp;&amp; p == thisNum){
downPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt; &lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ downPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
eFlag++;
}
}//end if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
}//end for(var p =0;p&lt; htmlMap.length;p++){
if(thisNum&gt;1){
if(!isLablePage){
html = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;/&quot;&gt;&#39;+ firstPageWord +&#39; &lt;/a&gt;&lt;/span&gt;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;
}else{
html = &#39;&#39;+labelHtml + firstPageWord +&#39; &lt;/a&gt;&lt;/span&gt;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;
}
}
html = &#39;&lt;div class=&quot;showpageArea&quot;&gt;&lt;span style=&quot;font-size:11px;padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;color: #000000;border: 1px solid #333; background-color: #FFFFFF;&quot; class=&quot;showpage&quot;&gt;Page &#39;+thisNum+&#39; of &#39;+(postNum-1)+&#39;: &lt;/span&gt;&#39;+html;
if(thisNum&lt;(postNum-1)){
html += downPageHtml;
html += &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[htmlMap.length-1]+&#39;&quot;&gt; &#39;+endPageWord+&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}
if(postNum==1) postNum++;
html += &#39;&lt;/div&gt;&#39;;
if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName(&quot;pageArea&quot;);
var blogPager = document.getElementById(&quot;blog-pager&quot;);
if(postNum &lt;= 2){
html =&#39;&#39;;
}
for(var p =0;p&lt; pageArea.length;p++){
pageArea[p].innerHTML = html;
}
if(pageArea&amp;&amp;pageArea.length&gt;0){
html =&#39;&#39;;
}
if(blogPager){
blogPager.innerHTML = html;
}
}
}
&lt;/script&gt;
&lt;script src=&quot;/feeds/posts/summary?alt=json-in-script&amp;callback=showpageCount&amp;max-results=99999&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
<div style='text-align:right;font-size:10px;color:000000;margin-top:15px;display:none;'> <a href='http://rias-techno-wizard.blogspot.com/2008/07/page-navigation-hack-for-blogger.html'></a></div>


Catatan:
var pageCount=5; - Jumlah post yang dipaparkan dalam satu halaman
var displayPageNum=3; - Mempamirkan jumlah halaman.

06 - Save template dan View Blog

11 Pandangan:

xDer Januari 17, 2011  

iniiiii la yg saya dok cari2.. thnx a lot frennnnn :) boleh cuba kat blog skg jugak nih hehehe

lagi belajar ngeblog Januari 17, 2011  

terima kasih sahabat,,kapan-kapan jadi pengen nyoba juga untuk blog saya

Budak Maran Januari 17, 2011  

nice tutorial..good job...

http://budakmaran.blogspot.com/

RedVixen Januari 17, 2011  

boleh tak kalau kita nak tukar perkataan dia.
sebagai contoh, NEXT jadi SETERUSNYA.
tengkiu 4 da tips :D

Laman Teman Januari 17, 2011  

tutorial ni senang faham..thanks

lynn angel Januari 17, 2011  

oohh.. menariknya.. tq for sharing.. :)

Seri Bahasa Januari 17, 2011  

RedVixen@ boleh ditukar tak jd masalah cuma agak panjang dibandingan perkataan dgn asal.

Henry Zackery Januari 17, 2011  

saye x leh wt la.. :(
da try tapi ' older post ' teros hilang :(
mcm mane ek ??

Seri Bahasa Januari 17, 2011  

Henry Zackery@ ada kemungkinan dia tak boleh dipasang bersama widget older post.

nanti seri bagi cara pasang guna widget pula. tak payah edit kode HTML template.

Tanpa Nama,  Januari 27, 2011  

awal yang baik

Tanpa Nama,  Januari 31, 2011  

nalezy sprawdzic:)

Teman Setia

This Blog Is Proudly Sponsored By SURF7 Template Modified By Seri Bahasa Proud To Be A Kinabatangan Blogger