Tentunya akan sangat membosankan bila tampilan posting pada blog tidak ada menu tambahan seperti tombol untuk Next dan Previous yang ada hanyalah tampilan bawaan dari blog tersebut. Naah maka dari itu saya akan mencoba membagikan sedikit informasi untuk tampilan yang menarik tersebut untuk mempercantik tampilan blog kita.
Berikut adalah cara-caranya :
1. Pertama-tama tentunya dengan Login terlebih dahulu pada akun Anda
2. Setelah masuk akun anda, anda pilih >>Template<< pada tampilan Dasbor anda
3. Setelah itu pilih >>Edit HTML<<
4. Untuk menghindari hal-hal yang tidak di inginkan sebaiknya anda mengunduh dulu Templa Lengkapnya pada menu yang sudah disediakan pada bacaan >>Pulihkan/Sesuaikan<<
5. Setelah anda masuk >>Edit HTML<< cari kode script ]]></b:skin>6. Setelah ketemu, lalu copykan kode script di bawah ini di atas kode ]]></b:skin>
.showpageArea a {text-decoration:underline;}
.showpageNum a {text-decoration:none;border: 1px solid #998877;margin:0 3px;padding:3px;}
.showpageNum a:hover {border: 1px solid #ffeedd;background-color:#ffeedd;}
.showpagePoint {color:#ffffff;text-decoration:none;border: 1px solid ##ff8866;background: #ffcc77;margin:0 3px;padding:3px;}
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}
.showpage a {text-decoration:none;border: 1px solid #998877;padding:3px;}
.showpage a:hover {text-decoration:none;}
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#ffcc77;}
.showpageNum a {text-decoration:none;border: 1px solid #998877;margin:0 3px;padding:3px;}
.showpageNum a:hover {border: 1px solid #ffeedd;background-color:#ffeedd;}
.showpagePoint {color:#ffffff;text-decoration:none;border: 1px solid ##ff8866;background: #ffcc77;margin:0 3px;padding:3px;}
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}
.showpage a {text-decoration:none;border: 1px solid #998877;padding:3px;}
.showpage a:hover {text-decoration:none;}
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#ffcc77;}
7. Lalu setelah itu cari kode script </body> dan copykan kode script di bawah ini di atas kode </body>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord='Previous';
var downPageWord='Next';
</script>
<script src='http://marbun.googlecode.com/files/scriptsnext.js' type='text/javascript'/>
Keterangan : var pageCount=5;
var displayPageNum=5;
var upPageWord='Previous';
var downPageWord='Next';
</script>
<script src='http://marbun.googlecode.com/files/scriptsnext.js' type='text/javascript'/>
Untuk memudahkan pencarian kode tersebut tekan CTRL+F pada Keyboard anda. Dan untuk warnanya anda bisa menyesuaikan pada text yang berwarna biru di atas dengan kode-kode warna lainnya. Selanjutnya tinggal anda sesuaikan sesuai dengan selera.
8. Setelah semuanya selesai sesuai dengan prosedur, Simpan Template dan lihat hasilnya seperti pada contoh di bawah ini.
Naah .. sobat blogger sekian dulu informasi dari saya. sampai jumpi di episode selanjutnya. semoga bermanfaat.. :-D
Sumber Inspirasi : Klik Di Sini
Tidak ada komentar:
Posting Komentar