Mulai tanggal 1 Januari 2014 Campoeng Cmoneng menutup Kolom Komentar , karena ingin fokus ke materi postingan. Ini hanya sementara saja, dan sudah lama direncanakan. Semua komentar teman/sobat-sobit masih tersimpan rapi , tak ada yang dihapus Widgetnya juga dicopot, disimpan disini ini agar tidak lupa saat memasangnya lagi.
Cara Membuat Spoiller Buka-Tutup Kotak Komentar sbb.
Bagian I Langkah-Langkah
sebagai berikut:
1. Buka dasbor blog Klik template -- Klik
edit HTML
2. Tekan Ctrl + f
3. Cari kode di bawah ini dengan cara masukkan
sebaris kode di bawah lalu “enter”
<div class='comments-content'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='threaded_comment_js'/>
</b:if>
<div id='comment-holder'>
<data:post.commentHtml/>
</div>
</div
4. Copy paste script dibawah ini, persis di atas kode tadi
<!-- spoiler komentar part1
-->
<div><div
style='margin-bottom:
2px;'><i><b><small/></b></i><input
onclick='if
(this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display
!= '') {
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display
= ''; this.innerText = ''; this.value =
'Tutup '; } else {
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display
= 'none'; this.innerText = ''; this.value =
' Lihat Komentar Disini ';
}' style='margin: 0px; padding: 0px; width: 200px; font-size:
15px;font-weight:bold;' type='button' value='Lihat Komentar Disini '/></div>
<div style='border: 0px inset ;
margin: 0px; padding: 0px;'><div style='display: none;'>
<!-- spoiler komentar part1 end
-->
5. Langkah yang terakhir klik SAVE.
6. Jika gagal, copy paste-kan script dibawah ini
setelah kode yang berwarna merah, lalu save .
<!-- spoiler komentar part2
-->
</div></div></div>
<!-- spoiler komentar part2 end
-->
Bagian II
Selanjutnya
untuk mempercantik-memperindah kotak komentar, saya dikasih tahu teman dari Lamongan, agar melakukan langkah-langkah sebagai
berikut:
1. Klik Tata Letak
2. Klik Tambah Gadget
3. ilih HTML/JavaScript
4. Copy Paste code script di bawah ini
<style type='text/css'>
/**
*
*/
.comments:after { border-color:
#fff; }
.comments:before { background-color:
#030826; }
.comments .comment {
background: #C0ADFF;
border-radius: 10px;
font-size: 14px;
padding: 10px 15px;
}
.comments
[class*="level-"] .photo:before { background-color: #fff; }
.comments .meta { color: #ccc; }
.comments .meta a { color: inherit;
}
.comments .meta a:hover { color:
#34b5d0; }
.comments .body { color: #888; }
/**
* Comments Thread
*/
.comments {
list-style-type: none;
padding: 5px 0 0 26px;
position: relative;
margin: 0 0 0 1px;
}
.comments:before,
.comments .comment,
.comments .comment:after,
.comments .comment:before,
.comments .photo img,
.comments
[class*="level-"] .photo:before {
box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.comments:after,
.comments:before {
display: block;
content: '';
position: absolute;
}
.comments:before {
border-radius: 0 0 5px 5px;
height: 100%;
width: 8px;
left: 0;
top: 0;
}
.comments:after {
box-shadow: 0 1px 3px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.4) inset;
border-width: 4px;
border-style: solid;
border-radius: 18px;
height: 10px;
width: 10px;
left: -5px;
top: -16px;
z-index: -1;
}
.comments .comment {
margin-bottom: 10px;
position: relative;
}
.comments .comment:after,
.comments .comment:before {
border-radius: 10px;
background-color: #fff;
position: absolute;
display: block;
content: '';
}
.comments .comment:after {
width: 12px;
height: 12px;
left: -14px;
top: 7px;
}
.comments .comment:before {
width: 5px;
height: 5px;
left: -22px;
top: 16px;
}
.comments .photo {
position: absolute;
left: -60px;
top: 2px;
}
.comments .photo img {
border: 1px solid #fff;
border-radius: 32px;
overflow: hidden;
}
.comments .meta { margin-bottom:
5px; }
.comments .meta .reply { display:
none; float: right; }
.comments .comment:hover .reply {
display: block; }
.comments
[class*="level-"] .photo:before {
display: block;
content: '';
position: absolute;
margin-top: -2px;
height: 4px;
width: 20px;
left: -10px;
top: 50%;
z-index: -1;
}
.comments .level-2 { margin-left:
30px; }
.comments .level-3 { margin-left:
50px; }
.comments .level-4 { margin-left:
70px; }
.comments .level-5 { margin-left:
90px; }
.comments .level-6 { margin-left:
110px; }
.comments .level-3 .photo:before {
width: 40px; left: -30px;}
.comments .level-4 .photo:before {
width: 60px; left: -50px;}
.comments .level-5 .photo:before {
width: 80px; left: -70px;}
.comments .level-6 .photo:before {
width: 100px; left: -90px;}</style>
5. Klik save
Sumber
http://www.muroielbarezy.com/