4.5.11

Untuk menjelajah ke halaman berikut dengan tampilan navigasi page berupa older post dan new post benar-benar saya merasa gak nyaman. Karena tidak memberikan kenyamanan pengunjung untuk menjelajah isi blog secara acak.

Setelah saya mencari sumber untuk tips Cara Membuat Next Page Number 1234 di Blogspot saya menemukan beberapa langkah yang bisa diterapkan. Namun tidak semua
langkah yang ada cocok dengan template yang saya pakai. Saya sudah coba-coba, dan akhirnya yang paling pas nerapin ini.

Mau tau kan cara membuat navigasi page seperti di atas berikut langkah-langkahnya :

Pertama,pergilah ke dashboard blogger anda,selanjutnya,pilih tata letak,dan pilih edit html.
Seperti biasa,contreng option expand widget templates,selanjutnya cari kode berikut:


]]></b:skin>

Setelah ketemu,letakkan persis diatasnya kode css dibawah ini:

.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;
}

Lalu,cari lagi kode seperti ini:

</body>

Jika sudah ketemu,tepat diatasnya letakkan script dibawah ini:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>

Langkah terakhir,carilah kode berikut:

'data:label.url'

Jika sudah ketemu,hapus kode tersebut dan gantilah kode berikut:

'data:label.url + &quot;?&amp;max-results=5&quot;'

Sekarang,simpan templates anda,dan anda bisa lihat hasilnya sekarang

6 komentar:

  1. makasih sob tutorialnya...happy blogging

    ReplyDelete
  2. @corolla78:silahkan sob terima kasih atas kunjungannya..

    ReplyDelete
  3. next page yang manis dan simpel, punyaku cuma tanda panah doang, boleh juga nih dipasang didesa, nanti bila waktu memungkinkan ya kang.

    hepi ng'blog

    ReplyDelete
  4. Thx Mas untuk informasi yang sangat berharga ini. Izin Copy untuk di caba ya mas. GBU.

    ReplyDelete
  5. trims sob.berhasil di terapkan http://agusciamis.blogspot.com

    ReplyDelete

Jangan menulis link hidup.Bentuk apapun
link hidup pasti saya hapus,terima kasih atas perhatiannya

ShareThis