Sunday, August 14, 2011

Cara Membuat Show Hide Pada Komentar

Pada kesempatan kali ini saya akan membahas cara membuat Show Hide pada Komentar blog, kebanyakan pasti hanya menggunakan scroll saja pada komentarnya, saya pun dulunya juga pernah menggunakan scroll pada komentar blog saya, setelah berkunjung kebeberapa blog saya menemukan blog Hompimpa Alaihum Gambreng yang komentarnya menggunakan slide panel, show hide komentar akhirnya saya pun juga membuatnya pada komentar blog saya.

Jika sobat tertarik berikut ini adalah langkah-langkah pembuatannya :

1. Login ke account blogger sobat.

2. Kemudian klik Tab Rancangan,

3. Lalu klik Edit HTML. jangan lupa centang expand widget template.

4. Cari kode </head> , dan Salin script dibawah ini tepat diatas kode </head>.
<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(){
$('.btn-slide').click(function(){
$('#panel').slideToggle('slow');
});
});
</script>
5. Kemudian salin kembali Script dibawah ini, dan letakkan di atas kode </style> atau ]]></b:skin>.

#panel{
background:#212121;
max-height:300px;
padding:10px;
color:#ddd;
overflow:auto;
display:none;
}
.slide{
margin:0;
padding:0;
border-top:2px solid #6f6f6f;
}
.btn-slide {
cursor:pointer;
cursor:hand;
text-align:center;
padding:10px;
margin:0 auto;
display:block;
font:bold 120%/100% &quot;Helvetica Neue&quot;Arial, Helvetica, sans-serif;
color:#b3b3a9;
background-color:#212121;
}

6. Sekarang sobat cari kode <dl id='comments-block'>, dan taruh kode ini <div id='panel'>, tepat diatasnya.

7. Karena kita menggunakan perintah <div> jangan lupa untuk menutup dengan kode </div>. Silahkan sobat letakkan kode </div> setelah kode </dl>, akan tetapi sobat juga harus menambahkan script dibawah ini :
</div>
<div class='slide'><span class='btn-slide'><img src='https://lh5.googleusercontent.com/-UChDdIt-q0c/TkHT8M9zE-I/AAAAAAAAAuI/YLNXG5eMIVc/I/Show%252520Comment.png' title='Tampilkan Komentar'/></span></div>
tepat dibawah kode </div> atau untuk lebih jelasnya bisa sobat lihat pada contoh di bawah ini.

<div id='panel'>
   <dl id='comments-block'>
        <b:loop values='data:post.comments' var='comment'>

          <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
            <a expr:name='data:comment.anchorName'/>
            <b:if cond='data:comment.authorUrl'>
              <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
            <b:else/>
              <data:comment.author/>
            </b:if>
            <data:commentPostedByMsg/>
          </dt>
          <dd class='comment-body'>
            <b:if cond='data:comment.isDeleted'>
              <span class='deleted-comment'><data:comment.body/></span>
            <b:else/>
              <p><data:comment.body/></p>
            </b:if>
          </dd>
          <dd class='comment-footer'>
            <span class='comment-timestamp'>
              <a expr:href='data:comment.url' title='comment permalink'>
                <data:comment.timestamp/>
              </a>
              <b:include data='comment' name='commentDeleteIcon'/>
            </span>
          </dd>
        </b:loop>
      </dl>
</div>
<div class='slide'><span class='btn-slide'><img src='https://lh5.googleusercontent.com/-UChDdIt-q0c/TkHT8M9zE-I/AAAAAAAAAuI/YLNXG5eMIVc/I/Show%252520Comment.png' title='Tampilkan Komentar'/></span></div>

8. Simpan template dan lihat hasilnya,

sobat perhatikan kode penutup dibawah ini :
</div>
<div class='slide'><span class='btn-slide'><img src='https://lh5.googleusercontent.com/-UChDdIt-q0c/TkHT8M9zE-I/AAAAAAAAAuI/YLNXG5eMIVc/I/Show%252520Comment.png' title='Tampilkan Komentar'/></span></div>
yang berwarna hijau bisa sobat ganti dengan URL Images sobat sendiri, baik itu logo gambar, maupun logo tulisan. Mungkin hanya ini yang bisa saya bagikan, ya...,mudah-mudahan aja ini bisa bermanfaat buat sobat semuanya, Terima kasih.

