Membuat "Read More" versi 2

Rabu, 15 Juli 2009

Kita sudah membahas tentang bagaimana membuat "Read More" pada postingan sebelumnya. Tapi "Read More" pada postingan ini berbeda. Cukup dengan mengklik tulisan "Read More" posting yang disembunyikan langsung akan terlihat.
Caranya:

  1. Masuk ke account Blogger, pilih "Layout" dan "Edit HTML",
  2. Centang "Expand Widget Templates",
  3. Masukkan kode di bawah sebelum tag </head> dan setelah ]]></b:skin>
    <style>
    <b:if cond='data:blog.pageType == "item"'>
    span.fullpost{display:inline;}
    <b:else />
    span.fullpost{display:none;}
    </b:if>
    </style>

    <script type="text/javascript">
    function showHidePost(obj){
    var sib = obj;
    while(sib.previousSibling){
    sib = sib.previousSibling;
    if(sib.className != "fullpost"){continue;}
    sib.style.display = obj.showed ? "none" : "inline";
    obj.showed = !obj.showed;
    obj.innerHTML = obj.showed ?
    "[-] sembunyikan" : "[+] selengkapnya...";
    }
    }
    </script>
  4. Kemudian, untuk menambahkan tulisan "Read More" atau semacamnya, cari kode <data:post.body/>, dan tambahkan tepat di sampingnya:
    <b:if cond='data:blog.pageType != "item"'>
    <a href='javascript:void(0)'
    onclick='showHidePost(this)' >
    [+] selengkapnya...
    </a>
    </b:if>
  5. Sama seperti "Read More" versi pertama, masukkan tag <span class="fullpost"> Konten yang disembunyikan </span> pada postingan kamu. Contoh:
    Ini adalah konten yang ingin aku tampilkan di halaman utama. <span class="fullpost"> Sedangkan yang ini adalah konten yang ingin aku sembunyikan. </span>
    Dan hasilnya akan seperti ini:
    Ini adalah konten yang ingin aku tampilkan di halaman utama. [+] selengkapnya...
  6. Selamat mencoba!

Blog this!

Suka artikel dari blog ini? Silakan masukkan alamat email kamu untuk mendapatkan artikel terbaru dari Info Blog. Gratis!!
Atau baca Feed dari blog ini di sini.

Delivered by FeedBurner

13 komentar:

Frans mengatakan...

thx ya kak!!! udah sedikit bantu kasih tau tentang blog. jadi aku bisa sedikit mempercantik blog aku. kasih lebih banyak lagi buat blog dong! thx very much!


www.Sedot-Go.blogspot.com

Anne Freya mengatakan...

Setelah berkeliling dan mencoba tips read more di berbagai blog tutorial, akhirnya saya berhasil mengimplementasikan read more yang bisa "digulung" kembali berkat tips Copycat91 yang tepat sasaran dan tdk berbelit-belit.
Thanx ya Kak, akhirnya blog saya bisa jadi rapi dan pendek postingannya.

negeriads.com solusi berpromosi mengatakan...

makasih triknya

negeriads.com solusi berpromosi mengatakan...

terima kasih infonya teman

Forantum I Blogging is My Life I Tutorial Blog I Tips dan Trik Blog I SEO I Free Template mengatakan...

Sekarang blogspot sudah support readmore.

Rizal Tukuwain mengatakan...

i like it

skilef mengatakan...

hebat, bang!
ijin coba di blog sendiri ya...
:D

Blogku mengatakan...

readmore,, blom bisa jg, hik..hik,
kode yg terakhir malah menyatu di artikel, pusying-pusying..=((
semua kode udah beres tinggal kode yg terakhir ntu??
gimana lg ya??

Nurulate mengatakan...

kok saya gag bisa ya? tulisan "Read More"nya udah ada tapikok bagian yang mo disembunyiin alah muncul?? apanya yang salah ya??? mohon batuannya,,

rakka mengatakan...

mau tanya koq aku g bs yah...

AHMAD KURNIAWAN SIDDIK mengatakan...

mntap mksh tipsnya

Nikmaya John mengatakan...

keren sobat tipsnya

whiplash mengatakan...

Thanks a lot for this opportunity to know this information. I am happy to find worth reading article.

Poskan Komentar

Silakan berkomentar di bawah ini. You comment, I follow.
Tapi komentar yang bernada spam akan saya hapus. Terima kasih :D

Cheat di Blog

Rainbow Text

Buku Tamu versi 2


ShoutMix chat widget
Widget by Info Blog

Headline News

Buku Tamu


ShoutMix chat widget

Mau punya buku tamu seperti ini?
Klik di sini (Info Blog)

Tautan Link Otomatis

Gamba di Pojok