Cara Membuat Navigasi Halaman Di Blog


Wuih, dah lama banget nich gak sempet posting, tapi kali ini saya sempet-sempetin karena gak enak banget dari dulu ada request dari Sahabat Shevajo admin dari http://ladangbolaku.blogspot.com yang meminta saya posting "Cara Membuat Navigasi Halaman Di Blog". Tapi karena kesibukan saya dan internet di kantor juga lagi masalah, jadi baru hari ini saya posting tentang hal tersebut. Cara ini sebenarnya saya dapatkan dari hasil googling tapi saya sudah lupa alamatnya apa, yang jelas web-nya pake bahasa inggris. padahal saya gak bisa bahasa inggris.

Biar gak kebanyakan omong lagi, kita langsung saja ke cara membuat navigasi halaman di blog :

  • Cara Pertama

1.Klik "Rancangan => "Edit HTML"
2."Centang Expand Template Widget"
3.Cari kode di bawah ini
]]></b:skin>

4.Copy kode di bawah ini dan paste di atas kode no 3
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}
.comment-body-author {
background:#99FF00;
border:1px dotted #FF6600;
margin:0;
padding:0 0 0 20px;
}

5.Langkah selanjutnya, cari kode di bawah ini :
</body>

6.Copy kode di bawah ini di atas kode no 5 :
<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>
</b:if>
<!--Page Navigation Ends -->

7."Simpan Template"


  • Cara Kedua


1. Klik "Tata Letak" => "Edit Laman"
2. Klik "Tambah Gadget => "HTML/Javascript"
3. Copy kode di bawah ini dan paste di lokasi yang telah disediakan :
<style>
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #ccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #ccc;
background-color:#ccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #ccc;
background: #ccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #ccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333;
}
</style>

<script type="text/javascript">

function showpageCount(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;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

var pageCount=5;
var displayPageNum=6;
var firstPageWord = 'First';
var endPageWord = 'last';
var upPageWord ='Back';
var downPageWord ='Next';

var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
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!=''){
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 += '&nbsp;<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"></span>'+upPageHtml+' '+html +' ';
}
}
html = '<div class="showpageArea"><span class="showpage"> Total '+(postNum-1)+': </span>'+html;
if(thisNum<(postNum-1)){
html += downPageHtml;
}
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>
<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>

4. "Simpan Template"

Keterangan :
  • Silahkan Sobat pilih salah satu cara di atas.

  • var pageCount=5 => menunjukkan jumlah posting yang akan tampil pada satu halaman. Jadi silahkan sesuaikan dengan setting posting blog Sobat.

Cara Membuat Navigasi Halaman Di Blog Rating: 4.5 Diposkan Oleh: muzzy musthofa

