Membuat Navigasi Nomor Halaman Keren

       Lelah dengan lomba-lomba yang aku ikuti akhir-akhir ini, kali ini pun aku akan membuat artikel tentang 'Membuat Navigasi Nomor Halaman Keren' , sedikit berbagi hal-hal kecil yang berguna untuk ke-keren-an blog.  Sudah tau apa itu navigasi nomor halaman ?  Biasanya widget tersebut dapat di temukan di bawah artikel, contoh yang sering kita lihat ada di mbah google, yang ada nomor 1-10 ? Nah itu lah yang di sebut navigasi nomor halaman.

       Setiap blog kebanyakan sudah banyak yang menggunakan widget seperti itu, tapi apa tidak bosan lihat yang itu itu aja ?  Dalam kesempatan ini aku akan berbagi navigasi nomor halaman yang keren-keren daripada yang lain, dan gak hanya satu.. ada lima macam navigasi nomor halaman untuk di gunakan di blog kalian agar lebih menarik untuk di lihat dan bermanfaat juga pastinya.

       Tertarik ?  Salin dan Letakkan salah satu kode berikut ini, di atas kode </b:skin> ^_^


.pagenavi span, .pagenavi a {
display: inline-block;
padding: 0px 9px;
margin-right: 4px;
border-radius: 3px;
border: solid 1px #c0c0c0;
background: #e9e9e9;
box-shadow: inset 0px 1px 0px rgba(255,255,255, .8), 0px 1px 3px rgba(0,0,0, .1);
font-size: .875em;
font-weight: bold;
text-decoration: none;
color: #717171;
text-shadow: 0px 1px 0px rgba(255,255,255, 1);
}


