Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat Border Image Dengan CSS3 Stylish Effect


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/AVvXsEhgebAD1TQo4Ffce8d3woVSbz4OdFo6KAvh5RIw0pfw-RAw_OcuTUDvlLirwMM9IYMi8dmCnIbGEt2GHBEx1K5-JnsS2qApgBM9AgjE7ayXi5J8Kck6mDv6E-US2ESEM4PcLD3tjTIUUc3m/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/AVvXsEhgebAD1TQo4Ffce8d3woVSbz4OdFo6KAvh5RIw0pfw-RAw_OcuTUDvlLirwMM9IYMi8dmCnIbGEt2GHBEx1K5-JnsS2qApgBM9AgjE7ayXi5J8Kck6mDv6E-US2ESEM4PcLD3tjTIUUc3m/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/AVvXsEhgebAD1TQo4Ffce8d3woVSbz4OdFo6KAvh5RIw0pfw-RAw_OcuTUDvlLirwMM9IYMi8dmCnIbGEt2GHBEx1K5-JnsS2qApgBM9AgjE7ayXi5J8Kck6mDv6E-US2ESEM4PcLD3tjTIUUc3m/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.


9 komentar untuk "Cara Membuat Border Image Dengan CSS3 Stylish Effect"

  1. wahh boleh juga nich ilmunya kang,,, thanks ya langsung saja nich dicoba-coba....

    BalasHapus
  2. ternyata masih banyak hal belum saya tau ya,,, harus lebih banyak beljar lagi ya

    BalasHapus
  3. sudah aku praktekan soal yang ini mas.....
    dan sudah sukses

    BalasHapus
  4. memang ini yang sedang saya cari gan... terima kasih banyak nih

    BalasHapus
  5. Makasih sob infonya,apa kabar nieh? ko jarang main ke blogku,sibuk ya sob? Happy weekend and happy blogging aja.

    BalasHapus
  6. tutorial bagus sob, udah sy coba... kebetulan sy jg lagi nyari buat background image untuk iklan gimana caranya sob?

    BalasHapus
  7. terimakasih infonya gan..
    ane olah TKP dulu :)

    BalasHapus
  8. ms bro biar tampilan blognya sama persis kaya sampean gimana?

    BalasHapus