Kotak komentar blog ialah sebuah kemudahan yang di sediakan untuk memulai interaksi antara pengunjung dengan si empunya blog tentang suatu posting. Dari komentar, pengunjung dapat mengutarakan unek-unek, menyerahkan pujian, saran atau bahkan mengkritik tulisan yang di tulis oleh si empunya blog. Bagi saya individu komentar dari pengunjung dapat membuat semangat tersendiri, karena tulisan yang telah saya tulis diserahkan komentar, walaupun komentarnya berupa kritik yang pedas.
Oleh sebab begitu pentingnya suatu kotak komentar, tidak sedikit dari semua blogger memodifikasi tampilannya sampai-sampai terlihat lebih keren, unik, pun cantik. Tampilan komentar yang estetis akan memberi pesona tersendiri untuk pengunjung supaya mau menyediakan sedikit waktunya guna mengomentari tulisan yang baru di bacanya.
Pada kesempatan kali ini, saya akan membuat Tutorial Mempercantik Tampilan Kolom Komentar Di Blog. Berikut adaah langkah-langkahnya.
1. Buka blogger>Tema>Edit HTML
2. Cari bagian kode yang bertuliskan]]></b:script>
3. Paste kode di bawah tepat di atas]]></b:script>
/* Comments
----------------------------------------------- */
#comments h4 {
font-weight:bold;
color:#000;
background:url(http://lh5.ggpht.com/-aTlt92RWTxg/UbIJIUGB5dI/AAAAAAAAJ64/xjbK-dAYEKM/bcg%25255B2%25255D.gif) 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/AVvXsEgOhT8gU0Mx0Kj9G810-iBZXlALkTeXboQJsQ2s-7fpkzMis91PTuwt7FHlIrdMyi-PRhbY6l4ZYghyQGWN1GiK_TtB5j1CGABmnkENl_djAWLV-dgYc6aADrThpY_HGLantM6SvE1HaeM/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/AVvXsEiZTEyCJxkfPPIg0DBkseOl6A3IHIna8kK_QK4VZs_Q4q2pzkDk9AYnxXoBpcWYFBq37oJFBzyN17_QoCSI9SOr5Zo_KrMEygDivbLhl0OwiHatUhRvpFpnc6cb6scD0tPLM0CmXdC8xqm4/s70/user-anonymous-icon.png);
}
3. Simpan template dan lihat hasilnya. Cakep kan? :)
Thanks buat kalian yang udah membaca tutorial ini. Semoga tampilan comment box blog kailan jadi lebih indah dan menarik.
Credit: http://bocah-alus.blogspot.co.id
0 komentar