Cara Membuat Border Image Dengan CSS3 Stylish Effect

Posted by : Ariq Rastaman Jumat, 18 Oktober 2013

Cara membuat border image dengan menggunakan CSS :

1. Upload dulu gambar yang mau digunakan. Jika gambar yang mau digunakan sudah ada pada postingan, copy link gambar/image tersebut dengan cara klik kanan dan pilih Copy Image Location.

2. Dari dashboard blogger masuk ke menu Posting > Edit Entri dan pilih Edit HTML disebelah tulisan Compose.

3. Image yang diupload di blogger/blogspot biasanya kodenya akan terlihat seperti di bawah ini :

<div class="separator" style="clear: both; text-align: center;">

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiamMmWop8YvcG7jomWEFFi709ltHIIGbFGMPoxR-JkDyQcpyulXKjpm8Tf93Y6fW8aFIo-qq9ewg4GC1ON7wCQk_9pVe_u2MDlQLRhVz_Tl64MPRp8RcYxOodPG7wKeAHqQvXTnwfKMiYi/s1600/AVATAR+KU.png" imageanchor="1" style="clear: left;

float: center; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiamMmWop8YvcG7jomWEFFi709ltHIIGbFGMPoxR-JkDyQcpyulXKjpm8Tf93Y6fW8aFIo-qq9ewg4GC1ON7wCQk_9pVe_u2MDlQLRhVz_Tl64MPRp8RcYxOodPG7wKeAHqQvXTnwfKMiYi/s200/AVATAR+KU.png" width="181" /></a></div>

Dan tampilan gambar aslinya akan terlihat seperti ini pada postingan :

4. Nah kode membuat border untuk gambar/image diatas adalah seperti dibawah ini :

<div style="width: Apx;height: Bpx;padding: 0px;border-width: 3px;border-style: solid;border-color: #555;background-image:

url(http://LINK-IMAGE-ATAU-GAMBAR); margin: 0 auto;">

<div style="border-right: 10px solid rgb(255, 255, 255);border-width: 10px;border-style: solid;border-color: rgb(255, 255, 255);opacity:

0.5;width: Cpx;height: Dpx;">

</div>

</div>

Keterangan :

· A dan B adalah lebar dan tinggi gambar aslinya yaitu width=181px dan height=200px.

· C dan D adalah lebar dan tinggi gambar setelah nanti ditimpa atau dikurangi border. Pada contoh ini kita mengambil pengurangan ukuran sebesar 20px, sehingga C=width=161px dan D=height=180px.

· Untuk mengatur penempatan gambar di kiri , tengah atau kanan tinggal tambahkan pada CSS float: left; , float: center; atau float: right;

5. Ganti tulisan link warna biru dengan link warna merah, sehingga kode lengkap gambar menjadi :

<div style="width: 181px;height: 200px;padding: 0px; float: center;border-width: 3px;border-style: solid;border-color: #555;background-image:

url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiamMmWop8YvcG7jomWEFFi709ltHIIGbFGMPoxR-JkDyQcpyulXKjpm8Tf93Y6fW8aFIo-qq9ewg4GC1ON7wCQk_9pVe_u2MDlQLRhVz_Tl64MPRp8RcYxOodPG7wKeAHqQvXTnwfKMiYi/s200/AVATAR+KU.png); margin: 0 auto;">

<div style="border-right: 10px solid rgb(255, 255, 255);border-width: 10px;border-style: solid;border-color: rgb(255, 255, 255);opacity:

0.5;width: 161px;height: 180px;">

</div>

</div>

6. Hasil akhir gambar/image yang sudah diberi border dan opacity menjadi seperti dibawah ini :

Bagaimana sobat, setelah image/gambar kita berikan border jadi kelihatan lebih bagus bukan. Tips ini sederhana namun saya berusaha menjelaskan langkah-langkahnya sedetil mungkin supaya juga mudah dipahami buat yang masih newbie :D sekali pun. Semoga trik cara membuat border image/gambar dengan menggunakan CSS ini bisa membantu anda berkreasi membuat gambar-gambar keren di blog sobat.

1 Comments

Tweets

Komentar

{ 1 komentar ... read them below or add one }

Ariq Rastaman18 Oktober 2013 pukul 00.13
:V
BalasHapus
Balasan

Tambahkan komentar

PERATURAN BERKOMENTAR DI BLOG OARU:

1. Gunakanlah bahasa yang sopan saat berkomentar.
2. Dilarang Memasang link hidup pada saat berkomentar.
3. Dilarang SPAM !!!
4. Untuk menyisipkan catatan, gunakan [catatan].. CATATAN KAMU ...[/catatan]
5. Untuk menyisipkan gambar, gunakan [img]URL GAMBAR KAMU[/img]