Blog & Script Tutor - Ingin kotak komentar berbeda? Atau ingin mengkustamisasi kotak komentar tanpa css yang anda miliki dengan membuat template sendiri? Atau anda seorang blogger oprekers? Jika iya maka solusinya adalah mengkustamisasi widget komentar anda dengan css3. Apa itu Css? Silakan baca di
SINI. Oke langsung saja kita baca keunggulan komentar
buatan saya. Keunggulannya adalah kita hanya tinggal memasukkan kode css tanpa memasukkan widget komentar asli lagi, jadi hanya tinggal copas di dalam tag style. Langsung praktek saja yuk, mari !.
Bahasan 1, Funsinya :
> Seperti yang udah disebut diatas, fungsinya ialah untuk mempercantik/memperindah kotak komentar.
Bahasan 2, Bahaya widget ini :
> Tidak ada
Bahasan 3, Contoh :
> Seperti yang saya terapkan di blog saya ini (sekalian dikomentar monggo)
Cara pemasangan :
1. Login ke Blogger
2. Pilih dashboard blog mu
3. Pilih tataletak, tambah gadget, html/javascript
4. Copas semua kode dibawah lalu simpan.
Kode :
<style>
#author {
display:none;
}
#comment-post-message {
background-color:grey;
}
#comment-post-message br {
padding:0px;
margin:0px;
}
#comments, .comments {
background-color:lightgrey;
}
#comments h4, .comments h4 {
font-weight:bold;
color:white;
}
.comments-content {
background-color:grey;
}
.avatar-image-container {
padding:5px;
width:50px;
height:50px;
}
.comment-delete {
background-color:grey;
}
.comment-delete:hover {
background-color:#1BC7A5;
}
.comment-content {
background-color:white;
padding:5px;
margin:5px;
}
.comment-actions {
background-color:lightgrey;
padding:5px;
margin:5px;
}
.comment-actions:hover {
background-color:#1BC7A5;
padding:5px;
margin:5px;
}
.comment-replies {
background-color:lightblue;
padding:5px;
}
.deleted-comment {
background-color:red;
}
.user {
margin:5px;
padding:5px;
background-color:lightgreen;
}
.blog-author {
margin:5px;
padding:5px;
background-color:yellow;
}
.loadmore, .loaded {
margin:5px;
padding:5px;
background-color:white;
color:black;
padding-bottom:5px;
}
.loaded:hover, .loadmore:hover {
background-color:#1BC7A5;
color:white;
margin:5px;
padding:5px;
padding-bottom:5px;
}
.blog-pager, #blog-pager {
text-align:center;
}
.blog-pager-newer-link:hover, .blog-pager-older-link:hover, .home-link:hover {
background-color:#1BC7A5;
color:white;
}
.blog-pager-newer-link, .blog-pager-older-link, .home-link {
color:black;
}
</style>
Okeitulah cara dari say, sebenarnya bisa juga pakai edit html diletakkan di dalam tag head namun kalau bingung diletakkan gadget juga tak apa.
