Kamis, 16 Januari 2014

Memasang Nomer Navigasi Halaman Blog, Bukan Artikel

Memasang Nomer Navigasi Halaman Blog, Bukan Artikel - Artikel ini merupakan artikel aneh yang akan saya bahas karena dengan template yang sama ternyata saya tidak bisa memasang nomer navigasi halaman blog, padahal saya pernah membuat artikel yang sama tentang nomer halaman blog ini. Namun setelah saya mengganti template blog seperti tampilan sekarang ini, ternyata panduan di artikel yang lama tidak bisa saya lakukan, aneh.. Akhirnya saya pun mencari tutorial yang lain dalam memasang nomer halaman blog ini

Dalam pencarian tutorial tersebut, akhirnya saya menemukan salah satu tutorial yang cocok dengan template baru blog ini dan bisa dipasang, seperti yang terlihat di halaman depan blog ini :)

Memasang Nomer Navigasi Halaman Blog, Bukan Artikel

Anehnya lagi adalah judul artikel blog ini, Memasang Nomer Navigasi Halaman Blog, Bukan Artikel. Kenapa ada embel-embel Bukan Artikel? Karena sampai saat ini, sebenarnya saya ingin juga memasang nomer navigasi blog tidak hanya di halaman depan blog saja tapi juga di halaman artikel. Segala cara sudah saya lakukan agar bisa memasang nomer navigasi halaman di artikel blog tapi semua kode yang saya dapat, saya edit, dan saya pasang ternyata gagal terus. Daripada memikirkan satu hal yang akan mengganggu yang lainnya, akhirnya saya menyerah.. Jika ada teman-teman yang memiliki tutorial tentang memasang nomer halaman di artikel blog, tolong untuk di bagi-bagi melalui komentar ya...

Okey, lanjut pada artikel... Langsung saja ya...
Berikut Cara Memasang Nomer Navigasi Halaman Blog, Bukan Artikel:

CSS
Salin kode CSS berikut ini kedalam template sebelum kode ]]></b:skin> atau </style>
.pagenavi{clear:both;margin:10px auto;text-align:center}
.pagenavi span,.pagenavi a{padding:10px; margin-right:5px; padding-top:5px; padding-bottom:5px; background:#FFFFFF; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
.pagenavi a:hover,.pagenavi .current{background:#ff8400;color:#fff;text-decoration:none}
.pagenavi .pages,.pagenavi .current{font-weight:normal}
.pagenavi .pages{border:none}
.pagenavi span, .pagenavi a {display: inline-block;padding:12px;margin-right: 4px;border-radius: 3px;background: #e9e9e9;font-family:Oswald;font-size:12px;font-weight:normal;text-decoration: none;color: #444;}
.pagenavi a:hover {background:#ff8400;color: #444;}
.pagenavi a.current {border: none;background: #616161;color: #444;}
HTML JavaScript
Cari kode <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'> didalam template blog, atau lebih mudahnya cari Blog1

Salin kode berikut setelah kode <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>
<b:includable id='page-navi'>
<div class="pagenavi">
<script type="text/javascript">
var pageNaviConf = {
perPage: 5,
numPages: 5,
firstText: "First",
lastText: "Last",
nextText: &quot;&#187;&quot;,
prevText: &quot;&#171;&quot; }
</script>
<script type="text/javascript" src="http://rilwis.googlecode.com/svn/trunk/blogger/pagenavi.min.js"></script>
<div class="clear" />
</div>
</b:includable>
Sehingga hasilnya akan terlihat seperti berikut:
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>
<b:includable id='page-navi'>
<div class="pagenavi">
<script type="text/javascript">
var pageNaviConf = {
perPage: 5,
numPages: 5,
firstText: "First",
lastText: "Last",
nextText: &quot;&#187;&quot;,
prevText: &quot;&#171;&quot; }
</script>
<script type="text/javascript" src="http://rilwis.googlecode.com/svn/trunk/blogger/pagenavi.min.js"></script>
<div class="clear" />
</div>
</b:includable>
Cari kode
<!-- navigation -->
<b:include name='nextprev'/>
Ganti dengan kode berikut:
<b:if cond='data:blog.pageType == "index"'>
<b:include name='page-navi' />
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<b:include name='page-navi' />
</b:if>
</b:if>
Simpan template dan lihat hasilnya di halaman depan blog Anda

Jika tidak ada permasalahan seperti adanya bentrok dengan penggunaan script yang lain didalam blog, seharusnya memasang nomer navigasi halaman blog ini bisa terpasang dengan baik, seperti yang terlihat di halaman depan blog ini. Jika mengalami kegagalan, coba gunakan cara yang lain yang sudah saya bahas sebelumnya di pagenavi blogger, dan jika masih gagal juga, silahkan cari tutor yang lain di search engine :)

sumber artikel: http://thefreaks250.blogspot.com/2012/12/membuat-navigasi-halaman-keren-di-blog.html

Iya, artikel memasang nomer navigasi halaman blog ini saya ambil dari blog diatas, dan di blog tersebut tersedia berbagai bentuk dari page numbernya. Dan di artikel ini, saya hanya merubah beberapa kode css agar lebih rapi dan tidak terlalu banyak

Memasang Nomer Navigasi Halaman Blog, Bukan Artikel Rating: 4.5 Diposkan Oleh: ana sriwahyuni

10 komentar:

  1. jadi keren navigasinya kalau gini ya mbk

    BalasHapus
  2. sperti halaman page google yaa mbak
    :D

    BalasHapus
    Balasan
    1. iya mas Ferdon tapi yang saya bagikan diatas tidak mirip dengan google :D

      Hapus
    2. asyik dah dapat ilmu lagi dari mbak makasih ya mbak

      Hapus
    3. terimakasih banyak mas, semoga bermanfaat.. :)

      Hapus
  3. sy ada masalah perpage:5 bisajadi 9 atau sebanyaknya. perkiraanku ini ada masalah di js nya

    BalasHapus
    Balasan
    1. saya lihat memang sudah tampil mas, kalau seperti itu seharusnya tidak ada masalah dengan scriptnya

      Hapus
  4. bu.. code CSS nya memang ada tanda titiknya? apa itu memang harus di copy??

    BalasHapus

Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
Terimakasih

Direktori

direktori weblogger
Direktori WeBlog Indonesia