Membuat Navigasi Halaman berurut untuk blogger

Hai semuanya :D senang bisa jumpa kembali dalam acara resep resep blog oleh Dr.Revarius.. nah kali ini agak sedikit berbeda nih yang mau dibahas.. untuk pertama kalinya dr.revarius mau kasih kode nih.. minjem istilahnya si pencuri kode.. tentunya teman teman tau kan biasanya di blog kita di bagian bawah ada tu tulisan yang Older post gitu kan?? nah bagaimana caranya mengganti tulisan itu menjadi urutan nomor halaman jadi blog kita di ibaratkan sebagai lembar majalah yang bisa kita buka per halaman.. seperti contoh gambar disamping... yuk disimak resep resepnya ntar jangan lupa di tebus ya di apotik Edit HTML blogger anda :D hehheheh

Sebenarnya ada beberapa versi dari kode untuk membuat navigasi halaman berurut namun untuk pembahasan kali ini kita akan memakai versi Amanda Fazani yang kira kira hasilnya adalah seperti ini



Jika anda ingin membuat versi lainnya (Versi Blogger Accessories) bisa anda lihat di Sini atau di Sana

Baiklah Untuk Versi Amanda Fazani ini adalah langkah-langkahnya:

Tambahkan Kode CSS ke Bagian Styles di template anda

Copy kode di bawah ini dan masukkan sebelum tag </b:skin> pada template anda

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

Ini bertujuan untuk merubah warna text dan link pada penomoran halaman agar sesuai dengan gaya yang ada dalam template anda. jadi jika text anda adalah putih dengan latar belakang hitam,maka "nomor halaman" juga akan muncul seperti itu. warna dari background dan efek hover dari penormoran halaman ini dapat anda rubah sesuka anda dengan mengedit kode warnanya agar sesuai dengan template anda.

Tambahkan Kode JavaScript di bawah Post
Langkah Kedua adalah pemasangan kode javascript berikut di bawah blog post anda dengan tujuan menggantikan link "newer post/older post" sekarang silahkan menuju ke dashboard anda lalu ke Layout-Edit HTML.. sebelumnya jangan lupa untuk membackup template anda.. untuk pemasangan kode javascript ini lebih baik jangan centang kotak expand widget template..
kemudian cari kode di bawah ini:

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

Kemudian setelah tag </b:section> tambahkan script berikut:

<script type="text/javascript">



function showpageCount(json) {

var thisUrl = location.href;

var htmlMap = new Array();

var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==".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 = 5;

var upPageWord = 'Previous';

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 += '<span
class="showpagePoint">'+thisNum+'</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 = ''+upPageHtml+' '+html +' ';

}else{

html = ''+upPageHtml+' '+html +' ';

}

}



html = '<div
class="showpageArea"><span
style="COLOR: #000;"
class="showpageOf"> Pages
('+(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>

Jika kode diatas tidak berhasil pada template anda maka silahkan coba copy paste dari sini karena kode diatas tidak bisa langsung di aplikasikan pada semua template...silahkan copy paste dari Sini

Setelah anda menambah kode tersebut silahkan melihat preview template anda untuk memastikan tidak ada kode yang error. anda tidak akan bisa melihat script ini bekerja dalam preview tetapi langkah ini memastikan bahwa tidak ada efek berlawanan pada layout anda

pada baris ke 5 anda perlu merubah kata "com" untuk mengindikasikan ekstension domain anda jika anda menggunakan custom domain.

var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==&quot;.com/&quot;;

Instalasi ini secara default sudah cocok untuk pengguna layanan hosting di blogspot maupun domain dot.com namun anda perlu merubah bagian itu jika domain anda adalah dot.info ataupun dot.org atau yang lainnya

pada kode diatas di baris ke 19 dan 20 yang bercetak merah menunjukkan berapa posting yang akan ditunjukkan per halaman dan berapa banyak nomor halaman yang tampil (misalnya 1-2-3-4-5 dan seterusnya). anda dapat memodifikasinya sendiri sesuai dengan kebutuhan.

Setelah anda menambahkan script yang tadi jangan lupa untuk save template anda dan lihatlah blog anda.. sekarang sudah mempunyai link halaman navigasi berurut di bawah bagian halaman utama post anda..
link halaman navigasi berurut ini juga bisa dilihat pada bagian label ataupun archive post anda...

Jika ingin melihat contohnya silahkan berkunjung ke blog milik sahabat saya si Pencuri Kode dan lihat di bawah dari halaman utama postnya..

Baiklah Sekian Resep dari Dr.Revarius semoga bisa berguna bagi anda... dan dapat membantu saudara saudara sekalian... oh ya jangan lupa resepnya ditebus ya... :D

Diterjemahkan dari Amanda Fazani oleh Revarius

Temukan Artikel Menarik lainnya di Google

Custom Search

Add Post To: | Digg| Technorati| del.icio.us| Stumbleupon| Reddit| BlinkList| Furl| Spurl| Yahoo| Simpy|