Membuat Smooth Spoiler dengan Javascript & CSS

Tidak terasa beberapa hari lagi kita menjelang pergantian tahun. Di sela kegiatan mempersiapkan perayaan akhir tahun bersama keluarga, iseng-iseng mencoba membuat spoiler yang tidak sama seperti yang sudah pernah ada,—atau mungkin pernah ada?—. Sejujurnya saya bukanlah ahli dalam bidang bahasa javascript maupun CSS, jadi jika kebetulan ada ahli javascript & CSS yang kebetulan membaca posting ini, saya mohon koreksinya.

Mari menuju ke tutorial.

Cara membuat spoiler

Pada umumnya, spoiler akan terlihat seperti berikut ;

Spoiler dengan berisikan teks :

Apapun yang orang bilang, saya adalah spoiler yang sesungguhnya, bukan begitu sahabat?

Namun saya ingin membuat seperti ini :

Ini adalah tulisan isi dalam sebuah spoiler, dan berikut adalah gambar dalam sebuah spoiler,

Bagaimana? tertarik membuat spoiler versi the Art of SEO?

Cara membuat smooth spoiler

Silahkan anda buka menu template-edit HTML di blog anda, kemudian anda cari tag
</head>
Setelah anda temukan tag tersebut, salin kode berikut di atas markah tersebut.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){$("#flip").click(function(){$("#panel").slideToggle("slow");});});</script>

Selanjutnya anda paste kode berikut di atas tag ]]></b:skin>

/*theseoart smooth spoiler*/ #flip{ text-align:left; } #panel { padding:1px; text-align:left; background:#f5f5f5; border:0px;-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px; } #panel { padding:24px; display:none; } /*end the seoart smooth spoiler*/

Simpan template anda.

Memasang spoiler dalam posting

Untuk menampilkan spoiler tersebut di area posting, pada saat membuat artikel baru—dalam mode HTML—silahkan anda sertakan kode berikut ;

<div id="flip"><button>Klik me please..</button></div>
<div id="panel"> Tulisan ini dapat anda ganti dengan isi spoiler anda </div>

 Modifikasi Smooth Spoiler

Karena dibuat oleh bukan ahlinya, spoiler atau lebih tepatnya javascript show & hide tersebut pastinya masih menyimpan galat tidak bisa menampilkan 2 buah spoiler bersamaan kecuali anda sertakan style css unik baru di template atau area posting anda, tampilannya pun saya rasa masih harus dimodifikasi,dan anda lah ahlinya.

Jika anda termasuk orang yang menyenangi tantangan, sambil mengisi liburan tahun baru barangkali anda berminat untuk memodifikasi show & hide tersebut, silahkan cantumkan url posting ini sebagai sumber mentah scriptnya, kemudian beritahu saya melalui kotak komentar. Jika saya rasa spoiler yang telah anda modifikasi di posting cara membuat spoiler blog anda terlihat lebih menarik dan baik, maka posting ini akan saya update dengan menambahkan backlink url posting javascript show & hide versi anda.

Selamat berkreasi dan selamat tahun baru 2013.

Artikel Membuat Smooth Spoiler dengan Javascript & CSS ini 100% bukan hasil copy paste
Dibaca oleh12606 pembaca dari 12727 pengunjung.
Ditulis Oleh Unknown
Semua artikel terproteksi DMCA.
Hanya script dan kode tutorial yang boleh di copy paste, dengan menyertakan sumbernya.
Artikel The Art of SEO lainnya bisa anda temukan pada menu related post berikut ;