Page Navigation Ala Google

Oleh Admin Februari 18, 2010 15 komentar

Ada yang gak tahu Google? itu lo mesin pencari yang sering kita gunakan untuk mencari artikel di internet? Sekarang kita tahu kan? Ada yang tertarik dengan web google yamg simpel? Sekarang sat kita mencari sesuatu di google kita akan menemukan banyak pilhan, nah untuk itulah google memakai page navigation yang biasanya seperti ini

1 2 3 4 5 6 dst

Sebenarnya ini sama dengan tutorial yang pernah di bahas di Menambahkan Nomor Halaman di Bawah Area Postingan sekarang kita berganti gaya dengan tampilan yang ikut-ikutan ala google. Dengan demikian navigasi yang mda ini diharpakan bisa membantu pengunjung blog kita.

Cara Page Navigation Ala Google
1. Login ke blogger
2. Pilih tata letak kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4.Cari kode ]]></b:skin> kemudian taruh kode berikut ini di atasnya

#nav a,#nav a:visited,.blk a{color:#000}
 #nav a{display:block}
 #nav .b a,#nav .b a:visited{color:#20c}
 #nav .i{color:#a90a08;font-weight:bold}
 .csb,.ss{background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/pagenavi/nav_logo7.png) no-repeat 0 0;height:26px;display:block}
 .ss{background-position:0 -88px;position:absolute;left:0;top:0}
 .cps{height:18px;overflow:hidden;width:114px}
 .mbi{width:13px;height:13px;background-position:-91px -74px;margin-right:3px}
 #nav td{padding:0;text-align:center}

5. Cari kode di bawah ini
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
Terus kita letakkan Kode di bawah ini tepat di bawah kode </b:section>

<script type='text/javascript'>

var home_page_url = location.href; 


var pageCount=10;
var displayPageNum=6;
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 ='';



htmlMap[htmlMap.length]='/';
postNum++;

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

  
 var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
 timestamp = encodeURIComponent(timestamp1);
 var title = post.title.$t;
   if(thisUrl.indexOf(timestamp)!=-1 ){
     thisNum = postNum;
   }
 
   postNum++;
   htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'&amp;max-results='+pageCount;
 
}

var banyaknomer = htmlMap.length;
if (json.feed.entry.length % pageCount == 0){
 var banyaknomer = htmlMap.length -1 ;
 postNum=postNum-1;
};

 
for(var p =0;p&lt; banyaknomer;p++){
 if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
  if(fFlag ==0 &amp;&amp; p == thisNum-2){
   if(thisNum==2){
    upPageHtml = '&lt;a href=&quot;/&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: 0pt 0pt; margin-left: auto; width: 44px;&quot;&gt;&lt;/span&gt;&lt;div style=&quot;margin-right: 8px;&quot;&gt;'+ upPageWord +'&lt;/a&gt;&lt;/td&gt;';
   }else{
    upPageHtml = '&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: 0pt 0pt; margin-left: auto; width: 44px;&quot;&gt;&lt;/span&gt;&lt;div style=&quot;margin-right: 8px;&quot;&gt;'+ upPageWord +'&lt;/a&gt;&lt;/td&gt;';
   }
 
   fFlag++;
  }
 
  if(p==(thisNum-1)){
   if(p==0){
    html += '&lt;span class=&quot;csb&quot; style=&quot;background-position: -26px 0pt; width: 18px;&quot;&gt;&lt;/span&gt;&lt;/td&gt;&lt;td class=&quot;cur&quot;&gt;&lt;span class=&quot;csb&quot; style=&quot;background-position: -44px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;'+thisNum+'&lt;/td&gt;';
   }else{
    html += '&lt;td class=&quot;cur&quot;&gt;&lt;span class=&quot;csb&quot; style=&quot;background-position: -44px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;'+thisNum+'&lt;/td&gt;';
   }
  }else{
   if(p==0){
     html += '&lt;td&gt;&lt;a href=&quot;/&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: -60px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;1&lt;/a&gt;&lt;/td&gt;';

   }else{
    html += '&lt;td&gt;&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: -60px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;'+ (p+1) +'&lt;/a&gt;&lt;/td&gt;';
   }
  }
 
  if(eFlag ==0 &amp;&amp; p == thisNum){
   downPageHtml = '&lt;td class=&quot;b&quot;&gt; &lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: -76px 0pt; margin-right: 34px; width: 66px;&quot;&gt;&lt;/span&gt;'+ downPageWord +'&lt;/a&gt;&lt;/td&gt;';
   eFlag++;
  }
 }
}
 