.pagenavi span:hover,.pagenavi a:hover {
background: #fefefe;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FEFEFE), to(#f0f0f0));
background: -moz-linear-gradient(0% 0% 270deg,#FEFEFE, #f0f0f0);
}


.pagenavi a.current {
border: none;
background: #616161;
box-shadow: inset 0px 0px 8px rgba(0,0,0, .5), 0px 1px 0px rgba(255,255,255, .8);
color: #f0f0f0;
text-shadow: 0px 0px 3px rgba(0,0,0, .5);
}


.pagenavi span, .pagenavi a {
display: inline-block;
padding: 0px 9px;
margin-right: 4px;
border-radius: 3px;
border: solid 1px #32373b;
background: #3e4347;
box-shadow: inset 0px 1px 1px rgba(255,255,255, .1), 0px 1px 3px rgba(0,0,0, .1);
font-size: .875em;
font-weight: bold;
text-decoration: none;
color: #feffff;
text-shadow: 0px 1px 0px rgba(0,0,0, .5);
}
.pagenavi span:hover,.pagenavi a:hover {
background: #3d4f5d;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#547085), to(#3d4f5d));
background: -moz-linear-gradient(0% 0% 270deg,#547085, #3d4f5d);
}
.pagenavi a.current {
border: none;
background: #616161;
box-shadow: inset 0px 0px 8px rgba(0,0,0, .5), 0px 1px 0px rgba(255,255,255, .8);
color: #f0f0f0;
text-shadow: 0px 0px 3px rgba(0,0,0, .5);
}


.pagenavi {
width:300px;
margin: 50px auto;
}
.pagenavi span, .pagenavi a {
background: #f7f7f7;
background: -webkit-linear-gradient(top, #f7f7f7 0%,#f5f5f5 52%,#ebebeb 100%);
background: -moz-linear-gradient(top, #f7f7f7 0%,#f5f5f5 52%,#ebebeb 100%);
background: -o-linear-gradient(top, #f7f7f7 0%,#f5f5f5 52%,#ebebeb 100%);
background: -ms-linear-gradient(top, #f7f7f7 0%,#f5f5f5 52%,#ebebeb 100%);
background: linear-gradient(top, #f7f7f7 0%,#f5f5f5 52%,#ebebeb 100%);
padding: 5px 10px;
text-decoration: none;
color: #7e7e7e;
border: 1px solid #c6c6c6;
-webkit-box-shadow: inset 0 4px 3px rgba(255,255,255,0.6), 0 1px 3px rgba(0,0,0,.2);
-moz-box-shadow: inset 0 4px 3px rgba(255,255,255,0.6), 0 1px 3px rgba(0,0,0,.2);
box-shadow: inset 0 4px 3px rgba(255,255,255,0.6), 0 1px 3px rgba(0,0,0,.2);
font-weight: bold;
border-radius:3px;
}
.pagenavi span:hover,.pagenavi a:hover, .pagenavi a.current {
background: #9ad6fb;
background: -webkit-linear-gradient(top, #9ad6fb 0%,#77c4fc 100%);
background: -moz-linear-gradient(top, #9ad6fb 0%,#77c4fc 100%);
background: -o-linear-gradient(top, #9ad6fb 0%,#77c4fc 100%);
background: -ms-linear-gradient(top, #9ad6fb 0%,#77c4fc 100%);
background: linear-gradient(top, #9ad6fb 0%,#77c4fc 100%);
border: 1px solid #72ade4;
color: #4879a6;
-webkit-box-shadow: inset 0 1px 4px rgba(255,255,255,0.75), 0 1px 3px rgba(79,126,167,.5);
-moz-box-shadow: inset 0 1px 4px rgba(255,255,255,0.75), 0 1px 3px rgba(79,126,167,.5);
box-shadow: inset 0 1px 4px rgba(255,255,255,0.75), 0 1px 3px rgba(79,126,167,.5);
-webkit-transition: all 0.25s ease 0s;
-moz-transition: all 0.25s ease 0s;
-o-transition: all 0.25s ease 0s;
transition: all 0.25s ease 0s;
}
.pagenavi { border:none; }


.pagenavi {
width:300px;
margin: 50px auto;
}
.pagenavi span, .pagenavi a {
display: block;
text-decoration: none;
color: #717171;
font: bold 11px Arial, sans-serif;
text-shadow: 0px 1px white;
padding: 5px 8px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.35);
-moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.35);
box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.35);
background: #f9f9f9;
background: -webkit-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
background: -moz-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
background: -o-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
background: -ms-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
background: linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#e8e8e8',GradientType=0 );
}
.pagenavi span:hover,.pagenavi a:hover {
-webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.55);
-moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.55);
box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.55);
background: #fff;
background: -webkit-linear-gradient(top, #fff 0%, #e8e8e8 100%);
background: -moz-linear-gradient(top, #fff 0%, #e8e8e8 100%);
background: -o-linear-gradient(top, #fff 0%, #e8e8e8 100%);
background: -ms-linear-gradient(top, #fff 0%, #e8e8e8 100%);
background: linear-gradient(top, #fff 0%, #e8e8e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#e8e8e8',GradientType=0 );
border:none;
color:#575757;
}
.pagenavi a.current {
color: white;
text-shadow: 0px 1px #3f789f;
-webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.8);
-moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.8);
box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.8);
background: #7cb9e5;
background: -webkit-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
background: -moz-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
background: -o-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
background: -ms-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
background: linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7cb9e5', endColorstr='#57a1d8',GradientType=0 );
}
.pagenavi a.current:hover {
-webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.9);
-moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.9);
box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.9);
background: #99cefc;
background: -webkit-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
background: -moz-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
background: -o-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
background: -ms-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
background: linear-gradient(top, #99cefc 0%, #57a1d8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99cefc', endColorstr='#57a1d8',GradientType=0 );


}
.pagenavi a.current:active {
-webkit-box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,0.5), 0px 1px 1px 0px rgba(255,255,255,1) !important;
-moz-box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,0.5), 0px 1px 1px 0px rgba(255,255,255,1) !important;
box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,0.5), 0px 1px 1px 0px rgba(255,255,255,1) !important;
}

Rahasia (?)

.pagenavi span, .pagenavi a {
display: block;
text-decoration: none;
color: #717171;
font: bold 11px Arial, sans-serif;
text-shadow: 0px 1px white;
padding: 5px 8px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.35);
-moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.35);
box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.35);
background: #f9f9f9;
background: -webkit-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
background: -moz-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
background: -o-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
background: -ms-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
background: linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#e8e8e8',GradientType=0 );
}
.pagenavi span:hover,.pagenavi a:hover {
-webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.55);
-moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.55);
box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.55);
background: #fff;
background: -webkit-linear-gradient(top, #fff 0%, #e8e8e8 100%);
background: -moz-linear-gradient(top, #fff 0%, #e8e8e8 100%);
background: -o-linear-gradient(top, #fff 0%, #e8e8e8 100%);
background: -ms-linear-gradient(top, #fff 0%, #e8e8e8 100%);
background: linear-gradient(top, #fff 0%, #e8e8e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#e8e8e8',GradientType=0 );
}
.pagenavi span:active,.pagenavi a:active, .pagenavi a.current:hover {
-webkit-box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,0.5), 0px 1px 1px 0px rgba(255,255,255,1) !important;
-moz-box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,0.5), 0px 1px 1px 0px rgba(255,255,255,1) !important;
box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,0.5), 0px 1px 1px 0px rgba(255,255,255,1) !important;
}
.pagenavi a.current {
color: white;
text-shadow: 0px 1px #3f789f;
-webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.8);
-moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.8);
box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.8);
background: #7cb9e5;
background: -webkit-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
background: -moz-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
background: -o-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
background: -ms-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
background: linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7cb9e5', endColorstr='#57a1d8',GradientType=0 );
}
.pagenavi a.current:hover {
-webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.9);
-moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.9);
box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.9);
background: #99cefc;
background: -webkit-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
background: -moz-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
background: -o-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
background: -ms-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
background: linear-gradient(top, #99cefc 0%, #57a1d8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99cefc', endColorstr='#57a1d8',GradientType=0 );
}

      Ingat !  Cuma pasang satu dari ke lima macam kode navigasi nomor halaman di atas yaa..  Sudah tau kan letak </b:skin> dimana ? Letaknya di Blogger ke Template ke Edit HTML dan cari kode yang tadi dengan menggunakan 'ctrl + f' ,  di tunggu komentar dan sarannya juga !  Semoga bermanfaat yaaa~ ^^

