Plugin spoiler Blogger ini merupakan artikel yang sama yang telah saya bahas sebelumnya yaitu tentang Spoiler dan pada artikel ini saya menyebutnya dengan plugin spoiler Blogspot karena sangat berbeda dengan yang telah saya bahas sebelumnya, jika pada pembahasan sebelumnya untuk memasang spoiler kedalam artikel, harus memasang secara langsung kode spoiler tersebut kedalam artikel tapi pada artikel ini, cukup memasangkan kode elemen dari spoiler tersebut
Plugin ini memang tidak menggunakan php tapi menggunakan CSS, JavaScript, dan HTML sehingga dengan kombinasi dianatar ketiganya terbentuklah Plugin Spoiler Blogspot ini, untuk contohnya; silahkan sobat klik DEMO berikut ini
DEMO
TULIS JUDUL sobat DISINI
Artikel sobat tulis disini, jangan menulis ditempat yang lain
Bagaimana tertarik untuk memasang plugin spoiler Blogspot ini kedalam blog sobat? Berikut caranya;
Salin kode CSS Spoiler berikut ini sebelum ]]></b:skin> atau </style>
#spoiler {width:100%;float:center;text-align:left;word-wrap:break-word;overflow:hidden;margin:0px;padding:0;}
#spoiler h2 {cursor:pointer;background-color:#0D9EA1;text-transform: uppercase;font-weight: bold;background-image:-webkit-linear-gradient(top,#0D9EA1,#45EBEE); background-image:-moz-linear-gradient(top,#0D9EA1,#45EBEE);background-image:-ms-linear-gradient(top,#0D9EA1,#45EBEE);background-image:-o-linear-gradient(top,#0D9EA1,#45EBEE);background-image:linear-gradient(top,#0D9EA1,#45EBEE);border:none;border:1px solid #0D9EA1;text-transform: uppercase;font-weight: bold;font:15px arial,verdana,trebuchet ms;font-weight:bold;text-align:center;font-style:normal;line-height:1.3em;color:#f2f2f2;text-shadow:1px 1px 1px #222;margin:0;padding:5px;}
#spoiler .spoiler-content {margin:0;padding:5px;}
#spoiler ul {list-style-type:none;color:#ddd;margin:0;padding:0}
#spoiler ul li {margin:0px 0px 5px;padding:0 0 5px 15px}
#spoiler ul li a:hover {margin:0px 0px 5px;padding:0px}
.pluginspoiler a:link {color:#0D9EA1;text-decoration:none}
.pluginspoiler a:visited {color:#0D9EA1;text-decoration:none}
.pluginspoiler a:hover {color:#0D9EA1;text-decoration:underline}
.pluginspoiler section {margin:0;padding:0;}
Salin kode JavaScript berikut sebelum </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(function() {
$('#spoiler .spoiler-content').hide();
$('#spoiler h2').css('cursor', 'pointer').click(function() {
$('#spoiler h2').removeClass('active').next().slideUp('slow');
if ($(this).next().is(':hidden')) {
$(this).addClass('active').next().slideDown('slow');
} else {
$(this).removeClass('active').next().slideUp('slow');
}
});
});
//]]>
</script>
Catatan: Jika didalam template sobat sudah terdapat script jQuery maka sobat tidak perlu memasangkan lagi kodenya
Salin kode HTML atau contoh format penulisan spoiler berikut ini kedalam artikel blog
<div id="spoiler"> <div class="pluginspoiler section" id="pluginspoiler"> <h2>TULIS JUDUL sobat DISINI</h2> <div class="spoiler-content"> Artikel sobat tulis disini, jangan menulis ditempat yang lain</div> </div> </div>
Catatan: saat menyalin kode HTML diatas, pastikan modus penulisan menggunkan HTML bukan ComposeItulah plugin spoiler Blogger yang saya buat secara sederhana dengan menggunakan kode CSS, JavaScript dan HTML. Pada tampilan spoiler diatas, untuk warna silahkan sobat ganti sesuai dengan keinginan sobat. Selain itu, pada kode-kode yang saya buat diatas bisa sobat modifikasi untuk beberapa tampilan yang bisa digunakan diseluruh element blog sobat, salah satunya yang ada di sidebar blog ini
Okey, jika ada pertanyaan silahkan tinggalkan komentar sobat untuk artikel ini, Plugin Spoiler Blogger Blogspot
Klik untuk melihat kode: :) =( :s :D :-D ^:D ^o^ 7:( :Q :p T_T @@, :-a :W *fck* x@