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 mampu memberikan kesan indah bagi mata pengunjung
Material Design Box Collapsible Show/Hide ini cocok untuk blog dengan nice download, dan juga tutorial karena kebanyakan artikel dengan nice download dan tutorial menggunakan link download, gambar, dan deskripsi yang lumayan cukup banyak.
Material Design Box Collapsible Show/Hide
Nah untuk setting pemasangannya cukup mudah 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 kode JavaScript berikut ini tepat di atas kode </body>, untuk mempercepat pencarian kode silahkan anda klik tombolCTRL
+F
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>
.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 contoh demo di bawah ini, untuk setiap demo kode HTMLnya berbeda-beda jadi silahkan anda pahami sendiri.
1. Material Design Box Collapsible Show/Hide Untuk Gambar
Untuk gambar silahkan anda pasang kode berikut tepat di dalam postingan yang baru 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="Material Design" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeN55x3koFnDyQ14NhSncMZO4ieJFaYxbB5ibq4yx15Gf2CSM939xiq5UNLL0xFICJefQIE60JOFO2lZFEOUX6azRY7Tff1EclZ6iNdRg8VUoJ3d08vEB_MDU6SCw0UCR0KwNST4rflaY/s1600/Material+design.png" /></div>
</div>
</div>
</div> Screenshot
Silahkan anda ganti link gambar https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeN55x3koFnDyQ14NhSncMZO4ieJFaYxbB5ibq4yx15Gf2CSM939xiq5UNLL0xFICJefQIE60JOFO2lZFEOUX6azRY7Tff1EclZ6iNdRg8VUoJ3d08vEB_MDU6SCw0UCR0KwNST4rflaY/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 kode berikut pada mode HTML postingan artikel yang anda buat.
Maaf Link Demo Rusak
http://www.iddzgn.com Silahkan anda ganti dengan link tujuan anda.Anda bisa mencoba cara di atas untuk setting baik pemasangan CSS, HTML, JavaScript Material Design Box Collapsible Show/Hide ini, jika anda tertarik. Mungkin sampe disini dulu untuk tutorial kali ini, semoga tutorial ini bisa bermanfaat bagi anda terimakasi.
Jika anda kreative anda pasti bisa mengubah tampilan Material Design Box Collapsible Show/Hide ini sesuai dengan keinginan anda.