English French German Spain Italian Dutch Russian Brazil Japanese Korean Arabic Chinese Simplified
You are here: Home » » Cara Membuat Read More / Baca Selengkapnya Di Posting Blogger

Cara Membuat Read More / Baca Selengkapnya Di Posting Blogger

By. Dedi Yahya S

Pada kesempatan kali ini saya akan memberikan trik dan panduan tentang Cara untuk membuat read more / baca selengkapnya di postingan pada blogspot.
Contohnya seperti ini :
Cara Membuat Read More Di Postingan Blogspot 
  • Login pada Blogger 
  • Setelah berada di Dashbore 
  • Masuk mode Rancangan 
  • Kemudian Edit HTML 
  • Centang Expand Widget Templates 
  • Cari kode </head> 
  • Jika sudah ketemu, letakan kode berikut diatas kode tadi
<script type='text/javascript'>
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>
Keterangan : 
summary noimg = 250 = adalah jumlah ringkasan tulisan jika tidak ada gambarnya
summary img = 250 = adalah jumlah ringkasan tulisan jika ada gambarnya
img thumb height = 120 = adalah tinggi gambar
img thumb width = 120 = adalah lebar gambar 
  • Selanjutnya cari kode <data:post.body/>
  • Ganti kode tadi dengan kode dibawah ini
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span style='float:right'><a expr:href='data:post.url'>Baca Selengkapnya... </a></span>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>
  • Jika sudah silahkan preview, jika sudah ada tulisan Baca Selengkapnya… dan tulisan sudah ditampilkan sebagian saja itu artinya sudah berhasil.
  • Setelah berhasil, Simpan Template


Semoga bermanfaat dan semoga berhasil
Terima Kasih ^_^

23 komentar:

  1. "Expand Widget Templates" itu yang dimana?

    BalasHapus
  2. ga berhasil.......hehehehe

    BalasHapus
  3. kagak ngerti gan..
    kalau ada gmbr langkah2x dari awal
    mgkin bisa gan...

    BalasHapus
  4. Wadduhhh panjang kode htmlnya

    BalasHapus
  5. wah...sama gan gk berhasil...

    BalasHapus
  6. Berhasil gan !
    Blog ini blog yang paling lengkap dan akurat !!
    makasih gan info nya (y)

    BalasHapus
  7. gan izin copy untuk blog saya boleh gak gan
    Sumber saya cantumkan bisa dilihat batiksama.blogspot.com

    BalasHapus

  8. kode di atas biasanya ada dua atau lebih jadi, coba kodenya satu persatu

    Saya cuma bantu saja

    BalasHapus
  9. artikelnya sangat bagus kawan

    http://acemaxs31.com/obat-kanker-paru-paru/
    http://apotekgumilar.com/
    http://acemaxs86.com/

    BalasHapus
  10. Numpang ngintip tutornya yah ehehehe

    BalasHapus
  11. yeee... berhasil gan... thanks a lot

    BalasHapus
  12. okeee gan, ta langsung ke tkp dahh...
    sipp thanks
    mampir juga ke blog saya yaa.. :)
    http://naziezie.blogspot.com/

    BalasHapus
  13. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  14. alhamdulillah berhasil, terimakasih ya sobat, bagi yang belum berhasil, teliti lagi,
    www.hadrial.blogspot.com

    BalasHapus
  15. work gan :D makasih tutornya

    BalasHapus
  16. Perkenalkan, saya dari tim kumpulbagi. Saya ingin tau, apakah kiranya anda berencana untuk mengoleksi files menggunakan hosting yang baru?
    Jika ya, silahkan kunjungi website ini www.kumpulbagi.com untuk info selengkapnya.

    Di sana anda bisa dengan bebas share dan mendowload foto-foto keluarga dan trip, music, video, filem dll dalam jumlah dan waktu yang tidak terbatas, setelah registrasi terlebih dahulu. Gratis :)

    BalasHapus

Berlangganan Artikel Blogger Tutorial Melalui EMail. GRATIS!!
Masukkan Alamat Email Anda di Sini

...::: http://blogtutorials-01.blogspot.com :::...