Friday, April 3, 2009

Pemenggalan Artikel Otomatis (Automatic Readmore)

Posted by dav On 10:04 PM
Beberapa saat yang lalu, Blogger Tune-Up pernah membahas blogger hack tentang Readmore 1, Readmore 2 dan Readmore 3. Pada blogger hack terdahulu proses pemenggalan artikel dilakukan secara manual dengan memasukan kode-kode pemenggalan yang disisipkan langsung pada artikel.
Kali ini kita akan mencoba satu teknik blogger hack yaitu pemenggalan artikel otomatis (Automatic Radmore), tanpa perlu menyisipkan kode-kode pemenggalan pada artikel secara langsung. Semua diatur secara otomatis, kita hanya perlu mengatur beberapa parameter sesuai dengan keinginan kita. Bahkan jika kita menyertakan gambar (image) pada artikel kita, maka gambar dapat diatur tampil pada halaman utama dalam ukuran kecil (thumbnail). Sebagai contoh Blogger Tune-Up telah mengintegrasikannya pada blog Kotretan Hendriono.

Integrasi Pemenggalan Otomatis (Automatic Readmore)

Langkah 1
Login ke Blogger
Langkah 2
Pilih "Tata Letak - Edit HTML"
Langkah 3
Checklist "Expand Template Widget"
Langkah 4
Sebelum melakukan modifikasi pada template, Backup Template terlebih dahulu
Langkah 5
Cari kode dibawah ini :
</head>
Langkah 6
Masukan kode dibawah ini tepat diatas kode pada Langkah 5 :
<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 160;
summary_img = 130;
img_thumb_height = 65;
img_thumb_width = 65;
</script>
<script src='http://hensblog.googlecode.com/files/selengkapnya.js' type='text/javascript'/>
Langkah 7
Cari kode dibawah ini :
<data:post.body/>
Langkah 8
Masukan kode dibawah ini dengan hati-hati, menggatikan kode pada Langkah 7.
<div class='post-body' expr:id='&quot;post-&quot; + data:post.id'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id' style='text-align: justify;'>
<p><data:post.body/></p>
</div>
<script type='text/javascript'>
createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a expr:href='data:post.url'>[Selengkapnya] - <data:post.title/></a>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p><data:post.body/></p>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
Langkah 9
Simpanlah Template dan Preview

Keterangan :
  • Bagi blogger yang sudah terlanjur memasang Readmore (pemenggalan artikel) manual maka harus sedikit kerja keras menghapus kode-kode pemenggalan yang sudah disisipkan pada artikel yang sudah diterbitkan (publish). Jika malas biarkan saja, tetapi cepat-cepat buat artikel baru sejumlah artikel yang ditampilkan dihalaman utama.
Perhatikan Langkah 6!
  • summary_noimg = 160; > nilai 160 menunjukan jumlah karakter artikel yang akan ditampilkan pada halaman utama (pada mode terpenggal), jika artikel tidak mengandung gambar
  • summary_img = 130; > nilai 130 menunjukan jumlah karakter artikel yang akan ditampilkan pada halaman utama (pada mode terpenggal), jika artikel mengandung gambar. Dan karakter akan diletakan pada sebelah kanan gambar.
  • img_thumb_height = 65; > nilai 65 digunakan untuk mengatur ukuran tinggi gambar yang akan tampil di halaman utama pada mode terpenggal
  • img_thumb_width = 65; > nilai 65 digunakan untuk mengatur ukuran lebar gambar yang akan tampil di halaman utama pada mode terpenggal
Perhatikan Langkah 8
  • Ubahlah kata [Selengkapnya] sesuai keinginan anda.
  • Hapus kode - <data:post.title/> setelah kode [Selengkapnya] jika kita tidak ingin menampilkan judul artikel
Semoga berhasil... Happy blogging :) [Tinggalkan pesan jika mengalami kesulitan atau kegagalan pemasangan]
,

Popular Posts