Tempat Berbagi Berita, Cerita dan Derita

Kategori Yang Kalian Suka

Post ini diterbitkan pada : Saturday, January 10, 2009

Cara Membuat Navigasi Halaman

Tips and Trick kali ini adalah membuat navigasi halaman seperti kepunyaan blog gue.Siapa sih blogger yang ga mau menambah cantik penampilan blog nya?? (Mungkin ga ada kali yach.. ^^).Sedikit Tips and Trick dari Gue alias "Si Gaul Dari Goa Batu" untuk anda,Cara membuat menu navigasi halaman di blog.


Cuakepppp..Cuakeppp..Cuakeepppp
Jojing....Jojing....jojing...
Mau...Mau...Mau... ( Mirip iklan ga yah?? hehehe )
Check This out bro..!!!^^



caranya sangat mudah banget kok, sobat semua tinggal Add Widget ( TATA LETAK --> EDIT HTML --> ADD WIDGET/TAMBAH ELEMEN HALAMAN ) dan masukkan kode berikut ini :

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


Jangan lupa add eidget ini pas di bawah kolom posting yah.. dan jangan dikasih judul..^^

Ada pertanyaan?? comment aja yah..

See u..^^

Do you like this post? You can share it with your community..
Dapatkan update artikel lewat email

Artikel Terkait

22 comments:

Leo wah ini calon 2 blogger sejati nich. thank bantuannya ya. kapan kapan mampir juga ya

wow ini bener yg gue cari akhirnya malah nemu disini.......thanks ya. TOP BGT

Hallo!!!!
Salam kenal mas....
Saya tertarik dengan artikel mas yang ini...
Saya telah coba menambahkannya di blog saya, tapi mengalami kendala, ternyata elemen yang saya tambahkan tersebut tidak muncul. Apa sebenarnya masalahnya mas????

@didiet Mungkin masalahnya ada di jumlah page count posting di halaman depan anda tidak sesuai.Jika jumlah posting yang tampil di halaman depan blog anda 5,maka anda tinggal mengganti kode var pageCount=7; menjadi var pageCount=5;

hii.. m o nanya.. scripnya taro dimana bro..bingung eui

widget menarik, saya mau coba ah... trims...

nice info.. cb dulu ahh..

menarik juga, praktekin dulu yaa!! thanks sobb

bos aku udah ganti jumlah page count posting di halaman depan dari = 7 menjadi = 5 tapi ko tetap aja ga muncul bos piye ya?

tipsnya mantep bos,,,tapi kok aku nggak berhasil yah

bos bagaimana caranya setiap postingan yang kita buat terus bisa kita masukan ke setiap navigasi menu sesuai menu kenginan kita, dah 2 minggu buntu. tolong bosa

Jawaban bung Leo ngawur ah... makanya artikel jangan asal copas, tuh jadi kasihan temen2 blogger lainnya khan...

Perhatikan kode berikut:

)==".blogspot.com/";

isikan dengan url anda...

)=="NAMA-BLOG-KAMU.blogspot.com/";

selanjutnya...silahkan Kang Leo...^_^

Mampir baca om..jangan lupa kunjungi blog ane yah blog Mr. Andry

thank ea ,ternyata berhasil

Informasi Terhangat tentang 7 kejadian langka dan spektakuler di seluruh dunia, ikuti update-an nya setiap hari.. Keep stay tune!!

kyk halaman buku yah jdiny..

bikin navigasi ini, bikin blog q jdi bertambah berat :(

perbanyak page view dengan cara ini..

jdi lbh mudah klo koneksi ny lancr..

Saya coba terpakan gan, trims ya...di tunggu kunjungan baliknya.

My Tweet

 
Site Meter
© 2008 Blogger Abstrak | Template by : O-zone | Owner : Angga Leoputra