Mempercantik Tampilan Komentar Blog

Kotak komentar blog adalah sebuah fasilitas yang di sediakan untuk melakukan interaksi antara pengunjung dengan pemilik blog tentang sebuah posting. Dari komentar, pengunjung dapat mengeluarkan unek-unek, memberikan pujian, saran atau bahkan mengkritik artikel yang di tulis oleh si pemilik blog. Untuk saya pribadi komentar dari pengunjung dapat memberikan semangat tersendiri, karena artikel yang sudah saya tulis di berikan komentar, walaupun komentarnya berupa kritik yang pedas.

Oleh karena begitu pentingnya sebuah kotak komentar, banyak dari para blogger memodifikasi tampilannya sehingga terlihat lebih keren, unik, juga cantik. Tampilan komentar yang indah akan memberi daya tarik tersendiri kepada pengunjung agar mau meluangkan sedikit waktunya untuk mengomentari artikel yang baru di bacanya.

Pada kesempatan kali ini saya akan coba berbagi sebuah tutorial sederhana, yaitu untuk merubah tampilan kotak komentar.

Langkah-langkah yang perlu di lakukan:

Cari kode ]]></b:skin>

Copy kode yang ada di bawah, kemudian letakkan di atas kode ]]></b:skin>

/* Comments
----------------------------------------------- */
#comments h4 {
font-weight:bold;
color:#000;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcu-2aqNVGOvuZZEj-lkIssBVjMVdAnxV3G0Gm2nY1WLHTFiwEMfoVSPLSE33jr5FHK4RBQtA0u28uI46sqGydgGrZVVnKp-ceAgAVzoLS3kwsaCxzdAE80ksYqo8cD80Oiu-fuRrHLMdL/) repeat-x;
height: 35px;
line-height: 35px;
width: 100%;
margin:-5px 0 -7px -10px;
text-align:center;
border-top:1px solid #ddd;
display:block;
padding-bottom:6px ;
line-height:30px;
}
h4#comment-post-message {
display:none;
}
.comments .comments-content {
font-size:12px;
text-align:left;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em
}
#comments-block .comment-author {
margin:.5em 0
}
#comments-block .comment-body {
margin:.25em 0 0
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height:1.4em;
letter-spacing:.1em
}
#comments-block .comment-body p {
margin:0 0 .75em
}
.deleted-comment {
font-style:italic;
color:gray
}
.comments {
font:normal 11px/14px "Lucida Grande",Tahoma,Verdana,Arial,Sans-Serif!important
}
.comments .comments-content .comment,.comments .comments-content .comment:first-child,.comments .comments-content .comment:last-child {
padding:0;
margin:0;
position:relative
}
.comments .avatar-image-container {
width:45px;
height:45px;
max-width:45px;
max-height:45px;
padding:2px;
border-radius:2px;
margin-right:5px;
margin-top:8px;
margin-left:8px;
position:relative;
background-color:white;
z-index: 2;
}
.comments .avatar-image-container img {
max-width:100%;
height:100%
}
.comments .inline-thread .avatar-image-container {
width:38px;
height:38px;
position:relative;
margin:0
}
.comments .comment-block {
margin-left:0;
padding:0 8px;
min-height:90px;
border:1px solid #4173af;
border-radius:2px
}
.comments .inline-thread .comment-block {
margin-left:45px;
padding:0;
border:0;
min-height:initial
}
.comments .comments-content .comment:hover .comment-block {
border:1px solid 4173af;
-moz-box-shadow:0 1px 3px rgba(58,58,58,0.06),0 1px 2px rgba(54,54,54,0.21);
-webkit-box-shadow:0 1px 3px rgba(58,58,58,0.06),0 1px 2px rgba(54,54,54,0.21);
box-shadow:0 1px 3px rgba(58,58,58,0.06),0 1px 2px rgba(54,54,54,0.21)
}
.comments .comments-content .comment:hover .inline-thread .comment-block {
border:0;
-moz-box-shadow:none;
-webkit-box-shadow:none;
box-shadow:none
}
.comments .comments-content .comment-replies {
margin-left:20px;
margin-top:5px
}
.comments .comments-content .comment-header,.comments .comments-content .comment-content {
margin:0 0 8px;
padding-left:58px;
text-align:left;
line-height:1.6em;
}
.comments .comments-content .comment-header {
margin-top:8px;
height:14px
}
.comments .comments-content .inline-thread .comment-header,.comments .comments-content .inline-thread .comment-content {
padding-left:8px;
margin-top:0;
text-align:left;
line-height:1.6em;
}
.comment-actions {
position:absolute;
top:64px;
left:10px;
z-index:2
}
.comments .comment .comment-actions a {
background:#0671A1;
border-radius:4px;
position:relative;
display:block;
padding:2px 7px;
color:white;
top:-1px;
font-family:Arial,Sans-serif;
font-weight:bold;
box-shadow:0 1px 1px rgba(0,0,0,0.4);
text-shadow:0 1px 0 rgba(0,0,0,0.3);
-webkit-transition:none;
-moz-transition:none;
-o-transition:none;
-ms-transition:none;
transition:none
}
.comments .comment .comment-actions a:hover {
text-decoration:none;
background-color:#0057ae;
}
.comments .comment .comment-actions a:active {
top:0;
background-color:#0057ae;
}
.comments .comments-content .inline-thread li.comment,.comments .comments-content .inline-thread li.comment:first-child,.comments .comments-content .inline-thread li.comment:last-child {
padding:5px;
border:1px solid #4173af;
margin-bottom:5px;
}
.comments .comments-content .inline-thread {
padding:0
}
.comments .comments-content .comment-thread.inline-thread ol {
padding-top:8px
}
.comments .comments-content .comment-thread.inline-thread ol > div:first-child {
border-left:1px solid #4173af;
padding:10px
}
.comments .comments-content .inline-thread li.comment::before {
content:"";
position:absolute;
width:11px;
height:1px;
background-color:#4173af;
display:block;
left:-12px;
top:12px
}
.comments .comments-content .inline-thread li.comment:last-child {
margin-bottom:0
}
.comments .comments-content .inline-thread li.comment:last-child::after {
content:"";
height:100%;
width:5px;
display:block;
background-color:#FCFCFC;
position:absolute;
top:13px;
left:-13px
}
.comments .thread-toggle.thread-expanded {
position:relative
}
.comments .thread-toggle.thread-expanded::after {
content:"";
display:block;
width:1px;
height:32px;
position:absolute;
background:#4173af;
top:-8px;
left:0
}
.comments .comment .comment-actions .item-control a {
display:none;
background-color:#FCFCFC;
background-position:2px 50%;
background-repeat:no-repeat;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZhvCvUlkoBvZOQ-UbVf95Hbe5PEz2wK74IX32vM0G2uraBy2hM4qAXzK9W6C4tQL6beS6LGFRcPMvAEKtHayQEVGXzW-dRfu0ezdBsEUuPMxV6hX1bwyrraN35L4iGEUIjJKNwtAHSQA/s14/Trash.png);
border:1px solid #4173af;
position:absolute;
left:-10px;
text-indent:-9999px;
padding:0;
width:19px;
height:20px;
top:-42px;
border-radius:2px
}
.comments .comments-content .comment:hover .comment-actions .item-control a {
display:block
}
.comments .comments-content .comment:hover .inline-thread .comment-actions .item-control a {
display:none
}
.comments .comments-content .inline-thread li.comment:hover .comment-actions .item-control a {
display:block
}
.comments .inline-thread .comment .comment-actions .item-control a {
left:-61px;top:-35px
}
#comments h4#comment-post-message {
border-bottom:0;
background-color:transparent;
font-size:130%
}
.comment-form {
max-width:100%
}
.comments .comments-content .icon.blog-author {
display: block;
width: 0;
height: 0;
border: 6px solid transparent;
border-color:transparent #0671A1 #0671A1 transparent;
position: absolute;
right: 0;bottom: 4px;
}
.comments .comments-content .inline-thread .icon.blog-author {
bottom:-9px;
right:-5px;
}
.comments .comments-content .user,.comments .comments-content .datetime {
display:inline-block;
float:left
}
.comments .avatar-image-container img[src="http://img1.blogblog.com/img/anon36.png"] {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy7uK5me4hznTL1OlJuZqVUzHALlSHw2LuPSO-nfLnxhCoirFnPdNMPfqhXUeG9hmWUkXSb6aRAhlFfJDyxcmt4JiaDsFAUMOU9If-08TL9A7EQ93mxoAjbDzhh3EFExU1iw28Pi5-VpRZ/s70/user-anonymous-icon.png);
}