if(thisNum&gt;1){
 html = ''+upPageHtml+' '+html +' ';
}
html2 = '&lt;table id=&quot;nav&quot; style=&quot;margin: auto auto 1.4em; border-collapse: collapse;text-align: center; direction: ltr;&quot; align=&quot;center&quot;&gt;&lt;tbody&gt;&lt;tr valign=&quot;top&quot;&gt;&lt;td class=&quot;b&quot;&gt;Page  ('+(postNum-1)+')   &lt;/td&gt;&lt;td class=&quot;b&quot;&gt;';
html3 = '&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;';
html = html2+html;
 
if(thisNum&lt;(postNum-1)){
 html += downPageHtml; 
}else{
 html += '&lt;td class=&quot;b&quot;&gt;&lt;span class=&quot;csb&quot; style=&quot;background-position: -76px 0pt; width: 42px;&quot;&gt;&lt;/span&gt;&lt;/td&gt;';
}


 
if(postNum==1) postNum++;
html += html3+ '&lt;/div&gt;';
 

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

if(postNum &lt;= 2){
 html ='';
}

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


if(pageArea&amp;&amp;pageArea.length&gt;0){
 html ='';
}

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


}


function showpageCount2(json) {

var thisUrl = home_page_url;
var htmlMap = new Array();
var isLablePage = thisUrl.indexOf(&quot;/search/label/&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= '';
var upPageHtml ='';
var downPageHtml ='';



var labelHtml = '&lt;a href=&quot;/search/label/'+thisLable+'?&amp;max-results='+pageCount+'&quot;&gt;';
var thisUrl = home_page_url; 

htmlMap[htmlMap.length]=labelHtml;
postNum++;

for(var i=pageCount-1, post; post = json.feed.entry[i]; i=i+pageCount) {
 var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
 timestamp = encodeURIComponent(timestamp1);

 
 var title = post.title.$t;

   if(thisUrl.indexOf(timestamp)!=-1 ){
    thisNum = postNum;
   }
 
   if(title!='') postNum++;
   htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&amp;max-results='+pageCount;
    
 itemCount++;
}

var banyaknomer = htmlMap.length;
if (json.feed.entry.length % pageCount == 0){
 var banyaknomer = htmlMap.length -1 ;
 postNum=postNum-1;
};
 
for(var p =0;p&lt; banyaknomer;p++){
 if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
  if(fFlag ==0 &amp;&amp; p == thisNum-2){
   
   
   
   if(thisNum==2){
    upPageHtml = labelHtml +'&lt;span class=&quot;csb ch&quot; style=&quot;background-position: 0pt 0pt; margin-left: auto; width: 44px;&quot;&gt;&lt;/span&gt;&lt;div style=&quot;margin-right: 8px;&quot;&gt;'+ upPageWord +'&lt;/a&gt;&lt;/td&gt;';
   }else{
    upPageHtml = '&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: 0pt 0pt; margin-left: auto; width: 44px;&quot;&gt;&lt;/span&gt;&lt;div style=&quot;margin-right: 8px;&quot;&gt;'+ upPageWord +'&lt;/a&gt;&lt;/td&gt;';
   }
 
   fFlag++;
  }
 
 
 
 
 
  if(p==(thisNum-1)){
   if(p==0){
    html += '&lt;span class=&quot;csb&quot; style=&quot;background-position: -26px 0pt; width: 18px;&quot;&gt;&lt;/span&gt;&lt;/td&gt;&lt;td class=&quot;cur&quot;&gt;&lt;span class=&quot;csb&quot; style=&quot;background-position: -44px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;'+thisNum+'&lt;/td&gt;';
   }else{
    html += '&lt;td class=&quot;cur&quot;&gt;&lt;span class=&quot;csb&quot; style=&quot;background-position: -44px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;'+thisNum+'&lt;/td&gt;';    
   }
  }else{
   if(p==0){
    html = '&lt;td&gt;'+labelHtml+'&lt;span class=&quot;csb ch&quot; style=&quot;background-position: -60px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;1&lt;/a&gt;&lt;/td&gt;';
   }else{
    html += '&lt;td&gt;&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: -60px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;'+ (p+1) +'&lt;/a&gt;&lt;/td&gt;';
   }
  }

 
  if(eFlag ==0 &amp;&amp; p == thisNum){
   downPageHtml = '&lt;td class=&quot;b&quot;&gt; &lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: -76px 0pt; margin-right: 34px; width: 66px;&quot;&gt;&lt;/span&gt;'+ downPageWord +'&lt;/a&gt;&lt;/td&gt;';
   eFlag++;
  }
 }
}


 
 
if(thisNum&gt;1){
 if(!isLablePage){
  html = ''+upPageHtml+' '+html +' ';
 }else{
  html = ''+upPageHtml+' '+html +' ';
 }
}
 
html2 = '&lt;table id=&quot;nav&quot; style=&quot;margin: auto auto 1.4em; border-collapse: collapse;text-align: center; direction: ltr;&quot; align=&quot;center&quot;&gt;&lt;tbody&gt;&lt;tr valign=&quot;top&quot;&gt;&lt;td class=&quot;b&quot;&gt;Page  ('+(postNum-1)+')   &lt;/td&gt;&lt;td class=&quot;b&quot;&gt;';
html3 = '&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;';
html = html2+html;
 
if(thisNum&lt;(postNum-1)){
 html += downPageHtml; 
}else{
 html += '&lt;td class=&quot;b&quot;&gt;&lt;span class=&quot;csb&quot; style=&quot;background-position: -76px 0pt; width: 42px;&quot;&gt;&lt;/span&gt;&lt;/td&gt;';
}
 
if(postNum==1) postNum++;
html += html3+ '&lt;/div&gt;';
 
var pageArea = document.getElementsByName(&quot;pageArea&quot;);
var blogPager = document.getElementById(&quot;blog-pager&quot;);

if(postNum &lt;= 2){
 html ='';
}

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

if(pageArea&amp;&amp;pageArea.length&gt;0){
 html ='';
}

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


}


