Cara menampilkan atau menyembunyikan sebagian artikel dalam postingan blogger




Jika kebetulan anda memiliki postingan yang sangat panjang, dan ingin menyingkatnya menjadi sedikit artikel, tanpa harus menghapusnya. Cara berikut cukup baik untuk dicoba.
sebetulnya tehnisNya hampir mirip dengan penggunaan readmore, hanya saja pada readmore, artikel yang diringkas hanya tampil pada halaman home saja, sehingga pada saat link artikel yang dituju diklik, seluruh isi dari artikel tersebut akan tampil seluruhnya (bayangkan saja jika ternyata artikel anda panjang sekali).
Sedangkan dengan cara ini, artikel tetap dihiden(disembunyikan), dan akan tampil hanya jika diklik saja.

contoh :
sebetulnya tehnisNya hampir mirip dengan penggunaan readmore.
» tampilkan/sembunyikan

Untuk membuatnya ikuti cara berikut :
Masuk ke Blogger » Tata letak » Edit HTML
lalu ceklist Expand Template Widget dan jangan lupa, Download Template Lengkap untuk menghindari error.

Setelah itu cari kode CSS berikut : body {
setelah ketemu, copy kode berikut
.articlehidden {display:none}
.articleshown {display:inline}
lalu paste tepat diatasnya

Berikutnya cari kode berikut : </head>
dan letakan kode dibawah ini, tepat diatasnya
<script type="text/Javascript">
function expandcollapse (postid) {
whichpost = document.getElementById(postid);
if (whichpost.className=="articleshown") {
whichpost.className="articlehidden";
}
else {
whichpost.className="articleshown";
}
}
</script>


Setelah itu save terlebih dahulu,
lalu masuk ke Tab Edit Entri atau Entri Baru.
buat sebuah artikel, yang kemudian sisipkan sebuah kode seperti contoh berikut :
sebetulnya tehnisNya hampir mirip dengan penggunaan readmore.
<span class="articlehidden" id="1">, hanya saja pada readmore, artikel yang diringkas hanya tampil pada halaman home saja., sehingga pada saat link artikel yang dituju diklik, seluruh isi dari artikel tersebut akan tampil semua. Sedangkan dengan cara ini, artikel tetap dihiden, dan akan tampil hanya jika diklik saja.<br/></span>
<a href="javascript:expandcollapse('1')"> » tampilkan/sembunyikan</a>


save dan terbitkan artikel anda, dan cek hasilnya...
selamat mencoba......

Tambahan :
untuk memperjelas fungsi kode diatas, pada postingan yang akan di edit, pilih tab edit html (sebelah compose) masukan kode berikut :

<style type="text/css">
.articlehidden {display:none}
.articleshown {display:inline}
</style>

Pastikan kode tersebut berada di posisi paling atas postingan anda,

Tidak ada komentar:

Posting Komentar

-Music-

 

Welcome In Kode Blogger

Contoh Sliding Login Dengan JQuery

Disamping ini adalah contoh Sliding Login menggunakan JQuery. Login Form Disamping hanya Contoh dan tidak dapat digunakan layaknya Login Form FB, Karena Blog ini terbuka untuk umum tanpa perlu mendaftar menjadi Member

Tutorial Blog

Untuk membuatnya Silahkan : Klik Disini

Member Login

Lost your password?

Not a member yet? Sign Up!

http://www.blogger.com/img/blank.gif