Cara Menciptakan Spoiler Post Simple Diblogger

Pada postingan kali ini aku menciptakan 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 aku buat simple dan gampang digunakan, serta kalian juga sanggup menambah atau mengurangi jumlah isi konten tanpa harus pusing, Cara Membuat Spoiler Post Simple DiBlogger ini mungkin akan mempunyai kegunaan untuk kalian yang mempunyai blog dengan niche lirik lagu atau lainnya, fungsinya yang niscaya kalian sudah tau tanpa aku 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, kalau 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> lalu 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 memakai 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, kau tinggal edit bab yang sudah aku tandai.

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

Bagikan Artikel ini