Membuat Spoiler efek Jquery

 

OK langsung aja gan,, ane bagi tutorial cara buatnya.. Pertama masuk dulu ke edit HTML di blog agan.. setelah itu tambahkan script berikut di atas kode </head>

<!-- spoiler script(alpinjanitra)-->
<script type=text/javascript>//<![CDATA[    $(function() {        $(blockquote.spoiler).hide(1000).before(<button class="sp-trigger">Lihat Konten</button>);        $(button.sp-trigger).toggle(function() {            $(this).addClass(sp-active).text(Tutup).next().slideDown(1000);        }, function() {            $(this).removeClass(sp-active).text(Lihat Konten).next().slideUp(1000);        });    });//]]></script>
<!-- end script --><!--JQuery [alpinjanitra]--><script src=http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js type=text/javascript></script><script src=http://reader-download.googlecode.com/files/jquery.easing.1.3.js type=text/javascript></script>
<!-- end JQuery [alpinjanitra] -->

Perhatian: Kode JQuery tersebut, jika sudah ada di blog agan.. tidak usah di tambahkan, untuk mencegah terjadinya penggandaan.. hehehe ntarrr template agan error lg.. ooo iyaa jgn lupa backup dulu templatenya yaa siapa tau terjadi error..

Selanjutnya Menambahkan CSS3-nya.. supaya lebihh kreen nihh hehehe...:) taruhh kode CSS berikut di atas kode ]]></b:skin> atau </style>:

/* Spoiler sederhana dengan JQuery (alpinjanitra)*/blockquote.spoiler {  font:normal 11px/16px Verdana,Arial,Sans-Serif;  color:#666;  border:2px dashed #cec2c2;  background-color:#eee2e2;  padding:18px 20px;  -webkit-box-shadow:inset 0px 0px 7px #222;  -moz-box-shadow:inset 0px 0px 7px #222;  box-shadow:inset 0px 0px 7px #222;  margin:0px 30px 15px;  /*  overflow:auto;  height:250px;  (opsional) */}
button.sp-trigger {  display:block;  outline:none;  cursor:pointer;  margin:20px 0px 10px 30px;  border:none;  background-color:green;  font:bold 11px Verdana,Arial,Sans-Serif;  color:white;  text-shadow:0px 1px 0px rgba(0,0,0,0.4);  padding:5px 10px;  -webkit-border-radius:15px;  -moz-border-radius:15px;  border-radius:15px;  -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);  -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);  box-shadow:0px 1px 2px rgba(0,0,0,0.4);}
button.sp-trigger.sp-active {background-color:#981515;}

Klik Simpan Template. Sekarang masuklah ke editor posting.
Untuk membuat spoiler, Anda cukup menambahkan elemen <blockquote> dengan atribut berupa class="spoiler" :

Contoh :

<blockquote class="spoiler">
     Konten/isi Spoiler agan dsini!!!
</blockquote>

Hasilnya bisa lihat disini
Atau bisa lihat disana

Sumbernya bisa liat disana ato disini .. hehehe