Modifikasi Page Navigation Blogger ~ Ada Nggak

Modifikasi page navigation blogger sering dilakukan oleh para blogger untuk memetakan postingan dalam blog mereka. Sebenarnya page navigation ini memiliki salah satu fungsi yaitu untuk mempermudah pengunjung blog dalam mencari artikel yang lebih lama dalam bog yang kita miliki. Sehingga dengan demikian jumlah pegeview pada postingan lama akan terus bertambah dan tetap berada pada posisinya di serp engine google.

Seperti apakah bentuk modifikasi page navigation blogger ini? yuk sama-sama kita lihat screnshot dibawah ini

Sekarang bagaimana, sudah jelaskan? jika kita mengunjungi google dan mencari sebuah artikel yang kita butuhkan, Anda dapat melihat page navigation google dibawah halaman pencarian. Nah, jika Anda juga tertarik untuk mengimplementasisikan kedalam blog yang Anda miliki, yuk mari sama-sama kita simak tutorial yang akan dijelaskan berikut ini. Sebelumnaya langkah ini akan berfungsi pada template standar bawaan blogger, karena saya sudah mencobanya, namun jika Anda menggunakan template dari pihak ke tiga atau template download-tan, Anda juga bisa mencobanya.

1. Login terlebih dahulu ke account blogger Anda

2. Pilih rancangan atau tataletak jika Anda menggunakan dasbor blogger baru

3. Download lengkap template blogger Anda untuk meminimalisir resiko jika nanti terjadi kesalahan

4. Jika sudah, langkah selanjutnya adalah cari kode ]]></b:skin> (gunakan ctrl + f)

5. Kemudian masukkan kode berikut ini di atas kode ]]></b:skin>

.blog-pager,#blog-pager{
font-family:"Times New Roman", Times, serif;
font-weight:normal;
width:500px;
font-size: 0.8em;
}
.showpageNum a,.showpage a {
display: block;
float: left;
padding: 3px 5px 3px 5px;
margin-right: 3px;
border: 1px solid;
color: #FF6400;
border-color: #FF6400;
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMUIE2tO9-zsk9icceGtu90Z8p9Dzoyf2P9MTRz4hJaC9clTTmY9j-FLGWGV4tck85tfrgOGfKrpJ0HSNC14AjfHxVdTjAexc5bIoQXyzI26S-FJtGmUWsNsAaqEAwAw9VZ9IQSImo_KEw/s1600/Meneame.png) bottom left repeat-x;
text-decoration:none;
}
.showpageNum a:hover,.showpage a:hover {
border-color: #FF9400;
background: #FFBE94;
color: #FF6400;
}
.showpageOf{
margin:0 8px 0 0;
display:none;
}
.showpagePoint {
border-color: #FF9400;
background: #FFBE94;
color: #FF6400;
border: 1px solid;
font-weight: bold;
display: block;
float: left;
padding: 3px 5px 3px 5px;
margin-right: 3px;
}

Rekomendasi : Agar ukuran kode CSS menjadi lebih kecil, saya merekomendasikan dan menyarankan kepada Anda untuk mengkompres kode css diatas. Hal ini dilakukan untuk menghindari lambatnya loading blog yang anda miliki. Anda dapat menguunakan CSS compressor tool yang telah saya sediakan dan sangat mudah dalam penggunaannya.

6. Kemudian langkah selanjutnya adalah, cari kode </body>

7. Lalu masukkan kode berikut ini di atas kode </body>

<script type='text/javascript'>;
var home_page='/';
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=4;
var upPageWord ='Prev';
var downPageWord ='Next';
</script>;
<script src='http://super-bee-pagenavigation.googlecode.com/files/pagenavigation.js' type='text/javascript'></script>

Perhatikan angka yang berwarna merah dan biru, angka 7 merupakan nomor untuk halaman page navigationnya. Sedangkan angka 4 adalah jumlah banyaknya nomor yang akan ditampilkan dalam page navigation Anda.

8. Langkah selanjutnya cari kode 'data:label.url'

9. Lalau ganti kode tersebut dengan kode berikut ini

'data:label.url + "?&max-results=7"'

Perhatikan angka yang berwarna merah, ubah angka 7 berdasarkan berapa banyak posting setiap halaman

10. Klik pretinjau untuk melihat hasil sementara kemudian save.

Post title : Modifikasi Page Navigation Blogger
URL post : https://adanggak.blogspot.com/2012/05/modifikasi-page-navigation-blogger.html