Memasang Spoiler di Postingan Seperti Achnime

Memasang Spoiler di Postingan Seperti Achnime - Kali ini saya akan membagikan tutorial atau tips sederhana membuat spoiler post seperti achanime dipostingan blogger.

Tips kali ini mungkin bermanfaat buat kalian yang mempunyai blog dengan niche Lirik lagu atau yang berhubungan dengan musik, kegunaan spoiler post ini untuk membuat post lirik lebih nyaman dilihat jadi tanpa harus scroll kebawah karena banyaknya kalimat lirik tersebut. ok kita mulai saja tutorial kali ini.

Memasang Spoiler di Postingan Seperti Achnime

1. Silahkan buka Blogger > Tema > Edit HTML, kemudian simpan Javascript & file CSS berikut diatas </head>

<script src='https://cdn.staticaly.com/gh/Arleth98/Javascript/c5fb7f93/tab.js'/>
<script src='https://cdn.staticaly.com/gh/Arleth98/Javascript/c5fb7f93/transition.js'/>
<link type='text/css' rel='stylesheet' href='https://cdn.staticaly.com/gh/Arleth98/Css/1adcd20a/tab.css'/>



2. lalu simpan atau save tema
3. Jika sudah buatlah post menggunakan HTML berikut ini

<div class="xa-default" role="tabpanel" data-example-id="togglable-tabs">
  <ul id="myTab-1" class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active">
<a href="#xt-tab-1" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">Romaji</a></li>
    <li role="presentation" class=" ">
<a href="#xt-tab-2" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">Japanese</a></li>
    <li role="presentation" class=" ">
<a href="#xt-tab-3" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">English</a></li>
    <li role="presentation" class=" ">
<a href="#xt-tab-4" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">Indonesia</a></li>
  </ul>
  <div id="myTabContent-1" class="tab-content">
    <div role="tabpanel" class="tab-pane fade in active" id="xt-tab-1" aria-labelledby="home-tab">
      <p>Content</p>
    </div>
    <div role="tabpanel" class="tab-pane fade in" id="xt-tab-2" aria-labelledby="home-tab">
      <p>Content</p>
    </div>
    <div role="tabpanel" class="tab-pane fade in  " id="xt-tab-3" aria-labelledby="home-tab">
      <p>Content</p>
    </div>
    <div role="tabpanel" class="tab-pane fade in  " id="xt-tab-4" aria-labelledby="home-tab">
      <p>Content</p>
    </div>
  </div>
</div>



4. Ok selesai, kalian tinggal edit bagian yang sudah saya tandai.

Demo

Ok sekian tutorial Cara Membuat Spoiler di Post Seperti Achnime dan sampai jumpa ditutorial berikutnya.