Cari Blog Ini
Mengenai Saya
My Best Friend
Arsip Blog
-
▼
2013
(179)
-
▼
Januari
(24)
- CARA MEMBUAT JUDUL BLOG BERJALAN
- Cara Membuat Komentar Slide Panel Dengan JQUERY
- CARA MODIFIKASI KOTAK KOMENTAR DENGAN BACKGROUND
- Cara Membuat Hujan Salju di Blog
- CARA EFEK ROLLER PADA TULISAN BLOG
- OTMENAMBAH EMOTICON PANDA PADA BLOGSPOT
- MEMPERCANTIK BLOG DENGAN ANIMASI FLASH
- Cara Mempercantik Blog dengan Memasang Jam juga ak...
- Cara Menambah Gadget Untuk Mempercantik Blog Anda
- cara promosi web lewat yahoo
- cara Memasang kamus dan translator pada blogger
- cara menampilkan sebagian postingan dengan “baca ...
- cara membuat share box di blog anda
- Cara memasang MP3 di Blog
- Cara membuat buku tamu di blogspot
- Cara membuat efek salju di blog
- Cara membuat efek daun berjatuhan pada blog
- Cara membuat banner blog
- cara membuat tulisan berjalan marque blogspot
- cara membuat header blog dengan gambar
- Tips mempercantik blog dengan membuat semut jalan ...
- cara mengganti tampilan kursor pada blog atau web
- Blogging For Business Owners
- The better plan For the Writing a blog Web Site is...
-
▼
Januari
(24)
Diberdayakan oleh Blogger.
Label
- BISNIS ONLINE (5)
- Blogging (134)
- hacking (16)
- tips blog (21)
11 Jan 2013
Bagaimana menampilkan sebagian postingan dengan “baca selengkapnya..” di blogspot
Bagaimana memotong postingan di blogspot dengan kata “baca selengkapnya..” atau “read more..” sehingga yang tampil di halaman depan hanya separuh postingan dan postingan lengkap akan muncul apabila link “baca selengkapnya..” atau “read more..” di klik.
Sebenarnya fasilitas ini nggak ada di blogger/blogspot, tapi kalo kamu pake wordpress fasilitas ini udah ada, cukup klik dimana kamu pengen memotong postingan, kemudian klik icon SPLIT POST USING READ MORE TAG.
Untuk pengguna blogspot, berikut ini langkah modifikasi yang bisa dilakukan. Trik ini menggunakan css untuk menyembunyikan sebagian post, sehingga hanya bagian yang diinginkan saja yang tampil di halaman depan.
Pertama buka template blogger kamu, kemudian tambahkan CSS berikut, CSS biasanya terletak di antara tag
<style>
dan </style>
<MainOrArchivePage>
span.selengkapnya {display:none;}
</MainOrArchivePage>
<ItemPage>
span.selengkapnya {display:inline;}
</ItemPage>
Dengan style ini, kita membuat sebuah class di css dengan nama “selengkapnya” dan hanya akan tampil ketika postingan berdiri sendiri (post page). Sebagian dari berita akan menggunakan class ini seperti yang akan saya jelaskan kemudian.
Langkah kedua adalah menambahkan kode untuk menampilkan link “baca selengkapnya…” tambahkan kode berikut setelah kode
<$BlogItemBody$>
pada template kamu:<mainorarchivepage><br />
<a href="<$BlogItemPermalinkURL$>">baca selengkapnya..</a>
</mainorarchivepage>
Kamu bisa mengganti tulisan “baca selengkapnya..” dengan kata lain yang kamu suka!
Setelah mengkopi kode-kode diatas kedalam template kamu, Save Template danRepublish.
Setelah mengkopi kode-kode diatas kedalam template kamu, Save Template danRepublish.
Langkah terakhir adalah melakukan modifikasi setiap kali kamu membuat postingan. Ketika membuat berita yang akan dipotong, selalu gunakan mode Edit Html bukan Composemode , dan tambahkan kode seperti contoh berikut ini:
Ini adalah awal postingan dan akan dipotong disini.
<span class="selengkapnya">
Ini adalah akhir postingan saya </span>
maka akan menghasilkan sebuah postingan seperti ini:
Ini adalah awal postingan dan akan dipotong disini baca selengkapnya..
ketika link di klik maka akan menampilkan postingan secara penuh seperti ini:
Ini adalah awal postingan dan akan dipotong disini. Ini adalah akhir postingan saya.
Selamat mencoba !
Langganan:
Posting Komentar
(Atom)
makasih gan keterangannya
BalasHapus