Friday

Memasang Alert Message Box

Kali ini kita buat Alert Message pula. Caranya mudah saja dan amat sesuai digunakan untuk bubuh nota kaki, petua, pesanan, atau apa saja yang kamu mahu. Terpulang, lagipun Alert Message bukan saja nampak kemas tapi pelawat blog kamu pun boleh perasan apa yang kamu luahkan dengan lebih cepat.

Kalau tak silap ini rekues kepunyaan Sweet HoneY (#45), lagipun aku tak faham ayat dia. Kepada yang lain, aku minta tulis secara lengkap dan lebih profesional, aku pun tak adalah nak pening-pening kepala.

Tutorial ini diilhamkan oleh Bruce McKenzie, jika kamu nak tukar gambar alert itu kamu boleh upload sendiri di web Famfamfam.




Memasang Alert Message

01. Pilih Template > Edit Html (tick pada Expand Widget Template).

02. Cari kod ini :

]]></b:skin>

03. Tambahkan kod ini di atasnya** :

.alert-red {
background: #fff6bf url(http://tinyurl.com/aowr5a) center no-repeat;
background-position: 15px 50%; /* x-pos y-pos */
text-align: left;
padding: 5px 20px 5px 45px;
border-top: 2px solid #ffd324;
border-bottom: 2px solid #ffd324;
}

.alert-blue {
background: #f8fafc url(http://tinyurl.com/chq5lr) center no-repeat;
background-position: 15px 50%; /* x-pos y-pos */
text-align: left;
padding: 5px 20px 5px 45px;
border-top: 2px solid #b5d4fe;
border-bottom: 2px solid #b5d4fe;
}

04. Pilih Save.

05. Pilih Setting > Formatting > Post Template.

06. Tambahkan kod ini :

<p class="alert-red">Kata-kata yang ingin dimasukkan ke dalam Alert Message.</p>

<p class="alert-blue">Kata-kata yang ingin dimasukkan ke dalam Alert Message.</p>

Kod ini akan tertera setiap kali kamu membuka New Post.

07. Pilih Save.

30 comments:

  1. nape tak kua warna backgroud dia??

    ReplyDelete
  2. aku tak brape nak paham le caranya buat alert message.

    ReplyDelete
  3. ngahahaha
    kamu tak paham ke apa saya tulis?
    err.. foot note yang mcm kat blog BM dlu.. kan ade tulis yang lepas bace sila komen tu..
    err.. tu nama dia foot note kan?

    btw, time kaceh :D

    ReplyDelete
  4. harap komen kali ini adalah memenuhi piawai T_____T

    sorry memeningkan kepala anda sebelum ini.. (:

    ReplyDelete
  5. ciK aMoi, telah diperbetulkan. Terima kasih sebab mencuba.

    ilhamaya, apa yang tak faham. Cuba faham apa itu Css dan Html dulu oke.

    sweethOneY, nampaknya aku tersalah versi. Haha, nanti aku buat lain.

    ReplyDelete
  6. Salam, nak tanya, macamana nak tukar tulisan alert msg tu jadi warna hitam sbb yang saya punya jadi putih...harap sudi terangkan.

    ReplyDelete
  7. nko ni berat sebelah la...
    hahaha buat la tutorial utk wordpress plak.
    mentang mentang la aku dah pindah umah kan~

    *weh tadek entri hari kekasih poyo ker... miahaha~

    ReplyDelete
  8. Kumbe, tambah color: #000000; pada kod Css itu.

    Mr. Azman @ Kreuger, ianya boleh diaplikasikan dalam Wordpress. Kena faham konsep je.

    Atira., oke.

    ReplyDelete
  9. huh... tq
    simpan dalam koleksi jap.. :)

    ReplyDelete
  10. wahh...bertukar wajah lg blog bro marzuki ni yer..
    klo dgn wordpress cmner?? x nk ke bro kongsi bab2 nk cantikkan blog wordpress
    ---------------------------------------
    http://offto.net/azam2009/

    ReplyDelete
  11. Maaf Marzuki..err..code Css tu yang mana satu ye..yang dekat edit HTML tu ke ataupun yang dekat Template tu..?..sori banyak tanya plak..

    ReplyDelete
  12. Ir. hydir, haha.

    manismadu, sama je konsep dia. Wordpress kan ada tempat untuk css, tampal je.

    Kumbe, tampal color: #000000; kat bawah .alert-red {.

    ReplyDelete
  13. Anonymous14.2.09

    x paham la pe kegunaan sebenar bender ni??hmm..

    ReplyDelete
  14. Anonymous, buat dulu baru tahu.

    ReplyDelete
  15. hehe bgs gak idea awak

    ReplyDelete
  16. Thanks Marzuki...dah ok dah..:)

    ReplyDelete
  17. camner fungsi sebenar bender ni??
    dier leh tekan2 ke ape eh??
    hu3...dah try wat masih xpaham fungsi sebenar..=p

    ReplyDelete
  18. leh x en marzuki tunjukkan blog yg dah wat bender ni??baru paham..

    ReplyDelete
  19. PENTULIS15.2.09

    aku pkai p class tak jadi.. kene pkai div class baru jadi..

    ReplyDelete
  20. a s m, hehe.

    Kumbe, sama-sama.

    qiilans87, screenshotkan dah ada. Kalau nak tengok sila masuk web Bruce McKenzie.

    anarm, mungkin masalah lain yang menyebabkan masalah ini.

    ReplyDelete
  21. dh test dh,
    kena ubah sikit padding,
    warna background pun dh kua,
    thankx

    ReplyDelete
  22. yeah~ aku rs kali ni msg telah dpt disampaikan dgn jayanya :D

    akan ku tunggu next version ;)
    thanx ek

    btw, ni main blog http://sweethoney86.blogspot.com

    tQ ;)

    ReplyDelete
  23. xde pn tick pada Expand Widget Template time aku nk edit,,

    huhuuh..

    ReplyDelete
  24. thanks.. mende ni sy cari2... ehehehe

    ReplyDelete
  25. Terima kaseh la hencek Marzuki..
    benda ni leh aku gune bile aku nak gune..
    ;D

    ReplyDelete
  26. Salam En. Marzuki.
    Dah berjaya buat.
    Ske ngat..Thank you x50 juta :D

    ReplyDelete
  27. erk, nk tanya, dua-dua alert kena guna ker?sbb sye just ambil alert red

    ReplyDelete
  28. dah toraiii... taktau jadi ke idak... huhuhu...

    ReplyDelete