</script>

<script type='text/javascript'>

  var thisUrl = home_page_url;
 if (thisUrl.indexOf(&quot;/search/label/&quot;)!=-1){
  if (thisUrl.indexOf(&quot;?updated-max&quot;)!=-1){
   var lblname1 = thisUrl.substring(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.indexOf(&quot;?updated-max&quot;));
  }else{
   var lblname1 = thisUrl.substring(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.indexOf(&quot;?&amp;max&quot;));
  }
 }

 var home_page = &quot;/&quot;;
 if (thisUrl.indexOf(&quot;?q=&quot;)==-1 &amp;&amp; thisUrl.indexOf(&quot;.html&quot;)==-1){ 
  if (thisUrl.indexOf(&quot;/search/label/&quot;)==-1){   
   document.write('&lt;script src=&quot;'+home_page+'feeds/posts/summary?alt=json-in-script&amp;callback=showpageCount&amp;max-results=99999&quot; &gt;&lt;\/script&gt;')
  }else{document.write('&lt;script src=&quot;'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&amp;callback=showpageCount2&amp;max-results=99999&quot; &gt;&lt;\/script&gt;')
  }
 }
</script>

5. Simpan Kalau sudah selesai.

15 komentar untuk "Page Navigation Ala Google"

Nova Imoet18 Februari 2010 21.02
wah klo udah punya banyak artikel membantu sekali...
makasih ya...
BalasHapus
Balasan
Unknown19 Februari 2010 12.18
saya dah coba tapi nggak mau mas, gimana ya
BalasHapus
Balasan
sugry purnomo19 Februari 2010 22.03
boszz, kok yg ini d'psang d'blog q kok nda bsa yach, jd q pke yg lma ajah yach...
oya sekalian tukaran link yachh..??
BalasHapus
Balasan
Admin20 Februari 2010 08.43
Maaf jika sebelumnya ada kesalahan, tapi sekarang sudah saya perbaiki, dan insyallah pasti berhasi :))
BalasHapus
Balasan
Rizkyzone20 Februari 2010 11.08
sob ada g yang g pakai edit HTML ?
BalasHapus
Balasan
indahnya berbagi21 Februari 2010 15.46
Scriptnya terpotong? karena main templatex kecil, saran aja coba pakai scroll atau simpan scriptx ditempat hosting, tinggal url downloadx yg diposting.

