membuat garis lengkung atau Rounder Corner

pada postingan kali ini saya akan sedikit mengurai tentang bagaimana cara untuk membuat garis melengkung pada blog. Untuk demonya sobat blogger bisa melihat blog milik saya pada postingan. Tertarik untuk membuatnya silahkan ikuti tutorial dibawah ini...!

• Login pada blogger anda
• Masuk pada Rancangan
• Lanjut untuk memilih Edit HTML
• Selanjutnya pilih garis mana yang ingin anda buat melengkung
• Lalu copy dan pastekan code dibawah ini

border-left:3px solid #FF0000;
border-right:3px solid #FF0000;
border-top:3px solid #FF0000;
border-bottom:0px solid #FF0000;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;

pada script diatas artinya yaitu:

border-kiri tebal 3px dengan mode solid berwarna merah
border-kanan tebal 3px dengan mode solid berwarna merah
border-atas tebal 3px dengan mode solid berwarna merah
border-bawah tebal 3px dengan mode solid berwarna merah
pada border atas-kiri mempunyai lengkung radius 15px
pada border atas-kanan mempunyai lengkung radius 15px
pada border bawah-kiri mempunyai lengkung radius 15px
pada border bawah-kanan mempunyai lengkung radius 15px

dalam contoh disini saya akan mencoba untuk memasukkan pada post-body dibawah ini:

.post-body{

maka sobat tinggal letakkan script diatas pada post-body tadi jadi scriptnya akan menjadi seperti dibawah ini:

.post-body{
border-left:3px solid #FF0000;
border-right:3px solid #FF0000;
border-top:3px solid #FF0000;
border-bottom:0px solid #FF0000;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;

atau bisa juga menggunakannya dengan kita memangkas dari script diatas menjadi

border-radius:15px;

-moz-border-radius:15px;

Script diatas hanya bisa pada browser tertentu seperti mozilla firefox dan belum bisa tampil pada browser lain misalkan IE(Internet Explorer) milik windows. Untuk lengkapnya saya sediakan scriptnya agar rounder corner yang Anda buat bisa tampil diseluruh browser. Script dibawah ini sudah saya test pada browser IE, Firefox, Crome dan Opera dan rounder cornernya bisa ditampilkan.

 -moz-border-radius:4px;
-khtml-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;

Nah selanjutnya tinggal Anda dituntut sampai dimana bisa berkreasi rounder corne diatas pada blog Anda. Apabila Anda masih bingung dan belum mengerti silahkan tinggalkan komentar Sekian Tutorialnya.

Anda baru saja membaca artikel yang berkategori Tips dan Trik Blog dengan judul membuat garis lengkung atau Rounder Corner. Anda bisa bookmark halaman ini dengan URL https://helwie-ahmad.blogspot.com/2011/03/membuat-garis-lengkung-atau-rounder.html. Terima kasih!

Ditulis oleh: Unknown - Minggu, 13 Maret 2011