Langkah Membuat Style Box Pada Blog

Ditulis oleh

Jika korang perasan, pada entri aku yang akhir-akhir ni mesti ade style box. Dan ada yang tanya plak tue, camne nak buat. So, selepas menangguhkannya akibat sambungan internet yang terlalu lambat, dan hari ini kembali pulih, so aku tulisla pasal style box ni. Ok la. Style box ni ada orang panggil ‘alert message’. Tak kisahla orang panggil apa, tapi ia berfungsi seolah-oleh korang mahu meng’highlight’kan sesetengah point pada entri korang. Tak paham lagi ape tue style box? Ntahla, aku pun tak tau nak terang apa. Korang boleh rujuk gambar kat bawah ni. Benda tula yang aku panggil Style Box.

Dah tau kan style box tue apa. So, sekarang aku nak tunjukkan cara bagaimana untuk korang pasang kat blog korang. So, bagi pengguna Blogger/Blogspot, sila scroll ke bawah.

a. WordPress

1. Bagi memudahkan korang, aku akan menggunakan plugin Note Button Shortcode. Muat-turun plugin tersebut dan aktifkannya.

Muat-turun Plugin

2. Terdapat 5 pilihan Style-Box.

  • info
  • download
  • note
  • alert
  • tick

3. Untuk mengaktifkannya, sila gunakan code seperti dibawah.

Korang boleh menukar ‘Note’ kepada style yang lain. Seperti info, download, alert, dan tick.

4. Korang juga boleh menukar style box ini kepada button. Dengan hanya menggunakan code dibawah.

Demo

