Kumpulan Trick Blog TErbaru

About

New Trick hayalah blog kecil yang mencoba untuk memberikan dan menyajikan trick dan tips tentang blog
Sabtu, 16 Januari 2016

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 sobat

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/2015/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




Klik untuk melihat kode: :) =( :s :D :-D ^:D ^o^ 7:( :Q :p T_T @@, :-a :W *fck* x@

TOP