Cara Posting Show Hide di Blog

Cara Posting Show Hide di Blog, Untuk menghindari posting yang panjang yang memenuhi layar blog Anda, perlu membuat link show/hide. Saat kita klik judul maka teks asli akan muncul, dan bila diklik lagi maka akan disembunyikan kembali. Tapi trik ini saya tulis untuk pengguna template blogger klasik. Pengubahan terdiri dari tiga tahap, yaitu :

2. Tag CSS
Tambahkan dua tag di bawah dan letakkan di antara tag <style> dan </style> yaitu :
.posthidden {display:none}
.postshown {display:inline}

2. JavaScript
Tambahkan kode ini diantara tag <head> dan </head> yaitu;

<script type="text/JavaScript">
fungction expandcollapse (postid)
{whichpost=document.getElementById(postid);
if (whichpost.className="postshown") {whichpost.className="posthidden";}
else {whichpost.className="postshown";}}
</script>

3. Template Tag Blogger
Untuk menentukan posting mana yang akan menjadi sumber eksekusi fasilitas show/hide, masukkan kode berikut di antara tag <Blogger> </Blogger> Yaitu ;

<BlogItemTitle><$BlogItemTitle$>
</BlogItemTitle>
<span class="posthidden" id="<$BlogItemNumber<span class="posthidden" id="<$BlogItemNumber<span class="posthidden" id="<$BlogItemNumber<span class="posthidden" id="<$BlogItemNumber<span class="posthidden" id="<$BlogItemNumber<span class="posthidden" id="<$BlogItemNumber<span class="posthidden" id="<$BlogItemNumber<span class="posthidden" id="<$BlogItemNumber$>1">amp;gt;1">
amp;gt;1">
amp;gt;1">
<$BlogItemBody$><br />
</span>
<a href="javascript:expandcollapse('<$BlogItemNumber$>1')">
[+/-] show/hide this post</a>Anda dapat mengubah sendiri, terutama pada teks �[+/-] show/hide this post�

Catatan ; Kode yang sangat penting ialah <span> yang berada di sekeliling tag <$BlogItemBody$> Penyembunyian menggunakan <$BlogItemNumber$>1 sebagai ID yang unik (tambahan “1″ sebagai pembeda dari tag lainnya). JavaScript link menggunakan nomor ID yang sama untuk memastikan bahwa kita memperlihatkan dan menyembunyikan posting.

Untuk Templet Baru ;

Masuk ke Dashboard >> Layout >> Edit HTML. Copy Paste kode ini :

.commenthidden {display:none;}
.commentshown {display:inline;}

Letakkan kode diatas sebelum kode ]]></b:skin>

Langkah yang kedua adalah letakkan kode berikut tepat di Bawah kode ]]></b:skin>

<script type='text/Javascript'>
function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; }
} </script>

Lalu untuk membuat isi spoilernya, caranya adalah dengan memasukkan kode seperti berikut pada saat menuliskan postingan:

<a aiotitle="click to expand" href="javascript:togglecomments('Nama_Spoiler')"><img src="http://ciput.mardianto.googlepages.com/ok.JPG"/></a>
<div id="Nama_Spoiler">letakkan Teks dan gambar berada disini!</div>

Nama_Spoiler bisa diubah sesuka kita, apa bila lebih dari 1 spoiler, maka selalu gunakan nama yang berbeda sebagai identitas diri. Sedangkan Teks dan gambar berada disini! adalah isi spoiler, bisa anda ganti sesuai selera anda.
Labels: