BritaZone - Halo sahabat, pada postingan kali ini, BritaZone akan memberikan tutorial mudah dan cerdas tenteang cara membuat bingkai gambar/border image pada blog. Yang dimaksud border image disini adalah sebuah garis bingkai yang membingkai gambar dengan beraneka efek/gaya yang sudah ditentukan untuk memperindah tampilan gambar yang diposting tersebut.
Nah untuk caranya sangat sederhana sekali, kita hanya memerlukan kode css tambahan ketika kita memposting sebuah gambar pada blog/web kita. Baiklah, untuk memperjelas bagaimana sih caranya bikin bingkai gambar/border Image supaya gambar yang kita posting tampak bagus dan ada bingkainya?
Caranya sangat mudah, langkah-langkahnya sebagai berikut:
1. Untuk blogger lansung saja upload gambar yang akan dikasih bingkai sama seperti halnya kita mengupload gambar pada waktu memposting sebuah konten.
2. Perhatikan bahwa setelah diupload gambar kamu masih tampak tanpa bingkai.
3. Setelah itu pilih mode HTML blogger.
4. Temukan kode script gambarnya, contoh seperti kode berikut:
5.Setelah ketemu tinggal kita tambahkan saja kode CSS tambahan agar nantinya ada efek bingkai bagus pada gambar kamu tadi. Cara menambahkan CSS-nya adalah dengan cara menyisipkan kode berwarna biru sehingga nanti hasilnya seperti ini:
Nah untuk kode CSS padding:3px; border:15px solid #BEBBBB dengan efek gambarnya sebagai berikut:
Kalian bisa mengkreasikan gambar kalian sendiri dengan cara memodifikasi kode CSS diatas.
Bagaimana gan, simple kan buat bingkai gambar/border image pada gambar kamu?. Oke sekian dulu postingan kali ini dan selamat mencoba
Rujukan: http://kolom-newbie.blogspot.com
Nah untuk caranya sangat sederhana sekali, kita hanya memerlukan kode css tambahan ketika kita memposting sebuah gambar pada blog/web kita. Baiklah, untuk memperjelas bagaimana sih caranya bikin bingkai gambar/border Image supaya gambar yang kita posting tampak bagus dan ada bingkainya?
Caranya sangat mudah, langkah-langkahnya sebagai berikut:
1. Untuk blogger lansung saja upload gambar yang akan dikasih bingkai sama seperti halnya kita mengupload gambar pada waktu memposting sebuah konten.
2. Perhatikan bahwa setelah diupload gambar kamu masih tampak tanpa bingkai.
3. Setelah itu pilih mode HTML blogger.
4. Temukan kode script gambarnya, contoh seperti kode berikut:
<a href="http://2.bp.blogspot.com/-Xsd35GCiuik/T5egMkiZ3dI/AAAAAAAABQc/HvA5wJ7McZY/s1600/pevita.jpg"><img id="BLOGGER_PHOTO_ID_5058536746814715122" style="FLOAT: left; MARGIN: 0px 10px 10px 0px; WIDTH: 160px; CURSOR: hand; HEIGHT: 113px" height="197" alt="" src="http://2.bp.blogspot.com/-Xsd35GCiuik/T5egMkiZ3dI/AAAAAAAABQc/HvA5wJ7McZY/s1600/pevita.jpg" width="160" border="0" /></a>5.Setelah ketemu tinggal kita tambahkan saja kode CSS tambahan agar nantinya ada efek bingkai bagus pada gambar kamu tadi. Cara menambahkan CSS-nya adalah dengan cara menyisipkan kode berwarna biru sehingga nanti hasilnya seperti ini:
<a href="http://2.bp.blogspot.com/-Xsd35GCiuik/T5egMkiZ3dI/AAAAAAAABQc/HvA5wJ7McZY/s1600/pevita.jpg"><img id="BLOGGER_PHOTO_ID_5058536746814715122" style="FLOAT: left; MARGIN: 0px 10px 10px 0px; WIDTH: 160px; CURSOR: hand; HEIGHT: 113px" height="197" alt="" src="http://2.bp.blogspot.com/-Xsd35GCiuik/T5egMkiZ3dI/AAAAAAAABQc/HvA5wJ7McZY/s1600/pevita.jpg" width="160" border="0" /></a> Nah untuk kode CSS padding:3px; border:15px solid #BEBBBB dengan efek gambarnya sebagai berikut:
| Gambar asli tanpa kode CSS | Gambar dengan kode CSS |
 | |
Model: Pevita Eileen Pearce
Sumber Gambar: www.infoselebindo.com
Kalian bisa mengkreasikan gambar kalian sendiri dengan cara memodifikasi kode CSS diatas.
Bagaimana gan, simple kan buat bingkai gambar/border image pada gambar kamu?. Oke sekian dulu postingan kali ini dan selamat mencoba
Rujukan: http://kolom-newbie.blogspot.com
Tags:
Trik Blogger