cara membuat speech bubble style

Cara membuat speech bubble style - cara membuat speech bubble style ini sangat mudah dan memiliki tampilan menarik, cara membuat speech bubble style berfungsi untuk menampilkan suatu text agar lebih berkesan elegan dengan sistem tampilan tooltip. Bila anda tertarik untuk memasang tampilan cara membuat speech bubble style ini di halaman blog anda silahkan simak tutorial dibawah jangan lupa lihat demonya untuk memastikan bahwa anda menyukainya...

Install Program CSS

1. Login ke dashboard anda
2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
3. Cari code ]]></b:skin> 
4. Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi atau bila template blog anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda.

.speech-bubble-style {
position:relative;
padding:15px;
margin:1em 0 3em;
color:#fff;
border-radius:10px;
background-color: #2F485B;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
.speech-bubble-style:before {
content:"";
display:block;
position:absolute;
bottom:-20px;
left:60px;
width:0;
height:0;
border:0;
border-right-width:30px;
border-bottom-width:20px;
border-style:solid;
border-color:transparent #2F485B;
}
.speech-bubble-style:after {
content:"";
display:block;
position:absolute;
bottom:-20px;
left:80px;
width:0;
height:0;
border-width:0;
border-right-width:10px;
border-bottom-width:20px;
border-style:solid;
border-color:transparent #fff;
}
/* speech bubble style code CSS */

Code HTML dibawah ini merupakan code format tag html cara membuat speech bubble style...

<p class="speech-bubble-style">contah tampilan " speech bubble style "</p>

Bagikan ke :

Facebook Google+ Twitter Digg Technorati Reddit