Membuat Automatic Read More Pada Blog
Posted 05.02 by popo in Label: auto read more, automatic read more, blog tutorial, blogspot tutorial for beginner, read moreBeberapa waktu yang lalu, salah satu rekan saya yang menggunakan template bikinan saya, meminta saya agar dibuatkan automatic read more pada template yang dia gunakan. Untuk memuaskan ‘pelanggan’, maka saya pun mencari ‘ilmu’ ke blog tetangga, dan ternyata ‘tetangga’ saya Ade’s Trick membagi ilmunya buat saya. Nah, sekarang saya ingin berbagi dengan anda semua. Semoga bermanfaat.
Pada artikel sebelumnya saya sudah pernah membahas fungsi Read More versi manual, untuk mengingat kembali silakan baca artikel di sini atau di sini. Fungsi Read More kali ini memang agak berbeda dengan Read More yang pernah dibahas sebelumnya. Bila versi terdahulu kita harus mengatur tulisan yang akan di tampilkan dengan yang di minimalisasi tulisan menggunakan cara manual dengan melakukan pemangilan fungsi :
....<span class="fullpost">.............</span>
dimana kode ini biasanya kita tanamkan secara manual ke dalam halaman postingan yang ada di template posting. Untuk versi Auto Read More kali ini akan lebih mudah, karena fungsi pemenggalan kalimat langsung bekerja secara otomatis tanpa harus menambahkan kode di atas.
Yang hebatnya lagi, fungsi Auto Read More ini mampu menampilkan image pertama dalam posting dan mem-float image tersebut di awal paragraf awal, meskipun gambar yang kita letakkan berada di tengah atau di akhir postingan. Mungkin lebih tepat disebut fitur image thumbnail.
Tidak hanya itu saja, kita dapat juga mengatur jumlah karakter yang akan ditampilkan. Disini ada 2 opsi untuk jumlah karakter yang akan ditampilkan, yaitu:
1. Jumlah karakter yang ditampilkan, jika ada image yang diikutsertakan dalam postingan
2. Jumlah karakter tanpa image.
Penting! Yang sudah memasang Read More versi lama kodenya dikembalikan dulu ke seperti semula, caranya hapus kode yang berwarna putih di bawah ini (Setiap template mungkin berbeda, jadi tinggal disesuaikan saja).
Kode Read More Versi manual tampilannya seperti di bawah ini :
<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>
jika sudah ikuti langkah-langkah selanjutnya.
Pertama, silahkan tuju langsung ke halaman EDIT HTML, Cari kode </head> kemudian letakkan script dibawah ini di atas kode </head> Kalo sudah, jangan lupa di simpan terlebih dahulu.
Langsung copy paste saja kode dibawah ini:
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</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>
Kedua, Masih pada halaman EDIT HTML, Beri tanda centang pada "Expand widget template" lalu temukan kode seperti dibawah
<data:post.body/>
Kalo sudah, ganti kode <data:post.body/> menjadi seperti kode dibawah ini :
<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>
*) Tulisan yang berwarna biru muda menandakan Read More + judul posting. Jika tidak menghendaki adanya judul, hapus saja kode berwarna biru muda tersebut.
*) Tulisan left berwarna ungu menandakan posisi tulisan Read More pada posting.
*) Bila tulisan left diganti dengan right, maka posisi tulisan Read More berada di sebelah kanan.
Keterangan:
var thumbnail_mode = "float"; (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)
Semoga Berhasil.
Sumber : Ade’s Trick.
10 komentar:
Aduh si abang ini, baik hati banget........ ini yg buat template myoffice kemarin yach??
Kalau buat template yg lain bisa gak, misalkan template magazine... hehehehe......... tanks atas ilmu dan kebaikannya.
@Bird : umumnya bisa mas. Lebih baik mas coba sendiri dulu. Jangan lupa back-up dulu template yang sekarang dipake. Lalu coba pasang kode seperti di atas. Kalo gak berhasil, boleh saya bantu.
Makasih bos,, atas tipsnya, nih sy jg bloger baru,, jadi masih meraba-raba, klo ngk tau ntar sy pasti ketok pintune sampean.
saya udah nyoba kokblm bisa yaah? padahal nyari kode nay saja mumet njlimet gak ketemu-ketemu, mata sampe pegel br nongol, udah sy ikuti tipsnya tp sy coba posting kok blm bisa read more otomatis, mohon pencerahanya. matur nuwun
@ Syauqillah Group : mas, terus terang aku udah pasang kode tsb di 5 blogku, yang 4 berhasil, yang 1 gak berhasil. Yang gak berhasil justru blog-ku yang ini. Aku masih cari penyebabnya mas. entar kalo udah ketemu jawabannya, saya akan posting.
mas,, thank tipsnya,, untuk template my office yg sy ambil dr sampean trik ini berhasil.
ASSALAM
mas..aku kok pasang automatic readnoer gak bisa bisa mas..tulisan readmore nya terletak di paling bawah postingan...kira kira pa mas ya yang salah???tolong mas
Wah, menarik!
Tapi, kayaknya ada satu kelemahan ya, yaitu jika javascript browser yang melihat di-disable, maka fungsi readmore itu nggak akan berfungsi. Bener nggak? Soalnya saya lihat sepertinya kok pakai javascript ya.
mas saya sudah coba tapi kok postingannya keliatan semua, bagaimana cara penulisannya yah supaya hanya sebagian saja yang kelihatan selebihnya nanti kalau di klik read morenya, balas ya mas, thx...
@my blog:
mas, pake kode read more yang mana?
kalo pake yang klasik, kamu harus pasang kode <span class="fullpost"> di bagian artikel yang ingin dipenggal. dan pasang kode </span> di akhir postingan. Kedua kode tersebut harus dipasang di setiap postingan.
Kalo kamu pake yang auto readmore, sudah tidak perlu lagi meletakkan kedua kode diatas. Secara otomatis akan terpenggal sesuai jumlah karakter yang telah diset, sebagai contoh di atas adalah 250 karakter.
Dicoba lagi mas. Ntar hasilnya kasih tahu lagi, ya?
Posting Komentar