Home  ›  Blogger  ›  Tutorial

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

7 Comments



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 . . .

7 Responses to "Cara Mudah Membuat Toggle Tabel Membuka dan Menutup di Blogger seperti WordPress"

  1. aldiNovember 12, 2020

    mantap bang

    ReplyDelete
  2. AdminNovember 18, 2020

    tapi saya taro di css nya templatenya jadi berubah yah... logonya jadi kejepit sama bagian menu, ada solusi gak bang???

    ReplyDelete
    Replies
    1. Wahyu DevelopmentNovember 18, 2020

      Solusinya buka file css diatas, kemudian buka file di github, copas code tersebut lalu ubah sesuai yg diinginkan

      Delete
  3. dadanis.meJuly 14, 2021

    waduuh ini mantap banget bangg
    sukses selalu bang

    ReplyDelete
    Replies
    1. Wahyu DevelopmentJuly 14, 2021

      Sama² bang, semoga yg mendoakan juga sukses ☺️

      Delete
  4. jackJuly 15, 2021

    Ini yang saya cari, sangat bermanfaat. Satu pertanyaan bang, gmn cara ubah css diatas di github, sy mau ubah warnanya

    ReplyDelete

√ 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

Subscribe to: Post Comments (Atom)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel