Cara buat show/hide link pada entri blog

Salam.

Pernah rasa macam nak sembunyikan sebahagian dari isi kandungan entri/post korang supaya entri nampak lebih kemas dan lebih pendek? Atau korang berniat nak jadikan entri lebih interaktif?

Semua tu korang boleh buat guna spoiler show/hide effect sebenarnya. Jadi, aku akan share pada entri kali ni cara nak buat spoiler show/hide effect ni. Spoiler ni boleh dibuat dalam bentuk button, link dan sebagainya.

Aku tak tahu la kalau dah ada blogger lain share tutorial ni dan korang rasa cliche dengan entri ni. Tapi, oleh kerana aku sendiri perlukan rujukan untuk benda ni pada masa akan datang, maka aku share la kat sini tutorial ni untuk aku dan siapa2 la yang berminat nak tahu.


Tujuan menyembunyikan sebahagian isi kandungan entri:

1. Supaya entri nampak lebih pendek
2. Beri pilihan kepada pembaca (yang nak baca sambungan sahaja akan klik)
3. Untuk menambahkan elemen suspense dalam entri
4. Supaya entri lebih interaktif
5. Mengurangkan kadar annoying pembaca kerana terpaksa membuka tab baru

Untuk tujuan no 1 dan no 2 aku ada uji pada entri yang sangat panjang INI
Unutk tujuan no 3 aku ada uji pada entri kontroversi INI
Untuk tujuan no 4 dan no 5 aku ada uji pada entri mesra pembaca INI


Ok... sekarang aku share macam mana cara nak buat spoiler show/hide effect ni pada entri blog.
Sorry. Gambar tak berapa clear. Nak lagi clear, kena klik pada gambar.


Spoiler show/hide effect dalam bentuk button

1) Mula2, create new post.

2) Untuk senang faham, aku akan gunakan contoh yang mudah. So, korang follow je la contoh aku ni dulu. Taip pada post baru tadi macam kat bawah ni:

"Show content: Klik link untuk baca lagi

Hide content: Amacam, Magic tak? Hahaha...."

Taip pada post baru tadi macam kat atas ni

3) Kemudian, klik pada 'HTML'. Nanti akan keluar macam kat bawah ni:

Tab 'HTML': Untuk tambah atau edit kod html

4) Untuk membuat spoiler yang membolehkan isi kandungan post/entri disembunyikan atau ditunjukkan(show/hide effect), korang perlu tambah kod macam kat bawah ni pada 'html' tersebut:

SHOW CONTENT
<div id="spoiler" style="display: none;">
HIDE CONTENT
</div>
<button onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}" title="Click to show/hide content" type="button">Show/hide</button>

Tambah yang ada tanda merah tu....

5) Gantikan pada 'HIDE CONTENT' isi kandungan yang korang ingin sembunyikan.

Replace kat bahagian 'HIDE CONTENT" tu...

6) Gantikan pula pada ' SHOW CONTENT' isi kandungan yang korang ingin perlihatkan.

Replace 'SHOW CONTENT' pulak...

7) Lepas dah gantikan 'SHOW CONTENT' dan 'HIDE CONTENT', nanti akan jadi macam ni:

'SHOW CONTENT' dan 'HIDE CONTENT' yang telah digantikan.

8) Dah settle, klik pada 'Compose'.

Klik 'Compose'

9) Lepas klik pada 'Compose', akan jadi macam ni:

Button dah ada. Isi kandungan yang disembunyikan pun dah tak nampak...

10) So, dah boleh la publish. Kejap je kan? hehe...

Klik pada ' Publish'

11) Lepas dah publish, buka entri tersebut dan korang akan nampak entri tu jadi macam ni:

Entri yang dah siap dengan button 'show/hide' yang berfungsi

12) Untuk pastikan apa yang korang buat ni jadi. Boleh la test klik pada button 'show/hide' tu...

Klik button 'Show/ hide'

13) Klik button 'show/hide' akan memaparkan isi kandungan entri yang disembunyikan pada awalnya.

Yeah...button berfungsi dengan baik...

14) Untuk menggantikan nama pada 'button' tersebut, edit pada entri tadi dan klik pada tab 'HTML'. Korang perlu edit sedikit pada kod tadi kat bahagian last sekali. Part yang aku gariskan warna merah tu, korang boleh gantikan dengan apa2 nama yang korang suka.

Ganti ayat 'Show/hide' dengan ayat kegemaran korang...

 15) Sebagai contoh, aku gantikan ayat pada button 'Show/hide' dengan ayat 'Klik sini'

Aku ganti dengan ayat 'Klik sini'

16) Klik pada tab 'Compose' dan korang akan lihat hasilnya seperti di bawah:

Ayat pada button dah berubah

17) So, korang boleh update entri tadi dan lihat hasilnya. Korang akan nampak entri tadi jadi macam kat bawah ni dengan button yang baru.

Button 'Show/hide' dah tukar jadi 'Klik sini'

18) Selesai. Sekarang korang dah tahu cara nak buat button 'show/hide' pada entri korang. Boleh la cuba2 buat kat entri korang tu kalau berminat..

Ok la...sekarang korang rasa menarik ke button tu? Tak berapa menarik bukan? So, macam mana nak bagi button tu lawa? Haaa.. entah la, aku rasa boleh, cuma aku belum nak study lagi benda tu. Tapi, aku share satu lagi style bagi spoiler 'show/hide' effect ni.

Kat bawah ni aku share pulak macam mana nak buat spoiler 'show/hide' effect menggunakan link pulak. Kalau tadi guna button, kali ni korang akan nampak link yang boleh diklik pulak pada entri. Cara ni kalau guna senang sikit nak 'style'kan link tu....


Spoiler 'show/hide' effect dalam bentuk link