66 komentar:

  1. Mak nyus tenan.aku copy kode htmlnya kawan

    BalasHapus
  2. Aku coba pakai cara yang nomor 2 saja

    BalasHapus
  3. @ Kang Tomo : Monggoh di ambil Kang......
    @ Uswah : Silahkan pilih yang menurut Anda lebih mudah....

    BalasHapus
  4. Mantaappppppppppppppppp...
    thanks banget bro
    requestnya cepet banget bro :)
    arigato

    BalasHapus
  5. @ Shevajo : Wah nyindir nich kok bilang cepet banget? he3x..... padahal requestnya sudah hampir 2 minggu. iya sama-sama ya kawan.....

    BalasHapus
  6. thx buat sobat..., sudah mau berbagi ilmunya..

    BalasHapus
  7. @ Cellular : sama-sama kawan. makasih juga atas komentar & kunjungannya

    BalasHapus
  8. thank you maz...
    alhamdulillah dapat ilmu lagi..

    BalasHapus
  9. @ Hanumuslem : sama-sama kawan. makasih juga atas komentar & kunjungannya.

    BalasHapus
  10. hehe...
    makasih banyak mas infonya...
    salam kenal juga....

    BalasHapus
  11. lha kok banyak amaier....
    ntar kotak html ku nggak cukup...
    pi ya perlu di coba dech gan....
    makasih....

    BalasHapus
  12. @ Mas Katir : Emang banyak banget kodenya, tapi santai aja kok, pasti cukup karena kan kotak html gak ada batasnya. xixixixixi

    BalasHapus
  13. navigasi page q saat ini aq lepas sob, soalnya dah kebanyakan JS blog aq, tp sip dah ini, blogger yang tanggap request, sukses deh sob

    BalasHapus
  14. @ Rizky2009 : Emang sich nanti klo dah js-nya numpuk, akan memperberat blog, tapi kita kan juga harus selektif, js apa saja yang penting buat blog kita, ya harus kita pasang... makasih ya atas kunjungan dan komentarnya... gimana nich kabarnya? moga sehat selalu ya kawan.....

    BalasHapus
  15. salam kunjungan, kami simpan postingannya...

    BalasHapus
  16. izin ngopy codenya ya mas, mangstab tutorialnya...

    BalasHapus
  17. @ Bureto : Silahkan di ambil saja kawan. makasih ya atas komentar dan kunjungannya

    BalasHapus
  18. wah Boleh nih dicoba...mksh sob udah bagi2 ilmu....

    BalasHapus
  19. @ Indra : sama-sama kawan. makasih juga atas komentar dan kunjungannya

    BalasHapus
  20. T - O - P


    laaahhhhhhh ^_^

    BalasHapus
  21. Wahhh kerennnnn!!!! Keeep Blogginggg gannn n met Weekend...!!

    BalasHapus
  22. satu lagi nambah ilmu ni, mantab n sip..
    thanks infonya..

    BalasHapus
  23. Terimakasih atas informasinya Mas,,Tutorial yang bagus, Tak Coba Yo.

    Keep Learning by Doing,,,.

    Jangan Lupa Komen Balik ya,, :10

    BalasHapus
  24. hati-hati saLah Langkah bisa kacau tuh, hehehehe

    BalasHapus
  25. Ane save dulua ch ntar lok perlu ane pakai hehehe, Thank ya son c U

    BalasHapus
  26. nanti sj dicoba tipsnya... :D
    kalau sdh bosan sama blog yg sekarang :D

    BalasHapus
  27. tapi memperberat loading blog ya

    BalasHapus
  28. dimasukkan kotak es dulu .....

    BalasHapus
  29. wih lengkap.. nice tutorial ya...

    BalasHapus
  30. Sipp dahh... ntar gw sedot HTMlnya

    BalasHapus
  31. makasih atas infonya dan tipsnya mas
    ajarin aku dong detilnya saya masih bingung ni
    mampir balik ya mas

    BalasHapus
  32. mau ikutan request juga boLeh enggak yah?

    BalasHapus
  33. makasih atas pembelajarannya sob......semoga sukses selalu

    BalasHapus
  34. @ Om Rame : memangnya Om mau request apa? Kalau saya bisa dan ada waktu pasti saya penuhin khusus buat Om....

    BalasHapus
  35. makasih infonya, manfaat banget nih

    BalasHapus
  36. @ Gus Ikhwan : yang bingung dari mananya Gus? perasaan itu sudah detail lho Gus? Kalau masih ada yang belum dipahami, silahkan saja langsung di tanyakan Gus? Terima kasih ya atas kunjungannya

    BalasHapus
  37. nitip komen dsik cak...

    wah blogku wis onok menu navigasine e...yo'opo iki?hehe

    BalasHapus
  38. Weleh akhirnya muncul juga kotak komentarmu Sob....he koneksi gy lola nie haha...

    Wah tutor baru nie....Muantabz......tp java scriptku udah banyak Sob...nanti deh aku kurangin dulu hhe....

    Sukses slalu kwan....!!!

    BalasHapus
  39. mantap kawand..thanks info nya..:10

    BalasHapus
  40. Siip nih shob ... kelihatannya lebih simple cara yang pertama ya...

    BalasHapus
  41. navigasi memang sangt perlu dalam blog selain memudahkan pngunjung bua mengexplor blog kita juga akan memudahkan kita...

    thank ya

    BalasHapus
  42. Wach menarik nich Mas ntar mlm langsung ijin coba biar tau prepiunya,makasih bgt Mas infonya dan makasis sdh mau mampir semoga betah...:D

    BalasHapus
  43. Ok sob triknya, skg izin dulu buat sy coba kpn2 ^_^ Trik yg baru

    BalasHapus
  44. mantab sob
    http://myeplinfo.blogspot.com

    BalasHapus
  45. berkreasi trus kawan....info nya sangat berguna..

    BalasHapus
  46. Nice article i think. salam kenal...

    BalasHapus
  47. mak nyus tutornya kawan.kapan2 aku mau mencobanya jika ada waktu senggang thx

    BalasHapus
  48. Numpang Ngadem aja Kang... Met Malam aja..

    BalasHapus
  49. waduh ... panjang banget scriptnya ... :12

    BalasHapus
  50. ku coba dulu ya bila berhasil syukur, bila g ya gpp sih

    BalasHapus
  51. Mas Muzzi, apa betul halaman blog saya udah bisa dilihat? Sy udah coba akses dari komputer berbeda bahkan dari warnet tapi nyatanya halaman seperti about us, produk, service, link exchange dll masih kelihatan ngeblank biarpun udah saya edit berkali-kali.

    BalasHapus
  52. makasih mas infonya denni- <a href="http://theadvertisementnews.com>theadvertisementnews</a>

    BalasHapus
  53. work banget gan.. ! THX
    update ilmunya lagi gan :10

    BalasHapus
  54. Great Info.....thank's sobat.
    kalau sempat lihat blog saya ya.
    kirim kritik dan saran buat saya.

    BalasHapus
  55. Saya udah coba scriptnya dan berhasil, ini yang saya cari dari dulu. Mkch!

    BalasHapus

Silahkan Sobat semua komentar disini. Segala kritik dan saran dari Sobat semua akan sangat berguna bagi kemajuan blog ini.