Jumat, 15 Maret 2013

Cara merubah tampilan Halaman Blog jadi cantik

Met malam sob, Semut ucapin terimakasih karena telah sudi mampir kesini. Tidak biasanya semut rajin update, dan mumpung lagi semangat, kali ini semut ingin sedikit berbagi tips yang semoga bisa berguna bagi kita semua.
Dan seperti biasa siapin dulu kopi plus cigaretnya hehe,,,

Oke sob langsung aja ketopik, kali ini yg akan kita bahas adalah tips merubah tampilan next page pada blogger kesayangan kita.

Secara umum, navigasi untuk pindah halaman di blogspot biasanya menggunakan link dengan teks "Older Posts" dan "Newer Posts". Beda dengan wordpress yang navigasinya bisa berbentuk angka sehingga bisa memudahkan untuk loncat beberapa halaman ke postingan yg lama maupun baru.


Nah trik kali ini akan menjelaskan bagaimana cara mengganti link"Older Post" dan"Newer Post" menjadi angka seperti gambar di atas.

1. Langkah awal kita langsung menuju ke desain template anda kemudian ke "Edit HTML"
2. setelah itu cari kode ini ]]>/b:skin ,kalau sudah ketemu taruh script dibawah ini sebelum kode tersebut
.showpageArea a { text-decoration:underline; } .showpageNum a { text-decoration:none; border: 1px solid #cccccc; margin:0 3px; padding:3px; } .showpageNum a:hover {border: 1px solid #cccccc; background-color:#cccccc; } .showpagePoint { color:#333; text-decoration:none; border: 1px solid #cccccc; background: #cccccc; margin:0 3px; padding:3px; } .showpageOf { text-decoration:none; padding:3px; margin: 0 3px 0 0; } .showpage a { text-decoration:none; border: 1px solid #cccccc; padding:3px; } .showpage a:hover { text-decoration:none; } .showpageNum a:link,.showpage a:link { text-decoration:none; color:#333333; }

3. setelah itu cari kode ini </body> kemudian taruh script dibawah ini sebelum kode tersebut.
<!--Page Navigation Starts--> <b:if cond='data:blog.pageType !="item"'> <b:if cond='data:blog.pageType !="static_page"'> <script type='text/javascript'> var pageCount=5; var displayPageNum=5; var upPageWord ='Previous'; var downPageWord ='Next'; </script> <script src='http://bloggergadgets.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/> </b:if> </b:if> <!--Page Navigation Ends --></script>

Kalau sudah silahkan dilihat hasilnya. Lumayan beda bukan?? Paling tidak tampilannya tidak seperti blogspot pada umumnya.

Jangan lupa baca artikel menarik lainnya Cara mudah edit blog menggunakan HP

Oke sob sampai nanti di tips dan trik semut selanjutnya,,,, Salam

Tidak ada komentar: