Namun dapat membuat tampilan blog lebih menarik terutama dibagian komentar pengunjung, jika sobat ingin membuatnya perhatikan langkah di bawah ini sob :
Mari Sobat Ikuti Langkah Berikut.
- Login Ke Akun Blog Sobat
- Pilih Rancangan/Tata Letak Kemudian Pilih EDIT HTML
- Centang Kolom expand template widget
- Cari Kode Berikut
<b:loop values='data:post.comments' var='comment'>
- Copy kode dibawah ini dan paste tepat diatas kode tadi
<script type='text/javascript'>var CommentsCounter=0;</script>
- Cari Kode Berikut
<data:commentPostedByMsg/>
- Copy kode dibawah ini, kemudian paste tepat dibawah kode tadi
<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>
<a expr:href='data:comment.url' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>
- Terakhir...cari Kode </head>
- Copy kode dibawah ini dan paste tepat diatas kode tadi.
<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 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>
Keterangan :
1. http://i50.tinypic.com/egx3t3.jpg : merupakan KODE URL tampilan dari gambar pada setiap komentar. Silahkan anda ganti dengan gambar yang ada dibawah ini. Klik kanan pilih Copy Image Location, kemudian paste menggantikan alamat image terdahulu/diatas
2. width: 50px;
height: 48px; : merupakan ukuran gambar, silahkan anda sesuaikan dengan keperluan.
3. color: gray : warna angka penomoran pada setia lomentar, silahkan anda ganti dengan warna pilihan anda.
Silakan Anda Pilih Gambar Beserta URL nya :
URLNYA: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqfed0ricQL0d5T7IAHRxikIzCMeR1-Q4RDmxl4sHHA5OZn226lHgnsf4sNe3WC2uadDbuXjElmTDHpl0fC5_00hZVcBkfsavIro1r8_pTUPoPDWlzBByli__BUGfSsODsIk9U3NWoSAe9/s1600/24xko7m.png
Semoga Cara Diatas Bermanfaat Untuk Sobat Semua...^_^...
Artikel Terkait di Bawah posting
Tips Memperindah Blog
- Cara Membuat Permalink di Blogspot
- Cara Memasang Emoticon Terbaru | 2012
- Cara Memasang Tanda Tangan Di Blog
- Cara Memasang Fitur Back To Top Pada Bogspot | 2012
- Cara Membuat Blockquote Dengan CSS
- Newsticker berita pemberitahuan berjalan
- Cara Membuat Tool Tips Jquery di Blog
- Cara Membuat Widget Menghilang Dan Berpindah Di Blog | 2012
- Cara Membuat Mouse Diikuti Teks Memutar Diblog | 2012
- Cara Membuat Link Bergoyang dan Bercahaya Di Blog | 2012
- Cara Membuat Link Berkedip Warna Warni Di Blog | 2012
- Cara Membuat Efek Gambar atau Photo Memutar dan Membesar saat di sorot Mouse | 2012
- Cara Membuat Tombol Reply Pada Blogspot | 2012
- Cara Memasang Daftar Isi Accordion-2012 Di Blogspot
- Cara Membuat Sudut Halaman Blog Menggulung (Page Peel)
Sobat sedang membaca artikel tentang 
0 comments:
Pilihlah Emoticon Yang Anda Suka Dibawah Ini