Highlight Autor Threaded Comments

By Unknown

Rabu, 20 Juni 2012

Kemarin saya pernah share tutorial cara merubah threaded comment dengan CSS dan cara memodifikasi threaded comment dengan CSS. Silahkan baca dulu artikelnya untuk membuat tampilan threaded comments anda lebih menarik. Sekarang saya akan terangkan bagaimana cara membuat highlight autor comments pada threaded comments. Saya akan menerangkannya dalam dua cara. Ikuti langkah berikut.

Masuk ke blogger
Klik Rancangan
Klik Edit HTML

Cara Pertama
Masukkan css berikut di atas kode ]]></b:skin>

.author-highlight{background-image:url(https://lh5.googleusercontent.com/_xcD4JK_dIjU/TasKJgjf1FI/AAAAAAAAFEA/pvkcJFnS-DA/s800/author_mark.png);background-repeat:no-repeat;background-position:100% 100%;background-color:#F0F0F0}

Selanjutnya masukkan script berikut di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function(){
$('.user.blog-author').closest('.comment-block').addClass('author-highlight');
});
//]]></script>

Klik Simpan Template
Hasilnya seperti gambar di bawah ini

Cara kedua
Masukkan kode berikut di atas kode </body>

<script src='http://code.jquery.com/jquery-latest.js'/>
<!--admin comment -->
<script>
$(function() {
function highlight(){
$('.user.blog-author,.ssyby').closest('.comment-block')
.css('border', '1px solid #e1e1e1')
.css('background','#f1f1f1 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBhyphenhyphenCL36HWUWIXyimU2lwfuRCjTILlLD5fzU847DZ_Bp_jcdFHOwBIVkmGJo72ulDlpDyZ4qnJUk4X9SiCOSfRkm_QzCxwblwa55HCOgjBBS_0qnL7-HHThjC4XiacTlRZdJaA_W-tEC4/s1600/admin2.png") no-repeat bottom right')
.css('padding', '10px');
}
$(document).bind('ready scroll click', highlight);
});
</script>
<!-- admin comment end-->

Silahkan ganti biru dan kode merah bila ingin bereksplorasi dengan keinginan anda.
Klik Simpan Template
Hasilnya seperti gambar di bawah ini

Demikian tutorial membuat highlight autor threaded comments. Semoga bermanfaat bagi semua. Selamat mencoba dan sukses selalu.

"keep spirits and do the best"

Share :

Facebook Twitter Google+