24 comments :

NFS Reload said...

Mantaf tutorialnya gan :)
boleh tuh di praktekan
jgn lupa berkunjung ya
http://www.nfsreload.com/2010/07/otomax-demo-gratis.html

Qoqo AhnafiZz said...

@NFS Reload : iya sob silahkan dicoba dulu, mdh2n bisa..!!
insya Allah saya kunjungi sob.. :a:

Shinobi Blog said...

makasih sob.. request saia udah diposting. . . :a: .

Qoqo AhnafiZz said...

@Shinobi Blog iya sobat sama2, mudah2n bisa ya sob diterapkan diblognya.. :a:

Asmara Susanto said...

memperlambat blog gk?

Qoqo AhnafiZz said...

@Asmara Susanto : menurut saya nggak sob, apalagi kalau tombol show hidenya cuma pakai Teks aja, sedangkan punya saya pake images tetap ringan ko.., :a:

Dimas Satrio said...

ternyata mas kotak komentarnya pake cara ini , mantap dah , emoticonnya bagus2

Qoqo AhnafiZz said...

@Dimas Satrio iya nih mas, silahkan klo mas juga mau pakai, makasih.. :a:

Bayu Aldi Yansyah said...

sudah aku pasang sob di commentku .. :) :D

#nice post

Admin [Fhikar Note Dan Fhikar News] said...

makasih mas bro :a:

Qoqo AhnafiZz said...

@Bayu Aldi Yansyah : Iya sobat, sama2.. :a:


@Admin [Fhikar Note Dan Fhikar News] : Iya mas, sama2 juga..!! :b:

Ladida said...

pake jQuery, hehehee, iya saya pernah liat yg dipake di blogspot itu emang dari blog hompimpa itu, soalnya kebanyakan saya lihat yg pake dari WP . .
makasih infonya ^^

Qoqo AhnafiZz said...

@Ladida iya sob sama2, hehe.. :a:

Si Arif said...

ini sudah dengan scrollnya enggak mass??? kasih balesan ke blog saya ya: http://si-arif.blogspot.com/

Harun said...

Wah keren info nya gand..
makasih banget ya..
Sekalian ane blogwalking ya..

http://www.harunrips.blogspot.com

Titi-Share ~ Christian ^^, said...

Aku kok gak menemukan kode ini ya?

dl id='comments-block'

Tolong pencerahannya :) Pingin banget

Ulil Huda said...

Ane ijin bookmark dulu nggih..

iman@sampeweweh said...

mantep tutorialnya sobat saya izin nyoba ya hehe

derizd_666 said...

nice blog...mamoir gann:a:
http://antexamq.blogspot.com
klw boleh tau emotin komentarnya dpt dri mana?:b:

Bocah Saico said...

dr semua tutor yg gue liat ini yg paling bagus bentuknyaa, tp kok gw gak mau yaa :g:

Harun said...

Bagus tu tutor nya..
kunjungan balik ya...

http://harunrips.blogspot.com

Harun Ar said...

Pingin belajaran ginian mas, belum berhasil

Yordan Ghalis said...

Blogwalking Mas ^_^ . Artikel Yg Bermanfaat
http://ghalis4rt.blogspot.com/

store-online999 said...

nice

:a: :b: :c: :d: :e: :f: :g: :h: :i: :j: :k: :l: :m: :n: :o: :p: :q: :r: :s: :t: :u: :v: :w:

Tambahkan Komentar Anda..!!

Terima Kasih Atas Kunjungannya..!!
Silahkan tinggalkan komentar Anda apabila ada yang perlu disampaikan,
dan kalo ada link yang rusak segara laporkan di kotak komentar ini..!!

"Komentarlah dengan kata-kata yang sopan"