160 views 39 comments

Langkah Membuat Style Box Pada Blog

by on October 14, 2010
 

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.

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.

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.

Kongsikan Artikel Kami
comments
 
Leave a reply »

 

Leave a Response