Cara Membuat Readmore Otomatis di Blog/Blogspot



Cara Membuat Readmore Otomatis di Blog/Blogspot
Cara Membuat Readmore Otomatis di Blog/Blogspot - Apa yang di maksud Read More / Baca Selengkapnya?
Auto readmore - Pada postingan yang lalu bang dadan telah membahas cara merubah lebar body, main dan sidebar blog. Nah kali ini bang dadan akan membahas cara membuat read more di blog / blogspot / blogger. hehe kepanjangan ya judulnya?
Okelah langsung saja, kalau menurut bang dadan sendiri read more itu adalah istilah dari sebuah artikel panjang yang disingkat menjadi pendek. hehe begitu mungkin. radmore biasanya terdapat pada artikel - artikel blog. Bagi sobat yang sudah mempunyai blog khususnya di blogger. kali ini bang dadan akan membahas bagaimana sih membuat readmore otomatis pada blog / blogspot?
Berikut tahapan - tahapan yang harus sobat ikuti dalam tutorial membuat readmore otomatis di blog/blogspot.


Cara Membuat Readmore Otomatis di Blog/Blogspot

  • Pertama, Login pada blog, kemudian menuju Dashbord  Rrancangan Edit HTML. *jangan lupa  klik expand template widget
  • Setelah itu cari kode HTML </head>*gunakan ctrl+f untuk mempermudah
  • Salin kode di bawah ini dan letakkan persis di bawah kode </head>.
<!-- Auto read more script -->
<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;; //yes-dengan gambar,no-tanpa gambar
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 150;
img_thumb_width = 150;
</script>
<script type='text/javascript'>
//<![CDATA[
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(thumbnail_mode == "yes") {
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>
<!-- Auto read more script -->

  • Selanjutnya silahkan cari kode <data:post.body/> 
  • Ganti kode di atas dengan kode di bawah ini. *Catatan: apabila terdapat 2 atau 3 <data:post.body/> silahkan sobat ganti <data:post.body/> yang pertama.
<!-- Auto read more Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a class='more' expr:href='data:post.url'>Read More >></a>
</b:if>
</b:if>
<!-- Auto read more End -->
  • Selesai :: Namun sebelum menyimpan alangkah baiknya sobat klik pratinjau terlebih dahulu untuk mencegah terjadinya kesalahan. dan bila sudah silahkan klik simpan.
Tips* Bagi sobat yang ingin mengganti nama readmore dengan menggunakan icon/gambar sobat hanya cukup mengganti tulisan Read More >> dengan code dibawah ini:

<img border='0' src='https://lh3.googleusercontent.com/-P9cVAYPtMks/UOhicveA-oI/AAAAAAAABOo/qsDCT6cpi8k/w497-h373/readmore.gif'/>

Catatan* Sobat juga bisa mengganti url gambar readmore dengan url link yang sobat inginkan.

Sekian dulu pembahasan klai ini tentang Cara Membuat Readmore Otomatis di Blog/Blogspot. semoga artikle ini bermanfaat bagi anda semua, dan apabila ada pertanyaan silahkan sampaikan pada kotak omentar dibawah. Terimakasih..!!!
Labels: blogger tutorial, template hack

Thanks for reading Cara Membuat Readmore Otomatis di Blog/Blogspot. Please share...!

13 Comments on Cara Membuat Readmore Otomatis di Blog/Blogspot

  1. Saya coba tutorialnya kok gak berhasil ya bang? Kira-kira apa yg salah? Saya sudah lakukan sesuai dengan instruksi diatas

    ReplyDelete
  2. Mungkin berbeda templatenya, coba untuk langkah yang ke-5 ganti <data:post.body/> yang ke-2 atau ke-3.
    Oy kalau boleh tau mbak pake template apa??

    ReplyDelete
  3. Terima kasih Bang DADAN,atas pencerahannya.
    Aku masih setia nih, jadi jangan marah lagi ya,...He he.
    Nanti kalu aku mo Copas aku kasi sumbernya dari Bang Dadan.. Maaf ya ane Newbiest bangeeet.
    Langsung ane mo pakai neh.. Thank U very-very much...

    ReplyDelete
  4. Ane masih bingung neh bang, My Header belum beres2 juga. Ada pencerahan untuk my-blog bang?. Nyuwun tulung niki. So ngana kaseh pencerahan jo pa kita.

    ReplyDelete
  5. Silahkan sob copas aja gpp.. emangnya saya pernah marah?? perasaan nggak sob.. santai aja sob sm aku mah.

    Oy kalau masalah kode yg ada diatas header blog agan? kalau itu kode Alexa, taruhlah di bawah tag <head> jgn di atasnya.

    ReplyDelete
  6. Mau tanya neeh, maksudnya ini bagaimana y? "Catatan: apabila terdapat 2 atau 3 silahkan sobat ganti yang pertama." maksudnya yang di ganti apa yang bagian pertama begitu y?

    ReplyDelete
    Replies
    1. Maksudnya kaya gini: biasanya terdapat 3 kode <data:post.body/> dalam template blog tsb. nah kalau misalkan ada 3, atau 2 jg, ganti aja kode <data:post.body/> yang pertama. coba aja dulu ya?? hehe

      Delete
    2. This comment has been removed by the author.

      Delete
    3. maaf salah nulis tadi, kok tempat aku g ada kode ini y

      Delete
    4. di tempat aku kok g ada yang kode bgini y &lt;data:post.body/&gt; tapi adanya kayak ini <Group description="Page" selector="body">
      terus bagaimana ini???

      Delete
    5. Masa gak ada?? itu kan element penting dlm blog dan semua blog mempunyai tag <data:post.body/> . coba cari lg yg teliti ya?? gunakan ctrl+f..!!

      Delete
  7. Nyimak tutor di sini ... Kunjungan perdana ni sob ...

    ReplyDelete
    Replies
    1. Wah terimakasih mas telah berkunjung kemari,, artikel-artikel disini jelek mas, jadul semua..!!

      Delete

Back To Top