Gambar diatas itu aslinya kotak, tidak langsung bulat. Setelah diberi kode css, barulah gambar itu bisa bulat. Dibawah ini adalah gambar asli dari contoh diatas.
Berikut Ini adalah satu contoh penggunaan gambar bulat di blog, bisa kalian gunakan untuk menu, atau halaman lainnya. Ikuti langkah-langkah dibawah ini.
- Login ke blogger, dari halaman dasbor, pilih pengaturan tata letak.
- Lalu klik tambahkan Gadget, pilih HTML/JAvascript.
- Selanjutnya copy kode dibawah ini.
- Dan pastekan di gadget HTML/JAvascript tadi.
- Save gadget, selesai.
<style>
#bulat{background:transparent;}
#bulat ul{}
#bulat ul li{float:left;list-style:none;padding:0px 10px 0px 0px;}
#bulat ul li img{padding:0px;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;}
</style>
<div id="bulat">
<ul>
<li><a href="URL" ><img src="URL Gambar" /></a></li>
<li><a href="URL" ><img src="URL Gambar" /></a></li>
<li><a href="URL" ><img src="URL Gambar" /></a></li>
<li><a href="https://plus.google.com/u/0/110277074823916598610/posts"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP6ET_r2F6vTNcv2BPGrqlzN3FkIT6w6BJdWZZERAopSZNX-juGyBUBipPuTvbwVAnVBrOtuU3Zk4IdIGK8cx6Ph0mqlHKOiCws1d22WXX1EeCWNfYEVe3HEWHl8zYyMjKzM8Ccogqh3o1/s32/G%252B.jpg" /></a></li>
</ul>
</div>
#bulat{background:transparent;}
#bulat ul{}
#bulat ul li{float:left;list-style:none;padding:0px 10px 0px 0px;}
#bulat ul li img{padding:0px;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;}
</style>
<div id="bulat">
<ul>
<li><a href="URL" ><img src="URL Gambar" /></a></li>
<li><a href="URL" ><img src="URL Gambar" /></a></li>
<li><a href="URL" ><img src="URL Gambar" /></a></li>
<li><a href="https://plus.google.com/u/0/110277074823916598610/posts"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP6ET_r2F6vTNcv2BPGrqlzN3FkIT6w6BJdWZZERAopSZNX-juGyBUBipPuTvbwVAnVBrOtuU3Zk4IdIGK8cx6Ph0mqlHKOiCws1d22WXX1EeCWNfYEVe3HEWHl8zYyMjKzM8Ccogqh3o1/s32/G%252B.jpg" /></a></li>
</ul>
</div>
- #bulat ul li img{padding:0px; border-radius: 100px;-moz-border-radius: 100px;-webkit-border-radius: 100px;} kode ini fungsinya untuk membuat gambar menjadi bulat.
- float:left; fungsinya agar urutan gambar menjadi vertical kesamping.
- list-style:none; menghilangkan bentuk bulat list disetiap gambar.
- padding:0px 10px 0px 0px; jarak antar gambar.
- <a href="URL" > isi dengan URL yang kalian inginkan.
- <img src="URL Gambar" /> isi dengan URL gambar.
URL maksudnya adalah alamat blog atau halaman web yang ada di address bar pada bagian atas browser, seperti: blogspot.com. Untuk membuat gambar/icon seperti diatas, silakan baca di cara membuat icon website dan jika masih bingung mengambil url gambar, bisa baca di cara mengambil url gambar.
Itulah sedikit tips dan trik tentang cara membuat gambar bentuk bulat di blog, yang dapat kita digunakan untuk menambah pilihan dalam mendesain blog sendiri.
Semoga Bisa Bermanfaat Untuk Anda.
EmoticonEmoticon