22 Februari 2010

Cara Memberi "Continue Reading" pada Blogspot

Fitur continue reading, atau juga dikenal dengan read more atau dalam bahasa Indonesia baca selengkapnya merupakan fitur yang terlihat sepele namun sangat berguna dalam blogging. Tidak mungkin kita memberi postingan tulisan secara penuh pada halaman utama, bisa-bisa halaman utamanya menjadi sangat panjang sekali.

Berbeda dengan wordpress yang sudah memberikan fitur ini pada toolbarnya, jadi hanya tinggal klik saja toolbar "more" di batas tulisan yang hanya ingin ditampilkan di halaman utama, maka otomatis sudah menjawab solusi. Namun, berbeda dengan di wordpress, pada blogspot tidak menyediakan fitur tersebut.

Ada cara lain untuk mengatasi permasalahan tersebut, yaitu dengan mengedit XMLnya. Langkah yang harus dilakukan adalah:

1. PERTAMA

Pada "Dashboard", masuk ke Layout --> Edit HTML

Disana akan diberikan kotak yang berisi script HTML dari template. Kemudian centang pada kotak checkbox "Expand Widget Templates" yang berada diatas bagian kanan dari Kotak Edit HTML.

Photobucket

2. KEDUA

Pada Kotak Edit HTML temukan tulisan
/head>

Pencarian tulisan tersebut bisa menggunakan fasilitas Find/Search pada browser, ketik shortcut Ctrl F untuk memanggilnya, kemudian ketikkan /head>

Salin dan tempatkan script berikut tepat diatas /head>

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

3. KETIGA

Pada Kotak Edit HTML temukan tulisan
<data:post.body/>

Salin dan tempatkan script berikut tepat dibawah <data:post.body/>

<b>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<a expr:href='data:post.url'>Continue Reading&#187;</a><br/><br/>
</b:if>
</b>

Anda bisa mengganti tulisan Continue Reading pada script diatas sesuka hati, yang nantinya tulisan tersebut akan muncul pada halaman utama sebagai link untuk membuka halaman secara utuh.

Kemudian simpan perubahan tersebut dengan menekan tombol "SAVE TEMPLATE" yang berada di bawah sebelah kanan Kotak Edit HTLM.

4. KEEMPAT

Langkah terakhir ini diterapkan pada tulisan yang akan diposting. Amati script berikut :

terlihat di halaman utama<div class="fullpost">selanjutnya</div>

Pada script diatas, "terlihat di halaman utama" merupakan tulisan yang mau ditampilkan pada halama utama, kemudian "selanjutnya" adalah tulisan yang akan ditampilkan pada halaman utuh. Jangan lupa untuk memberi penutup </div> di akhir tulisan.


Sekian dulu penjelasan dari saya. Terima kasih.


NB:
Hal ini berlaku jika Setting pada bagian Basic, pilihan untuk Select post editor adalah Old Editor.

Photobucket

Cara yang berbeda dilakukan jika pilihannya adalah Updated editor, dan tutorialnya bisa dilihat DISINI


Referensi : http://www.videobloggingtips.com/2008/11/continue-reading-blogger.html

10 komentar:

  1. kak, kalau cara menampilkan "Popular Post" gimana?

    BalasHapus
  2. waah,itu cuma cara manual kok.,
    dilat dari histatsnya aja mana page yang sering dilihat heheheee

    BalasHapus
  3. mamanya ihsan9 Maret 2010 09.46

    Kok muculnya di akhir tulisan, gak bisa ditengah2?

    BalasHapus
  4. mungkin kamu salah yang menempatkan "div class full post"-nya (lihat step 4)

    setelah div class tersebut adalah halaman yg disembunyikan pada halaman utama sampai sebelum sintaks "/ div"
    :)

    BalasHapus
  5. Selamat malam Mas,
    Saya mau tanya sedikit mas,
    Bagaimana memberikan nomor di dalam postingan kita, misalnya seperti di bawah ini :
    1. Klik Disini untuk daftar,
    2. Klik menu SignUp/Daftar, kemudian pilih Negara tempat tinggal kita dan pilih bahasa yang ingin kita gunakan,
    3. dan strusnya mas.
    Saya posting dengan Edit HTML,

    Mohon infonya mas, balas ke email saya saja mas :
    syarbaini82@gmail.com


    trima ksih mas bantuannya

    BalasHapus
  6. oowh, itu pakai 'Numbered List' saja di mode Compose, lebih praktis. . . . .

    sama saja dengan kalo di mode 'edit html', tapi harus berurusan dengan kode html secara manual, untuk ordered list berusrusan dengan <ol> dan <li>

    BalasHapus
  7. terima kasih mas atas masukannya....


    salam kenal ya

    BalasHapus
  8. HaaHaaHaa jadi ++ pusingg.. apa harus ngedt html dulu tiap ngpostng ???

    BalasHapus
  9. kak kalo di wordpress caranya gmn ya??

    BalasHapus
    Balasan
    1. kalau di wordpress sudah ada fiturnya, tinggal pakai aja,,

      semudah drag & drop

      Hapus

Ayo kirim komentar, disini!!