Cara Merubah Navigasi Halaman

Salam sukses selalu buat sobat semua, Belajar Komputer Melalui Internet saat ini akan sedikit membahas tentang Cara Merubah Navigasi Halaman dan semoga artikel ini bermanfaat.

---

Cara Merubah Navigasi Halaman yaitu merubah navigasi halaman default agar lebih kelihatan menarik, Apa itu Navigasi halaman? mungkin buat bloger pemula ada yang belum tau istilah ini, Navigasi halaman yaitu Navigasi atau petunjuk halaman yang berada di bagian bawah halaman, defaultnya navigasi halaman hanya berisi tulisan posting lebih baru, beranda dan posting lama.

Gambar diatas contoh Navigasi halaman default blogspot.
Nah, sekarang kita akan rubah navigasi tersebut supaya kelihatannya lebih menarik dibawah ini contoh tampilannya;

Demonya silahkan saja lihat di homepage blog ini kemudian klik selanjutnya..
Bagi sobat yang masih menggunakan navigasi halaman default dan ingin merubahnya maka ikuti saja tutorialnya dibawah ini.

Langkah-langkah merubah navigasi halaman;

1. Login ke blogger dengan ID anda.
2. Klik Rancangan atau template untuk tampilan bloger baru
3. Klik tab Edit HTML. lanjutkan dan centang tanda Expand Template Widge.
4. Disarankan untuk membuat backup terlebih dahulu, klik pada tulisan Download Template Lengkap.
5. Setelah itu cari kode  ]]></b:skin> selanjutnya simpan kode CSS dibawah ini tepat diatas kode ]]></b:skin> tersebut.

#blog-pager{padding:5px 6px;clear:both;}.showpageArea{float:left;}
.showpageOf{margin:0 2px 0 0;padding:5px 9px;color:#666;font:12px Arial,Verdana;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCdt2Qs6ccmITUHwZlqx6Xg2yS0VI8Dg4__TTrM0F5v3RZB7NHYLJAszeiZaFKD5-wGcxKYLd2drztoYzrAtRT7Rx26BmuJXClIrwb74TCScoUYCsQppGUch_z3nClYqSyhDCSUroW6ilt/s1600/menu-primary-bg.png);}
.showpagePoint{color:#fff;font:bold 12px Arial,Verdana;padding:5px 9px;margin:2px;border:0 solid #fff;background:#bb0f14;text-decoration:none;}
.showpageNum a{font:12px Arial,Verdana;padding:5px 9px;margin:0 4px;text-decoration:none;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCdt2Qs6ccmITUHwZlqx6Xg2yS0VI8Dg4__TTrM0F5v3RZB7NHYLJAszeiZaFKD5-wGcxKYLd2drztoYzrAtRT7Rx26BmuJXClIrwb74TCScoUYCsQppGUch_z3nClYqSyhDCSUroW6ilt/s1600/menu-primary-bg.png);color:#666;}
.showpageNum a:hover{color:#444;background:#d7d7d7;}
.showpage a{font:12px Arial,Verdana;padding:5px 9px;margin:0 4px;text-decoration:none;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCdt2Qs6ccmITUHwZlqx6Xg2yS0VI8Dg4__TTrM0F5v3RZB7NHYLJAszeiZaFKD5-wGcxKYLd2drztoYzrAtRT7Rx26BmuJXClIrwb74TCScoUYCsQppGUch_z3nClYqSyhDCSUroW6ilt/s1600/menu-primary-bg.png);color:#666;}
.showpage a:hover{color:#444;background:#d7d7d7;}
.showpageArea{margin:10px 0;font:12px Arial,Verdana;color:#666;}

6. Selanjutnya sobat cari kode dibawah ini,

<script type='text/javascript'>
google.load(&quot;annotations&quot;,&quot;1&quot;,{locale:&quot;<data:top.languageCode/>&quot;});function initialize(){google.annotations.setApplicationId(<data:top.blogspotReviews/>);
google.annotations.createAll();
google.annotations.fetch()}
google.setOnLoadCallback(initialize);
</script>
</b:if>

7. kalau sobat sudah menemukan kode diatas silahkan sobat tambahkan kode dibawah ini tepat dibawah kode </b:if>nya.

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:include name='nextprev'/>
<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=6;
var numshowpage=4;
var upPageWord=&quot;Sebelumnya&quot;;
var downPageWord=&quot;Selanjutnya&quot;;
</script>
<script src='http://my-project-favicon.googlecode.com/files/Navigasi%20page.js' type='text/javascript'/>
</b:if>
</b:if>

• huruf yang berwarna merah pada var postperpage=6; menunjukan jumlah postingan yang ditampilkan khususnya pada halaman ke 2 dan seterusnya. karena jumlah postingan pada halaman pertama dapat terpengaruh dengan jumlah postingan yang diatus dari Edit post pada halaman tata letak.
• huruf yang berwarna merah pada var numshowpage=4; mrnunjuksn jumlsh huruf yang ditampilkan pada navigasi halaman tersebut.

Sebagai tambahan penyimpanan kode yang berada pada point 7 dapat juga sobat sesuaikan penempatannya jika pada template sobat tidak menemukan kode yang berada pada point 6.

Sobat bisa memasang kode point 7 tersebut dibawah kode < /b:section> widget postingan atau id='Blog1'. dan ini biasanya sebelum <sidebar-wrapper> atau sobat boleh mencobanya menyimpan kode point 7 tersebut tepat diatas kode </body>

Mungkin sampai disini dulu Belajar Komputer Melalui Internet tentang Cara Merubah Navigasi Halaman kali ini, semoga bermanfaat bagi Anda.

DAPATKAN ARTIKEL VIA EMAIL

Masukan Alamat Email Sobat:

Delivered

BACA JUGA ARTIKEL TERKAIT LAINNYA

Dipublish oleh : Abdul Kohar - Jatinangor Rating 5 Belajar Komputer Melalui Internet, Updated at: 17:22