Show Hide Content Dengan JavaScript

Baca Juga

Show Hide JavaScript

Bismillah... Pada kesempatan ini saya akan tulis tentang cara menyembunyikan dan menampilkan konten dengan menggunakan JavaScript atau istilah lainnya show hide conten. sobat mungkin pernah melihat dalam blog tetangga tentang konten yang disembunyikan dan ketika di klik akan muncul, jika sobat ingin mencoba dan menerapakannya ke dalam blog, sobat tinggal ikuti saja tutorial blog pada postingan ini.

• Untuk membuat show hide conten pertama sobat login ke blogger.
• Setelah masuk sobat masuk ke area Design/Rancangan Blog
• Langkah selanjutnya sobat masuk ke area Edit HTML
• Terus sobat cari kode </head> jika tidak ditemukan sobat centang Expand Widget
• Setelah itu sobat copi code di bawah dan letakan di atas tag </head>

<script language="javascript" type="text/javascript">
function showHide(shID) {
   if (document.getElementById(shID)) {
      if (document.getElementById(shID+'-tampil').style.display != 'none') {
         document.getElementById(shID+'-tampil').style.display = 'none';
         document.getElementById(shID).style.display = 'block';
      }
      else {
         document.getElementById(shID+'-tampil').style.display = 'inline';
         document.getElementById(shID).style.display = 'none';
      }
   }
}
</script>
<style type="text/css">
  .buttonshow {
    display: inline-block;
    zoom: 1;
    *display: inline;
    vertical-align: baseline;
    margin: 0 2px;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: 10px/100% Arial, Helvetica, sans-serif;
    padding: .2em 2em .5em;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    border-radius: .5em;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 1px 1px 4px #AAAAAA;
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.buttonshow:hover {
    text-decoration: none;
}
.buttonshow :active {
    position: relative;
    top: 1px;
}

.red {
color: #faddde;
border: solid 1px #980c10;
background: #d81b21;
background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317));
background: -moz-linear-gradient(top, #ed1c24, #aa1317);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
}
.red:hover {
background: #b61318;
background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115));
background: -moz-linear-gradient(top, #c9151b, #a11115);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115');
}
.red:active {
color: #de898c;
background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));
background: -moz-linear-gradient(top, #aa1317, #ed1c24);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');
}
</style>

• Terus save Template Sobat untuk memakai show hide dalam postingan sobat tinggal copykan script di bawah ini dalam postingan sobat

<a href="#" id="lutfie-tampil"  class="buttonshow  red" onclick="showHide('lutfie');return false;">Tampil</a></p>
<div id="lutfie" class="more" style="display:none">
<a href="#" id="lutfie-tampil" class="buttonshow  red" onclick="showHide('lutfie');return false;">Sembunyikan</a></br>
CONTEN YANG DI SHOW HIDE
</div>

Untuk contoh silahkan sobat lihat di blog ini , jangan lupa masukan konten sobat dalam tag div seperti script di atas, sobat tinggal ganti konten yang berwana merah dengan konten yang sobat miliki, untuk mengganti style  buttonnya silahkan sobat baca lagi disini (Style Design Button ), demikian tutorial cara membuat show hide di blogspot, semoga berhasil, Good Luck Happy Blogging