Pada
Tutorial Blog Blog Sharing Ilmu Pengetahuan Sudah Menjelaskan Pada Sobat Semua Tentang Bagaimana
Cara Membuat Post Hover Di Blog Dengan CSS .Dan Pada Tutorial Kali Ini,Tutorial Yg Sama Juga Yaitu Tutorial Blog .Saya Akan Menjelaskan Berberapa
Kustomisasi Avatar Komentar.
Langsung Aja Pada Topik Kita Tentang Blog. Kenapa “gambar avatar komentar” di Blogger
™ Anda kelihatan lebih besar? Kenapa juga letaknya berbeda dengan
default Blogger
™?
Dalam Blogger
™ terdapat kode-kode embeded—kode perintah spesifik oleh pihak developer untuk menunjang kinerja mesin blogger—yang berfungsi mengatur secara
default tampilan blog. Nah, termasuk didalamnya adalah pengaturan tampilan komentar (red=“
bukan formulir komentar”). Silakan Anda koreksi, jika frase kata yang berwarna merah (dalam tanda kutip) keliru.
Apabila Anda ingin mengetahui kode
CSS embeded tersebut, coba buka blog Anda
& tekan tombol
Ctrl + U pada papan ketik. Mungkin Anda akan melihat kode seperti ini:
<link type='text/css' rel='stylesheet' href='http://www.blogger.com/static/v1/widgets/129348724-widget_css_bundle.css' />
Dari
bundle CSS di atas akan kita temui kode avatar komentar sebagai berikut.
#comments-block .avatar-image-container img {
-ms-interpolation-mode:bicubic;
border:1px solid #ccc;
float:right;
}
#comments-block .avatar-image-container.avatar-stock img {
border-width:0;
padding:1px;
}
#comments-block avatar-image-container {
height:37px;
left:-45px;
position:absolute;
width:37px;
}
Kode yang berwarna hijau dapat Anda lihat tampilannya pada komentar klasik Blogger
™. Sedangkan yang berwarna merah merupakan tampilan avatar komentar di bawah posting.
Memperbesar gambar avatar
Untuk memperbesar gambar avatar pada komentar di bawah posting, maka kita akan menggunakan kode CSS yang berwarna merah
& letakkan di atas
]]></b:skin>.
#comments-block avatar-image-container {
height:37px;
left:-45px;
position:absolute;
width:37px;
}
Catatan: Silakan dirubah nilai atribut
height & width—ditandai dengan warna merah—sesuai dengan keinginan Anda. Kembali ke ulasan “mengganti gambar
blank”
Merubah letak avatar
Lihat kembali kode untuk “memperbesar gambar avatar”, kemudian ganti atribut
left—ditandai dengan warna biru—sesuai dengan letak yang Anda inginkan. Nilai minus (-) berarti avatar akan bergeser ke kiri. Sebaliknya jika nilai yang dimasukkan positif, maka avatar akan bergeser ke kanan.
Anda dapat pula menambahkan atribut lainnya, contoh
margin:2em 0 -2px 0;. Artinya avatar akan bergeser ke bawah sejauh 2
ems dari tempatnya semula, sedangkan nilai -2px hanya sekedar untuk menyelaraskan kode CSS avatar dengan CSS inline dalam
HTML komentar seperti di bawah ini (hanya untuk diketahui saja).
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='32px' style='
margin-bottom:-2px;' width='32px'/>
</b:if>
Mengganti gambar blank
Tampilan
blank pada avatar akan terjadi jika pengomentar menggunakan identitas “Anonymous” atau “Name/URL” atau tidak memiliki gambar avatar pada identitasnya. Untuk mengganti gambar
blank dengan gambar yang Anda inginkan, maka kode yang digunakan adalah sebagai berikut:
#comments-block .avatar-image-container img {
-ms-interpolation-mode:bicubic;
border:1px solid #ccc;
float:right;
}
Tambahkan atribut:
background:url('alamat penyimpanan gambar avatar') no-repeat;
height:37px;
width:37px;
Silakan ubah alamat
& nilai dari masing-masing atribut yang ditandai dengan warna hijau. Dan agar tampilan gambar lebih bagus, sebaiknya gambar avatar yang Anda upload berukuran sama dengan atribut
height & width pada ulasan “memperbesar gambar avatar”.
Hasilnya akan terlihat seperti di bawah ini.
#comments-block .avatar-image-container img {
-ms-interpolation-mode:bicubic;
border:1px solid #ccc;
float:right;
background:url('alamat penyimpanan gambar avatar') no-repeat;
height:37px;
width:37px;
}
Kemudian letakkan di atas kode
]]></b:skin>.
Mempercantik avatar dengan CSS3
Terakhir, untuk mempercantik tampilan avatar komentar dapat menggunakan CSS3, antara lain
rounded corner & box shadow.
#comments-block .avatar-image-container img {
-ms-interpolation-mode:bicubic;
border:1px solid #ccc;
float:right;
background:url('alamat penyimpanan gambar avatar') no-repeat;
height:37px;
width:37px;
border-radius:5px;
box-shadow:2px 2px 5px #666666;
}
Catatan:
Atribut CSS yang berwarna biru merupakan penyisipan dari tag “Mengganti gambar
blank” di atas.
Anda pun bisa melakukan kostumisasi lain, sehingga tampilan avatar komentar mampu mewakili keinginan dan kebutuhan Anda.