5. Bagi button. Korang boleh menambah/mengubah fungsi button dengan memasukkan code dibawah.

  • size: small, large
  • style: info, alert, tick, download, note
  • color: custom color (e.g red or #000000)
  • border: border color (e.g. red or #000000)
  • text: black (for light color background on button)
  • class: custom class
  • link: button link (e.g http://example.com)

Kalau ko tak berkenan style nie, korang boleh try lagi satu plugin. Style Box

b. Blogger/Blogspot

Bagi pengguna Blogger, Ariey pernah menulis mengenainya. Tetapi, aku edit skit code bagi menyamakan dengan fungsi plugin diatas. Ia masih mengekalkan style yang sama iaitu :

  • info
  • download
  • note
  • alert
  • tick

1. Pastikan korang dah login akaun Blogger korang. Pastu gi ke Design Layout > Edit HTML

2. Kemudian, cari code </b:skin> dan masukkan code dibawah sebelum </b:skin> yang korang cari tadi.

[php].alert{ background:#ffd9c8 url(http://goo.gl/m5X6) center no-repeat; background-position: 15px 50%; /* x-pos y-pos */ text-align: left; padding:5px 20px 5px 75px font-size:11px; color:#000; }
.download{ background:#edfcd5 url(http://goo.gl/1cN2) center no-repeat; background-position: 15px 50%; /* x-pos y-pos */ text-align: left; padding:5px 20px 5px 75px; font-size:11px; color:#000; }
.tick{ background:#edfcd5 url(http://goo.gl/EaXS) center no-repeat; background-position: 15px 50%; /* x-pos y-pos */ text-align: left; padding:5px 20px 5px 75px; font-size:11px; color:#000; }
.info{ background:#eee url(http://goo.gl/cA1G) center no-repeat; background-position: 15px 50%; /* x-pos y-pos */ text-align: left; padding:5px 20px 5px 75px; font-size:11px; color:#000; }
.note{ background:#fef6d2 url(http://goo.gl/fTvG) center no-repeat; background-position: 15px 50%; /* x-pos y-pos */ text-align: left; padding:5px 20px 5px 75px; font-size:11px; color:#000; }[/php]

3. Sebaik sahaja korang masukkan code, save template korang.

4. Untuk mengaktifkannya, korang hanya perlu masukkan code dibawah dan sila pilih EDIT HTML semasa hendak membuatnya. Korang boleh tukar note

Korang boleh menukar ‘Note’ kepada style yang lain. Seperti info, download, alert, dan tick.

Harap maaf jika code tersebut korang terpaksa tulis sendirik, ini kerana them ini tidak membenarkan code tersebut ditulis begitu.

Komen

  • cun! tanpa lengah aku akan mencuba :)

    zaryl Oct 14, 2010 8:10 pm Reply
  • Pingback: myebuzz.net

  • Pingback: IMCurtain.com

  • aku dh pkai kt blog aku.. ari tu aku curi tengok skrip blog ko nmpk ko pkai bende ni.. hahaha :grin:

    Anarm Oct 14, 2010 8:18 pm Reply
  • wow menarik…nak try thanks ya

    afiq aiman Oct 14, 2010 8:59 pm Reply
  • smart la bro..baru ingat nak tanya hari tu.. hehe

    mrnamie Oct 14, 2010 9:02 pm Reply
  • Da lama nak tanya
    hehe
    TQ

    nizam6281 Oct 14, 2010 9:15 pm Reply
  • wow…lagi kemas..
    tq2..
    hah tema default wp tu boleh dak??

    syahrilhafiz Oct 14, 2010 9:21 pm Reply
    • kalau tak silap, benda alah nie compatible ngan semua theme..

      Mr Piratz Oct 14, 2010 9:27 pm Reply
      • :grin: :grin: :grin:
        ok2..thank2..
        smart gak aku tengok, macam quote gitu

        syahrilhafiz Oct 14, 2010 10:18 pm Reply
        • tuela.. sekarang aku tengah godek2 theme blog aku pasal quote.. tak smart.. hehe

          Mr Piratz Oct 14, 2010 10:20 pm Reply
          • haha…kang nanti cari tuk twenty ten sekali erk..
            quato ak tak smart gak..

            syahrilhafiz Oct 15, 2010 10:30 am
          • tengokla kalau rajin.. :P

            Mr Piratz Oct 15, 2010 5:35 pm
  • good.. aku selalu buat manual j :amazed: e kat css.. xtau lak ada plugin

    cyberfly Oct 14, 2010 9:46 pm Reply
    • memang ade yang manual.. karang jahanam plak theme dieorang kalau salah pasang.. :grin:

      Mr Piratz Oct 14, 2010 9:57 pm Reply
  • menarik nih bro… download 1st

    zik Oct 15, 2010 1:44 am Reply
  • ni lah yg aku cari bro. thanks

    Affan Oct 15, 2010 2:09 am Reply
  • fulamak.. best!! aku pun buat camni gak..

    ZoOL Oct 15, 2010 2:09 pm Reply
  • rajinnya… kalau aku dah malas dah hehe…

    Syafrizal Oct 15, 2010 8:39 pm Reply
  • Macam mana pulak nk buat bahagian show source tu bro? Yang kat blogspot punya tutorial

    Affan Oct 16, 2010 12:15 am Reply
    • owh… syntax highlighter tue ea.. nanti ea.. :love:

      Mr Piratz Oct 16, 2010 1:12 am Reply
  • wahhh
    sytlo habis ni,kena try la macam ni

    wazy Oct 16, 2010 12:34 pm Reply
  • thanx bro… style sangat.. komfem lepas post update nk gune box2 nie.. hahaaa

    Fareast Oct 16, 2010 4:16 pm Reply
  • tanak buat lagi tapi dah bookmark post ni…hehe

    MuJE Oct 16, 2010 5:37 pm Reply
  • nak tanya , plugin apa yg bro guna utk show code dalam post tue ??

    paan Oct 24, 2010 1:05 pm Reply
    • xperasan entri bro.. dah tau. thanks :)

      paan Oct 24, 2010 2:42 pm Reply
  • hoho…menarik…ini yg aku nak…hehe

    Mohd Isa Jan 8, 2011 2:04 pm Reply
  • nk tnye..klo untuk wordpress.com boleh ke gune?…

    yop Aug 9, 2011 1:04 am Reply
  • Aku dah install plugin tu, tapi failed. Huhu.
    Camne ni bro?

    Umar Faruq Apr 26, 2012 1:05 pm Reply
    • Failed? Camne leh jadi camtu ye..

      Mr Piratz Apr 28, 2012 11:01 am Reply

Leave a Comment

Your email address will not be published. Required fields are marked *