Thursday 13 June 2013

Home » » Tutorial Blogger: Buat Spoiler Versi Blur

Tutorial Blogger: Buat Spoiler Versi Blur

Tutorial Blogger: Buat Spoiler Versi Blur | Kacang Antoo - Memiliki fungsi spoiler dalam sesebuah blog bagi Jack adalah sangat diperlukan terutama sekali jika anda yang inginkan sesuatu maklumat tersebut disembunyikan. Biarpun terdapat banyak tutorial spoiler di luar sana namun terdapat satu masalah yang Jack hadapi iaitu apabila Jack ingin meletakkan spoiler pada perkataan atau sebaris ayat dalam satu perenggan. Hasilnya kurang kemas. Bagi mengatasi masalah ini, Jack ingin berkongsi satu tutorial bagaimana anda boleh memiliki spoiler yang lebih kemas dan menarik.

Lihat contoh terlebih dahulu.

Spoiler

Teka-teki: Apa tiga jenis buah yang terselamat dalam kebakaran disebuah kedai? Jawapan: Buah keranji sebab dalam perahu, pisang emas sebab dibawa belayar dan buah cempedak sebab diluar pagar.(berdasarkan pantun melayu). Lawak bukan? Hell No!

Ok tak?

Berikut adalah langkah menggunakannya:
1) Pergi ke Dassboard >> Template >> Edit HTML
2) Copy kod di bawah dan Paste sebelum </head>

<script type='text/javascript' src='http://yourjavascript.com/3035116587/spoiler.js'/>
<script src='http://code.jquery.com/jquery-1.9.1.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(function() {
$('spoiler').spoilerAlert()
$('.spoiler').spoilerAlert({max: 20, partial: 6})
})
//]]>
</script>
Perhatian: sila check kod yang Jack highlight di atas hanya perlu ada satu sahaja (tanpa mengira version) dalam blog anda, jika sudah ada maka anda tidak perlukannya lagi.

Bagaimana untuk menampilkan spoiler? Gunakan sahaja kod dibawah
Untuk Gambar - class="spoiler";
Contoh:
<img alt="Spoiler" border="0" class="spoiler" src="http://4.bp.blogspot.com/-w2sZ84fQSsk/T8UnbcgPyII/AAAAAAAADEI/ghe6HePXBKc/spoiler6.jpg" title="Spoiler" />
Untuk Perkataan - <spoiler>text anda</spoiler>
Contoh:
<spoiler>Kacang Antoo</spoiler>
Selesai. Itu sahaja. Mudah bukan?

Kelemahan:
1) Tidak mesra dengan pautan/link
2) Bagi gambar anda perlu buang kod link bagi result seperti contoh di atas. Contoh:
<a href="http://3.bp.blogspot.com/-iFSnDh-ya60/UbdR9EWsQXI/AAAAAAAAACQ/rImJ7oRsgNc/s1600/Sejarah+Lengkap+Simbol+S+Pada+Superman.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Sejarah Lengkap Simbol S Pada Superman" border="0" src="http://3.bp.blogspot.com/-iFSnDh-ya60/UbdR9EWsQXI/AAAAAAAAACQ/rImJ7oRsgNc/s1600/Sejarah+Lengkap+Simbol+S+Pada+Superman.jpg" title="Sejarah Lengkap Simbol S Pada Superman" /></a>
Merah - perlu dibuang.

Seandainya kod link di atas tidak dibuang maka kemungkinan Lightbox (jika anda gunakannya) dan pautan link akan menganggu effek blur. Pendek kata - buang jer. He He He

Jika ada sebarang soalan sila gunakan ruangan komen di bawah. InsyaAllah Jack akan tolong selagi mampu. Jumpa lagi.

2 comments:

Catatan: (memasukan item pada ruang komen)
Untuk memasukkan video, gunakan tag <i rel="youtube">URL YOUTUBE ANDA...</i>
Untuk memasukkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA...</i>
Untuk memasukkan kod, gunakan tag <i rel="code">KODE ANDA...</i>
Untuk memasukkan kod panjang, gunakan tag <i rel="pre">KODE ANDA...</i>
Untuk memasukkan judul, gunakan tag <b rel="h3">JUDUL ANDA...</b>
Untuk memasukkan catatan, gunakan tag <b rel="quote">CATATAN ANDA...</b>
Untuk efek huruf tebal, gunakan tag <strong>TEKS ANDA...</strong>
Untuk efek huruf senget, gunakan tag <em>TEKS ANDA...</em>

P/S: Pautan/Link hidup akan dihapuskan secara automatik.

Penafian: Kami tidak akan bertanggungjawab di atas segala komen yang diberikan oleh pembaca blog ini. Harap Maklum.

Related Posts Plugin for WordPress, Blogger...
 
Our Network : Chiqaboo Network | Selebrita
Copyright © 2013. Kacang Antoo - All Rights Reserved
Ping: