1. Login ke Blogger
2. Klik Design/Rancangan-->>edit html
3. Centang Expand Widget Template
4. Cari kode]]></b:skin>
5. letakkan Kode CSS dibawah ini tepat diatas kode]]></b:skin>
.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. letakkan HTML dibawah ini setelah Kode <body>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;
}
<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>
<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. simpan templet dan lihta hasilnya
