Terkadang postingan blog
yang kita buat terlalu panjang untuk ditampilkan secara penuh dalam sebuah
halaman blog. Terutama apabila terdapat tambahan gambar-gambar, yang membuat
halaman blog menjadi sangat panjang. Halaman blog yang terlalu panjang ke bawah
membuat pengunjung harus melakukan blog roll mouse yang lama untuk membaca atau
melihat semua postingan kita pada halaman tersebut. Selain membuat tampilan
halaman menjadi tidak menarik, tampilan halaman yang terlalu panjang juga menjauhkan
pengunjung dari tampilan-tampilan iklan, related post, posting terbaru, label,
profil, dan lain-lain, yang kita pasang baik di bagian top header, atau yang
dipasang di widget sisi kiri atau kanan blog kita.
Ada beberapa cara untuk
memperpendek tampilan halaman ini, yaitu :
pertama, jika blog kita berisi
postingan tentang artikel, opini, ceritera, dan sebagainya, maka setiap judul
atau sub judul artikelnya dibuat halaman tersendiri, lalu dibuat sebuah halaman
utama postingan yang menampilkan semua judul atau sub judul artikel tersebut
dengan link ke masing-masing halamannya.
Kedua, jika ada banyak
gambar atau tulisan tambahan yang ingin ditampilkan dalam satu halaman saja,
maka cara ini bisa dilakukan, yaitu dengan memasang kode untuk menampilkan atau
menyembunyikan konten. Kode ini mirip dengan tombol spoiler yang ada di
forum-forum. Cara memasangnya sebagai berikut :
1. Masuk
ke dashbor blogger Anda, klik pada Template, Edit HTML, lalu Cari kode </head>. Cara mencarinya dengan menekan control F pada
tampilan HTML template. Lalu paste kan kode </head> pada bilah
pencarian yang tampil, lalu tekan Enter. Jika kodenya telah
ditemukan, lalu
copy dan paste kan kode javascript berikut ini di atas kode </head> yang ditemukan.
<script language='javascript'
type='text/javascript'>
function showHide() { var ele = document.getElementById("showHideDiv");
if(ele.style.display == "block") { ele.style.display = "none"; }
else { ele.style.display = "block"; } }
</script>
function showHide() { var ele = document.getElementById("showHideDiv");
if(ele.style.display == "block") { ele.style.display = "none"; }
else { ele.style.display = "block"; } }
</script>
2.
Setelah
itu, klik Save Template.
3.
Masuk
atau klik pada Post untuk mengedit postingan yang pernah dibuat, atau pada
Entri Baru untuk membuat postingan baru. Jika yang dibuat adalah postingan
baru, maka buatlah postingan sebagaimana biasanya.
4.
Jika
pada postingan ada bagian yang ingin di show-hide, maka tambahkan kode pada
konten yang ingin di isi tombol buka tutupnya (show-hide). Caranya dengan copy paste kode di bawah ini dan letakan
kontennya (atau bagian dari postingannya) di tempat yang telah dikasih tanda
(block biru) di bawah ini.
<form action=""
method="post">
<input onclick="return showHide();" type="button" value="Show-Hide" />
</form>
<div id="showHideDiv" style="display: none;">
---------> Kontennya Disini <---------
</div>
<input onclick="return showHide();" type="button" value="Show-Hide" />
</form>
<div id="showHideDiv" style="display: none;">
---------> Kontennya Disini <---------
</div>
5. Konten
yang di Show-Hide bisa apa saja,.. bisa gambar, teks atau apapun. Untuk mengedit/
mengganti tulisan di tombolnya sesuai selera Anda, ganti saja tulisan Show-Hide
(yang diblock merah) di atas sesuai keinginan Anda. Misalnya diganti dengan
Perlihatkan-Sembunyikan, atau Tampilkan-Sembunyikan, dan lain-lain sesuai
keinginan Anda.
6. Lalu,
klik Save (Simpan), atau Perbarui (jika mengedit).
7. Klik
pada Lihat Blog untuk melihat hasil pekerjaan Anda ini.
hasilnya akan terlihat seperti di bawah ini (diklik saja, ya..hehe) :
atau dapat pula dilihat pada judul
postingan berikut : Inilah Jejak Sejarah Bung Karno Selama Menjalani Masa Pengasingan di Ende
Demikian cara mudah memasang
tombol Show-Hide di blog. Semoga bermanfaat.
No comments:
Post a Comment