Cara Mudah Membuat Toggle Tabel Membuka dan Menutup di Blogger seperti WordPress



Wahyu Development - Bagaimana cara membuat Toggle Tabel dengan Collapse dan Accordion di Blogger menggunakan HTML?

Toggle Collapse dan Accordion adalah tampilan tabel yang dapat di klik membuka dan menutup, biasanya terdapat di Wordpress yang menggunakan plugin Elementor dan sejenisnya, akan tetapi untuk Blogger tidak dapat dipasang plugin. Blogger 100% menggunakan code HTML sendiri, sehingga jika anda ingin membuat Toggle Collapse dan Accordion anda harus menambahkan coding di template anda.

Disini saya akan membagikan code Toggle Collapse dan Accordion yang dapat anda lakukan dengan mudah.

Pertama silahkan anda buka dasbor Blogger anda, kemudian klik Theme --> lalu pilih Edit HTML. Dalam halaman HTML silahkan anda copy code dibawah ini dan letakan sesudah <head> atau sebelum </head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

Catatan : untuk code js diatas dapat anda pindahkan dibagian </body>

1. Collapse Standar

Silahkan copy dan paste code dibawah ini pada konten/artikel yang ingin anda buat menjadi Toggle buka tutup.

<p>
  <a data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary ml-5" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>



2. Collapse Multi Toogle

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#elemen1" role="button" aria-expanded="false" aria-controls="elemen1">Elemen 1</a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#elemen2" aria-expanded="false" aria-controls="elemen2">Elemen 2</button>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#elemen3" aria-expanded="false" aria-controls="elemen3">Elemen 3</button>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="elemen1 elemen2 elemen3">Semua</button>
</p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="elemen1">
      <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="elemen2">
      <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="elemen3">
      <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
</div>



3. Accordion Standar

<div class="accordion" id="accordionGroup">
  <div class="card">
  	<a class="card-link collapsed" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
	    <div class="card-header" id="headingOne">
	        Accordion Group 1
	    </div>
    </a>
 
    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionGroup">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
  	<a class="card-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
	    <div class="card-header" id="headingTwo">
	        Accordion Group 2
	    </div>
    </a>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionGroup">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
  	<a class="card-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
	    <div class="card-header" id="headingThree">
	        Accordion Group 3
	    </div>
    </a>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionGroup">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>



4. Accordion Plus / Minus

Untuk menerapkan Toggle ini silahkan copy terlebih dahulu code dibawah ini dan letakan sebelum code </head>

<style type="text/css">
	[aria-expanded="false"] > .expanded, [aria-expanded="true"] > .collapsed {
		display: none;
	}
</style>

Jika sudah silahkan anda copy code dibawah ini pada postingan artikel anda.

<div id="accordion">
	<div class="card">
		<div class="card-header">
			<a class="card-link" data-toggle="collapse" href="#menuone" aria-expanded="false" aria-controls="menuone">
				<span class="collapsed"><i class="fa fa-plus"></i></span> 
				<span class="expanded"><i class="fa fa-minus"></i></span> 
				Menu 1
			</a>
		</div>
		<div id="menuone" class="collapse">
		  <div class="card-body">
			Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
		  </div>
		</div>
	</div>
 
    <div class="card">
        <div class="card-header">
		  	<a class="card-link" data-toggle="collapse" href="#menutwo" aria-expanded="false" aria-controls="menutwo">
				<span class="collapsed"><i class="fa fa-plus"></i></span> 
				<span class="expanded"><i class="fa fa-minus"></i></span> 
				Menu 2
			</a>
        </div>
        <div id="menutwo" class="collapse">
          <div class="card-body">
			Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
          </div>
        </div>
    </div>
 
    <div class="card">
        <div class="card-header">
			<a class="card-link" data-toggle="collapse"  href="#menu3" aria-expanded="false" aria-controls="menu3">
				<span class="collapsed"><i class="fa fa-plus"></i></span> 
				<span class="expanded"><i class="fa fa-minus"></i></span> 
				Menu 1
			</a>
        </div>
        <div id="menu3" class="collapse">
          <div class="card-body">
			Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
          </div>
        </div>
    </div>
</div>



Itulahlah cara membuat Toggle tabel dengan sistem Collapse dan Accordion, berikan komentar anda dan semoga bermanfaat . . .

0 Response to "Cara Mudah Membuat Toggle Tabel Membuka dan Menutup di Blogger seperti WordPress"

Post a Comment

Komentar anda adalah motivasi kami!
Untuk menyisipkan code gunakan
<i rel="code">Tuliskan Code</i>
Untuk menyisipkan gambar gunakan
<i rel="image">URL Gambar</i>
Untuk menyisipkan catatan gunakan
<b rel="quote">Tuliskan Catatan Anda</b>
Centang Notify me untuk mendapatkan notifikasi balasan komentar melalui Email

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel