Membuat Sudut Border Melengkung pada blog

B

agi Sobat yang sering jalan-jalan di dunia maya, pasti sering menemui blog yang pada sudut-sudut border'a di buat melengkung seperti pada blog milik Qu ini :$ . Hal tersebut tentu'a membuat blog tersebut terlihat Cantik dan Menawan :P . Sobat tentu'a ingin mengetahui bagaimana cara membuat blog agar terlihat seperti itu. Maka mari kita langsung memulai'a ;) .

Sebelum memulai Sobat harus membuat border biasa terlebih dahulu, seperti ini

<div style='padding:10px;border:4px solid #fff;margin:auto;'>

Agar sudut-sudut dari border tersebut melengkung, Sobat harus menambahkan border-radius, -moz-border-radius, dan -webkit-border-radius, sehingga menjadi seperti ini

<div style='padding:10px;border:4px solid #fff;margin:auto;-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;'>

Ukuran Pixels(px) dapat Sobat tentukan sendiri menurut keinginan Sobat :$ .

Sobat juga dapat membuat bervariasi bentuk border Sobat sendiri, Qu akan memberikan beberapa contoh sebagai acuan Sobat nanti'a. Coba Sobat lihat Variasi Border di bawah ini

<div style='padding:10px;border:4px solid #fff;margin:auto;-moz-border-radius-topleft: 50px; -webkit-border-top-left-radius: 50px; -moz-border-radius-bottomright: 50px; -webkit-border-bottom-right-radius: 50px; border-radius: 50px;'>

<div style='padding:10px;border:4px solid #fff;margin:auto;-moz-border-radius: (TopLeft) (TopRight) (BottomRight) (BottomLeft); -webkit-border-radius: (TopLeft) (TopRight) (BottomRight) (BottomLeft); border-radius: (TopLeft) (TopRight) (BottomRight) (BottomLeft);'>

Slamat mencoba ;)

Read More... >>

Mempercantik/Memodifikasi Blockquote

J

ika Sobat pernah menjadi member sebuah forum, pasti sudah tidak asing lagi dengan istilah blockquote. Ketika Sobat meng-quote komentar dari member forum lainnya maka akan muncul tampilan komentar dalam sebuah kotak. Nah kotak inilah yang disebut blockquote. Fungsi blockquote adalah membuat tampilan yang berbeda dari sekitarnya. Selain untuk meng-quote atau mengutip komentar orang lain, blockquote biasanya juga digunakan untuk menampilkan testimonial, source code, dll. Bagi Sobat yang pernah membuat website reseller bisa menggunakan blockquote untuk menampilkan testimonial dari para pembeli produk Sobat. Cara membuat blockquote cukup mudah dengan menggunakan bahasa CSS. Berikut ini ada beberapa contoh tampilan blockquote beserta code CSSnya yang bisa Sobat pakai diblog atau website Sobat.

blockquote { font-family: Trebuchet MS; font-size: 13pt; background: transparent; padding: 10px ; color: #ff; margin: 5px; border: 3px solid #fff; border-radius: 20px; -moz-border-radius: 20px 0px 20px 0px;  -webkit-border-radius: 20px 0px 20px 0px; }

blockquote p:before { content: '\201C'; display: block; float:left; font-size: 70pt; height: 10px; line-height: 30px; margin:10px; color: #fff; font-family:Trebuchet MS; font-style: italic; }

blockquote p:after { content: '\201d'; display: block; float: right; font-size: 70pt; height: 10px; line-height: 50px; margin:10px; color: #fff; font-family:Trebuchet MS; font-style: italic; }

<div style=”border: 1px solid rgb(240, 240, 240); padding: 10px; background-color: rgb(192, 192, 192);Font:color:black;”>
TULISAN Sobat DISINI
</div>

<div style=”border: 2px dashed rgb(167, 204, 235); padding: 10px; background-color: #f4faff;Font:color:black”>
TULISAN Sobat DISINI
</div>

<div style=”border: 1px dashed #cc0000; padding: 10px; background-color: #ffffff;Font:color:black;”>
TULISAN Sobat DISINI
</div>

<div style=”border: 1px solid #CCCCCC; padding: 10px; background-color: #E6F4F9;”>
TULISAN Sobat DISINI
</div>

<div style=”border: 0px; padding: 10px; background-color: #ffff99;Font:color:black;”>
TULISAN Sobat DISINI
</div>

Ket :

• blockquote p:before { content: '\201C' berfungsi untuk menambahkan "Tanda Kutip" di awal Blockquote, sedangkan blockquote p:after { content: '\201d'; sebagai akhiran'a.

Sobat dapat merubah warna backgorund menjadi seperti yang Sobat inginkan.Apabila Sobat ingin memasukkan gambar Sobat Sendiri, Sobat hanya perlu merubah Code background menjadi
background: url(alamat Gambar Sobat);


Read More... >>

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaagggggggeedsqwe

aaaaaaaaaaaaaaaaaassssssssssssssssssqqqqqqqqqqqqqqqqqqqqrrrrrrrrrrrrrrrrrddddddddddddddddsssssssssssss
Read More... >>