Membuat Tulisan Tersembunyi 'Show Hidden'

Kadang pengunjung blog kita bosen dengan membaca artikel yang terlalu panjang pada blog kita. Pada tutorial kali ini, Kang Onk akan memberikan bagaimana mengelabuhi pembaca dengan memberikan show hidden pada artikel tulisan kita yang terlalu panjang.

Masih penasaran kayak apa bentuk dan rupanya, hahahha... mangnya seorang gadis yang harus dismbunyikan. Langsung pada inti topiknya. Silahkan anda klik tulisan +Buka/Tutup dibawah, pastinya akan terlihat seluruh arikel yang dituliskan.

Dibawah ini adalah tulisan dari salah satu artikel Kang Onk yang berjudul Membuat Slideshow Gambar V-3 pada Blog


+ Buka / Tutup

Pada tutorial ini tidak jauh beda dengan apa yang dijelaskan diatas hanya saja kode HTML yang digunakan sangatlah sederhana dan hasil yang diterapkan tidak kalah dengan Membuat Slideshow Gambar pada Blog dan Membuat Slideshow Gambar denga jQuery V-2

Kode sederhana ini (di mata Kang Onk... hehehe...) ditemukan pada saat membaca artikel Boban Karišik di Slideshow Jquery. Kode yang ia ciptakan pada kenyataannya masuk akal dan setelah tweaker sebagian dari CSS dan beberapa HTML yang disediakan oleh dia, saya bisa menciptakan sebuah versi yang kompatibel dari Slide Show untuk Blogger.

Langsung ke TKB ya? Langkahnya :

• Login Blogger;


• Pilih Rancangan;


• Klik tab Tambahkan Elemen;


• Pilih HTML/JavaScript;

Copy paste kode dibawah kedalam HTML tersebut;

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="http://kang-onk.googlecode.com/files/Slider-V.3.js></script> <script type="text/javascript"> $(document).ready(function() { $('#KOD-slider').s3Slider({ timeOut: 3000 }); }); </script> <style> #KOD-slider { width: 590px; height: 335px; position: relative; overflow: hidden; margin-left: 0; } #KOD-sliderContent { width: 590px; position: absolute; top: 0; margin-left: 0; } .KOD-sliderImage { float: left; position: relative; display: none; top: 0; border:1px solid #ddd; } .KOD-sliderImage span { position: absolute; font: 10px/15px sans-serif,Arial, Helvetica; padding: 10px 10px; background-color: #000; color: #fff; filter:'alpha(opacity=70)'; -moz-opacity: .5; -khtml-opacity: .5; opacity: .5; text-align:justify; } .KOD-sliderImage span a { text-decoration:underline; color:#FE6602; } .clear { clear: both; } .top { top: 0; left: 0; width: 570px !important; height: 70px; } .bottom { bottom: 0; left: 0; width: 570px !important; height:90px; } .left { left: 0; top: 0; width: 110px !important; height: 335px; } .right { right: 0; bottom: 0; width: 80px !important; height: 319px; } </style> <div id="KOD-slider"> <ul id="KOD-sliderContent"> <li class="KOD-sliderImage"> <img src="URL foto anda" /> <span class="right"><h3>Judul foto anda</h3>Keterangan foto anda disini</span> </li> <li class="KOD-sliderImage"> <img src="URL foto anda" /> <span class="left"><h3>Judul foto anda</h3>Keterangan foto anda disini</span> </li> <li class="KOD-sliderImage"> <img src="URL foto anda" /> <span class="top"><h3>Judul foto anda</h3>Keterangan foto anda disini</span> </li> <li class="KOD-sliderImage"> <img src="URL foto anda" /> <span class="bottom"><h3>Judul foto anda</h3>Keterangan foto anda disini</span> </li> <li class="KOD-sliderImage"> <img src="URL foto anda" /> <span class="bottom"><h3>Judul foto anda</h3>Keterangan foto anda disini</span> </li> <div class="clear KOD-sliderImage"></div> </ul> </div> <br/>

*Keterangan : Huruf yang bercetak tebal tersebut diatas ganti dengan keinginan anda. Simpan dan lihat hasilnya. Semoga berhasil dan jangan lupa komentarnya ya?

Jika anda tertarik untuk membuatnya silakan ikuti langkah Kang Onk dibawah.

• Masuk ke akun Blogger Anda;


• Pilih tombol Rancangan dan pilih Edit HTML;


• Cari kode </head>


• Jika ketemu copy paste kode berikut persis diatas </head>

<script type="text/javascript">
function showhide(toggle) {
//change target element mode
var elementmode = document.getElementById(toggle).style;
elementmode.display = (!elementmode.display) ? 'none' : '';
}
function openclose(toggle) {
showhide(toggle);
}
</script>

• Klik Simpan Template.

Langkah selanjutnya adalah : Masuk ke untuk menampilkan Show Hidden tulisan tersebut copy paste kode JavaScript berikut :

<center><a href="javascript:openclose('toggle');" style="background:#ccc; border: 1px solid #ccc; padding: 3px 7px 3px 7px; text-decoration: none;">+ Buka / Tutup</a></center>
<div id='toggle' style='display: none; padding: 5px;
background: #F4FDA6;'>
Tulisan Anda Disini
</div>

Hore.... udah selesai.
Jangan lupa komentarnya ya? Thanks alot