Membuat Tombol Navigasi di Blog dengan CSS - Hallo sahabat Belajar Pertanian Organik, Pada Artikel yang anda baca kali ini dengan judul Membuat Tombol Navigasi di Blog dengan CSS, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Info tips Blogging, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Membuat Tombol Navigasi di Blog dengan CSS
link : Membuat Tombol Navigasi di Blog dengan CSS

Membuat Tombol Navigasi di Blog dengan CSS

Bagaimana cara membuat navigasi halaman pad blog dengan CSS ?Sudah tau belum apa tu namanya navigasi halaman pada blog ? Navigasi halaman adalah angka/tombol angka yang digunakan oleh blogger untuk blogspot. Biasanya dibuat untuk mempermudah pengunjung melihat semua postingan blog. 

Misal : Ente sedang berada di num 1 dan ente ngklik lagi ke num 2. Artinya, dengan anda sudah mengklik ke numer dua. Maka halaman navigasi blognya adalah pada halaman kedua. Udah tau ?

Berikut saya berikan capturenya  dari blog saya :

Example :

Nah, udah pernah liat kan :)
Oke langsung saja saya kasih tau gimana caranya.

=> Login ke blog kamu.

=>Pilih menu "template"  sebelum ngedit, ada baiknya kamu back up /download dulu template kamu , lalu klik edit html.

=>Centang expand template widget.

=>Cari kode </b:skin> , gunakan Cttrl+F untuk menenukannya.

=>Copy kode css berikut dan PASTE kan SEBELUM </b:skin> tadi ya.

.showpageNum a
{
font:15px Arial,Verdana;
text-decoration:none;
background:#000;
color:#FFF;
border:1px solid #000;
margin:0 4px;
padding:4px 8px;
}
.showpageOf
{
color:#cc0000;
font:15px Arial,Verdana;
margin:0 8px 0 0;
}
.showpageNum a:hover
{
color:#FFF;
background:#cc0000;
border:1px solid #cc0000;
}
.showpageArea
{
font:15px Arial,Verdana;
color:#FFF;
margin:10px 0;
}
.showpagePoint
{
color:#FFF;
font:bold 15px Arial,Verdana;
border:1px solid #FFF;
background:#cc0000;
text-decoration:none;
margin:2px;
padding:4px 8px;
}
.showpageNum a
{
font:15px Arial,Verdana;
text-decoration:none;
background:#000;
color:#FFF;
border:1px solid #000;
margin:0 4px;
padding:4px 8px;
}
.showpageOf
{
color:#cc0000;
font:15px Arial,Verdana;
margin:0 8px 0 0;
}
.showpageNum a:hover
{
color:#FFF;
background:#cc0000;
border:1px solid #cc0000;
}
.showpageArea
{
font:15px Arial,Verdana;
color:#FFF;
margin:10px 0;
}
.showpagePoint
{
color:#FFF;
font:bold 15px Arial,Verdana;
border:1px solid #FFF;
background:#cc0000;
text-decoration:none;
margin:2px;
padding:4px 8px;
}


Lalu cari kode  </body> dan pastekan kode dibawah ini setelah </body>  tersebut :

<!– PAGE NAVIGATION START IBLOGNET.COM–>
<script type=’text/javascript’>
var pageCount=15;
var displayPageNum=5;
var upPageWord =’« ‘;
var downPageWord =’ »’;
</script>
<script src=’http://dl.dropbox.com/u/23364774/iblognet/JS/page-navigation.js’ type=’text/javascript’/>
<!– PAGE NAVIGATION STOP IBLOGNET.COM–>

Keterangan :
Huruf merah  itu, adalah jumlah counter per pagenya, dan biru itu nomer page yang akan ditunjukkan. Anda boleh mengganti masing-masing angka tersebut sesuai dengan seleranya .

 => Sudah rebes semua ???
=>View blog kamu dan simpan !

Original script from ibognet.com.  Edited without remove script by pagemenu blogspot . You can visit this site

Demikianlah Artikel Membuat Tombol Navigasi di Blog dengan CSS

Sekianlah artikel Membuat Tombol Navigasi di Blog dengan CSS kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Membuat Tombol Navigasi di Blog dengan CSS dengan alamat link https://caramenanamorganik.blogspot.com/2012/10/membuat-tombol-navigasi-di-blog-dengan.html

Tweet