Cara Membuat Spoiler Post Simple DiBlogger

Pada postingan kali ini saya membuat tutorial dengan fungsi yang sama dengan tutorial Cara Memasang Spoiler di Postingan Seperti Achnime namun berbeda style atau tampilannya saja.

Berbeda dengan post sebelumnya tutorial kali ini saya buat simple dan mudah digunakan, serta kalian juga dapat menambah atau mengurangi jumlah isi konten tanpa harus pusing, Cara Membuat Spoiler Post Simple DiBlogger ini mungkin akan berguna untuk kalian yang memiliki blog dengan niche lirik lagu atau lainnya, fungsinya yang pasti kalian sudah tau tanpa saya jelaskan lagi bukan?, ok kita mulai saja tutorial kali ini.

Cara Membuat Spoiler Post Simple DiBlogger

1. Buka Blogger > Tema > Edit HTML, pastikan diatas </head> sudah ada javascript dibawah ini, jika sudah ada abaikan.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js' type='text/javascript'/>



2. Kemudian cari </style>, simpanlah CSS berikut diatasnya

/* Spoiler post simple - Arlethdesign
   ======================================= */
#re-spoiler {clear:both;margin:10px auto}
#re-spoiler ul#tabs{margin:auto;list-style:none;padding:0;clear:both;}
#re-spoiler ul#tabs li{display:inline-block;background:#0084ef;}
#re-spoiler ul#tabs li a{padding:3px 7px;display:block;color:#FFF;border-radius:2px;}
#re-spoiler ul#tabs li a:hover{text-decoration:none;background:#222;}
#re-spoiler ul#tabs li#current{text-decoration:none;background:#181818;}
#re-spoiler #content{padding:5px;background:#eee;clear:both;}



3. Jika sudah carilah </head> kemudian simpan javascript berikut ini diatasnya

<b:if cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}'>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function(){$("#content").find("[id^='tab']").hide(),$("#tabs li:first").attr("id","current"),$("#content #tab1").fadeIn(),$("#tabs a").click(function(t){t.preventDefault(),"current"!=$(this).closest("li").attr("id")&&($("#content").find("[id^='tab']").hide(),$("#tabs li").attr("id",""),$(this).parent().attr("id","current"),$("#"+$(this).attr("name")).fadeIn())})});
//]]></script>
</b:if>



4. Kemudian Save Tema.
5. Langkah berikutnya buatlah postingan menggunakan HTML dibawah ini

<div id='re-spoiler'>
    <ul id="tabs">
        <li><a href="#" name="tab1">English</a></li>
        <li><a href="#" name="tab2">Indonesia</a></li>
    </ul>
    <div id="content">
        <div id="tab1">
            ISI KONTEN TAB 1
        </div>
        <div id="tab2">
            ISI KONTEN TAB 2
        </div>
    </div>
</div>



6. Jika ingin lebih dari 2 konten pakai HTML dibawah ini

<div id='re-spoiler'>
    <ul id="tabs">
        <li><a href="#" name="tab1">English</a></li>
        <li><a href="#" name="tab2">Indonesia</a></li>
        <li><a href="#" name="tab3">Romaji</a></li>
    </ul>
    <div id="content">
        <div id="tab1">
            ISI KONTEN TAB 1
        </div>
        <div id="tab2">
            ISI KONTEN TAB 2
        </div>
        <div id="tab3">
            ISI KONTEN TAB 3
        </div>
    </div>
</div>



7. Ok selesai, kamu tinggal edit bagian yang sudah saya tandai.

Sekian tutorial Cara Membuat Spoiler Post Simple DiBlogger semoga bermanfaat untuk kalian para blogger, sampai jumpa ditutorial berikutnya dan tetap pantau blog ini untuk artikel menarik lainnya, terima kasih.