Cara Membuat Border Image Stylish Dengan CSS3 -
Supaya gambar atau image pada postingan atau artikel terlihat bagus,
kita dapat menambahkan bingkai atau
border pada image/gambar tersebut. Pada tips membuat border image dengan menggunakan CSS ini kita sedikit memberikan
sentuhan stylish effect dengan
opacity sehingga efeknya bingkai gambar/image akan tampak seperti dibuat
menggunakan aplikasi Photoshop. Border gambar dengan CSS ini juga dapat sobat gunakan untuk photo profil di sidebar.
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/AVvXsEje-8k0HA1e9tcDZhDV1DhEUO2nM3JJQXtVSI9cAg5hwNhcAcecUJy87_uflcHLX06CI315VVLzTmSqtisVBeV1mGCFLfUHGUi4_CkBS4u5WNstub82ulbcwGpDLKCXe6QemyBzLeemEjiM/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/AVvXsEje-8k0HA1e9tcDZhDV1DhEUO2nM3JJQXtVSI9cAg5hwNhcAcecUJy87_uflcHLX06CI315VVLzTmSqtisVBeV1mGCFLfUHGUi4_CkBS4u5WNstub82ulbcwGpDLKCXe6QemyBzLeemEjiM/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/AVvXsEje-8k0HA1e9tcDZhDV1DhEUO2nM3JJQXtVSI9cAg5hwNhcAcecUJy87_uflcHLX06CI315VVLzTmSqtisVBeV1mGCFLfUHGUi4_CkBS4u5WNstub82ulbcwGpDLKCXe6QemyBzLeemEjiM/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.
^_^ Backlinks Please Thanks ^_^
| URL |
| Code For Forum |
| HTML Code |
| Feed RSS |
0 Blogger Comments
