Beranda » Javascript » jQuery » Membuat Widget Numpage Navigasi untuk Komentar

Membuat Widget Numpage Navigasi untuk Komentar

Membuat Widget Numpage Navigasi untuk Komentar

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;
}

Membuat Widget Numpage Navigasi untuk Komentar

Belum ada tanggapan untuk "Membuat Widget Numpage Navigasi untuk Komentar"

Post a Comment