Referensi : http://bloggerbin.com/5-cool-numbered-page-navigation-widgets/

Artikel Terkait

70 komentar:

diitra mengatakan...

mungkin yg benar itu di atas kode
itu kan kode CSS mas ?
kalau di bawah , itu kan tempatnya Javascript
itu cuma setau saya mas, maaf kalau salah :)

diitra mengatakan...

diatas kode mungkin yang benar, bukan di bawah

Deo Pradipta mengatakan...

oh iyaa.. maaf maaf u,u makasih koreksinya sob :D

nakusan computer mengatakan...

nice share Sob.
oya Sob, izin tuker link Sob.
link udah saya pasang d Blog link saya.
tolong d cek ya makasih...

Deo Pradipta mengatakan...

okeoke sob.. segera di pajang link sobat ^^ samasama :)

Nakusan mengatakan...

kunjungan malam Sob...

Deo Pradipta mengatakan...

silahkan di sedot ilmu nya juga ^^

Farid Wajdi Kardbri mengatakan...

kok gak bsa gan..??

Deo Pradipta mengatakan...

faktor face mungkin sob ._.v egak kok.. coba cek sumber kodenya :)

M Imron Pribadi mengatakan...

mas saya pasang kok gagal terus yaa, yang benar dipasang diatas b:skin atau dibawahnya mas

Deo Pradipta mengatakan...

setau saya sih harus ada kode lagi do bawah b:skin.. tapi mungkin kode2 ini buat cuma yg default aja.. soalnya di sumber kode cuma nyantumin kode itu ^^

Mire Tahu Tempe mengatakan...

keren sob :D

Deo Pradipta mengatakan...

waah.. makasih sob ^^ :D

