Cara Membuat Show Hide Untuk Komentar Blog

Blog Ajang Software media berbagi ilmu, sedang membagikan artikel tentang Cara Membuat Show Hide Untuk Komentar Blog silahkan membaca Cara Membuat Show Hide Untuk Komentar Blog selengkapnya berikut ini:

Postingan kali ini saya berusaha membantu rekan-rekan yang suka dengan tampilan blog yang unik, trik ini saya adopsi dari variasi blogger.
Sekarang ikuti aja langkah-langkahnya
Pertama login dulu ke blogger anda, kemudian klik rancangan, pilih edit html. Jangan lupa untuk memberi centang pada Expand Template Widget.
Copy dan paste kode berikut di atas ]]></b:skin>

#comments {
display : none;
}
.stylewadah {background: #none;
padding: 5px;
}
a.tombol-komentar{background: #f4f8fc  url(http://i1187.photobucket.com/albums/z389/RICKY_ALDIYANSYAH/plus.gif) 85% 55% no-repeat;display:block;padding:15px 40px 15px 15px;border:1px solid #000000}
a.tombol-komentar:hover{background: #7FFF00  url(http://i1187.photobucket.com/albums/z389/RICKY_ALDIYANSYAH/plus.gif) 85% 55% no-repeat;display:block;padding:15px 40px 15px 15px;border:2px dashed #000000;}
a.active.tombol-komentar{background: #f4f8fc url(http://i1187.photobucket.com/albums/z389/RICKY_ALDIYANSYAH/minus.gif) 85% 55% no-repeat;border:1px solid #000000}

Kemudian kode di bawah ini letakka di atas </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
    $(&quot;.tombol-komentar&quot;).click(function(){
        $(&quot;#comments&quot;).slideToggle(&quot;slow&quot;);
        $(this).toggleClass(&quot;active&quot;);
        return false;
    });
});
</script>

Kemudian cari </b:includable> <b:includable id='comments' var='post'>

Jika sudah ketemu, letakkan kode berikut di bawahnya

<center>
<div class='stylewadah'>
<a class='tombol-komentar' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 0'>Silahkan Luangkan Waktu Sobat Untuk Berkomentar Di Artikel Ini<b:else/><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></b:if>
</a>
</div>
</center>

Nah, sekarang sudah selesai trik Cara Membuat Show Hide Untuk Komentar Blog, langkah pamungkasnya tinggal klik simpan template

Posted in: Internet