Thanks for share
BalasHapus
Balasan
jaloee21 Februari 2010 17.05
wah makin tambah kumplit nih tutorial-nya
BalasHapus
Balasan
Pekanbaru Riau22 Februari 2010 15.03
thanks triknya sobt.. salam kenal.. :D
BalasHapus
Balasan
corat coret27 Februari 2010 09.36
boz kalu pake google adsense kita bayar gak ma googlenya ....mkasih
BalasHapus
Balasan
SERBA BLOG5 Maret 2010 07.51
waw...info menarik sob...mantab...ijin save sob...buat blogku yg laen...
BalasHapus
Balasan
re5d18 Mei 2010 16.14
salam damai dari anak malang...

gw punya website bro walau masih free seee....heheheh...

gini gw mau kerjasama bro masukin tautan blog kamu ini ke website gw bro ne website gw

http://www.cps32.piczo.com

mohon kerjasamanya....
BalasHapus
Balasan
日月神教-任我行24 Mei 2010 09.02
AV,無碼,a片免費看,自拍貼圖,伊莉,微風論壇,成人聊天室,成人電影,成人文學,成人貼圖區,成人網站,一葉情貼圖片區,色情漫畫,言情小說,情色論壇,臺灣情色網,色情影片,色情,成人影城,080視訊聊天室,a片,A漫,h漫,麗的色遊戲,同志色教館,AV女優,SEX,咆哮小老鼠,85cc免費影片,正妹牆,ut聊天室,豆豆聊天室,聊天室,情色小說,aio,成人,微風成人,做愛,成人貼圖,18成人,嘟嘟成人網,aio交友愛情館,情色文學,色情小說,色情網站,情色,A片下載,嘟嘟情人色網,成人影片,成人圖片,成人文章,成人小說,成人漫畫,視訊聊天室,性愛,性感影片,正妹,聊天室,
情色論壇
BalasHapus
Balasan
Roslan Ellank26 April 2012 20.12
bisa di coba tu gan
thankz ya atas tutorialx
BalasHapus
Balasan
Cara Pemesanan Jelly Gamat Luxor14 Agustus 2012 16.55
makasih untuk infonya gan!!

;)
BalasHapus
Balasan
Unknown5 Desember 2014 22.50
kami sekeluarga tak lupa mengucapkan puji syukur kepada ALLAH S,W,T
dan terima kasih banyak kepada AKI atas nomor togel.nya yang AKI
berikan 4 angka 1803 alhamdulillah ternyata itu benar2 tembus AKI.
dan alhamdulillah sekarang saya bisa melunasi semua utan2 saya yang
ada sama tetangga.dan juga BANK BRI dan bukan hanya itu AKI. insya
allah saya akan coba untuk membuka usaha sendiri demi mencukupi
kebutuhan keluarga saya sehari-hari itu semua berkat bantuan AKI..
sekali lagi makasih banyak ya AKI… bagi saudara yang suka main togel
yang ingin merubah nasib seperti saya silahkan hubungi AKI SOLEH,,di no (((082-313-336-747)))
insya allah anda bisa seperti saya…menang togel 275
juta, wassalam.

dijamin 100% jebol saya sudah buktikan...sendiri....

Apakah anda termasuk dalam kategori di bawah ini !!!!

1"Dikejar-kejar hutang

2"Selaluh kalah dalam bermain togel

3"Barang berharga anda udah habis terjual Buat judi togel

4"Anda udah kemana-mana tapi tidak menghasilkan solusi yg tepat

5"Udah banyak Dukun togel yang kamu tempati minta angka jitunya
tapi tidak ada satupun yang berhasil..

Solusi yang tepat jangan anda putus asah....AKI SOLEH akan membantu
anda semua dengan Angka ritwal/GHOIB:
butuh angka togel 2D 3D 4D SGP / HKG / MALAYSIA / TOTO MAGNUM / dijamin
100% jebol
Apabila ada waktu
silahkan Hub: AKI SOLEH DI NO: (((082-313-336-747)))

atau klik langsung di KLIK DSINI BOCORAN TOGEL

angka GHOIB: singapur 2D/3D/4D/

angka GHOIB: hongkong 2D/3D/4D/

angka GHOIB; malaysia

angka GHOIB; toto magnum 4D/5D/6D/

angka GHOIB; laos

BalasHapus
Balasan

Tambahkan komentar

Page Navigation Ala Google

15 komentar untuk "Page Navigation Ala Google"

Berlangganan via Email