Membuat CSS3 Speech Bubble [Pure CSS3]

2 • menit membaca

Daftar Isi

Kali ini saya ingin mengajak anda membuat CSS3 Speech Bubble, bentuknya dapat anda lihat pada gambar diatas, atau untuk menikmati Demo langsungnya silahkan KLIK DISINI.

Lantas Bagaimana Cara Membuatnya? Silahkan Ikuti Tutorial Dibawah ini:

1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode seperti dibawah ini:

]]></b:skin>

5. Jika Sudah Ketemu, letakkan Kode CSS dibawah ini tepat diatas kode tersebut atau sebelum kode ]]></b:skin> tersebut:

.bubble {
width:400px;
color:#efefef;
}
.bubble .pointer {
height:15px;
background:#393939;
}
.bubble .pointer div {
height:100%;
background:#ffffff;
}
.bubble .pointer .one {
width:50%;
-moz-border-radius-bottomright: 15px;
-webkit-border-bottom-right-radius:15px;
float:left;
}
.bubble .pointer .two {
width:50%;
float:right;
-moz-border-radius-bottomleft: 15px;
-webkit-border-bottom-left-radius:15px;
}
.bubble .content {
padding:10px;
-moz-border-radius: 10px;
-webkit-border-radius:10px;
background:#393939;
text-align:center;
}

6. Beralihlah dan Cari kode <body>, dan letakkan HTML dibawah ini setelah Kode <body> tersebut atau tepat dibawahnya:

<div class="bubble">
<div class="pointer">
<div class="one"></div>
<div class="two"></div>
</div>
<div class="content">
<p>Thank You For Your Attention, Please Come Again, Later...</p>
</div>
</div>

7. Save Template anda, dan Lihat hasilnya...

Selamat mencoba...

2 komentar

Terbaru Terlama

Faril

29 Desember 2010 pukul 17.38 Hapus

beda antara kode CSS sama kode HTML itu apa ya??

oia,,knapa demo-nya nggak di halaman ini langsung aja??jadi nggak perlu repot meng-klik link lagi..

Balas

Blogger Serabutan

5 Maret 2011 pukul 20.33 Hapus

@ Faril : Klo CSS untuk desainnya Sob ... klo HTML itu lebih ke fungsinya jadi tanpa CSS pun sebenernya bisa, contoh kaya Menu Navigasi yg diatas.. klo tanpa CSS cuma akan jadi link tanpa ada background dan kotaknya, nha kotaknya itu muncul karena pake CSS yg si HTML nanti bisa manggil variabel yg kita taruh di CSS untuk munculin kotak atau atributnya hhe...

Klo untuk Demo aku menghindari Load yg berat makanya sengaja dipisah di Blog lain :D