Cara Membuat Auto Readmore dengan Gambar

memasang auto readmore di artikel blog
Cara Membuat Auto Readmore dengan Gambar dapat dipasang dengan mudah. Cara memasang readmore ini adalah diletakkan di artikel pada halaman utama Anda. Fungsi read more / baca selengkapnya adalah untuk memotong / meringkas sebuah artikel dengan hanya menampilkan beberapa karakter text.

Selain mempersingkat kalimat yang ditampilkan pada sebuah artikel, read more otomatis akan bekerja secara automatic ke semua artikel posting yang kita buat. Langsung saja ke cara pembuatan dan pemasangan tools baca selengkapnya di blogspot.

Cara Memasang Auto Readmore dengan Gambar :
1. Login ke blogger.com
2. Pilih Template lalu Edit HTML,kemudian Tempatkan kursos mouse anda di dalam kotak pengeditan template.
3. Tekan CTRL+F, Muncul sebuah kotak lalu Cari kode </head> dan letakkan kode di bawah ini diatasnya.

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

4. Lanjutkan dengan meletakkan kode di bawah ini diatas kode <data:post.body/> :

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'><img src='http://lh6.ggpht.com/_Kwwy9VyLMKw/S3qDYQZCiRI/AAAAAAAACxA/aXY0neVNzh0/but_readmore.png'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

5. Save Template Anda.
- Anda dapat mengatur penyusunan jumlah karakter dalam readmore tersebut sesuai dengan yang anda inginkan. ( terletak pada kode warna merah ).
- Untuk mengubah background gambar anda dapat mengganti kode dengan warna biru.

Buat anda yang ingin menggunakan readmore yang lebih optimal dapat membaca di artikel Cara Membuat ReadMore Otomatis di Blog SEO Friendly . Terimakasih telah membaca panduan memasang auto read more ini.

24 comments:

  1. klo tidak ada data/post nya gimana yang , tampilan edit blogger kayaknya sudah berbeda :(

    ReplyDelete
    Replies
    1. pasti ada sob data post bodynya, karena apabila tidak ada maka postingan mas tidak akan muncul.

      jadi meskipun cuma 1, pasti ada kok.
      :)

      jangan lupa ceklis Expand Widget Template pada saat mengedit template.

      Delete
    2. tampilan sekarang ndak ada expand widget template bro...
      memang ndak ada data/post nya kok
      kok ndak percaya!!!!!

      Delete
    3. iya sudah tidak ada expand widget templatenya.

      tp kalau data post body itu psti ada, silahkan tanya orang lain aja mas kalau dibilangin susah !

      Delete
  2. kok tag datanya ada yang putus gan?

    ReplyDelete
    Replies
    1. ngga kok mas, sudah tertutup dengan rapih smua.
      coba aja mas cek script diatas, penutupnya sudah terpasang semua kok.

      Delete
  3. Cara Membuat Read More/Baca Selengkapnya tanpa edit template sangat mudah!!!
    Silakan tulis artikel seperti biasanya (tulis saja dulu sampai selsai)
    Letakkan kursor pada tulisan (sesudah kalimat) yang ingin di masukkan Read More.
    Klik Icon Insert jum break.
    Terbitkan/Publish artikel tersebut dan silakan lihat hasilnya.
    Nah itu lah cara mudah membuat read more/baca selengkapnya di blogger tanpa harus pusing dan ribet memasukkan script read more lagi.

    Selamat Mencoba

    ReplyDelete
    Replies
    1. tapi kan capek mas, untuk menggunakan tools itu di setiap posting.
      Udah gitu nanti pada halaman home, tampilannya di setiap artikel jadi tidak sama dan sesuai.

      kalau menurut saya sih lebih baik otomatis. Jadi, kita hanya tinggal posting deh :D

      Delete
  4. POSTINGAN DI SINI SANGAT BAGUS-BAGUS DAN SAYA SANGAT MENYUKAINYA.
    SUKSES SELALU SOB

    ReplyDelete
  5. mas gak ada kotak Expand Widget Template. di blog saya?
    gimana nih???
    nih screenshotnya https://www.facebook.com/photo.php?fbid=647430115274356&l=339c084842

    ReplyDelete
    Replies
    1. sudah diperbaiki mas artikelnya.
      Maaf yah itu postingan lama, kalau template baru sudah tidak ada Expand Widget Template.

      Delete
  6. Makasi mas, tadi baru saja saya coba dan berhasil, meski yang di kode ada sedikit kendala, perlu beberapa kali coba peletakannya..

    mas, boleh mintajadi blog teman gak??
    -kujays.blogspot.com-

    ReplyDelete
    Replies
    1. iya mas benar sekali memang harus menyesuaikan. Karena tidak semua template peletakkan posisinya sama.
      ^^

      Delete
  7. ini udah bisa tapi g muncul muncul tulisan read more nya..??
    gmana yah..??

    ReplyDelete
  8. 1.lagi

    ini langsung di save..?
    g di pratinjau dulu..??

    ReplyDelete
    Replies
    1. langsung di save aja boleh, pratinjau juga bisa.

      Delete
  9. ini udah bisa tapi g muncul tulisan read more nya..??

    solusinya gimana..??

    ReplyDelete
    Replies
    1. solusinya : coba ganti link gambarnya dnegan gambar readmoree yg tlah anda upload.

      Delete
  10. Om, mau tanya nih.. ane kan bikin readmore.. nah udah jalan tuh, tapi cuma di halaman home aja.. pas di klik label yang lainnya readmore itu ngga berfungsi ..kira kira gimana ngatasinnya ya?

    ReplyDelete
  11. Gan Kok gk muncul sih tulisannya??
    Mohon SolusiNya

    ReplyDelete

Web Design Blogs W3 Directory - the World Wide Web Directory DMCA.com

Copyright © 2013 IMPOINT Blog . All rights reserved.| Blogger.com File Storage Created by Blogger Tuts | Template