Damai Dank mengatakan...

Sangat membantu..

Deo Pradipta mengatakan...

wokee sob .. semoga bermanfaat ^^

Obat Mata Minus mengatakan...

tak coba dulu gan tipsnya... makasih banyak

Deo Pradipta mengatakan...

silahkan di coba sob.. makasih juga ^^

z'waw tioonkseafa'ank mengatakan...

MAS SAYA IKUTAN DONG,,TUKER2 LINK
KN SYA ITU PEMULA UNTUK BLAJAR DI BLOGGER,,
JADI TLNG BNTUANNYA SMUA,,
COBA KALIAN LIHAT BLOG SAYA MNTA KRITIK DAN SRANNYA Y

NH BLOGGERNYA
http://thamansiswa.blogspot.com/

Rein Ray mengatakan...

maturnuwun masbro.. visit saya ya,saya masih pemula :D

Hanggar PS mengatakan...

kuk gak berhasil yah

Deo Pradipta mengatakan...

@z'waw : sudah bagus tuh template sob.. tinggal disempurnain sedikit ^^

@rein : ehehe.. langsung ke TKP sob ^^

@hanggar : hm.. ini cma buat template bawaan kayaknya sob .. cek sumber nya aja ;)

ilmu elektro mengatakan...

salam kenal.
mantabz boz..

Deo Pradipta mengatakan...

salam kenal juga sob :)

Iphand Putra Muhammad mengatakan...

thankss sobatt, jangan lupa mampir balik ya

www.iphand9.blogspot.com

makasihh .. :D

Deo Pradipta mengatakan...

ehehe.. iyaa sob.. langsung ke lapak ente :D

Irfan mengatakan...

kagak bisa sob :( minta saran yah all ane msih newbie http://www.irfansoftware.co.cc

Deo Pradipta mengatakan...

maaf sob kalo gabisa, ini bukan kode ane sndiri.. udah di cantumin tuh pula sumbernya ^_^

Yayasan TABUNGAN SURGA mengatakan...

artikal yg sangat menanrik

Deo Pradipta mengatakan...

iyaa makasih, semoga bermanfaat ^_^

blog seo mengatakan...

makasih gan, semoga sukses blog nya...

join site http://reza-solidaritas.blogspot.com/

Deo Pradipta mengatakan...

makasih sob, semoga aja, AMIN !!! :D

produk grosir mengatakan...

wah ini gan yang ane cari, makasih gan artikelnya bermanfaat buat ane..

Deo Pradipta mengatakan...

ehehe.. iya sob, semoga bermanfaat beneran yaa ^^ :)

Nia Kirana mengatakan...

Wahh thks yach gan, mav nie ane pemula banget
berguna semua nie post ente
berkunjung juga lah ke Blog ane
http://niakiranaberbagi.blogspot.com
se x lagi thks yach...

Deo Pradipta mengatakan...

ehehe.. samasama pemula kok sob :)
Amin, semoga bener2 bermanfaat deh :D

oke sob langsung ke lapak sobat ^_^

game keren mengatakan...

dengan memasang navigasi bar di blog,, memBuat load Blog jadi berat gak sob ?

Deo Pradipta mengatakan...

kemungkinan enggak sob, soalnya cuma sedikit kode yg dibutuhkan :)

hery setiawan mengatakan...

aq sdh pasang kok gk ada muncul2 ea ???

ajarin dong... so aq blogger pemula


http://ilmukomputer91.blogspot.com/

Deo Pradipta mengatakan...

udah dipasang di atas /b:skin> kan , navigasi sebelumnya bisa saja jadi pengaruhnya :)

Uem Cuters mengatakan...

Saya coba praktekan gan, trims ya...

Deo Pradipta mengatakan...

semoga berhasil dan bermanfaat yaa :)

90animax mengatakan...

saya coba dulu ya,
blognya kena sambar petir....

Deo Pradipta mengatakan...

bukan blognya, tapi pengunjungnya sob :D

Mecha-Glory mengatakan...

