Material Design Box Collapsible Show/Hide

Material Design Box Collapsible Show/Hide: dengan menambahkan tampilan Material Design Box Collapsible Show/Hide ini ke blog anda mungkin blog anda akan menjadi terlihat lebih prefesional, dengan tampilan yang begitu lembut bisa menawarkan kesan indah bagi mata pengunjung

Material Design Box Collapsible Show/Hide ini cocok untuk blog dengan nice download, dan juga tutorial alasannya kebanyakan artikel dengan nice download dan tutorial memakai link download, gambar, dan deskripsi yang tidak mengecewakan cukup banyak.

Material Design Box Collapsible Show/Hide

Nah untuk setting pemasangannya cukup gampang kok, silahkan anda praktekan tutorial berikut secara details pada blog anda.

➦Setting JavaScript&CSS Material Design Box Collapsible Show/Hide

1. Silahkan anda masuk ke Blogger>Theme>Edit Html>pada kotak html silahkan anda pasang isyarat JavaScript berikut ini sempurna di atas isyarat </body>, untuk mempercepat pencarian isyarat silahkan anda klik tombol

CTRL

pada keyboard leptop anda.

 <script type='text/javascript'> //<![CDATA[ $(document).on("click",'.collapsible .collapsible-header',function(){$(this).toggleClass('active').next().stop().slideToggle('1000');if($(this).closest('div').hasClass('accordion')){$(".collapsible-header.active").not($(this)).removeClass('active').next().stop().slideUp('1000')}}); //]]> </script>

2. Selanjutnya silahkan anda pasang isyarat CSS berikut sempurna di atas isyarat ]]</b:skin>atau kode</style>

.collapsible{margin:0.5rem 0 1rem 0}.collapsible.popout{border:none;box-shadow:none}.orange {background-color:#FF9800;}.btn {box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);display: inline-block;text-align: center;vertical-align: middle;padding: 0.5em 1.2em;color: #fff;border-radius: 2px;text-decoration: none;-webkit-transition:box-shadow 0.3s cubic-bezier(.25,.8,.25,1);-moz-transition: box-shadow 0.3s cubic-bezier(.25,.8,.25,1);-o-transition: box-shadow 0.3s cubic-bezier(.25,.8,.25,1);transition: box-shadow 0.3s cubic-bezier(.25,.8,.25,1);}.btn:hover {box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);text-decoration: none;}.btn:active {box-shadow: 0 0 transparent;text-decoration: none;}.collapsible.popout>div{border-radius:4px;box-shadow:0 2px 2px 0 rgba(0,0,0,.16),0 0 2px 0 rgba(0,0,0,.12)}.collapsible.popout>div:hover{will-change:margin,transform}.collapsible.popout>div.active{box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);margin:16px 0}.collapsible-header{border-top-left-radius:4px;border-top-right-radius:4px;display:block;cursor:pointer;height:3rem;line-height:3rem;padding:0 1.5rem;background-color:#018dfa;color:#FFF}@media screen and (max-width:1680px){.collapsible-header{padding-bottom:3px}}.collapsible-body{border-bottom-left-radius:4px;border-bottom-right-radius:4px;background-color:#424242;color:#fff;display:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0}.collapsible-body div{margin:0;padding:16px}

➦Setting Material Design Box Collapsible Show/Hide Di Dalam Post/Artikle

Lanjut ke cara pemasangnya di dalam postingan artikel anda sesuai dengan pola demo di bawah ini, untuk setiap demo isyarat HTMLnya berbeda-beda jadi silahkan anda pahami sendiri.

1. Material Design Box Collapsible Show/Hide Untuk Gambar
Untuk gambar silahkan anda pasang isyarat berikut sempurna di dalam postingan yang gres anda buat dengan modeHTML

<div class="collapsible popout" data-collapsible="accordion"> <div class=""> <div class="collapsible-header"> <i class="fa fa-file-image-o fa-lg" ></i> Screenshot</div> <div class="collapsible-body" style="display: none;"> <div> <img alt="dengan menambahkan tampilan Material Design Box Collapsible Show Material Design Box Collapsible Show/Hide" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_O_lExodjgznaB55z3fy9oygwCLO523lHf1t6-jkK8HQiSS0SOJKV6jRvdYmGwTrazz2h1a6nT-Ef9SCbl_A98ksUqZ9JCk10fngBPesxPfYLLCdMBySkgYsz4mdGKtLG8mmmQHlfnNA/s1600/Material+design.png" /></div> </div> </div> </div>

Demonya akan terlihat menyerupai ini kalau di preview

Screenshot

Silahkan anda ganti link gambar https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_O_lExodjgznaB55z3fy9oygwCLO523lHf1t6-jkK8HQiSS0SOJKV6jRvdYmGwTrazz2h1a6nT-Ef9SCbl_A98ksUqZ9JCk10fngBPesxPfYLLCdMBySkgYsz4mdGKtLG8mmmQHlfnNA/s1600/Material+design.png dengan gambar milik anda :D
Silahkan anda ganti nama misal untuk Screenshot ganti sesuai dengan nama/kata yang anda inginkan.

2. Material Design Box Collapsible Show/Hide Untuk Tombol Download
Nah untuk anda yang ingin memasang Material Design Box Collapsible Show/Hide dilengkapi dengan tombol download silahkan anda pasang isyarat berikut pada mode HTML postingan artikel yang anda buat.

~~Maaf Link Demo Rusak~~

http://www.iddzgn.com Silahkan anda ganti dengan link tujuan anda.
Jika anda kreative anda niscaya bisa mengubah tampilan Material Design Box Collapsible Show/Hide ini sesuai dengan harapan anda.

Anda bisa mencoba cara di atas untuk setting baik pemasangan CSS, HTML, JavaScript Material Design Box Collapsible Show/Hide ini, kalau anda tertarik. Mungkin sampe disini dulu untuk tutorial kali ini, supaya tutorial ini bisa bermanfaat bagi anda terimakasi.