Terakhir klik "Simpan Template".

Kemudian lihat hasilnya.

Sekian dulu artikel mengenai cara merubah tampilan komentar blog, Semoga bermanfaat.

Keterangan: cari kode /* comments, jika sebelumnya masih terdapat kode CSS yang berkaitan dengan komentar, sebaiknya anda hapus.

By : Ciel

On :

Mengatasi Pesan Komentar Blog Yang Pindah Ke Bawah

Pesan komentar adalah sebuah pesan khusus yang di tuliskan oleh si pemilik blog yang ditujukan untuk pengunjung. Pesan ini biasanya berisi tentang ketentuan bagaimana cara berkomentar yang baik sesuai dengan aturan atau persyaratan dalam berkomentar di blog tersebut. Selain itu ada juga para blogger yang membuatnya untuk ucapan terima kasih, atau juga sebagai pemanis agar para pengunjung ingin berkomentar di blog-nya.

Pesan komentar ini umumnya terletak di atas dari kotak komentar, tetapi dalam keadaan tertentu biasanya akan turun ke bawah dengan tiba-tiba. Pada pengalaman pribadi saya di blog ini, pesan komentar akan muncul di atas pada postingan yang belum ada komentarnya atau yang jumlah komentarnya masih sedikit, tetapi pada posting yang jumlah komentarnya diatas empat, pesan komentar ini akan pindah ke bawah.

Saya yakin banyak para blogger akan mengalami masalah seperti gambar di atas. Karena masalah tersebut, pesan komentar yang di buat oleh pemilik akan sulit terbaca oleh pengunjung, pesan tersebut jadi terlihat seperti tidak berguna. Untuk itu saya akan memberikan solusi bagamana cara mengatasi pesan komentar yang jatuh ke bawah formulir komentar.

Perhatikan langkah-langkah berikut.

Login >> Template >> Edit HTML.

Cari kode di bawah,

<b:includable id='threaded-comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<b:if cond='data:mobile'>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
<b:else/>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
</b:if>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>', '<data:post.communityId/>');
</script>
</div>
</b:includable>

tips: gunakan CTRL+F lalu ketikan threaded-comment-form untuk mempermudah pencarian.

Jika sudah ketemu, silakan anda hapus semua kode di atas dan ganti dengan kode berikut,

<b:includable id='threaded-comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<b:if cond='data:mobile'>
<div id='form-wrapper'>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
</div>
<b:else/>
<div id='form-wrapper'>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
</div>
</b:if>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>', '<data:post.communityId/>');
</script>
</div>
</b:includable>

Selanjutnya cari kode document.getElementById(domId).insertBefore(replybox, null);

Ganti kode tersebut dengan kode document.getElementById(domId).insertBefore(document.getElementById('form-wrapper'), null);

Klik "Simpan Template".

Sekarang masalah pesan komentar yang pindah ke bawah, sudah berhasil anda atasi. Sekian artikel saya kali ini kurang lebihnya mohon maaf. Semoga bermanfaat.

Sumber: http://istiawanblog.blogspot.com.

By : Ciel

On :

Kumpulan Widget Animasi Keren di Blog

Pojok-Pojok lagi lagi Kumpulan Widget Animasi Keren Di Blog buat di gambar pojok,Nah gan buat yang lagi cari Gambar atau Animasi Keren buat di blogsilahkan di pilih Kumpulan Widget Animasi Keren Di Blog ini Tapi saya ambil dari koleksi gambar animasi gerak saya gan . Cara pasangnya juga gampang ayo ke tkp

1.Masuk akun blogger kamu Klik > Rancangan > Pilih add laman > dan pilihHTML/javascript

2.Pilih salah satu gambar di bawah ini yang kamu suka kemudian kopi pastekan kode HTML nya di HTML/javascript .

3.Simpan dan lihat hasilnya