Pada tutorial kali ini kita akan membahas bagaimana cara menyembunyikan sebagian besar content yang termuat di dalam blog, jika pembaca ingin membaca artikel kita lebih lanjut dia bisa mengklick show content. Dalam menyembunyikan content ini kita hanya bermain pada CSS dan Javascript. Ini adalah teknik yang menurut saya wajib agan coba, karena untuk menampilkan content yang tersembunyi tidak memerlukan refresh atau navigasi ke halaman baru dan semua content agan masih dapat dilihat oleh bot mesin pencari.
Untuk struktur show/hide content sebagai berikut :
...content yang tidak disembunyikan... <a href="#" id="content-show" class="showLink" onclick="showHide('content');return false;">See more.</a> <div id="content" class="more"> ...content yang disembnyikan... <a href="#" id="content-hide" class="hideLink" onclick="showHide('content');return false;">Hide this content.</a> </div>
Ket : Warna hijau merupakan content yang tidak disembunyikan, dan warna merah adalah letak content yang akan kita sembunyikan.
Ada beberapa hal penting dalam struktur html tesebut yakni penggunaan tag ID dan Class pada struktur HTML tesebut. Agan dapat menggantinya dengan ID lain namun harus berakhiran -show maupun -hide sebagai contoh idkamu-show. Jika kamu menggantinya dengan id lain maka bagian showHide('content') juga harus diganti menyesuaikan dengan ID kamu tadi karena tag ID ini akan berpengaruh pada Javascript untuk menjalankan show/hide content. Kemudian tag class showLink dan hideLink bisa agan ganti juga. Tag class ini juga berpegaruh pada Javascript dan nantinya dia akan dipengaruhi oleh CSS yang diberikan.
Berikut code CSS yang saya maksudkan :
.more {
display: none;
border-top: 1px solid #666;
border-bottom: 1px solid #666; }
a.showLink, a.hideLink {
text-decoration: none;
color: #36f;
padding-left: 8px;
background: transparent url('down.gif') no-repeat left; }
a.hideLink {
background: transparent url('up.gif') no-repeat left; }
a.showLink:hover, a.hideLink:hover {
border-bottom: 1px dotted #36f; }
Nah agan dapat menambahkan CSS sesuai dengan keinginan agan, misal membuatnya seperti tombol download dan lain sebagainya.
Nah agar show/ hide content ini dapat berjalan agan perlu menambahkan script berikut :
<script language="javascript" type="text/javascript">
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID+'-show').style.display != 'none') {
document.getElementById(shID+'-show').style.display = 'none';
document.getElementById(shID).style.display = 'block';
}
else {
document.getElementById(shID+'-show').style.display = 'inline';
document.getElementById(shID).style.display = 'none';
}
}
}
</script>Kegunaan Show/hide content ini untuk menyembunyikan sebagian artikel karena terlalu panjang atau menyembunyikan tombol download. Sebenarnya content apapun bisa di sembunyikan menggunakan trik ini. Selamat mencoba ya gan :)