Cara Membuat Nomor Halaman Blog Atau Number Widget Navigasi Blog

Berikut tutorial membuat nomor/widget navigasi pada halaman blog, 

penggunaan widget navigasi ini adalah untuk memudahkan pengunjung blog dalam menelusuri isi konten yang kita miliki dengan cepat. bisa dikatakan seperti melompat dari huruf A ke huruf Z, dari konten lama sampai yang terbaru, dan dapat mengetahui jumlah psotingan yang telah dipublikasikan

cara membuat navigasi tersebut pastinya menggunakan code javascript.

*contoh Jenis Navigasi :
Pertama

Kedua

Langkah langkahnya akan jelaskan dibawah ini :

• Langkah Pertama

Sobat buka Dashboard Blogger tentunya, lalu pilih Template dan klik Edit HTML

contoh gambar :

• Langkah Kedua

setelah sobat klik edit HTML, sobaat akan masuk ke area code HTML, biar lebih mudah dalam pencarian jenis code..sobat klik dimana saja di area kolom kode tersebut dan tekan Ctrl + F atau F3 sampai muncul kolom pencarian seperti gambar dibawah ini :

• Langkah ke Tiga

setelah itu sobat copy code dibawah ini dan pastekan di kolom pencarian HTML tersebut.

]]> </ b: skin>

• Langkah ke Empat

lalu sobat copy code di bawah ini, tepat di atas code ]]> </ b: skin> 

kode untuk Widget Navigasi Pertama

 #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}

.blog-pager {background: none;}

.displaypageNum a,.showpage a,.pagecurrent{padding: 5px 10px;margin-right:5px; color: #F4F4F4; background-color:#404042;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}

.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#EC8D04;text-decoration:none;color: #fff;}

#blog-pager .showpage, #blog-pager, .pagecurrent{font-weight:bold;color: #000;}

 .showpageOf{display:none!important}

#blog-pager .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}

kode untuk Widget Navigasi Kedua

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }

.blog-pager {background: none;}

.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #AD0B00; background-color:#FAB001;}

.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#DB4920;text-decoration:none;color: #fff;}

#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}

 .showpageOf{display:none!important}

#blog-pager .pages{border:none;}

• Langkah ke Lima

setelah itu sobat copy lagi code dibawah ini dan pastekan di kolom pencarian HTML tersebut.

</body>

• Langkah Terakhir

setelah itu sobat copy code tepat di atas code </body>  tersebut.

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<script type='text/javascript'>

  /*<![CDATA[*/

    var perPage=7;

    var numPages=6;

    var firstText ='Awal';

    var lastText ='Terakhir';

    var prevText ='« Sebelumnya';

    var nextText ='Selanjutnya »';

    var urlactivepage=location.href;

    var home_page="/";

  /*]]>*/

</script>

  <script src="http://helplogger.googlecode.com/svn/trunk/page-navigation2.js"/>

</b:if>

</b:if>

Keterangan :

van perPage adalah banyaknya postingan yang akan ditampilkan disetiap halaman. (disitu saya buat 7) itu bisa di lihat pengaturannya seperti pada gambar di bawah ini :

sedangkan van numPages banyaknya halaman yang ingin sobat ditampilkan di Halaman Navigasi sobat.

yup.. begitulah tutorial Cara Membuat Nomor Halaman Blog Atau Number Widget Navigasi Blog. semoga bermanfaat bagi sobat semua. 

:cendol

Terimakasih telah berkunjung  di CungkriengBlog jangan lupa Like dan Bagikan :shakehand

Tweet