Home » Blog » Html dan CSS » Cara membuat border gambar menjadi cycle/lingkaran pada blog
16 April 2014

Cara membuat border gambar menjadi cycle/lingkaran pada blog

Walaupun cara ini termasuk lawas, namun rasa keinginan untuk berbagi tidak pernah tertahankan. Berikut ini saya akan memeberikan tutorial agar gambar pada postingan blog berbentuk lingkaran/cycle. Kita cukup menambahkan sedikit code CSS saja. pada style img.

Contoh penambahan style pada img dan contoh dibawahnya.

<img src="http://2.bp.blogspot.com/-8r****" style="border-radius: 99em; border: 1px solid #089975; box-shadow: 1px 1px 1px 4px rgb(255, 255, 255); padding: 4px;" />

Style untuk gambar No. 1 

style="border-radius: 99em; border: 1px solid #089975; box-shadow: 1px 1px 1px 4px rgb(255, 255, 255); padding: 4px;

Membuat gambar menjadi cycle dengan box-shadow


Style untuk gambar No. 2 

style="border-radius: 99em;border: 0px; box-shadow: 0px 0px 0px 5px rgb(204, 204, 204); padding: 0px;

Membuat gambar menjadi cycle dengan border-radius


Style untuk gambar No. 3 

style="border-radius: 99em; border: 0px; box-shadow: 0px 0px 9px 5px rgb(204, 204, 204); padding: 0px;

Membuat gambar menjadi cycle pada blog


Dengan code css diatas, Kalian bisa membuat gambar pada postingan website/blog menjadi lingkaran / cycle. Kalian juga bisa mengubah code-code tersebut untuk menyesuaikan selera masing-masing. Semoga bermanfaat.
Label: ,
9 komentar :
  1. Unknown23 Juli 2014 pukul 12.54

    terimakasih mas atas tutorialnya di atas, tpi kenapa bentuk ukurannya gk bulat total, bentuknya seperti lonjong....

    visit my blog : http://jebret-cerot.blogspot.com/

    BalasHapus
    Balasan
    1. decky canser23 Juli 2014 pukul 18.44

      Thanks mas martinus, maaf atas lambatnya respon, Saya lupa menuliskan bahwa gambar yang ingin dibuat lingkaran harus mempunyai panjang dan lebar yang sama, seperti gambar di atas yang mempunyai ukuran 100 x 100 pixel. terima kasih pertanyaannya.

      Hapus
  2. Michael4 Agustus 2014 pukul 08.50

    Terima kasih, Mas. Mungkin belum cocok dipasang diblog saya. tapi, makasih atas tutorialnya.
    Ditunggu kunjungan baliknya : http://tupangboy.blogspot.com/

    BalasHapus
  3. Unknown13 September 2014 pukul 07.50

    sangat kren,, kunjing jga ea teman :) http://info-lengkap-terbaru.blogspot.com/

    BalasHapus
  4. Mardani2 Oktober 2014 pukul 09.58

    makasi sob..langsung tkp

    BalasHapus
  5. mbluakrak23 Januari 2019 pukul 20.11

    terima kasih sudah banyak membantu.

    BalasHapus
  6. blogelf25 April 2019 pukul 02.13

    kode scriptnya jalan lancar sesuai petunjuk dan arahannya, terima kasih mas

    BalasHapus

Jika ada artikel yang tidak Anda mengerti, maka gunakan fasilitas kotak komentar ini atau pada halaman kontak untuk menanyakannya.

Best Regard


Decky canser