16 September 2009

MEMBUAT READ MORE PADA POSTINGAN

Teknik yang satu ini mungkin sudah basi,tetapi takkan pernah basi untuk blogger yang belum pernah/berhasil,jadi saya tetap tulis teknik ini yang saya dapat dari blogger senior(terima kasih buat Pak Hardhono dan Rudycs).Membuat “read more” atau “baca selengkapnya” atau istilahnya “menyingkat postingan” akan berguna bagi blogger yang pada blog-nya telah memiliki postingan/artikel yang panjang dan lebih dari 10 artikel misalnya.Dengan penambahan “read more” tersebut,kita bisa menampilkan 5 sampai 10 artikel tanpa membuat pembaca blog kita jadi “bete” atau “scrolling” untuk mendapatkan artikel yang diinginkan.Dengan sekali klik pada “read more”,maka pembaca akan disuguhkan artikel komplit yang dimaksud.Sebelum menambah “read more” tersebut,ada baiknya anda sudah mengenali jenis template yang anda gunakan.Di blogspot,ada 2 macam template yang digunakan,yaitu :
Template klasik dan Template kustom.Bagaimana membedakan jenis template tersebut?(lihat artikel “tutorial mengganti template 1”)
Sebenarnya pada awal pembuatan blog,pihak Blogger sudah pasti mengarahkan pengguna kepada template kustom (jenis “wml”),karena template kustom lebih mudah cara edit-nya dan memang cocok untuk pemula,misal menambahkan widget dan meletakkan widget tersebut pada posisi yang diinginkan dengan cara “drag n drop”.Lain halnya dengan template klasik (jenis html),template yang satu ini se-akan² ditujukan pada blogger yang sudah professional,karena peng-edit-an template langsung dihadapkan pada tampilan “script html dan CSS” dimana untuk meng-edit tempate tersebut harus benar² tahu setiap kode script html,misal menambah “script iklan”,”counter blog” dll.Ma`af jika uraian saya terlalu panjang,baiklah mari kita bahas satu persatu.

READ MORE UNTUK TEMPLATE KUSTOM.
Jika anda hendak menerapkan teknik ini,saya anjurkan anda “login” atau buka halaman “dashboard” pada tab baru pada browser anda. Setelah terbuka,klik pada “Tata Letak” pada blog yang anda pilih (maksudnya : mungkin anda memiliki blog lebih dari satu).Anda akan melihat tampilan “Elemen halaman”,disini tempat untuk meng-edit letak widget,edit Navbar dll.Nah,klik pada tulisan “Edit HTML”.Setelah terbuka,anda akan melihat “script template” blog anda pada kolom khusus.Untuk menghindari kegagalan,klik pada kalimat “Download template lengkap” dan simpan hasil download tadi pada folder di komputer anda yang mudah ditemukan (mungkin anda perlu buat folder baru dengan nama “template blog saya” di partisi D: misalnya) sehingga ketika anda gagal,anda tinggal “upload” template yang anda download tadi.Jangan lupa beri "centang" pada kolom bertuliskan "Expand Template Widget" dan selanjutnya,cari kode ini :

<data:post.body/>

Cara mencarinya,copy tulisan tersebut,lalu letakkan kursor pada kolom template anda,lalu pencet pada keyboard anda “Ctrl+F”,nanti muncul kolom isian entah letaknya diatas atau dibawah tergantung browser yang anda gunakan.Paste/tempel pada kolom tersebut,jika ketemu “kode” tersebut biasanya di-blok dengan warna hijau atau mungkin warna lain.Hasil pencarian tidak akan ketemu bila anda tidak memberi centang pada tulisan "Expand Template Widget".Pada hasil pencarian pertama,tambahkan script ini diatasnya/sebelumnya :

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>

Lalu tambahkan script ini dibawahnya/sesudahnya :

<b:if cond='data:blog.pageType != "item"'><br />
<a expr:href='data:post.url'>Read more...</a>
</b:if>
</b:if>

Tulisan “Read more” yang berwarna merah bisa anda ganti sesuai selera anda,misal : Baca selengkapnya! atau Lanjutkan! (weleh! Jadi ingat iklan partai :p)
Jika sudah,klik simpan template.Jika tidak muncul pesan error,berarti anda telah berhasil.Akan tetapi,ingat dan perhatikan baik²!.Pada postingan yang sudah anda buat sebelumnya atau yang sudah dipublikasikan,anda harus meng-edit satu persatu tiap postingan anda dengan menambahkan kode <span class="fullpost"> .Letakkan kode tersebut setelah satu paragraf/2 paragraf tergantung selera dan di akhir postingan,tambahkan kode </span> sebagai penutup.Sebagai contoh,lihat berikut ini :

Hallo sobat semua! Sudahkah anda bikin blog? Kalau belum,lihat blog saya di http://taman-merdeka.blogspot.com, disini saya<span class="fullpost"> akan memberikan tutorial cara bikin blog yang mudah dipahami bagi mereka yang belum mengerti sama sekali. </span>

Hasilnya nanti terlihat seperti ini :

Hallo sobat semua! Sudahkah anda bikin blog? Kalau belum,lihat blog saya di http://taman-merdeka.blogspot.com, disini saya
Read more…

Jika tulisan Read more di-klik,maka artikel akan tampil seutuhnya.Memang akan sedikit melelahkan bagi anda yang telah memiliki artikel yang banyak dengan mengedit artikel satu persatu,tetapi INGAT & PERHATIKAN! Peng-edit-an dilakukan pada mode “Edit HTML” bukan pada mode “Tulis” dan hasil tidak bisa dilihat pada “Pratinjau”.Untuk melihat hasil,simpan/save dulu kemudian klik “Lihat blog” pada tab baru.Jika kelak anda ingin membuat postingan baru tanpa perlu menuliskan kode <span class="fullpost"> dan </span> maka tambahkan pula kode tersebut sebagai “template post” dengan cara : klik “Pengaturan”,klik “Format” dan isikan kode berikut ke dalam kolom “post template” :

<span class="fullpost">
</span>

Dan klik simpan,hasilnya setiap anda membuat postingan baru,kode tersebut sudah muncul pada kolom postingan dalam mode “Html”.Anda tulis artikel yang ingin terlihat sebelum kode <span class="fullpost"> dan teruskan tulisan yang ingin tidak terlihat/disingkat sesudah kode tersebut dan pastikan di akhir postingan kode </span> masih ada di akhir postingan sebagai penutup.

Pesan : jika anda berhasil,mohon kasih komentar disini.Apalagi jika gagal,saya benar² ingin tahu,dimana letak kesulitan anda.Terima kasih dan selamat mencoba.Good luck!


READ MORE UNTUK TEMPLATE KLASIK
Bagi anda yang memakai template klasik,saya yakin anda sudah familiar dengan sript html,jadi langsung saja cari kode berikut : <style> biasanya terletak di awal template atau bagian paling atas template anda.Kalau tidak ada tambahkan sendiri kode tersebut atau lengkapnya begini :

<style>
</style>

Letakkan sebelum kode <head> ,diantara kode <style> dan </style> sisipkan kode berikut :

<MainOrArchivePage>
span.fullpost {display:none;}
</MainOrArchivePage>
<ItemPage>
span.fullpost {display:inline;}
</ItemPage>

Atau lengkapnya begini :

<style><MainOrArchivePage>
span.fullpost {display:none;}
</MainOrArchivePage>
<ItemPage>
span.fullpost {display:inline;}
</ItemPage></style>

Dan pastikan letak kode tersebut diatas/sebelum kode <head>
Jika sudah,selanjutnya anda cari kode berikut :

<$BlogItemBody$>

Lalu tambahkan kode berikut sesudahnya :

<MainOrArchivePage><br />
<a href="<$BlogItemPermalinkURL$>">Baca selengkapnya!</a>
</MainOrArchivePage>

Klik “Simpan perubahan”,apakah postingan sudah sudah terpotong? Jawabannya “Belum”.Seperti yang saya jelaskan di “Read more untuk template kustom” anda harus meng-edit postingan satu persatu dan lainnya seperti yang telah saya jelaskan pada artikel tersebut.Selamat mencoba!

4 comments:

Houri mengatakan...

mas mau tanya data:post.body nya ngak ketemu...
gimana ini mas?????? udah tak cari pake search nya firefoxe
jadi tambah binggung nih mas (pemula)
saya pake templete Custome ???

n masukkan blog mas ke blogroll saya
warningnya : tidak dapat mendeteksi feed untuk URL ini.

gimana itu mas???/

Nizam Zahman mengatakan...

Mohon maaf,saudara @Supriono,ada kesalahan editor tulisan dan ada kekurangan,jangan lupa centang tulisan "Expand Widget Template".Terima kasih telah bertanya sehingga mengingatkan kekurangan artikel saya.Silahkan ulangi baca artikel dan praktekkan sekali lagi.Soal blogroll,sebaiknya anda tidak salah ketik url-nya,kalau sudah benar tapi tetap bermasalah,tambahkan saja sebagai daftar url biasa,karena saya memang ada masalah dengan feed blog saya.Terima kasih dan saya ucapkan "Minal aidzin wal faidzin".

SDN 1 CIHAMPELAS mengatakan...

Pak Terimakasih banyak atas masukannya, linkya dah ditambah di blogspoot ku
wassalam

Nizam Zahman mengatakan...

@ SDN 1 CIHAMPELAS : Terima kasih dan mohon maaf jika ada kesan anda telah nyasar ke blog ini.Maklum,salah teknik seo onpage,jadinya halaman yg udah PR 6 hilang :p

 

© 2009 TIPS BLOG DAN SOFTWARE KOMPUTER. Powered by Blogger
Design by eJoee BlogsTricks