Tuesday, November 18, 2008

Cara Buat Read More (Ringkasan Artikel)

Selamat siang sobat, pa Kabar dikau hari ini....? mudah2-an selalu ada dalam lindungan-Nya..Amiinn. Nah...di postingan kali ini, saya akan membahas mengenai salah satu tips blog...yaitu membuat ringkasan artikel. Ya...mungkin kalo di dunia blog dah dikenal dengan istilah Read More. Saya pertama kali melihat cara ini adalah di blognya Mas Fatih (Salah satu blogger terbaik yang pernah dimiliki indonesia). Dan disini saya akan coba mempublikasikan ulang (tapi bukan copy paste). Mudah2 an yang bersangkutan tidak keberatan.... Ok..kita langsung aja ya.

Tahap I

  • Silahkan sobat login dulu di blogger
  • Kalo dah masuk, pada jendela dashborad silahkan klik Menu Layout lalu edit HTML.
  • Pada jendela edit HTML, sebelum terjun ke template sobat, jangan lupa untuk memberi tanda checklist di samping Expand Template Widget. Tunggu sampai beres loading
  • Kalo dah selesai....Langsung lihat template sobat dan cari kode seperti ini :

<div class='post-header-line-1'/>
<div class='post-body entry-content'>

  • Kalo dah ketemu, copy paste kode di bawah ini, dan letakkan di template sobat persis di bawah kode yang diatas

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

  • Awas jangan sampai salah simpan ya....Kalo dah selesai, perhatikan di bawah kode yang sobat copy paste tadi ada kode seperti di bawah ini :

<p><data:post.body/></p>
<div style="'clear:"> <!– clear for photos floats –>
</div>

  • Nah, diantara kode

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

  • dan kode

<div style="'clear:"> <!– clear for photos floats –>
</div>

  • Letakan kode ini : (ingat lo harus diantaranya)

<a expr:href='data:post.url'>Read More .. </a>
</b:if>

  • Sehingga hasil akhir kodenya seperti ini :

<div class='post-header-line-1'/>
<div class='post-body entry-content'>

<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>

<div style="'clear:"> <!– clear for photos floats –>
</div>

Nah....kode yang berwarna biru itu adalah kode tambahan, sedangkan yang hitam adalah sisanya. Ok....tahap I sudah selesai. Sekarang kita berlanjut ke tahap ke II.

Tahap II
  • Setelah beres edit HTML (jangan lupa di save), Silahkan sobat masuk ke menu Setting lalu pilih Formatting.
  • Setelah itu sobat turun ke bawah dan cari Template Posting.
  • Kalo dah ketemu, isi kotak kosong yang ada di sampingnya dengan kode dibawah ini :

<span class="fullpost">

</span>

  • Kalo udah klik save....
Cara memposting

Ketika mulai posting, anda akan melihat kode seperti di atas di bagian Edit HTML. Nah supaya postingan kita Dapat teringkas, maka ketika memposting letakkan bagian posting yang akan ditampilkan di atas kode

<span class="fullpost">

sedangkan sisanya, letakkan diantara kode

<span class="fullpost">

dan

</span>

Nah....selesai deh. Tapi ingat cara itu hanya untuk postingan yang baru. Tapi kalo misalnya sobat pengen postingan yang lama juga seperti itu, tinggal edit aja dan tambahkan kode seperti yang tadi saya sebutkan. Ok..deh salam ngeblog ya.

0 comments:

Angel Save Knight Man in 1995 - Linux, Blogger, Marketing, Business, Internet | Template by - Abdul Munir - 2008