Cara Pasang 'Button'

Salam sejahtera kawan-kawan, entri saya kali ini pula adalah kesinambungan dari tutorial cara buat button menggunakan Illustrator. Atas permintaan Cik Nanajoe, Posh 76 dan Superman yang glamour tu, saya dengan rendah dirinya nak sharing is caring cara masukkan 'button' dalam blog. Kenapa saya berkata macam orang tak confident saja ni, Sebabnya saya bab-bab html ni memang tak seberapa, tapi saya suka explore. OK, here goes...



Pertama-tama sekali, untuk memasukkan 'button' anda haruslah membuat pemisah dalam entri anda iaitu anda masukkan kod begini pada Edit html posting anda, jika entri anda panjanglah kan, kalau entri anda tu pendek sekadar nak tulis "aku dah bosan, gaji tak masuk lagi" pastu habis ayat, janganlah letak 'button baca lagi' ni. Kalau entri tu panjang berjela barulah gunakan ia untuk meringankan kapasiti pembukaan blog anda.

<!-- more -->

Bahagian A- 1.1.Cara-cara membuat 'read more' pada posting anda (Old Editor)

1. Dah siap entri anda decide mana yang anda nak 'potong'. Macam saya , saya rasa nak buat sampai Mesin basuh rumah ku rosak.

2. Kemudian, anda click edit html, dan pastekan <!-- more --> pada ayat terakhir yang dipotong tersebut seperti di bawah.

1.2 Jika anda pening sangat tengok html codes tu, anda boleh gunakan (Updated Editor). Mula-mula click Setting dan click Basic

Kemudian pilih Updated Editor sepert ini, Lepas itu anda save.

Seterusnya, anda buka posting anda dan perhatikan terdapat icon baru pada tempat posting itu (seperti kertas dikoyakkan)

Anda hanya click di perenggan mana yang hendak dipotong, kemudian click icon kertas itu(seperti anak panah di atas). Siap dan Save.

Bahagian B-Cara-cara Memasukkan Button 'Read More' Idaman anda

1. Anda click Layout-Edit HTML- Click expand Widget.

2. Kemudian, anda click CTRL+F, cari perkataan #more (ini untuk memastikan anda sudah ada application ini atau belum), kemudian buang kod yang lama macam di bawah ini (jika ada), jika tak ada terus ke no.3

<b:if cond='data:post.hasJumpLink'>

<div class='jump-link'>

<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>

</div>

</b:if >

3.Ok, kemudian cari kod ini
<data:post.body/>

4. Ambil kod ini dan ditempelkan di bawahnya

<b:if cond='data:post.hasJumpLink'>

<div class='jump-link'>

<a expr:href='data:post.url + "#more"'><img border='0' src=' http://dc198.4shared.com/img/218794218/8e656eec/grey.png '/></a>

</div>

</b:if>

Yang tulisan warna hijau tu anda boleh tukar imej nya tu yang korang leh tukar-tukar mengikut citarasa masing-masing.

Kemudian Save, kalau tak confident, preview dulu ye..

Berikut ada beberapa button yang direka khas oleh farenova untuk kawan-kawan sekalian. Kalau nak ambil codenya tahu kan?, Ctrl + C ye dan copy url image button itu. Itu sahaja

http://dc198.4shared.com/img/218794216/69dd43eb/biru-lg.png






http://dc198.4shared.com/img/218794220/ab93b51d/blue.png






http://dc198.4shared.com/img/218794219/f9625e7a/empat-segi.png






http://dc198.4shared.com/img/218794218/8e656eec/grey.png






http://dc198.4shared.com/img/218794217/1eda737d/hijaun.png






http://dc198.4shared.com/img/218794215/f0d41251/merah-saga.png






http://dc198.4shared.com/img/218794214/87d322c7/PINKIE.png






http://dc198.4shared.com/img/218794212/6eb087f2/purple.png







http://dc207.4shared.com/img/218809027/385ffca9/button-klik-sini.png





http://dc182.4shared.com/img/224184044/5b36a5d6/baru.png






http://dc182.4shared.com/img/224615625/d64f7bd8/goldie.png





http://dc179.4shared.com/img/221313318/a2867785/hitam-2.png






http://dc205.4shared.com/img/224625801/ae2a8a99/biru-gela.png






http://dc196.4shared.com/img/221931397/8bb25891/farenova.png





http://dc179.4shared.com/img/221311360/4915a1fb/gold.png






http://dc205.4shared.com/img/224624450/15fcd04b/pinki3.png






http://dc202.4shared.com/img/221923573/81b82c8f/pinkie-3.png





http://dc179.4shared.com/img/221313690/624fb754/logo-biru.png

Ini saya buat sikit-sikit sahaja, lain kali saya tambah lagi dalam posting yang sama, jenguk-jenguklah ke sini..