Sabtu, 11 Mei 2013

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 Blogspot


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

Plugin Spoiler Blogger Blogspot Rating: 4.5 Diposkan Oleh: Ana Sriwahyuni

11 komentar:

  1. Spolernya lain dari pada yang lain,saya suka lihat bentuk spoilernya Mbak.

    BalasHapus
  2. maap mbak, pertanyaan saya OOT dari topik postingan ini..

    Mbak, kalo cara membuat hide-show tab itu gmna ya?
    kayak tab blog mbak.. kalo di klik tab-nya langsung buka, yang lain nutup..

    Itu gmna ya? Mkasih jika udah jawab.. :)

    BalasHapus
    Balasan
    1. silahkan buka artikelnya di panduantemplateblog.blogspot.com/2013/05/membuat-slide-show-hide-tab-widget.html

      Hapus
    2. Wah, makasih banyak ya, mbak Ana.. :)

      Sukses selalu dengan blognya.. :)

      Hapus
  3. Mbak untuk panjang spoilernya sudah tersetting sendiri kan dengan tulisan yang hendak kita mau show dan hidden kan?

    BalasHapus
  4. mbak, saya mau nanya.. saya kan mau mengganti warna bagian dari plugin spoiler itu. lebih tepatnya warna dasar dari 'TULIS JUDUL ANDA DISINI'.. kira-kira daerah mana saja yang perlu saya ganti. dan contohnya.. saya ingin membuatnya berwarna hitam

    BalasHapus
  5. Spoilernya mantap ini yang saya cari makasih mbak.

    BalasHapus

Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
Terimakasih

Direktori

direktori weblogger
Direktori WeBlog Indonesia