Home » , » Cara Memberi Nomor Pada Kotak komentar

Cara Memberi Nomor Pada Kotak komentar

Dadi Mulyadi | 2/20/2010 01:30:00 am | 22komentar
Maksud dari judul di atas adalah cara menambah angka penomoran pada jumlah komentar di dalam blog anda atau bisa di sebut pula penomoran setiap komentar. masih bingung nggak sob ! saya juga bingung judulnya kayak bagaimana, kalau masih bingung silahkan lihat DEMO atau silahkan lihat contoh gambar di bawah ini
blog tutorial
Untuk cara pemasangan sangat mudah sekali dan berikut langkah langkahnya :
LANGKAH # 1
Login ke Blogger, pergi ke Layout --- > Edit HTML
Dan tandai kotak centang "Expand Template Widget"
LANGKAH # 2
Sekarang Temukan kode ini di template.
<b:loop values='data:post.comments' var='comment'>
Dan sisipkan kode di bawah ini sebelum kode di atas
<script type='text/javascript'>var CommentsCounter=0;</script> <!--COMM-NUM-STARTS-->
Sekarang cari kode ini
<data:commentPostedByMsg/>
Dan segera sisipkan kode di bawah ini setelah kode di atas
<!--COMM-NUM-STARTS-->
<span class='comm-num'>
<a expr:href='data:comment.url' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>
<!--COMMNUM-STOPS-->
Dan menyimpan template. Sekarang Anda akan melihat angka-angka di depan semua komentar di blog Anda. Tetapi belum ditata dengan baik.
LANGKAH # 3
Jadi sekarang kita akan menyesuaikan tema pada blog Anda.
 Kembali ke halaman Layout --> Edit HTML
dan temukan kode di bawah ini dengan menggunakan (CTRL F)
</head>
Dan paste kode di bawah ini sebelum kode di atas
<!--COMM-NUM-STARTS-->
<style type="text/css">
.comm-num a:link, .comm-num a:visited {
color: white !important;
text-decoration: none !important;
background: url(http://i50.tinypic.com/egx3t3.jpg) no-repeat;
width: 50px;
height: 48px;
float: right;
display: block;
margin-right: 5px;
margin-top: -15px; /*comments-counter position*/
text-align: center;
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 15px;
font-weight: normal;
}

.comm-num a:hover, .comm-num a:active {
color: gray !important;
text-decoration: none !important;
}
</style>
<!--COMM-NUM-STOPS-http://mastergomaster.com-->
  • Edit kode diatas (disorot dalam warna MERAH) untuk memilih gambar.
  • Edit kode diatas (disorot dalam warna BIRU) untuk mengubah warna dalam angka, jadi harus menggunakan Kode Warna. contoh :  color : #FF0000

Silahkan pilih gambar di bawah ini sesuai selera masing masing caranya dengan klik kanan  gambar tersebut kemudian salin lokasi gambar












PENTING:
  • Anda dapat menggunakan gambar manapun sesuai pilihan anda.
  • Untuk (LANGKAH # 3), Anda harus menyesuaikan ukuran dengan benar (lebar dan tingginya)

Terakhir menyimpan template dan menghitung komentar Anda ...
Sekian dan selamat mencoba

Share this article :

Promo Paket Hemat

TOKO SOFTWARE KOMPUTER ONLINE

Popular Posts

 
Support : Comments feeds | Facebook | Twitter
Copyright © 2013. Blog masterGOmaster - All Rights Reserved
Belanja Online di Toko masterGOmaster
Proudly powered by Blogger