Cara membuat page navigasi warna warni

Selamat sore sobat,.. apa kabar nie,.?? mudah²an sobat sehat² ajah yaa.... heheheee
Ok,.. langsung ke topic pembahasan ,.. kalo kemarin saya pernah memposting tentang Cara membuat thumbnail post warna warni nah kalo yang sekarang beda lagi sob (bukan thumbnail post lagi) tetapi page Navigation.
Tutorial ini saya buat berdasarkan permintaan dari sobat blogger bernama Abdul Halim
Untuk DEMO nya kurang lebih seperti gambar di bawah ini :

Simak langkah² dibawah ini:

1. Login ke akun blogger sobat

2. Klik Template » Edit HTML

3. Kemudian tekan Ctrl+F cari kode ]]></b:skin> atau </style>

4. Lalu tambahkan script CSS berikut ini tepat diatas 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 masukan 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 sobat dan lihat hasil nya.

Sekian dulu tutorial dari saya,.. Semoga bemanfaat.