Pages

Jumat, 14 Mei 2010

Teknik Membuat Read More di Blogspot

Wah judul yang aneh, "membuat Read More" maksudnya apa? Begini sobat, sebenarnya saya kurang setuju dengan judul tersebut, tadinya saya ingin memberi judul "Membuat menu Selengkapnya", tapi berhubung kata "Read More" yang paling di kenal di jagad blog, ya saya pun ikut-ikutan (dasar tukang ngekor). Ya sudahlah kepanjangan ngobrolnya. Kita mulai pembahasannya. Bagi para sobat yang baru mulai membuat blog, mungkin belum mengetahui informasi ini dan mudah-mudahan dengan membaca artikel ini dapat menambah pengetahuan kita tentang yang namanya nge-blog.


Tahap 1 - Edit HTML

Langkah pertama silahkan login di blogger dan pilih blog yang akan di pasang read more ini. Kedua, masuk ke menu edit html, lalu checklist kolom expand template widget kemudian cari kode html seperti ini :

<data:post.body> atau <p><data:post.body></p>


Ketiga, hapus kode tersebut lalu ganti dengan kode yang ini :

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


Silahkan ganti text read more nya terserah anda. Kalo blog kursus blog ini pake baca selanjutnya. Jika sudah save template

Tahap 2 - Cara Posting

Setelah bagian edit html beres, sekarang saatnya untuk cara posting artikel dengan menggunakan read more. Langkah pertama, Silahkan buat postingan sampe selesai dulu. Kedua, tentukan paragraf yang akan di tampilkan kemudian pasang kode ini dibawah paragraf tersebut :

<span class="fullpost">


Ketiga, pasang kode berikut di akhir postingan

</span>


Udah ngerti kan...??. Ok kalo masih belum saya kasih gambarannya

Paragraf postingan yang akan ditampilkan disini

<span class="fullpost">


Postingan yang ditampilkan setelah read more di klik disini

</span>


Mudah - mudahan pada ngerti ya....kalo masih lom ngerti juga, wah bener2 deh...



ini ada cara ke-dua :

Caranya:

* Login ke blogger.com, pilih blog yang pengen kamu edit, klik link Layout kemudian masuk ke Edit HTML
* Untuk bisa ngedit template secara keseluruhan, kamu harus centang/tandai/aktifkan Expand Widget Templates
* Masukkan kode berikut sebelum tag </head> atau tepat sesudah kode } ]]></b:skin> seperti ini:

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

* Selanjutnya mengatur supaya postingan terpotong, cari kode <p><data:post.body/></p> dalam template kamu dan
tambahkan kode berikut tepat dibawahnya:

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

* Nah supaya terpotong, setiap kali kamu posting, klik pada bagian posting
dimana kamu pengen tulisan Read More.. muncul, dan
ketik <span class="fullpost"> sisa postingan sampai selesai </span>.
Untuk menmbahkan kode ini, ketika posting kamu harus dalam
mode Edit HTML bukan Compose..

Contoh penulisan posting:

Ini adalah awal berita yang ingin saya potong karena terlalu panjang kalo postingan muncul semua, oleh karena itu saya perlu memotong berita sampai disini saja. <span class="fullpost"> Dan ini adalah sisa postingan saya yang akan saya sembunyikan dan hanya muncul pada saat post page atau link read more.. diklik </spana >

Hasil akhir postingan akan seperti ini:

Ini adalah awal berita yang ingin saya potong karena terlalu panjang kalo postingan muncul semua, oleh karena itu saya perlu memotong berita sampai disini saja.Read more..


Peace ah.....salam blogger

"Teman-teman yang baik jangan lupa komentarnya ya ok...^^

"

0 komentar:

Posting Komentar