Membuat Page Navigasi Warna-Warni

Selamat siang,..bagaimana khabar Anda ini hari? mudah-mudahan sehat-sehat ajah yaa... heheheee Ok, langsung ke topic pembahasan,.. kalau kemarin saya pernah memposting tentang Membuat Thumbnail Post Berwarna nah kalau yang sekarang beda lagi (bukan thumbnail post lagi) tetapi page navigation.

Untuk DEMO-nya kurang lebih seperti gambar di bawah ini :

Dan untuk memasangnya di blog sangat sederhana sekali, silahkan Anda simak langkah-langkah di bawah ini:

1. Login ke akun blogger Anda.
2. Klik Template  Edit HTML.
3. Kemudian CTRL+F cari kode ]]></b:skin> atau </style> 
 4. Lalu tambahkan script css berikut ini tepat di atas kode ]]></b:skin> atau </style>

.showpageArea{float:left;color:#555;font-size:11px;margin:10px 0}
.showpageArea a{color:#555;text-shadow:0 1px 2px #fff}
.showpageNum a:hover,.showpage:hover{border:1px solid #b2b2b2;color:#555!important}
.showpage{margin:0}
.showpage:hover a{color:#555!important}
.showpagePoint{background:#f8f8f8;border:1px solid #b2b2b2;margin:0 2px 0 0;padding:5px 12px}
.showpageNum a,.showpageOf,.showpage{border:1px solid #e8e8e8;background:#f8f8f8;margin:0 2px 0 0;padding:5px 12px}

5. Tekan CTRL+F cari kode </body> lalu masukkan script di bawah ini tepat di atas kode </body>

<script type='text/javascript'>
 //<![CDATA[
function get_random_color() { var letters = '0123456789ABCDEF'.split(''); var color = '#'; for (var i = 0; i < 6; i++) { color += letters[Math.round(Math.random() * 14)]; } return color; } $(function () { $(".showpageNum a, .showpageOf, .showpage ").each(function () { $(this).css("background", get_random_color()) ; }); });
    var pageCount=4;
    var displayPageNum=4;
    var upPageWord='Prev';
    var downPageWord='Next';
    //]]>
</script>
<script type="text/javascript" src="http://sites.google.com/site/vanzdy/script/page-navigasi.js"></script>

6. Kemudian simpan template Anda dan lihat hasilnya.

Sekian dulu tutorial dari saya,.. Semoga bermanfaat.

Advertise

Contact Me

300x250

Advertise

Contact Me

300x250