Tutorial: Floating bubble speech (rectangle)

Assalamualaikum.

Tutorial ni telah di-request oleh someone but uhmmm I'm so sorry to the one yang request tutorial ni sebab something wrong berlaku dekat Tumblr. Entah kenapa mesej yang orang hantar tak di-notified. Tadi kebetulan terbuka bahagian Tumblr messages terkezut sebab mesej zaman bila tiba-tiba muncul T__T Sorry lambat...

Ok so mari mulakan.

CLICK HERE FOR LIVE PREVIEW

• Copy the codes below. Highlight text and tekan Ctrl + C serentak untuk copy.

.info{font-size: 12px; color: #000;}

• Untuk pengguna simple template (Template Designer), buka Edit HTML, tekan Ctrl + F serentak dan cari code ]]></b:skin>. Paste codes tadi di ATAS code ]]></b:skin> dan save.
• Untuk pengguna blogskin (Classic Template), buka Template, tekan Ctrl + F serentak dan cari code </style>. Paste codes tadi di ATAS code </style>
• Copy codes ni pulak.

<div style="position: fixed;
top: 145px;
left: 10px;
background-color: #fff;
width: 190px;
padding: 10px;
z-index: 1;
opacity:0.6;
    -webkit-transition: all 0.6s ease-out;
    -moz-transition: all 0.6s ease-out;
    transition: all 0.6s ease-out">
<div style="font-size:32px; position:absolute; top:-8px; color:#fff;">&#9650;</div>
<div class="info"><center>Type anything here.</center>
</div>
</div>

• Untuk pengguna simple template (Template Designer), pergi ke Layout>Add a gadjet>HTML/JavaScript. Paste codes tadi ke dalam bahagian Content. Tak perlu letak Title. Then, save.
• Untuk pengguna Blogskin (Classic Template), pergi ke Template. Tekan Ctrl + F serentak dan cari code </style>. Tampal codes tadi di BAWAH code </style>
• Tukarlah ayat tu dengan ayat sendiri. Position rectangle tu pun boleh adjust. Tukar je bahagian top: (nombor)px tu kepada nombor lain. Semakin besar nombor, semakin ke bawah rectangle tu. Nak kecikkan width pun boleh adjust.
• Preview dulu, then save bila dah puas hati.

DONE!!!