Cara Membuat “Read More” atau “Baca Selengkapnya” di Blogger Classic dan Beta

September 6, 2009 at 2:16 pm 4 comments

blogger logoBagi pengguna setia blogger/blogspot mungkin ngiri dengan WordPress yang disesiakan tool untuk menambah “More” dengan mudah setiap kali posting. Namun bukannya tidak bisa, dengan fasilitas edit HTML yang dimiliki Blogger, blogger memungkinkan penggunanya untuk belajar sedikit code html agar bisa memunculkan feature tersebut. Silahkan menuju ke sumbernya langsung di How can I create expandable post summaries?

Bagi pengguna Blogger Classic ikuti langkah berikut:
Step 1: adalah merubah Conditional CSS di tempalte Anda. Masukkan code berikut sebelum tag </head>

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

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

Step 2: adalah membuat “Read More” Links dengan menambahkan code setelah tag <$BlogItemBody$> or <data:post.body/>   dengan code berikut:

<MainOrArchivePage><br />
<a href=”<$BlogItemPermalinkURL$>”>Read more!</a>
</MainOrArchivePage>

Step 3: dilakukan setiap kali akan posting. Anda harus belajar menghafal kode berikut agar tidak kerepotan setiap kali posting. Yaitu dengan menambahkan kode  <span class=”fullpost”> pas  dimana artikel ingin Anda potong. Kemudian di akhir posting tambahkan kode </span>. Tapi ingat masukkan kode berikut di Mode HTML bukan di Mode Posting.

Misalkan:
Ini adalah awal postingan dan akan dipotong disini. <span class=”fullpost’> Ini adalah akhir postingan <span>

Sedangkan untuk Blogger baru atau beta silahkan ikuti langkah berikut:
Step1: Menuju link Layout kemudian masuk ke Edit HTML. Kemudian untuk bisa mengedit template secara keseluruhan, klik dulu atau aktifkan Expand Widget Templates. Setelah itu copy paste 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>

Step 2 untuk membuat link “Read More” dan memotong postingan yang diinginkan cari kode <p><data:post.body/></p> dalam template Anda dan tambahkan kode berikut tepat dibawahnya:

<b:if cond=’data:blog.pageType != “item”‘>
<a expr:href=’data:post.url’> Read More..</a>
</b:if>

Step 3 sama dengan blogger classic yaitu dengan menambahkan kode <span class=”fullpost”> pas  dimana artikel ingin Anda potong. Kemudian di akhir posting tambahkan kode </span>. Tapi ingat masukkan kode berikut di Mode HTML bukan di Mode Posting. “Read More” bisa anda modifikasi sendiri dengan “Baca Selengkapanya” ” Seterusnya”, “Lebih Lanjut” dll. Silahka nmencoba n have a nice blogging😉

Entry filed under: Blogger [Blogspot], Blogging, Tip & Trik. Tags: , , , , , , , , .

Mari Mengaji Online di TV Dakwah Online MUI Minta Masyarakat Sabar Tunggu Keputusan Lebaran

4 Comments Add your own

  • 1. bulbul  |  September 14, 2009 at 10:53 pm

    wiih… ini yang saya cari2.. aljzkhro….
    keep blogging n success selalu..

    salam

    Reply
  • 2. kuspratiknyo  |  September 18, 2009 at 4:13 am

    Sama seperti komentar no satu, ini yang selama ini saya cari-cari, karena beberapa saya cari tentang artikel yg seperti ini dan saya aplikasikan selalu gagal dan hasilnya tetap sama. Sering teman-teman yang melihat blog saya memberi saran , mas kalau bisa artikelnya di potong dengan read more atau baca selanjutnya. artikel di atas akan saya coba semoga berhasil…… aljzkho…

    Reply
  • 3. agy  |  January 23, 2010 at 1:10 pm

    mas, kok saya nyari script gak ketemu2 ya? ada dimana itu?

    Reply
  • 4. pathullapil  |  February 3, 2010 at 6:25 am

    ooooooooooo

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Trackback this post  |  Subscribe to the comments via RSS Feed


September 2009
M T W T F S S
« Aug   Oct »
 123456
78910111213
14151617181920
21222324252627
282930  

Archives

Twitter LDII News

RSS LDII.or.id

  • An error has occurred; the feed is probably down. Try again later.

RSS Nuansa Online

  • An error has occurred; the feed is probably down. Try again later.

Blog Stats

  • 299,095 hits

%d bloggers like this: