CARA MEMBUAT NAVIGASI HALAMAN

Mungkin banyak sobat yang mencari cara supaya di blognya ada navigasi halaman… iya khan? Navigasi halaman ini untuk memudahkan pengunjung blog atau web dalam melakukan pencarian artikel atau postingan.

Tombol navigasi halaman ini sebenarnya kurang lebih sama dengan tombol next atau previous pada blog sobat, namun bedanya navigasi halaman bisa membuat pengunjung ingat tempat suatu artikel atau postingan pada halaman ke berapa pada blog kita. Karena navigasi halaman menampilkan nomor per halaman blog kita, seperti contoh pada halaman bawah dari google, terlihat tombol navigasi halaman untuk memudahkan pengunjung dalam pencarian keyword yang di maksud.

Berikut langkah mudah dalam membuat navigasi halaman :

Login ke Blogger sobat.
Klik Lay out atau rancangan
Kemudian klik Tambah Gadget.
Pilih yang Edit HTML/Javascript.
Tambahkan kode berikut pada kotak kosong yang tersedia.

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

}

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=8;
var displayPageNum=4;

var firstPageWord = ‘First’;

var endPageWord = ‘Last’;

var upPageWord =’Previous’;

var downPageWord =’Next’;

var labelHtml = ‘‘;

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 +’‘;

}else{

upPageHtml = ‘‘+ upPageWord +’‘;

}

}else{

upPageHtml = ‘‘+ upPageWord +’‘;

}

fFlag++;
}

if(p==(thisNum-1)){
html += ‘ ‘+thisNum+’‘;

}else{

if(p==0){

if(isLablePage){

html = labelHtml+’1‘;

}else{

html += ‘1‘;

}

}else{

html += ‘‘+ (p+1) +’ ‘;

}

}

if(eFlag ==0 && p == thisNum){
downPageHtml = ‘ ‘+ downPageWord +’‘;

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 = ‘‘+ firstPageWord +’ ‘+upPageHtml+’ ‘+html +’ ‘;

}else{

html = ”+labelHtml + firstPageWord +’ ‘+upPageHtml+’ ‘+html +’ ‘;

}

}

html = ‘

Halaman ‘+thisNum+’ dari ‘+(postNum-1)+’: ‘+html;

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

html += ‘ ‘+endPageWord+’‘;

}

if(postNum==1) postNum++;
html += ‘

‘;

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;

}

}

}

Drag and drop widgetnya tepat dibawah kolom postingan.
Kemudian Save.

Untuk var pageCount=8; –> jumlah postingan dalam satu halaman, jadi sobat sesuaikan dengan jumlah postingan sobat dalam satu halaman. Jika sobat menampilkan 8 postingan setiap halaman, maka sobat gunakan var pagecount=8. Kalau 3, maka gunakan var pageCount=3
Selamat bereksperimen

About imranxrhia

saya hanya orang biasa, yang tinggal di rumah biasa. Di daerah yang biasa dan di negara yang sangat biasa.Tetapi saya berusaha untuk melakukan hal yang luar biasa. ^_^

Posted on 28 February 2011, in Tips Blog. Bookmark the permalink. 2 Comments.

  1. punyamu linknya juga udah terpasang : )

  2. @Eko: makasih sob….

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: