Cara Mudah Membuat Efek Bubbler

Lama aku mencari tahu tentang membuat tampilan seperti ini , menurutku sih dengan memberikan efect bubble di blog rasanya semakin tampak hidup , tapi karena kurangnya perbendaharaan istilah dunia blogging dan desain , makanya cuma mutar muter saja , sampai akhirnya aku menemukan , ternyata bentuk gambar seperti itu di namakan Bubble . Tanpa banyak cingsong langsung saja praktekan .

Bagaimana cara membuat efek Bubble dengan css, ikuti saja caranya di bawah ini .

Al-hasil saya bisa membuat tulisan yang bisa di bungkus dengan bubble tadi . Contoh saja :

Hore sekarang aku bisa buat

Ini contoh lagi ah... Biar tambah mantab

Wew... pake bubble rek .

Nah gimana , terbukti bukan . Percaya ga kalau itu hasil kode css , bukan gambar loh , kalau gambar mah pake potoshop saja bisa . Oke sekarang aku akan kasih tahu bagaimana cara membuatny .
1. Masuk ke blogger kamu.
2. Buat postingan baru .
3. Copy Kode di bawah ini : Tekan Ctrk+A

.bubble:after {
    content: "";
    position: absolute;
    bottom: -15px;
    left: 83px;
    border-style: solid;
    border-width: 15px 15px 0;
    border-color: #ADB400 transparent;
    display: block;
    width: 0;
    z-index: 1;
}

.bubble:before {
    content: "";
    position: absolute;
    top: 118px;
    left: 80px;
    border-style: solid;
    border-width: 18px 18px 0;
    border-color: #000000 transparent;
    display: block;
    width: 0;
    z-index: 0;
}

</style>

4. Jangan lupa seting post HTML ya ? 5. Setelah itu Buat code ini : Tekan Ctrl+A
6. Publikasikan 7. Selesai. Bagimana ternyata mudah to bos . haloooo