Anda di halaman 1dari 4

Ada 2 cara membuat Read More pada blogspot yang bisa kita gunakan:

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

visit http://en.vietwebguide.com to get more cool hacks


********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

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

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) +


'</div>';
div.innerHTML = summary;
}
//]]>
</script>
8. Coba perhatikan bagian yang berwarna merah pada javascript di atas.

o var thumbnail_mode = "float"; --> Untuk mendefenisikan letak thumbnail yang


akan dibuat dan ditampilkan pada halaman utama blog berada disamping tulisan.
o summary_noimg = 300; --> Untuk mendefenisikan jumlah karakter tulisan yang
akan ditampilkan pada halaman utama jika thumbnail tidak ada. Silahkan ganti
angkanya sesuai dengan keinginan Anda.
o summary_img = 300; --> Untuk mendefenisikan jumlah karakter tulisan yang akan
ditampilkan pada halaman utama jika ada thumbnail.
o img_thumb_height = 250; --> Untuk mendefenisikan tinggi thumbnail yang akan
dibuat. Silahkan ganti angkanya sesuai dengan keinginan Anda.
o img_thumb_width = 250; --> Untuk mendefenisikan tinggi thumbnail yang akan
dibuat. Silahkan ganti angkanya sesuai dengan keinginan Anda.
9. Klik tombol SIMPAN TEMPLATE
Kedua cara di atas mempunyai fungsi yang sama namun ada kelebihan dan kekurangannya
masing-masing. Berikut beberapa kelebihan dan kekurangan dari masing-masing cara
membuat Read More di atas sehingga bisa Anda jadikan pertimbangan:

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

Anda mungkin juga menyukai