Juni 2011 | Smk Telkom Surabaya

Kostumisasi Avatar Komentar

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. Sudah Terasa Lama Blog Ini Tidak Posting -Posting Lagi, Dikarnakan Saya Sedang Sibuk Untuk Mempersiapkan Masuk Sma . Mudah-mudahan Jika Allah Berkenan Saya Bisa Masuk Sma Yg Saya Inginkan.Amiin,,.
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.

Cara Membuat Post Hover di Blog Dengan CSS

read more 0

Assalamualaikum Wr.Wb. Pada Tutorial Blog Sebelumnya Blog Sharing Ilmu Pengetahuan Sudah Menjelaskan Pada Sobat Semua Tentang Bagaimana Cara Membuat Menu Drop Down Horizontal Melayang Di Blog.Tetapi Pada Tutorial Blog Kali Ini Saya Akan Menjelaskan Pada Sobat Semua Tentang Bagaimana Cara Membuat Post Hover di Blog Dengan CSS .Tentu Sobat Semua sudah tau apa itu hover? oh ada yang tidak tau. Hover adalah efek yang diterima suatu objek saat di sentuh mouse/kursor, misalnya ketika link saat di sentuh mouse. Nah kalau post itu ada bagian posting, muali dari background, tulisan, semuanya tentang posting deh. Sekarang kita akan mencoba menggabungkan hover dan post dengan CSS3. Seperti apakah jadinya? kurang lebih seperti ini
Demo

Sudah lihat demonyakan?itu sangat simple, anda masih bisa mengembangkannya lagi dengan imajinasi anda sendiri hehe. Oke jika anda tertarik langsung saja ke Steb.By.Step

1. Login ke blog anda > Design > Edit HTML
2. Cari kode </head>
3. Letakan kode berikut di atas kode tadi
<b:if cond="data:blog.homepageUrl == data:blog.url"> <style>
    .hentry:hover {
     background:#ddd -moz-linear-gradient(top, #ddd, #818181);background:-webkit-gradient(linear, left      top, left bottom, from(#818181), to(#000));
    color:#FFFFFF;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    }
    .hentry:hover a:link,#posts-list .hentry:hover a:visited {
    color:#FFFFFF;
    }
</style></b:if>

4. Kalau anda mengerti kode CSS boleh ko itu di utak-atik
5, Save Termplates.

Sekian post saya kali ini, semoga bermanfaat saya akhiri wassalam