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
 
post signature

42 comments:

  1. Hooorrrayyy... terimakasih kang... waduh.. jadi gak enak ne... pake diantar sendiri langsung, masih anget lagi.. ck.ck.ck...

    Jadi pengin posting artikel tutorial ne... tapi apa ya..? Binggung.. soalnya saya sendiri masih butuh tutor dari para master blog kayak kang subagya gini..

    Sekali lagi terimakasih banyyak kang..

    ReplyDelete
  2. Kereeeeeeeeeenn..padahal semalam aku nanyain ini...tapi kamu gak mudeng ama pertanyaanku...
    akhirnya dikeluarin juga...

    Horayy...kamu memang hebat..Mantap...
    ALways Be The Best..!!

    ReplyDelete
  3. Good Posting fren, sangat berguna nih

    ReplyDelete
  4. wah.. ini dia yg slama ini Panda cari :)

    tenkyu berat broth :)

    ReplyDelete
  5. @ Riasmaja > ok, sama-sama, bukan master blog aduh kang rias cuman sekadar berbagi pengalaman
    @ Jovie > ooo ini yang di tanyain juga yah wakakkakaka sorry sis mungkin lagi error gw
    @ MR.koechel > praktekin dong bro
    @ Panda > di cari? mang ada yg buang pan wkwkwkwkw

    ReplyDelete
  6. aku bingung nih... templetku mumetinnn....:((

    ReplyDelete
  7. @ Lyla > simple ko mba hanya bermain di code css

    ReplyDelete
  8. @ Anang > yups, betul menarik sekali, di praktekin ga mas?

    ReplyDelete
  9. ini buat blogger doang ya bro?

    ReplyDelete
  10. wah hebat tambah keren neh info na.. dan met Kemerdekaa

    ReplyDelete
  11. @ Bayu > sayngnya iya bro :p
    @ blogspot > hanya mensadur dari aslinya kang :p
    @ Frendli > silahkan om

    ReplyDelete
  12. selalu ada yang baru di blog ini...jadi kecanduan mampir neh ...

    ReplyDelete
  13. @ gus > hehehehe makanya langganan blog saya kang :p

    ReplyDelete
  14. infonya oke nihh..
    tapi pasti aku nggak bisaaa...
    gaptek jayaaa...

    ReplyDelete
  15. Wah, kayaknya mantap nie.. tapi seperti mbak Tyas, saya pasti gak bisa, hahahaaa...

    mari mbak, sesama gaptek tukar senyum aja, heheee...

    ReplyDelete
  16. @ tyas > mbak harus bisa dong :p
    @ wendra > ikut-ikutan juga niih :p

    ReplyDelete
  17. wah bleh nich dicoba.. gw kopy ya, tenang gk sy publish ulang.. hehe

    thank clue nya broo..

    ReplyDelete
  18. @ Benny > silahkan kalau memang bermanfaat

    ReplyDelete
  19. mantap boss.... ijin sedot kapan2 bos di gubuk saya. thx

    ReplyDelete
  20. waw..baru tau nih..keren bro..
    uhhm..kalo bkin gambar tersembunyi gmn bro..jd yg muncul cuman kotak berisi link aj,kalo link di-klik baru muncul gambarnya...aq masi pnasaran ma yg itu..

    ReplyDelete
  21. @ dhuwuh > silakan kang , saya sudah mampir kok tadi :p
    @ mike > heheheheeh kemana aja mike :p sudah saya kasih linknya ke SB u bro , silahkan pilih

    ReplyDelete
  22. yupz..tengkyu bro..udah dicek jg tadi..sip deh!
    btw itu cm bs di widget aj ya?gmn kalo diaplikasikan di postingan gtu bro..

    ReplyDelete
  23. @ Mike > yups nanti saya usahakan posting mengenai hal tersebut :D

    ReplyDelete
  24. pengen ngikut ah..maksih bro..:D

    ReplyDelete
  25. @ Erwin > silahkan kang kalau memang informasi ini bermanfaat :D

    ReplyDelete
  26. Posting yang sangat bermanfaat ...
    Menambah khazanah perbendaharaan pengetahuan bagi para blogger khususnya blogspot ...

    Good Posting ...
    Betah berlama-lama disini....

    ReplyDelete
  27. @ abang > waduh bang jadi gak enak nih , hanya mensadur ilmu dari orang aja. berabgi ilmu kan dapat pahala bang

    ReplyDelete
  28. makin jago aj niyh temen sekamar cc.. hehhehe for blogger clasic gmn tuyh?? ikssss susah banged nyari tutornya

    ReplyDelete
  29. wah bisa diterapin nih di blog ak....

    ReplyDelete
  30. wah info bagus ini...thanks sdh sharing....:D

    ReplyDelete
  31. @ Unieq > masa sih baru tahu kamu nieq? hehehe untuk blogger classic bisa ko niq
    @ blog informasi > silahkan kang
    @ kang boim > yup memang nice post :p

    ReplyDelete
  32. lagi lagi pelajaran tentang perkodean,saya tak mengerti sama sekali.
    tp saya akan terus belajar,doakan ya.om.

    ReplyDelete
  33. Kang mau tanya nee...
    Kalo buat kolom di antara postingan dan kolom komentar yang di dalamnya ada label, judul posting ma social bookmarking gmana caranya?

    ReplyDelete
  34. @ d'mocca > hmm... insya allah kali yak saya posting :D

    ReplyDelete
  35. taaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaH anu ieu yeuh yg dakuh looking² teh kang Bos SUBAGYA...per...per...perakhir, huehueheugh (mo pertamax malu da paling bocot) *halah bocot pisan eta bahasana teh*

    ReplyDelete
  36. tambah lagi, ilmu Ku bertambah banyak lagi

    ReplyDelete
  37. contoh tampilannya sertain sekalian dong mas..
    maklum q masih pemula,
    hehehehe

    ReplyDelete
  38. Apa tidak merusak valid HTML dan CCS template blog kita nantinya ? dan adakah pengaruhnya untuk SEO

    ReplyDelete