Seperti yang dijanjikan Judul Post Saya ini kepada Anda, Sekarang ini saya akan berbagi cara membuat Halaman Navigasi untuk Blogger dengan gaya seperti plugin WordPress-PageNavi.
Kita semua tahu bahwa modal bawa'an navigasi yang diberi blogger hanya menyediakan 2 link yaitu "Sebelumnya" dan "Next" untuk memindahkan semua, itu jelas tidak memuaskan pengguna. Begitu banyak cara Hacker untuk membuat keren tampilan Blog. Hack kali ini saya disajikan pada dasarnya tidak berbeda dari hack sebelumnya, atau yang berfungsi jauh lebih menonjol dari ini. hanya 1 Poinnya adalah bahwa hal itu seluruhnya ditulis dalam gaya plugin terkenal WordPress 1 - WP- PageNavi. Jadi, jika Anda mengharapkan satu terobosan lebih untuk versi Blogger ini, maka kamu hanya cukup melakukan permohonan bantuan melalui komentar Anda!
Bagaimanakah menginstalnya?"
Simak yaa lol...
1. Pertama Instal CSS dulu
Buka file template Anda, cari baris:
]]> </ B: skin>
Masukkan kode berikut diatasnya:
/ * Page Navigation * / .pagenavi {clear: both; margin: 10px auto; text-align: center} .pagenavi span, .pagenavi a {padding: 3px; margin-right: 5px; background: #fff; border: 1px .pagenavi solid # c20c0c} a: visited {color: # c20c0c .pagenavi} a: hover, .pagenavi .current {background: # c20c0c; color: #fff; text-decoration: none} .pagenavi .pages, .pagenavi. current {font-weight: bold} .pagenavi .pages {border: none}
Bagian ini digunakan untuk menentukan jumlah warna, gaya untuk navigasi halaman. Ini adalah warna default yang digunakan oleh pengguna blog Perplexed. maka anda harus memperbaikinya agar sesuai dengan Tema blog Anda.
2. Instal Script
Dalam Html template, cari baris ini:
<B: widget id = 'blog1' locked 'true' title = = 'Blog Posts' type = 'Blog'>
Masukkan kode ini segera setelahnya:
<#B: includable id = 'page-navi'> <div class = "PageNavi"> <script type = "text / javascript"> var pageNaviConf = {PerPage: 5, NumPages: 9, firstText: "First", lastText: "Last", nextText: "Next", prevText: "Prev"} </ script> <script type = "text / javascript" src = "http://rilwis.googlecode.com/svn/trunk/blogger/pagenavi. min.js "> </ script> <div class =" body "/> </ div> </ b: includable>
hapus tanda # (pagar) dalam kode "<#b: includable id =" nya yaa...
3. Masukkan Halaman Navigasi
Langkah terakhir adalah mencari untuk melangkah yang akan menampilkan bagian halaman Navigasi dan menyisipkan kode. Biasanya bagian ini berada dibagian akhir artikel. Lihatlah pada html template Anda:
<! - Navigasi -> <b: include name = 'NextPrev' />
jika udah ketemu, Hapus dan ganti dengan kode ini:
<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>
Tapi, Jika Anda tidak dapat menemukan bagian NextPrev, harap memperhatikan struktur template Anda, Dan coba salin kode ini:
<B: section class = 'main' id = 'main' showaddelement = 'no'> <b: widget id = 'blog1' locked = 'true' title = 'Blog Posts' type = 'Blog'> ... < b: includable id = 'main' var = 'top'> ... </ b: includable> </ b: widget> </ b: section>
Kemudian Masukkan kode di atas tepat sebelum </ b: includable> itu adalah script konfigurasi
Perbedaan antara kode yang Sahabat GOOGLE hadiahkan dan dibandingkan dengan kode lain tidak diperlukan untuk mengkonfigurasi alamat blog. Dengan demikian, bagian konfigurasi terlihat sedikit lebih terang, dan hanya berkonsentrasi pada yang penting.
Konfigurasi script ini terletak pada langkah 2 di pengaturan di atas.
Parameter ini meliputi:
var pageNaviConf =
{PerPage: 5, NumPages: 9, firstText: "Pertama", lastText: "terakhir", nextText: "Next", prevText: "Prev"}
termasuk:
- PerPage: jumlah posting untuk ditampilkan dalam satu halaman
- NumPages: Beberapa halaman menampilkan
- FirstText, lastText,
nextText, prevText: masing-masing, dari terlihat tombol Pertama, terakhir, Next, Prev
Berharap kode ini akan berguna untuk blog Anda. Semua komentar silahkan memberikan komentar di bawah ini...