1) Sama macam nak buat button 'show/hide' tadi. Tapi, ada beza sikit pada kod html. So, untuk buat dalam bentuk link, korang letakkan kod macam kat bawah ni:

SHOW CONTENT
<div id="dua" style="display: none;">
HIDE CONTENT
</div>
<span onclick="if(document.getElementById('dua') .style.display=='none') {document.getElementById('dua') .style.display=''}else{document.getElementById('dua') .style.display='none'}" style="color: #cc0000; cursor: pointer;" title="Click to show/hide content">Show/hide</span>

Masukkan kod yang aku tanda merah tu...

2) Sama macam buat show/hide button tadi. Untuk menyembunyikan isi kandungan, gantikan ayat 'HIDE CONTENT' dengan ayat yang korang ingin sembunyikan.

Replace 'HIDE CONTENT' dengan isi kandungan yang ingin disembunyikan...

3) Lebih kurang macam step 2. Gantikan ayat 'SHOW CONTENT' dengan isi kandungan entri yang korang ingin perlihatkan.

Replace 'SHOW CONTENT' dengan konten yg korang ingin perlihatkan

4) Kalau dah replace keduanya, nanti akan jadi macam kat bawah ni:

Settle replace 'SHOW CONTENT' dan 'HIDE CONTENT'

5)  Sekarang boleh klik pada tab 'Compose' dan nanti akan jadi macam ni:

Dah tak jadi button lagi, tapi jadi link...

6) Kemudian publish. Check entri yang baru publish tu dan korang akan lihat entri tadi jadi macam ni:

Settle buat link 'Show/hide' effect..

7) Dan korang boleh uji sama ada link tersebut berfungsi atau tidak. Kalau berfungsi, lepas klik akan jadi macam kat bawah ni:

Yeahhh...link 'Show/hide' berfungsi...

8) Nak ubah ayat link tersebut, macam biasa la. Ubah kat ayat yg aku garis merah kat bawah ni dengan ayat kegemaran korang:

Ubah ayat 'Show/hide' tu ikut suka korang nak letak apa...

9) Contohnya, ubah jadi ayat 'Klik sini' macam yang aku garis merah kat bawah ni:

Contoh: Ganti 'Show/hide' dengan 'Klik sini'

10) Kalau korang rasa nak ubah warna pada link tersebut, boleh ubah kat bahagian yang aku garis merah kat bawah ni:

style="color: #cc0000;

Ubah pada '#cc0000' tu dengan warna kegemaran korang. Kalau nak senang ubah la jadi 'blue' ke...'green' ke.. 'red' ke.... Tapi kalau nak lagi banyak warna, korang kena guna colour picker untuk guna kod warna.

ubah #cc0000 tu dengan warna yg korang suka..

11) Ok. settle buat link 'show/hide' effect ni.

Alright, sekarang satu lagi persoalan timbul iaitu, macam mana nak buat banyak2 link 'show/hide' effect ni pada entri yang sama?

So, untuk buat banyak link macam kat dalam entri yang aku buat ni, korang kena setkan id bagi setiap link. Kalau tak set id, korang buat banyak2 link pun cuma satu link je nanti yang berfungsi dengan baik.


 Cara 'set'kan ID bagi setiap link/button 'show/hide' effect


1) Guna contoh macam tadi cuma tambah sikit macam kat bawah ni:

Follow je macam dalam gambar ni..

2) Letakkan kod spoiler 'show/hide' tu dua kali macam kat bawah ni:

Tambah kod yang aku tandakan merah tu....Nampak tak? Dua kali aku tambah.

3) Macam biasa, gantikan 'SHOW CONTENT' dan 'HIDE CONTENT':

Replace 'SHOW CONTENT dan 'HIDE CONTENT'

4) Sama macam step 3, gantikan 'SHOW CONTENT' dan 'HIDE CONTENT' pada kod yang kedua jugak:

Sama jugak macam step 3 kat atas....

5) Dah siap replace semua, nanti akan jadi macam ni:

Settle replace pada kedua2 kod

6) So, untuk 'set'kan id bagi setiap link, korang kena 'set'kan id pada perkataan yang aku garis merah macam kat bawah ni:

Ada 4 tempat yang korang kena 'set'kan ID. Ingat, guna ayat yang sama. Macam kat atas ni, ID dia ialah 'spoiler'

7) Korang boleh je nak ganti ID 'spoiler' tu dengan ID yang baru seperti ID 'Pertama' macam kat bawah ni:

Aku ubah ID 'spoiler' jadi 'Pertama'. Dan untuk yang lagi satu link, aku setkan ID sebagai 'kedua'. 

**Pastikan keempat2 tempat digantikan dengan perkataan yang sama. Kalau huruf besar, pastikan yang lain2 pun huruf besar. 


8) Ok. Sekarang klik pada 'Compose' dan akan jadi macam ni:

Dah ada dua link...

9) Dah boleh publish dan buka entri tu. Entri tu akan jadi macam kat bawah ni:

Dah ada dua link yang akan menyembunyikan dan menunjukkan isi kandungan yg berlainan

10) Korang boleh cuba klik pada kedua2 link tersebut dan pastikan sama ada link tersebut berfungsi dengan baik atau tidak. Link yang berfungsi akan menghasilkan sesuatu yang macam kat bawah ni:

Kedua2 link menunjukkan kandungan yg berlainan setelah diklik.

Ok la...Cukup la tu.... Aku rasa macam dah panjang sangat pulak entri ni. Aku harap korang faham la apa yang aku kongsikan kat atas ni. Kalau rasa2 nak cuba buat kelainan pada entri tu, boleh la cuba konsep ni. Best wooo..hahaha... Sambil2 tu, boleh la belajar sikit2 pasal coding html jugak. Hehe...

Selamat mencuba guys!