Page Navigation for Blogger using CSS3 and Javascript


Mengapa membuat navigasi halaman Blog kita sebut paling praktis? Teramat sederhana sebenarnya yang menjadi alasan. Kode CSS dan javascriptnya telah terupload di file hosting sehingga sampeyan tinggal pasang linknya dan sedikit menambahkan script yang berfungsi untuk pengaturan jumlah posting yang akan ditampilkan setiap lembarnya! He ... he ... nggak ribet, khan?! Satu kelebihan lain dari navigasi halaman untuk blogger ini adalah pada penggunaan kode CSS3 yang berfungsi untuk menimbulkan beberapa efek pada background, warna teks/font, warna border dan transparansi (opacity effects). Menarikkah? Cantik nggak klo dipasang di blog sampeyan? Ho ... ho ... mana aku tahu! Coba saja, dah, biar jadi ngerti cocok nggaknya! Yang jelas model beginian blom satupun yang pernah buat. Nggak percaya? He ... he ... coba saja browsing sebentar. Yah ... klo ada aku kasih bonus, dah! Wisata gratis ke Mars naik kuda kepang atau sapunya si Sirik! Hua ... ha ... biar kesurupan dan pintar menangkap meteor yang lagi terbang di langit sono !!!!

D E M O

Cara Membuat Page Navigation


  • Login ke Bloger.
    • Tuliskan Email Address.
    • Tuliskan Password.
    • KLIK "LOGIN".
  • Setelah "Halaman Dasbor terbuka", klik "Design Rancangan".
  • KLIK "Edit HTML".
  • KLIK "Download Full Templates/Download Template Lengkap" untuk melakukan pengamanan template (back-up templates).
  • Simpan file template di folder PC.
  • Tetap di "Edit HTML".
  • Cari kode <head>, kemudian copy dan pastekan link kode CSS di bawahnya.
    • <head>

    <link href='https://sites.google.com/site/gubhugreyot/css/bgsGR_PageNumNavigation2.css' rel='stylesheet' type='text/css'/>
  • Cari kode <b:section class='main' id='main', kemudian copy dan pastekan javascript di bawah kode </b:section>.
    • <b:section class='main' id='main' .... />
    .....
    .....
    <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
    </b:section>

    <script type='text/javascript'>
    var pageCount=5; /* jumlah posting per halaman */
    var displayPageNum=5; /* jml nmr halaman yang ditampilkan */
    var firstPageWord = &#39;First&#39;; 
    var endPageWord = &#39;Last&#39;; 
    var upPageWord =&#39;Previous&#39;;
    var downPageWord =&#39;Next&#39;;
    </script>

    <script src='https://sites.google.com/site/gubhugreyot/javascript/bgsGR_PageNumNavigation2.js' type='text/javascript'/>
  • KLIK "SAVE Templates/Simpan Templates".
  • Buka blog pada halaman utama .
    Contoh : http://gubhugreyot.blogspot.com

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :


Update » Setu LEGI, Maret, 03, 2012

» Happy Blogging - gubhugreyot «

Comments

Post a Comment