Home » , » Membuat Komentar Show Hide pada Blog

Membuat Komentar Show Hide pada Blog

Redi Apri Handoko | 09.06 | 0 comments
Jika anda memiliki komentar yang sangat banyak pada blog dan ingin memperpendek komentar tersebut mengapa tidak mencoba trik yang satu ini. Tentunya pada postingan kali ini kita akan membahas bagaimana cara membuat komentar show hide pada blog. Ketika membuka halaman posting seluruh komentar belum muncul kecuali anda menekan tombol komentar. Tombol tersebut juga akan menampilkan jumlah komentar yang masuk pada posting anda. Oke, jika ingin mencobanya langsung saja ke triknya yang satu ini:

1. Masuk ke Blogger
2. Pilih Rancangan --> Edit HTML
3. Klik "Expand Widget"
4. Kopi kode di bawah ini lalu paste diatas kode ]]></b:skin>
/* SHOW-HIDE COMMENTS */
#panel {
clear: both;
display: none;
overflow: auto;
padding: 10px;
}

.slide {
background: #f1f1f1;
border-bottom: 1px solid #c3c3c3;
border-top: 1px solid #c3c3c3;
margin: 1.5em 0 0;
padding: 0;
}

.btn-slide {
cursor: hand;
cursor: pointer;
display: block;
font-weight: bold;
margin: 0 auto;
padding: 10px;
text-align: center;
}

5. Kopi script dibawah ini dan paste diatas </body>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&#39;.btn-slide&#39;).click(function(){
$(&#39;#panel&#39;).slideToggle(&#39;slow&#39;);
});
});
</script>

6. Cari kode elemen komentar seperti dibawah ini:
<b:includable id='comments' var='post'>
<div id='panel'> <!-- sisipkan (id) panel di sini -->
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>
<b:if cond='data:post.commentPagingRequired'>


... <!-- menandakan kode yang sangat panjang -->


<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>
</div> <!-- merupakan akhir dari #panel -->
<div class='slide'>
<p class='btn-slide'>
Masukan kata-kata <!-- Silakan ganti ini -->
</p>
</div>
</b:includable>


Keterangan:
- Warna biru merupakan tanda supaya anda menyisipkan kode tersebut.
- Warna Merah silahkan ganti dengan text sesuai keinginan anda.

Contoh: SHOW/HIDE atau anda bisa menggantinya dengan kode ini. Kode di bawah berfungsi untuk menampilkan jumlah komentar yang ada.

7.) Simpan dan lihat hasilnya.

Selamat mencoba!
Berbagi Dengan Teman:

Posted by : Redi A.H ~ / Tutorial windows, SEO , Info gadget, Download game

Artikel Membuat Komentar Show Hide pada Blog Di posting oleh Redi A.H pada 19 Mar 2012. Terima kasih atas kunjungannya. Kritik dan saran dapat disampaikan via kontak atau komentar. Jika diperlukan Artikel ini bisa disebarluaskan melalui blog sobat, hanya mohon sebutkan sumbernya dengan tautan link aktif ke postingan ini. Terimakasih. Happy blogging!!!

0 comments:

Posting Komentar

Terimakasih atas kunjungan anda semua, sebelumnya mohon maaf kami tidak menerima komentar yang berbau tentang pornografi.
TERIMAKASIH atas partisipasinya.

 
Site Meter :
Copyright © 2011. Tutorial Windows 7 - All Rights Reserved
Proudly powered by Blogger
Thank You For Google