Baca Juga

Show Hide Content Dengan JavaScript
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  
Axact

Z-PLATE

Terima Kasih Telah Berkunjung dan Berkanan Membaca artikel dari Blog Kami, Silahkan Masukan Komentar Untuk menambah Motivasi Kami.

Post A Comment:

8 comments:

  1. wahhhh jadi bisa showhide object lainnya nih! btw ane udah ada postingan terbaru nih :) susah banget cari inspirasi :D haha

    BalasHapus
  2. Saya tertarik dengan tulisan anda mengenai pengembangan komputarisasi.Benar benar sangat bermamfaat dalam menambah wawasan kita menjadi mengetahui lebih jauh mengenai ilmu Teknologi.Saya juga mempunyai artikel yang sejenis mengenai komputarisasi yang bisa anda kunjungi di sini

    BalasHapus
  3. Terimasih Telah berkunjung ke Blog Z-PLATE.NET

    BalasHapus