Page Navigation Hack

Kali ini saya coba mensadur blogger hack dari Mohamed Rias, tentang page navigation yang umumnya blogger mania bisa lihat di bawah post blog saya, dan umumnya terdapat di blog yang memakai platform wordpress, saya sudah meminta izin dari Mohamed untuk mentranslatenya ke bahasa Indonesia, Ok mau tahu cara  menampilkan page navigation  hack di blog sobat?


1. Seperti biasa sobat login dulu ke blogspot, kemudian ke Tata Letak > Edit HTML , jangan lupa untuk mendownload template asli sobat.
2. Setelah selesai masukkan kode CSS di bawah ini di atas kode ]]></b:skin>

.showpageArea {font-size: 11px; width:470px;background: url(http://i263.photobucket.com/albums/ii150/mohamedrias/ShowPagenavbar.jpg) no-repeat left top; padding-top:10px;padding-bottom:10px;padding-right:15px;padding-left:30px; color:#003366;text-align:left;
}
.showpageArea a {
color:#0F0;
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
color:#0F0;
border:1px solid #FFF;
margin:0 10px;
padding:0 5px 0 8px;
}
.showpageNum a:hover {
color:#FE8314;
border:1px solid #0071A5;
background-color:#FFF;
}
.showpagePoint {
color:#FE8314;
margin:0 8px 0 4px;
}
.showpage a {
text-decoration:none;
color:#FFF;
padding:0 2px 0 4px;
}
.showpage a:hover {
color:#FE8314;
text-decoration:underline;
} .showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#cc0000;
}

NB : Kode yang berwarna merah bisa sobat rubah sesuai dengan keinginan. (sesuaikan dengan template sobat) terus url gambarnya bisa di ubah juga.
3. Kemudian cari kode ini :
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
Setelah ketemu taruh kode ini tepat di bawah </b:section>
&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=1;
var displayPageNum=2;
var firstPageWord = &#39;First&#39;;
var endPageWord = &#39;last&#39;; //&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;
var upPageWord =&#39;Back&#39;;
var downPageWord =&#39;Next&#39;;
//&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;


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;/span&gt;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;
}
}

html = &#39;&lt;div class=&quot;showpageArea&quot;&gt;&lt;span style=&quot;color:#fff;&quot; class=&quot;showpage&quot;&gt; Total &#39;+(postNum-1)+&#39;: &lt;/span&gt;&#39;+html;

if(thisNum&lt;(postNum-1)){
html += downPageHtml;

}

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'>Grab this Widget ~ Blogger Accessories</a></div>


Update : Kode di atas sudah di update oleh Mohamed Rias, bagi yang sudah copy kode sebelumnya, silahkan ganti dengan kode yang baru ini.

NB: Text yang berwarna merah dapat di ubah  
Penjelasan :
1 : var pageCount = 2;

Digit ini menunjukkan number  dari posts untuk dilihatkan  pada single  page. Ubah digit ini untuk menampilkan banyak halaman yang sobat inginkan.
(Kutipan dari Mohamed Rias)
for example :

”In my blog I have put that value as 2 . In each page you can see only 2 posts .”


2 : var displayPageNum = 3;

Digit ini menunjukkan number dari page yang di list
(Kutipan dari Mohamed Rias)
For example :

”In my blog I have chosen 3 , then 3 pages will be shown.”
Kode CSS di atas umumnya bisa untuk semua template, kalau sudah selesai semuanya simpan hasil pekerjaan blogger mania, terus kalau masih bingung silahkan kunjungi blog yang empunya hack ini. Terimakasih buat Mohamed Rias yang mengizinkan saya menulis kembali page navigation hack ini ke bahasa Indonesia. Happy blogging sobat :D


post signature

21 comments:

  1. info menarik bro..lg mikir2 nih,dicobain ga ya..

    ReplyDelete
  2. sik asik asik... akhirnya.. pagination datang juga.. nyoba ah.. kalo gak berat lanjuuttt,, hehe..

    makasih banyak bro mochal..

    ReplyDelete
  3. @ Mike > Cobain aja bro nambah keren ntar blog ente :D
    @ Firdaus > kayanya lumayan sih bro :D

    ReplyDelete
  4. cocok tidak ya dengan blog saya kalo dipasang.

    ReplyDelete
  5. walah kedauluan Kang Firdaus komennya....ingin menjajal page nav nya ah.....(eits. lupa minta ijin..) Ijin Kang, manteb terjemahnnya. langsung mudeng dan ga perlu bawa kamus nih....

    ReplyDelete
  6. weehh.. makacih entar saya nyajal ah.. info yg bakalan bagus neh

    ReplyDelete
  7. O'Ow...ternyata ilmunya dikeluarin tho...

    ReplyDelete
  8. @ Treen > cocok boz kan pake minnyx juga ente?
    @ Gus > makanya kang langganan feed ku :)
    @ blogspot > seeep kang jalooe saya tunggu post dr blog akang tutotial yg lainnya
    @ Jovoe > ilmu melet belum sis :D

    ReplyDelete
  9. wah bisa belajar banyak nich sama master hack..

    thank infonya..

    ReplyDelete
  10. @ Benny > bukan saya om master hacknya tetapi mohamed rias saya hanya mensadur ulang ke bahasa indonesia :D Btw dah nyoba lum?

    ReplyDelete
  11. @ Abi bakar > yup terutama bang abi mampir ke tempat saya keren banget :D

    ReplyDelete
  12. Ini dia yg selalu dicari. Dl pernah nyoba buat yg kyk gini liat disini. tp hanya tipuan saja. trus jg tergantung browser.hehehe.
    Akhirnya nemu jg yg sangat gw inginkan. Thanks banget bro...

    ReplyDelete
  13. @ herro > yups sama-sama kalau masih bingung mampir ke sini yak om :D

    ReplyDelete
  14. Thanks mas udah mampir diblog saya. Tenang aja mas, saya loem pernah bingung soal modifikasi blog. Kl udah nyungsep baru nguber2 mas. Jangan kabur lho.....:D

    ReplyDelete
  15. duh, tau gini dulu pas masih pake blogspot langsung maen2 ke blognya mochal deh.. :)

    ReplyDelete
  16. mas saya dah masukin ini.
    dulu pertama berhasil, tapi entah kenapa sekarang gara2 terlalu banyak bongkar pasang, kok di index ndak keluar ya?
    tapi kalo ke next page keluar dengan indahnya.

    mohon petunyuk.. eh petunjuk

    ReplyDelete
  17. @denny > mungkin ada yang salah dengan kode xml template anda

    ReplyDelete
  18. kritik KAng Subagya, tulisan di atas kecil, kurang besar

    ReplyDelete
  19. wah ... sip nih tutorialnya, pengin belajar menggunakan blogspot ...

    ReplyDelete
  20. Wah, disini apa-apa ada. makasih mas scriptnya komplit deh....

    ReplyDelete