Menampilkan text di dalam area yang unik di postingan

Bagaimana cara menampilkan text yang berada dalam area tersendiri yang berbeda dengan isi postingannya? Hal ini di tanyakan oleh sobat saya Riasmaja dan saya akan mempostingnya untuk blogger mania lainnya, prinsipnya hampir sama dengan postingan saya sebelumnya silakan baca disini atau ke yang punya code aslinya di Mohamed Rias.  Seperti contoh di bawah ini

Contoh (note) :

Test Menaruh Text di dalam area ini

Contoh (warning) :

Test Menaruh Text di dalam area ini

Contoh (info) :

Test Menaruh Text di dalam area ini

Contoh (alert) :

Test Menaruh Text di dalam area ini

Contoh (download):

Test Menaruh Text di dalam area ini

Mau tahu caranya?

1. Seperti biasa, login ke Blogspot , kalau sudah login masuk ke Tata Letak > Edit HTML

Perhatian! Jangan lupa untuk membackup template sobat, klik DownLoad Full Template!

2. Setelah itu masukkan kode di bawah ini di atas kode ]]</b:skin>

#rec { margin:20px;padding:20px;}
.hint {
border: 1px solid #4AB7FF;
font-size: 11px;
color: #191919;
background: #BFE5FF url(http://i280.photobucket.com/albums/kk162/mochal_nl_2008/info.gif) no-repeat 5px center;
font-family: Verdana, sans-serif, "Courier New";
line-height: 125%;
margin: 5px 0px 0px;
padding: 12px 12px 12px 40px;
display: block;
font-weight: 400;
width: 85%;
}
.warning {
border: 1px solid #FF8888;
font-size: 11px;
color: #191919;
font-family: Verdana, sans-serif, "Courier New";
line-height: 125%;
background: #FFBFBF url(http://i280.photobucket.com/albums/kk162/mochal_nl_2008/warning.gif) no-repeat 5px center;
display: block;
margin: 5px 0px 0px;
padding: 12px 12px 12px 40px;
font-weight: 400;
width: 85%;
}
.download {
border: 1px solid #C2E069;
font-size: 11px;
color: #191919;
font-family: Verdana, sans-serif, "Courier New";
line-height: 125%;
background: #E5F2BF url(http://i280.photobucket.com/albums/kk162/mochal_nl_2008/download.gif) no-repeat 5px center;
display: block;
margin: 5px 0px 0px;
padding: 12px 12px 12px 40px;
font-weight: 400;
width: 85%;
}
.alert {
border: 1px solid #FFC875;
font-size: 11px;
color: #191919;
line-height: 125%;
background: #FFE5BF url(http://i280.photobucket.com/albums/kk162/mochal_nl_2008/alert.gif) no-repeat 5px 5px;
font-family: Verdana, sans-serif, "Courier New";
display: block;
margin: 5px 0px 0px;
padding: 12px 12px 12px 40px;
font-weight: 400;
width: 85%;
}
.note {
border: 1px solid #FFE375;
font-size: 11px;
color: #191919;
font-family: Verdana, "Times New Roman", Times, Georgia, serif;
line-height: 125%;
background: #FFF2BF url(http://i280.photobucket.com/albums/kk162/mochal_nl_2008/note.gif) no-repeat 5px center;
display: block;
margin: 5px 0px 0px;
padding: 12px 12px 12px 40px;
font-weight: 400;
width: 85%;
}

Jangan lupa simpan hasil pekerjaan sobat!

3. Untuk menampilkan text di dalam area berbeda di postingan sobat harus memakai code tag

di bawah ini :

<div class="note">

Text

</div>



<div class="alert">

            Text

</div>



<div class="hint">

Text

</div>



<div class="download">

Text

</div>



<div class="warning">

Text

</div>

Masukkan text di antara tag

<div>tersebut, sesuaikan dengan kebutuhan blooger mania, bisa di pakai dalam Edit HTML ataupun  Compose Mode. Ok sobat Happy Blogging yaks