24 May 2013

MENGUBAH NEWER DAN OLDER POST BLOGSPOT MENJADI NAVIGASI ANGKA

Pernahkah anda berkunjung pada sebuah blog dimana navigasi newer dan older post-nya tergantikan menjadi form angka ? Pada flatform Blogspot, secara default navigasi yang berupa tulisan newer-older post di bagian bawah halaman posting yang kita buat. Hal tersebut untuk memudahkan pengunjung untuk berpindah menuju posting yang lebih baru ataupun posting lama pada blog kita.

Untuk mengubah navigasi default tersebut menjadi bentuk angka, anda dapat mengikuti langkah berikut :

1. Login ke dashboard Blogger >> Template >> Edit HTML

2. Klik pointer mouse pada halaman kode HTML >> tekan Ctrl + F untuk memudahkan pencarian dan cari kode ]]></b:skin>, lalu copy-pastekan kode berikut kemudian letakkan tepat di atas kode ]]></b:skin>

.showpageNum a{font:15px Arial,Verdana;padding:4px 8px;margin:0 4px;text-decoration:none;border:0 solid #333;background:#dfdfdf;color:#686868;border:1px solid #989898}
.showpageOf{margin:0 8px 0 0;color:#222;font:15px Arial,Verdana}
.showpageNum a:hover{color:#494949;background:#dfdfdf;border:1px solid #626262}
.showpageArea{margin:10px 0;font:15px Arial,Verdana;color:#111}
.showpagePoint{color:#434343;font:bold 15px Arial,Verdana;padding:4px 8px;margin:2px;border:1px solid #b6b5b5;background:#fff;text-decoration:none}

3. Langkah selanjutnya cari kode </body> dan letakkan kode berikut tepat di atas kode </body>

<script type='text/javascript'>
var pageCount=4;
var displayPageNum=4;

var upPageWord =&#39;&#171; &#39;;
var downPageWord =&#39; &#187;&#39;;
</script>
<script src='http://project-goez.googlecode.com/files/Page%20number.js' type='text/javascript'/>

4. Pratinjau terlebih dahulu untuk melihat hasil dari kode ini, bila semua langkah tersebut tepat maka hasilnya akan terlihat sebagai berikut :

Cara mengubah newer post dan older post menjadi angka

Untuk mengubah tampilan kotak pada navigasi seperti pada gambar tersebut, anda tinggal menambah atau mengurangi angka yang terdapat pada kode :
var pageCount=4;
var displayPageNum=4;

5. Bila semuanya sudah sesuai dengan keinginan, klik Simpan.

Demikian cara mengubah newer dan older post Blogspot menjadi navigasi dalam bentuk angka, semoga bermanfaat dan selamat mencoba !
Written by: goez ini
Tips dan Trik, Updated at: 11:04 PM

No comments:

Post a Comment

Silahkan berkomentar dengan bijak dan sopan. Kritik dan saran Anda adalah masukan berarti bagi saya.