Pages

4

Cara Membuat Border Radius Pada Blog

Pada Kesempatan Kali ini Saya Akan Kembali Menuliskan Tutorial Blogger, Berhubung Ada Beberapa Sobat Yang Menantikan Tutorial Blogger Dari Saya Mungkin Dalam Beberapa Postingan Berikutnya Saya Akan Share Tutorial Blogger.

Nah Untuk Postingan Kali ini Saya Akan Share Tutorial Membuat Border Radius Pada Blog Atau Biasa Disebut Garis Melengkung Dan Untuk Mempersingkat Waktu Kita Langsung Saja Pada Tutorial Berikut.

Penerapan Border Radius Pada Suatu Kolom Biasa.

Kode Untuk Kolom Biasa
<div style="border:5px solid #0dc3ff;padding:10px;text-align:center;">
Tulisan Atau Gambar Anda disini.
Tulisan Atau Gambar Anda disini.
Tulisan Atau Gambar Anda disini.
</div>

Hasil Dari Kode Kolom Biasa Diatas
Tulisan Atau Gambar Anda disini.
Tulisan Atau Gambar Anda disini.
Tulisan Atau Gambar Anda disini.

Kode Untuk Kolom Biasa
<div style="border:5px solid #0dc3ff;padding:10px;text-align:center;">
Tulisan Atau Gambar Anda disini.
Tulisan Atau Gambar Anda disini.
Tulisan Atau Gambar Anda disini.
</div>

Silahkan Sobat Lihat Kode Diatas !!! itu Adalah Kode Dari Contoh Kolom Biasa Dan Sekarang Kita Akan Menambahkan Beberpa Kode Yang Akan Membuat Kolom Biasa Tersebut Berubah Menjadi Kolom Yang Mempunyai Border Melengkung Pada Sisi Pinggirnya Dan Yang Perlu Ditambahkan Adalah Kode Berikut:

Untuk Firefox: -moz-border-radius:10px;
Untuk Chrome: -Webkit-border-radius:10px;
Untuk IE: border-radius:10px;

Berikut Adalah Kode Lengkapnya Setelah Dimasukkan Pada Kode Kolom Biasa:

<div style="border:5px solid #0dc3ff;padding:10px;text-align:center;-moz-border-radius:10px;">
Tulisan Atau Gambar Anda disini.
Tulisan Atau Gambar Anda disini.
Tulisan Atau Gambar Anda disini.
</div>

Untuk Kode Yang Warna Biru Diatas Adalah Kode Melengkung Support Firefox Yang Saya Sisipkan Pada Kolom Biasa Dan Berikut Hasil Dari Kode Diatas:

Kolom Dengan Border Radius
Tulisan Atau Gambar Anda disini.
Tulisan Atau Gambar Anda disini.
Tulisan Atau Gambar Anda disini.

Gimana Sobat Blogger, Mudahkan? Oke untuk Pemahaman Lebih Lanjut silahkan Sobat Perhatikan Beberapa Contoh Kolom Melengkung Yang Bisa Sobat Pahami dibawah.

Kode Contoh 1
<div style="border:5px inset #0dc3ff;padding:10px;text-align:center;-moz-border-radius-topleft:0px;-moz-border-radius-topright:20px;-moz-border-radius-bottomleft:20px;-moz-border-radius-bottomright:0px;">
Tulisan Atau Gambar Anda disini.
Tulisan Atau Gambar Anda disini.
Tulisan Atau Gambar Anda disini.
</div>

Hasil Dari Kode Contoh 1
Tulisan Atau Gambar Anda disini.
Tulisan Atau Gambar Anda disini.
Tulisan Atau Gambar Anda disini.

Kode Contoh 2
<div style="border:5px inset #0dc3ff;padding:10px;text-align:center;-moz-border-radius-topleft:0px;-moz-border-radius-topright:0px;-moz-border-radius-bottomleft:20px;-moz-border-radius-bottomright:20px;">
Tulisan Atau Gambar Anda disini.
Tulisan Atau Gambar Anda disini.
Tulisan Atau Gambar Anda disini.
</div>

Hasil Dari Kode Contoh 2
Tulisan Atau Gambar Anda disini.
Tulisan Atau Gambar Anda disini.
Tulisan Atau Gambar Anda disini.

Kode Contoh 3
<div style="border:5px inset #0dc3ff;padding:10px;text-align:center;-moz-border-radius-topleft:0px;-moz-border-radius-topright:20px;-moz-border-radius-bottomleft:0px;-moz-border-radius-bottomright:20px;">
Tulisan Atau Gambar Anda disini.
Tulisan Atau Gambar Anda disini.
Tulisan Atau Gambar Anda disini.
</div>

Hasil Dari Kode Contoh 3
Tulisan Atau Gambar Anda disini.
Tulisan Atau Gambar Anda disini.
Tulisan Atau Gambar Anda disini.

Itulah Beberapa Contoh yang Saya Buat Untuk melanjutkan Pemahaman Sobat Dan Berikutnya Tinggal Sobat Kresikan Sendiri. Biasanya Penggunaan Border Radius ini Sangatlah Cocok Untuk Disain Blog Sobat, Ya Cobalah Otak Atik Sendiri.

Saya Ucapkan terima Kasih Semoga Tutorial ini Bermanfaat Dan Jangan Segan Untuk Bertanya Karna Saya Siap Menjawabnya.

Alfiona

Phasellus facilisis convallis metus, ut imperdiet augue auctor nec. Duis at velit id augue lobortis porta. Sed varius, enim accumsan aliquam tincidunt, tortor urna vulputate quam, eget finibus urna est in augue.

4 comments:

  1. AnonymousDecember 1, 2012 at 9:16 AM

    Right here is the perfect website for everyone who hopes to find out
    about this topic. You know a whole lot its almost tough to argue with you
    (not that I really would want to…HaHa). You definitely put a brand new spin
    on a topic which has been discussed for many years. Great stuff, just excellent!
    My web page ... piano lessons

    ReplyDelete
  2. AnonymousDecember 1, 2012 at 7:45 PM

    Good day! I could have sworn I've been to this site before but after browsing through some of the post I realized it's new to me.
    Anyhow, I'm definitely glad I found it and I'll be bookmarking
    and checking back frequently!
    Here is my web blog : Work from home

    ReplyDelete
  3. AnonymousJanuary 5, 2013 at 8:39 AM

    We are a group of volunteers and opening a brand new scheme in our community.
    Your web site provided us with valuable information to work on.
    You have performed a formidable process and our entire community might
    be thankful to you.
    Here is my site - tattoo removal cost

    ReplyDelete
  4. AnonymousFebruary 8, 2013 at 12:40 PM

    Hi there to all, how is everything, I think every one is getting more from this site, and your views are nice in support of new people.
    My page :: http://www.isleofwightfacebook.co.uk

    ReplyDelete