Cara Membuat Gambar Bulat dengan Kode CSS
15 Feb 2017 - - 3
Biar blog lebih keren, anda bisa menambahkan foto profil anda di sidebar kanan, atau kiri blog anda, jika tampilan gambar profil anda di blog biasa saja, tentu kurang menarik, nah, biar lebih menarik walaupun gambar yang anda upload bentuknya persegi, dengan bantuan kode CSS ini, gambar profil keren anda akan tampil tambah keren.
Contohnya sebagai berikut:
Hasilnya setelah menggunakan tambahan kode CSS menjadi seperti berikut:
Bagaimana? anda tertarik ingin mencobanya? silahkan ikuti petunjuk berikut:
Cara Membuat Gambar Bulat dengan CSS,
1. Login ke blogger.com dengan email dan password anda
2. Masuk tata letak blog anda
3. Tambahkan gadget HTML/ Javascript, kemudian copy kode dibawah ini:
5. Simpan Gadget anda.
Demikian, semoga bermanfaat.
Contohnya sebagai berikut:

Hasilnya setelah menggunakan tambahan kode CSS menjadi seperti berikut:

Bagaimana? anda tertarik ingin mencobanya? silahkan ikuti petunjuk berikut:
Cara Membuat Gambar Bulat dengan CSS,
1. Login ke blogger.com dengan email dan password anda
2. Masuk tata letak blog anda
3. Tambahkan gadget HTML/ Javascript, kemudian copy kode dibawah ini:
<style>
.bulat{
border-radius:100em;
opacity:0.7;
border-top:2px solid #cf2031;
border-right:2px solid #0f7dc8;
border-bottom:2px solid #2eb31a;
border-left:2px solid #eab823;
width:160px;
height:160px;
}
</style>
<img class="bulat" src="URL-GBR" />
4. Ganti URL-GBR dengan url gambar anda (baca cara mendapatkan hosting gambar gratis di sini)..bulat{
border-radius:100em;
opacity:0.7;
border-top:2px solid #cf2031;
border-right:2px solid #0f7dc8;
border-bottom:2px solid #2eb31a;
border-left:2px solid #eab823;
width:160px;
height:160px;
}
</style>
<img class="bulat" src="URL-GBR" />
5. Simpan Gadget anda.
Demikian, semoga bermanfaat.
Makasih infonya bang keren
BalasHapusKalo mau kasih masuk kata kata disampingnya gimana Bang
BalasHapusTerima kasih bang
BalasHapus