Memasang Navigasi Halaman [ Page Navigation] di Blogspot

enu navigasi halaman adalah fitur blog pengganti untuk tulisan "posting lama" dan "posting baru". Jika anda tau contoh dari menu navigasi halaman ini, anda bisa lihat screenshootnya dibawah ini: Jika anda tertarik dan ingin mengganti bentuk posting lama dan posting baru yang ada di blog anda dengan model menu navigasi [page navigation], silahkan ikuti beberapa petunjuk dibawah ini:

Login di blogger
1. Kemudian masuk ke menu page element
2. Setelah itu, klik add gadget dan pilih html/javascript
3. Langkah selanjutnya, silahkan copy paste kode dibawah ini ke form page gadget yang baru anda tambahkan tanpa diberi judul:
<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"> 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=3; var firstPageWord = 'Awal'; var endPageWord = 'Akhir'; var upPageWord ='Sebelumnya'; var downPageWord ='Selanjutnya'; 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 += ' <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">Halaman '+thisNum+' dari '+(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> <script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>
4. Klik simpan/ save setelah kode/ script tersebut ditambahkan
5. Selanjutnya drag and drop page element/ gadget tersebut dibagian bawah Blog Post, seperti contoh gambar dibawah ini:
6. simpan

Tulisan Terkait : Cara Mudah Membuat Marquee / Text Berjalan pada BlogKode dasar dari Marquee ini cukup sedehana yaitu di buat dengan mengg ... [ www.fabrie.blogspot.com] membuat tab view 2masuk ke edit html, "centang Expand Widget Templates" Sekarang kita c ... [ www.fabrie.blogspot.com] Cara Setting BlogspotHal pertama yang penting anda lakukan agar blog anda di blogger mempu ... [ www.fabrie.blogspot.com] Tablet PC Epad Android QWERTYHarga per 16/02/2011 kisaran Rp1.600.000. SUDAH SUPPORT 3G MODEM, QWE ... [ www.fabrie.blogspot.com] Cara Memasang Page View Counter di BlogspotCara Memasang Page View Counter di Blogspot. Akhirnya Jasman dari ihs ... [ www.fabrie.blogspot.com] Silahkan Masukan Link Teks DisiniSahabat yang mau barter link tapi berupa banner silahkan disini karen ... [ www.fabrie.blogspot.com] menampilkan ym status di sudut blogmenampilkan ym status di sudut blog,,, kalo di tv posisinya kurang le ... [ www.fabrie.blogspot.com] Cara Membuat Daftar Isi BlogspotMembuat daftar isi sepertiini kadang membuat loading blog menjadi lam ... [ www.fabrie.blogspot.com] Cara Mudah Membuat simbol trademark, registered , copyright dan simbol lainnyaUntuk membuat TradeMark alias TM TM adalah singkatan dari TradeMark. ... [ www.fabrie.blogspot.com] Membuat widget selalu berada di pojokKamu ingin gambar/photo kamu, animasi, Jam, Shoutbox,Hit Counter, Kal ... [ www.fabrie.blogspot.com] kursor di ikuti segerombolan teksingin kursor di ikuti teks? masuk ke Blog. Tata Letak, tambah widget ... [ www.fabrie.blogspot.com] misteri ka'bahNeil Amstrong telah membuktikan bahwa kota Mekah adalah pusat dari pl ... [ www.fabrie.blogspot.com] Mempercepat Loading Page Pada BlogWidget yang terlalu banyak menbabkab loading blog tergannggu, seperti ... [ www.fabrie.blogspot.com] MEMASANG KOMENTAR TERBARUMasuk ke Blogger.Pilih Tata Letak.Pilih Edit HTML.Cari kode ini ]]> ... [ www.fabrie.blogspot.com] membuat daftar isi blogdaftar isi blog sangat membantu pengunjung untuk menjelajahi seluruh ... [ www.fabrie.blogspot.com] cara membuat tabview 4Sobat, kali ini masih membahas cara membuat tabview. Kalo tidak salah ... [ www.fabrie.blogspot.com] Blogger Harus Tahu : Apa Itu Lorem Ipsum ?Sebagai seorang blogger, mungkin kata Lorem Ipsum sudah tidak asing l ... [ www.fabrie.blogspot.com] membagi/ menambah lagi sidebar menjadi 2Sign ke Blogger.Pilih tata Letak.Pilih Edit HTML.Back up dulu templat ... [ www.fabrie.blogspot.com] Membuat Garis Lengkung Pada Border blogMenggunakan border ini adalah untuk meminimalkan memepercantik blog d ... [ www.fabrie.blogspot.com] Menghilangkan Tanggal PostingTanggal posting berguna untuk memeri informasi kapan postingan Anda t ... [ www.fabrie.blogspot.com] Manajemen Blogger Author | Revenue SharingBlogger memberikan kesempatan kepada para penggunanya untuk bisa mena ... [ www.fabrie.blogspot.com] Cara Membuat Auto Hide pada Navbar BloggerCara Membuat Auto Hide pada Navbar Blogger adalah cara agar Navbar bl ... [ www.fabrie.blogspot.com] sahabat yang mau tukeran link silahkan komen disini Baca Peraturan terlebih dahulu sebelum barter link. Terimakasih tel ... [ www.fabrie.blogspot.com] Menyembunyikan gadget atau widget pada postingan tertentuLoading blog sobat lambat karena widget yang begitu banyak? supaya wi ... [ www.fabrie.blogspot.com] menyembunyikan komentarAda satu cara untuk menyembunyikan komentar pengunjung sehingga begit ... [ www.fabrie.blogspot.com] Membuat Floating Image Yang Bisa Ditutup (close) Pada BlogFloating image merupakan image mengambang yang biasanya berada di seb ... [ www.fabrie.blogspot.com] membuat efek zoom pada image dan tulisanlogin ke blog, tata letak , html cari kode ]]></b:skin>, kop ... [ www.fabrie.blogspot.com] Membuat Widget Pop Up Windows di Blogwidget yang tampil seperti mengambang di blog, biasanya sering untuk ... [ www.fabrie.blogspot.com] PlayBook Segera Hadir di IndonesiaKabar gembira bagi anda penggemar BlackBerry. Pasalnya pihak RIM (Res ... [ www.fabrie.blogspot.com] Cara Menerbitkan Posting Di BlogspotPada saat kamu akan membuat tulisan baru di blogspot maka kamu akan d ... [ www.fabrie.blogspot.com] Menampilkan User Agent Detector di BlogspotHai Sobat Blogger!         &n ... [ www.fabrie.blogspot.com] menyembunyikan kolom kanan pada sub halaman, dan saat anda mengklik "Label atau Kategori maka kolom kanan Main tetap ada di Homepage.menyembunyikan kolom kanan pada sub halaman, dan saat anda mengklik " ... [ www.fabrie.blogspot.com] Membuat Related Post Tanpa DuplikatPada tutorial sebelumnya tentang artikel terkait atau related post. P ... [ www.fabrie.blogspot.com] readmore dengan menampilkan judul post dan mengganti dengan gambarJika sudah memasang fasilitas read more sebelumnya, ikuti langkah-lan ... [ www.fabrie.blogspot.com] Membuat Float Navbar Berada DibawahFloat Navbar adalah navigation bar yang dari namanya sendiri "float" ... [ www.fabrie.blogspot.com] Fitur Baru Dashboard Posting BloggerFitur Baru Dashboard Posting Blogger. Hari ini saya agak merasa kikuk ... [ www.fabrie.blogspot.com] buku tamu tersembunyi 2 (gadget tersembunyi)Sebetulnya cara ini sama saja dengan , membuat buku tamu tersembunyi ... [ www.fabrie.blogspot.com] menambahkan name/url opsi profilAkhir-akhir ini saya bingung mengapa select profil pada form komen ... [ www.fabrie.blogspot.com] Tips menampilkan pesan pada jam tertentuKadang kita bingung bagaimana berkomunikasi dengan pengunjung karna k ... [ www.fabrie.blogspot.com] Apa itu Bloging (Ngeblog) dan Apa manfaatnya?Selama ini banyak orang yang bertanya apa itu blog? blogging atau nge ... [ www.fabrie.blogspot.com] Membuat Exchange Link Automatic1. Sign up di www.blenza.com.2. Isi semua form nya.3. Data hasil Sign ... [ www.fabrie.blogspot.com] Menampilkan Tanggal Terbit Posting Pada Hari Yang SamaSecara default, blogspot tidak dapat menampilkan tanggal postingan pa ... [ www.fabrie.blogspot.com] membuat kotak komentar ada foto komentatornyaberikut langkah-langkahnya: klik tata letak,Edit HTML → Sebelumnya ... [ www.fabrie.blogspot.com] Cara Membuat Jump Link di Dalam PostingWah apaan tuh "Jump Link" ?? mungkin sobat bertanya-tanya apa sih mak ... [ www.fabrie.blogspot.com] 1 Link Untuk Membuka 2 Halaman SekaligusSatu link akan membuka dua halaman sekaligus? waaaaahh menarik juga. ... [ www.fabrie.blogspot.com] membuat buku tamu tersembunyiingin menampilkan buku tamu tersembunyi di blog? Masuk ke account Blo ... [ www.fabrie.blogspot.com] Memindahkan Tanggal Publikasi Dibawah Judul PostingBila kita menggunakan template default blogger, biasanya saat kita m ... [ www.fabrie.blogspot.com] menambah elemen baru di atas footerSalam sobat , kali ini saya akan coba menjelaskan langkah-langkah unt ... [ www.fabrie.blogspot.com] Cara Mudah Menambahkan Fitur Reply Pada Kolom Komentar BlogspotMembuat Fasilitas Reply pada Kotak Komentar ini akan membantu mempe ... [ www.fabrie.blogspot.com] Membuat Title Bar Berjalan .fullpost{display:inline;} Agar dapat membuat title bar berjalan, ... [ www.fabrie.blogspot.com]

Best Quote Today:
Keberhasilan adalah kemampuan untuk melewati dan mengatasi dari satu kegagalan ke kegagalan berikutnya tanpa kehilangan semangat. (Winston Chuchill)

Jika Anda menyukai tulisan diatas jangan lupa untuk klik tombol suka untuk berbagi dengan teman facebook Anda. Anda juga bisa membagikan tulisan ini di twitter dan jejaring sosial lainnya. Berbagi itu indah.

Become a Fan