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>.
5. Kemudian salin kembali Script dibawah ini, dan letakkan di atas kode atau ]]></b:skin>.
<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>
#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% "Helvetica Neue"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 atau untuk lebih jelasnya bisa sobat lihat pada contoh di bawah ini.
8. Simpan template dan lihat hasilnya, sobat perhatikan kode penutup dibawah ini :
<div id="panel">
<dl id="comments-block">
<b:loop values="data:post.comments" var="comment">
<dt expr:class=""comment-author " + data:comment.authorClass" expr:id="data:comment.anchorName">
<a expr:name="data:comment.anchorName" href="http://www.blogger.com/blogger.g?blogID=1310061262030190307">
<b:if cond="data:comment.authorUrl">
</b:if></a><a expr:href="data:comment.authorUrl" href="http://www.blogger.com/blogger.g?blogID=1310061262030190307" rel="nofollow"><data:comment.author></data:comment.author></a>
<b:else>
<data:comment.author>
<data:commentpostedbymsg>
</data:commentpostedbymsg></data:comment.author></b:else></dt>
<dd class="comment-body"><b:if cond="data:comment.isDeleted">
<span class="deleted-comment"><data:comment.body></data:comment.body></span>
<b:else>
</b:else></b:if><br />
<data:comment.body></data:comment.body></dd>
<dd class="comment-footer"><span class="comment-timestamp">
<a expr:href="data:comment.url" href="http://www.blogger.com/blogger.g?blogID=1310061262030190307" title="comment permalink">
<data:comment.timestamp>
</data:comment.timestamp></a>
<b:include data="comment" name="commentDeleteIcon">
</b:include></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>
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.
</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>
Sumber
Posting Komentar