Membuat Widget Numpage Navigasi untuk Komentar

Home jQuery Membuat Widget Numpage Navigasi untuk Komentar

Membuat Widget Numpage Navigasi untuk Komentar

Diposting oleh: Dafin defandaky pada: 7 Juli 2013

Komentar dengan Navigasi Widget Blogger adalah Widget untuk Komentar Anda. By Default Blogger Komentar ini memiliki navigasi halaman link (Terlama, Lama, Baru dan Terbaru) di bagian atas dan bawah bagian Komentar. Sementara pada pada Blogger yang Upgrade ke Threaded Comment, link pagination ini telah menghilang. Namun, Jika Anda ingin menggunakan link Pagination default ini untuk halaman Komentar anda widget ini sangat berguna untuk Anda.

Widget ini hanya bekerja Bila Anda memiliki lebih dari 200 komentar dalam Blog Anda di setiap Posting.
Widget ini tidak bekerja untuk Komentar Threaded. Sebagai sistem komentar berulir Loads komentar lama dengan bantuan AJAX.

Bagaimana Mengintegrasikan Widget Halaman Navigasi Komentar di Blogger?

Buka Blogger Dashboard> Klik Pilihan Lagi tarik-turun dan Pilih Template
Klik pada tombol Edit HTML
Gunakan Pencarian Ctrl + F untuk mencari kode di bawah ini

<b:includable id='comments' var='post'>

Tempatkan Kode bawah ini setelahnya

<b:if cond='data:post.commentPagingRequired'>
<script type='text/javascript'>
 var w2bTotalComments = <data:post.numComments/>;
 var w2bPrevBtnText = "Prev";
 var w2bNextBtnText = "Next";
</script>
<script type="text/javascript" src="http://widgets.way2blogging.org/blogger-widgets/w2b-comments-pagination.js"></script>
</b:if>

Simpan Template

Anda memiliki pilihan untuk mengubah Prev dan next link teks.

var w2bPrevBtnText = "Prev"; Link Tombol Sebelumnya teks
var w2bNextBtnText = "Next"; Berikutnya Tombol link teks

menambahkan Styles

Pagination widget ini dilengkapi dengan dua gaya yang berbeda.
Tambahkan setiap Satu kode gaya Sebelum tag ]]> </ b: skin>

Default Style Preview

.w2bCommentsPaging{
 font-size:13px;
 display: block;
}
.commPageOf{
 padding:4px 8px;
 margin-right:6px; 
}
.commPrev a,.commNext a,.commentNum a {
 text-decoration: none;
 border: 1px solid #ddd;
 background: #efefef;
 padding: 4px 8px;
 margin: 0 4px;
 text-decoration: none;
 color: #666;
 -webkit-border-radius: 2px;
 -moz-border-radius: 2px;
 border-radius: 2px;
}

.commPrev a:hover, .commNext a:hover, .commentNum a:hover, .commentNum.commCurrent a{
 border:1px solid #CDCDCD;
 background:#ddd;
 color: #222;
}
.paging-control-container {
 clear: both;
 display: block;
 float: none;
 font-size: 80%;
 margin: 10px 0;
 overflow: hidden;
 padding: 10px 0;
 text-align: right;
}

Dark Style Preview

.w2bCommentsPaging{
 font-size:12px;
 display: block;
}
.commPageOf{
 padding:5px 10px;
 margin-right:6px; 
}
.commPrev a,.commNext a,.commentNum a {
 text-decoration:none;
 background: #4E4E4E;
 padding: 5px 10px;
 margin: 0 4px;
 text-decoration: none;
 color: #FFF;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
}

.commPrev a:hover, .commNext a:hover, .commentNum a:hover, .commentNum.commCurrent a{
 background:#8956B8;
 color:#fff;
}
.paging-control-container {
 clear: both;
 display: block;
 float: none;
 font-size: 80%;
 margin: 10px 0;
 overflow: hidden;
 padding: 10px 0;
 text-align: right;
}

Tidak ada komentar :

Kode klik emo:

$:\$

$\o/$

Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag ...KODE ANDA DI SINI...
Untuk menyisipkan script, gunakan ...KODE SCRIPT ANDA...
Untuk menyisipkan gambar, gunakan tag ...URL GAMBAR ANDA ...
Untuk menyisipkan judul, gunakan tag ...JUDUL ANDA...
Untuk menyisipkan catatan, gunakan tag ...CATATAN ANDA...
Untuk menciptakan efek tebal gunakan tag ...TEKS ANDA...
Untuk menciptakan efek huruf miring gunakan tag ...TEKS ANDA...

Konversi KodeOOT

Membuat Widget Numpage Navigasi untuk Komentar

Artikel Terkait

Tidak ada komentar :