CARA PERTAMA
1. Login ke akun blogspot pembaca.
2. Pada dasbor, klik link Tata Letak, kemudian pilih submenu Edit HTML.
3. Back up terlebih dahulu template blogspot pembaca agar jika terjadi kerusakan, masih
bisa mengembalikan ke kondisi semula. Klik link Download Template Lengkap.
4. Beri centang pada bagian Expand Template Widget.
5. Silahkan cari kode seperti dibawah ini pada template pembaca.
<div class='post-body entry-content'>
Perlu diketahui bahwa kode tersebut ada yang sama dan ada yang beda dengan template
Anda. Saya menggunakan template standart blogspot, MINIMA. Untuk menyiasatinya,
pembaca cukup memastikan bahwa terdapat struktur class='post-body'.
6. Copy paste kode berikut pada kode yang Anda temukan pada langkah 5 di atas:
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
7. Selanjutnya cari kembali kode berikut ini:
<data:post.body/>
8. Copy paste kode berikut di bawah kode yang Anda temukan pada langkah 7 di atas:
<a expr:href='data:post.url'>Read More...</a>
</b:if>
(NB: Anda boleh mengganti tulisan "Read More..." yang berwarna merah tersebut dengan
tulisan "Baca selengkapnya...", "Lanjutkan...", dsb.
9. Setelah itu klik tombol SIMPAN TEMPLATE.
10. Masih pada dasbor blogspot pembaca, bukalah menu Pengaturan, kemudian pilihlah
submenu Format. Pada bagian Template Posting yang ada di sebelah paling bawah,
copy paste kode berikut:
<div class="fullpost">
</div>
11. Setelah itu klik tombol SIMPAN SETELAN.
12. Sekarang cobalah membuat sebuah posting baru. Pada tab Edit HTML pada kotak
isian posting, pembaca akan melihat muncul tulisan yang Anda copy paste pada langkah
10 di atas.
13. Untuk membuat Read More muncul pada postingan, tulis bagian artikel yang hanya
ingin ditampilkan pada halaman utama blog di atas kode <div class="fullpost">.
Sedangkan tulisan seterusnya ditulis diantara kode <div class="fullpost"> dan </div>.
CARA KEDUA
Cara kedua untuk membuat Read More pada blogspot adalah menggunakan javascript. Perlu
diketahui bahwa selain berfungsi untuk membuat Read More pada blogspot, cara kedua ini
juga bisa membuat thumbnail posting secara otomatis yang diambil dari gambar yang Anda
masukkan pada posting. Thumbnail merupakan gambar berukuran kecil pada posting yang dibuat
untuk merepresentasikan tulisan yang kita buat. Contohnya seperti gambar di atas. Gambar
Teletubis tersebut bisa dikatakan sebagai sebuah thumbnail.
1. Login ke akun blogspot pembaca.
2. Pada dasbor, klik link Tata Letak, kemudian pilih submenu Edit HTML.
3. Back up terlebih dahulu template blogspot pembaca agar jika terjadi kerusakan, masih
bisa mengembalikan ke kondisi semula. Klik link Download Template Lengkap.
4. Beri centang pada bagian Expand Template Widget.
5. Selanjutnya cari kembali kode berikut ini pada template pembaca:
<data:post.body/>
6. Hapus kode yang Anda temukan pada langkah 5, kemudian ganti dengan kode berikut:
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script
type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script>
<span class='rmlink' style='float:left'><a
expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
7. Setelah itu, copy paste javascript berikut di atas kode </head> pada template Anda:
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 300;
summary_img = 300;
img_thumb_height = 250;
img_thumb_width = 250;
</script>
<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)
(C)2008 by Anhvo
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img
src="'+img[0].src+'" width="'+img_thumb_width+'px"
height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
Cara Pertama
Kelebihan :
• Kode yang dimasukkan tidak terlalu banyak sehingga tidak membuat blog kita semakin
berat jika dibuka.
• Kita bisa menentukan batas pembagian artikel yang akan dimunculkan di halaman depan,
mau berapa huruf, mau berapa kalimat. Namun, bagi sebagian orang, ini bisa jadi
kelebihan, bisa pula kekurangan.
Kekurangan :
• Seperti yang saya sebutkan pada poin 2 kelebihan di atas, bagi sebagian orang, cara ini
sedikit merepotkan karena harus menempatkan kode-kode tersebut secara manual pada
postingan.
• Hanya berfungsi untuk membuat "Read More", tidak bisa membuat thumnail seperti
langkah kedua.
Cara Kedua
Kelebihan :
• Bisa membagi tulisan yang ditampilkan pada halaman depan secara otomatis.
• Bisa membuat thumnail posting dari gambar yang kita masukkan pada postingan.
Kekurangan :
• Blog menjadi sedikit tambah berat karena menggunakan javascript.
• Bagi sebagin orang, pembagian artikel secara otomatis tersebut membuat kita tidak bisa
menentukan sampai batas mana yang akan dimunculkan di halaman depan ketika menulis
posting