Sabtu, 25 Desember 2010

Cara Membuat Readmore

Readmore atau Baca Selengkapnya pada postingan blog secara otomatis, adalah untuk menunjukkan bahwa postingan tersebut masih panjang atau masih ada terusanya. Fungsi dari Readmore itu sendiri adalah memperpendek postingan agar tidak terlalu panjang.Dengan adanya readmore otomatis, kita bisa menentukan berapa ketinggian dan lebar penggalan postingan dan image yang akan muncul pada halaman pertama blog kita sehingga terlihat rapi dan menarik. Banyak berbagai cara untuk membuat Readmore dan dengan cara yang berbeda-beda. Ini adalah salah satu trik untuk membuat Readmore secara otomatis, caranya ikuti langkah berikut ini:

Pertama, silakan masuk ke acount www.blogger.com, kemudian pilih Rancangan, selanjutnya pilih Edit HTML, jangan lupa memberikan tanda ceklis pada bacaan "Expand Widget Template"

Langkah berikutnya cari kode </head> kemudian masukkan script di bawah ini persis dibawah kode tersebut.

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://rizqi.moehamed.googlepages.com/read-moreotomatis.js' type='text/javascript'/>

Langkah kedua, cari kode html berikut ini :

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

ganti kode tersebut dengan kode di bawah ini :

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'>&#187;&#187;&#160;&#160;READMORE...</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Keterangan : tulisan yang berwarna merah adalah yang bisa anda ganti.
  • Summary noimg 430 = tinggi artikel terpenggal tanpa image
  • Summar img 430 = tinggi artikel terpenggal dengan image
  • Readmore bisa anda ganti dengan Baca Selengkapnya, full read dll...

Langkah ketiga kemudian klik Save Template

Selanjutnya anda bisa melihat hasil Readmore pada postingan anda.




selamat mencoba

Baca Juga Artikel Lain Berikut ini:
* Cara Menambahkan Tampilan Jam Pada Blog
* Cara Membuat Tulisan Berkedip-kedip
* Cara Menambah Image Pada Link Download
* Membuat Tulisan Bergerak
* Cara Mengganti Template Pada Blogspot
* Cara Menambahkan Gambar Slideshow Pada Blog
* Menambahkan Dafter Isi Pada Blog
* Menambahkan Tampilan Video Kedalam Blog
* Cara Membuat Menu Dropdown Standart
* Cara Membagi Postingan Menjadi Dua Kolom
* Cara Merubah Domain Dari Blogspot Menjadi .co.cc
* Memberi Background Warna Pada Tulisan Postingan
* Cara Membuat Pop-up
* Membuat Link Dalam Gambar
* Cara Membuat Kotak Tabel Dalam Postingan
* Cara Membuat Menu Drop Down Menggunakan CSS Menu Maker
* Membuat Kolom Scroll
* Cara Membuat Share Artikel
* Cara Membuat Text Area dan Textbox Area Berfasilitas Select All
* Cara Membuat Readmore
* Cara Membuat Iklan Melayang


0 komentar:

Posting Komentar