Plugin Spoiler Blogger Blogspot

Plugin Spoiler Blogger Blogspot - Pernahkah anda memikirkan jika suatu hari nanti Blogger atau Blogspot akan memiliki plugin seperti WordPress? Meskipun itu bukanlah ssesuatu yang mustahil, namun hal itu akan terjadi! Bukankah Blogspot tidak support php? Jadi tidak mungkin Blogger akan support dengan plugin. Benar, meskipun Blogger tidak support dengan php tapi dengan adanya support terhadap javascript, plugin Blogspot akan segera hadir apalagi dengan banyaknya blogger-blogger yang memiliki keahlian khusus dalam javascript dan dari blogger inilah plugin untuk blogspot akan terbentuk, seperti plugin spoiler Blogspot yang sederhana berikut ini

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 anda klik DEMO berikut ini

DEMO

TULIS JUDUL ANDA DISINI

Artikel anda tulis disini, jangan menulis ditempat yang lain

Bagaimana tertarik untuk memasang plugin spoiler Blogspot ini kedalam blog anda? 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 anda sudah terdapat script jQuery maka anda tidak perlu memasangkan lagi kodenya
~~<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js' type='text/javascript'/>~~

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 ANDA DISINI</h2> <div class="spoiler-content"> Artikel anda tulis disini, jangan menulis ditempat yang lain</div> </div> </div>

Catatan: saat menyalin kode HTML diatas, pastikan modus penulisan menggunkan HTML bukan Compose

Itulah plugin spoiler Blogger yang saya buat secara sederhana dengan menggunakan kode CSS, JavaScript dan HTML. Pada tampilan spoiler diatas, untuk warna silahkan anda ganti sesuai dengan keinginan anda. Selain itu, pada kode-kode yang saya buat diatas bisa anda modifikasi untuk beberapa tampilan yang bisa digunakan diseluruh element blog anda, salah satunya yang ada di sidebar blog ini
Okey, jika ada pertanyaan silahkan tinggalkan komentar anda untuk artikel ini, Plugin Spoiler Blogger Blogspot