wokeh gan.... tak coba bagus CSS nya.
Akhirnya.. T_T
Makasih gan Dopind
http://www.animesubscorner.com/

Deo Pradipta mengatakan...

waaa, sip deh sob.. semoga bermanfaat yaa :D

tutorial blog mengatakan...

berbagi itu lebih baik . alhamdulillah bertemu web ini .
trimakasih
bravo untuk anda yang mengelola site ini .
sukses yah semoga bisa menjadi inspirasi untuk yg lain..

Deo Pradipta mengatakan...

bener banget sob, terimakasih juga ^_^
Amin, semoga semakin bermanfaat ini blog :)

:: Komputer Teman :: mengatakan...

kok saya ga bisa ya...?
saya pakai template standar blogger...

nextandy™ mengatakan...

aku mau yang seperti punya blog ini

Aban Sobandi mengatakan...

di cobain koq ga bisa ya gan..
apa ane yang ga ngerti,,,! hehe....
ijin ngenalin diri dulu ah :D
http://102rats.blogspot.com/

anton dwi handoko mengatakan...

salam kenal gan
mksh infonya tp kok tak coba gagal ea diblogqu?
boleh tanya2 seputar blog lainya ea gan?

Aditya L Pramana mengatakan...

tak coba dulu gan,, semoga berhasil...

Fakhrijal Fajar mengatakan...

thank's info nya sob..
tlong kunjungi blog saya
artofmoslem.blogspot.com

Anonim mengatakan...

www.blackhatstars.com

Yogie G. Kurniawan mengatakan...

izin sedot sob ^^

Didik Iskandar mengatakan...

Keren Boss, thank's ilmunya.. Semakin sering Anda berbagi, semakin banyak pahala&ilmu yg bertambah!!!

Trisna Sastradi mengatakan...

maknyos sob, semoga tambah maju blognya....
jangan sungkan mampir ya,,,, www.mediafunia.blogspot.com

gaptek32 mengatakan...

Sedikit koreksi sob, disana [link sumber] ada kalimat perintah menuju link anchor [link referensi]. dan yang sobat dopind share ini hanya CSSnya saja, jadi percuma saja biarpun kita sudah memasang CSS dari 1s/d5 kedalam template kita hasilnya yah NIHIL.

Suwardi Gagal Ganteng mengatakan...

Kalau Cuma Code CSS otomatis Tidak mau Navigasinya. kalau tidak salah Meski mengunakan JS atau Jquery....

TUMPAK SINAGA,SH mengatakan...

Jago gak

Sriwahyuni mengatakan...

kode js dimana ya? yang ini kan cuma css saja..

syafic anak magelang mengatakan...

so b low gak bisa kemungkinan apanya..........!!

saeful jihad mengatakan...

thank's gan...

Doel Khair mengatakan...

mantaff ini,, tapi setelah di coba,,ane blum berhasil...
ini blog ane http://aiti-script.blogspot.com

Deni Koswara mengatakan...

tidak berhasillll

martino adhi mengatakan...

gagal total gan

Navigasi Nomor Halaman mengatakan...

bagus nomor satu. Tapi kayaknya bagusan punya ane gan menu navigasinya, simple tp ttep elegan :)

pengunjung setia yg terlupakan
http:/aurigamaulana.blogspot.com

bisnis online paling murah mengatakan...

bermanfaat baget informasinya gan.. ane akan coba nie.. doakan ajha ya gan.. kapan-kapan ane berkunjung ge,,, jangan lupa gan postingan yang baruu,, hehe..

Iyep Saepudin mengatakan...

salam kenal mas
saya suka sekali dengan web ni jadi pengen belajar terus tentang per blogeran ,saya pengen sekali mendapat bimbingan dan arahan mas ini blog saya :
http://almujahidinrkm.blogspot.com/

Khubaib Sykron mengatakan...

thanks

Poskan Komentar

Askorus Distro Askorus Distro
Copyright 2010 - 2012 ^ Akatsuki Blog™ - Compatible with Chrome 1024 x 768 -