Pada postingan dulu, saya sudah menjelaskan bagai mana cara membuat Auto Read More dengan thumbnail. Akan tetapi kekurangan dari script tadi tidak akan menampilkan thumbnail pada postingan yang tidak disertai gambar.
auto readmore with thumbnail no image for blogspot
Saat ini script telah disempurnakan dengan menggunakan default thumbnail, baik dengan gambar 'no image' atau gambar apa pun yang anda sukai. Screen shootnya seperti ini :

auto readmore dengan default thumbnail no image

Auto Readmore dengan Default Thumbnail

Untuk membuat Auto readmore dengan default thumbnail, anda perlu melakukan 2 langkah mudah
1. Tambahkan JavaSript
2. Tambahkan HTML

01Menambahkan JavaScript
Sebelum melakukan apa pun, saya sarankan backup dulu template anda untuk menghindari hal yang tidak diinginkan.
Untuk menambahkakan kode JavaSript dibawah ini, simpan kode dibawah ini sebelum </head>
<script type='text/javascript'>
 // ganti angka dibawah untuk mengatur jumlah karakter
 summary_noimg = 350;
 summary_img = 280;

 // ganti angka dibawah untuk merubah ukuran thumbnail
 img_thumb_height = 200;
 img_thumb_width = 200;

 // ganti dengan gambar sesuai selera anda
 img_thumb_nosrc = "http://3.bp.blogspot.com/-TSC-t4b1XvQ/UHWqOo4keDI/AAAAAAAAATo/DgshIsz1IBs/s1600/default.png";
</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;

  // this block of code is used to add default thumbnail to post without images
  if(img.length<=1) {
   imgtag = '<div style="clear:both; margin:0 10px 10px 0px;float:left;"><img src="'+img_thumb_nosrc+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></div>';
   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>


02Menambahkan Kode HTML
Cari kode <data:post.body/> dan ganti dengan kode dibawah ini
<b:if cond='data:blog.pageType != "static_page"'>
 <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:right;margin-top:10px'>
   <a expr:href='data:post.url'>
Read More &#187;
   </a>
  </span>

 <b:else/>
  <data:post.body/>
 </b:if>
<b:else/>
 <data:post.body/>
</b:if>


03Simpan template Anda, dan selamat.... Anda telah berhasil menambahkan auto readmore dengan default thumbnail.

FAQ

Saya sudah menggunakan auto radmore yang pertama, bagaimana caranya mengganti dengan auto readmore dengan default thumbnail?
Apabila Anda sudah menggunakan Auto Readmore dengan Thumbnail lama (V.1) cukup mengganti JavaScript pada langkah ke-1.

Semoga bermanfaat....

48 komentar

wah makasih banyak nih... horeee yg ane cari dari seminggu yg lalu udah ketemu... makasih banyak..:) semoga Allah memberikan rahmat yang melimpah kepada anda... aamiiin..:)

Balas

Amiin... makasih do'anya sob

Balas

Assalamualaiku, kang.
Baru sempat lagi nih berkunjung ke blog akang, ternyata udah banyak artikel bagusnya :)

Diluar tema nih, kang...saya mau rikues sama akang sekalian minta solusi. Blog saya kenapa sekarang ga bisa masuk ke edit html, ya?
Selalu aja redirect ke halaman kosong? Saya udah cek ke webmaster tool gak ada yg aneh. Kalau ada solusinya mohon di share ya kang?

Nuhun sebelumnya semoga akang selalu dilimapahkan kesehatan dan keseksesan...amin.

Balas

Maaf, kang... salam saya diatas kurang huruf "m".
Maaf...

Balas

Wa'alaikum salam... kekurangan M semoga di ma'fu :) dan terimakasih do'anya...

Saya belum mengalami hal kayak di atas sob, coba saja trik ini. Simpan kode dibawah ini sebelum </head>, kalau tidak bisa di blog itu, coba backup dulu templatenya, tambahkan di blog lain baru upload lagi..

<script language="JavaScript" type="text/javascript">
if (top.location != self.location) top.location = self.location;
</script>

Balas

Itu dia msalahnya kang..saya nggak bisa masukin script yg akang berikan ke template saya. Karena setiap kali saya klik menu "template", selalu aja di redirect ke halaman kosong :(
Jd, sama skali ga bsa masuk edit htm.

Balas

Bisa backup ga? kalau bisa coba backup dulu.. edit di blog lain, baru upload ulang

Balas

Solved, kang!
Jadi caranya, pertama kali saya klik menu 'template', saya harus buru2 klik tanda X atau "Stop Loading This Page" yang ada diatas Browser. Cuma musti cepet :)
Kalau berhasil baru deh saya bisa masuk ke edit html dan baru deh bisa masukin script yang akang kasih.

Makasih banyak bantuannya ya kang!

Sukses selalu wat kang Ismet.

Assalamualaikum.

Balas

Thanks mas bro... mangstab

Balas

Keren sob, patut dicoba.

Salam sukses selalu...

Balas

PERLU DI COBA NI ,,,, VISIT MY BLOG EA indra-smpn4.blogspot.com

Balas

solved kang!

2 hari ini ada yang aneh sama blog saya. trnyata googlecodenya udah gak work

Balas

congrats deh sob... harus punya backup JS nya sob..

Balas

Kang, sy lagi nih... hehehe... Kang ismet kan udah smpet liat blog saya, whatskpop.blogspot.com (thx before)

Itu kan pake auto read more (bagus sih) CUMA, pos sebelum di klik read more itu keliatan seperti berantakan dan nyambung ky gitu...

kl cuma memperbaiki aja bisa gak kang? (tidak dihilangkan). pasti Kang ismet ngerti maksud sy

Mohon bantuannya dong kang... Terima kasih.. Tuhan Memberkati

Balas

heheh.. gpp ko bolak-balik. susunan auto readmore memang seperti itu, jadi teks berlanjut ke pinggir. paling solusinya hilangkan auto readmorenya, langkahnya tinggal membalik langkah pada tutorial ini, yaitu :
1. Backup dulu template takut gagal
2. Hapus JavaScript yang hampir sama kaya No. 1
3. Kode no.2 ganti lagi dengan <data:post.body/>

Cuman nantinya semua postingan harus di edit manual, begitu juga postingan baru dengan mengkilik gambar "Insert Jump Break" hasilnya nanti kaya --> http://ujicoba02.blogspot.com

Kalau tombolnya mau seperti semula, masukan kode diwah, sebelum ]]></b:skin>

.jump-link{margin-bottom:5px;float:right}
.jump-link a{color:#FFF;background:#3A3B3D;padding:6px 12px;font-size:12px;line-height:12px;display:block;text-decoration:none}
.jump-link a:hover{color:#FFF;background:#E61D02;text-decoration:none}

Balas

Ass

Akhirnya, yang ini bisa kepake di Blogsaya
Makasih saranya ya ! Bermanfaat banget !

Wass :)

Balas

Kang, bisa ga tampilan thumbnailnya seperti popular post. kalo popular post kan imagenya disesuaikan dan di potong otomatis. jadi thumbnailnya ga pepat gitu. apa harus memotong gambar yang akan di posting dulu ya bagus nya? makasih kang, maaf dah ngerepotin :)

Balas

artikel yang seperti ini jarang di ulas, sudah mute2r nyariinnya. terima kasih banyak mas utk sharingnya

Balas

Alhamdulillah... setelah berkelana ke berbagai blog tutorial tentang auto read more, eh, lagi-lagi kang ismet yang menyelamatkan saya :)
hatur nuhun pisan kang... sangat bermanfaat!

Balas
Komentar ini telah dihapus oleh pengarang.

kang ismet,,,
gimana cara mengatasi error 'NO IMAGE'
Mohon pencerahannya

Balas

ada url blognya sob? pake scriptnya darimana?

Balas

mohon bantuan
sy punya blog tentang rental mobil
saya pernah otak atik dan jadi salah ga karuan
dah saya ganti template apa apa jg tetep rusak

bagaimana cara mengatasi nya kang
hatur nuhun pisannnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn
alamat blog nya we we we sewa-mobil-mewah-bandung.blogspot.com

Balas

blog sy rusak kang
kalo di klik postingan tampil dobel dobel
ini alamat nya
sewa-mobil-mewah-bandung blogspot titik com
bagaimana cara benerinya

Balas

ganti template aja sob.. daripada puyeng

Balas

Bro, mau tanya nih kalo mau hapus Thumbnail di read morenya gmana?.
Tolong bantuannya hehe :D

Balas

hapus kode ini :
imgtag = '<div style="clear:both; margin:0 10px 10px 0px;float:left;"><img src="'+img_thumb_nosrc+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></div>';
dan ini :
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>';

Balas

<b:if cond='data:blog.metaDescription == &quot;&quot;'>
<!-- Then use the post body as the schema.org description,
for good G+/FB snippeting. -->
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<b:else/>
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</b:if>


yang yang mana yang mesti diganti kang...?

Balas

kadang suka keder kalau liat kode sepotong gitu :) trial and error aja coba dua-duanya

Balas

Kalo bawaan template aslinya dh ada read morenya mau diganti pake read more yg ini, harus ngehapus apa dulu? ....

Balas

Salam kenal untuk Kang Ismet dan sekalian numpang tanya.
Kalau tampilan auto readmore-nya di kasih align: justify, bisa ga Kang?
Kalau bisa, naruh kode justifynya dimana>
Trims sebelumnya.

Balas

ya coba z tambah css ini .post-body {
text-align: justify;
}
tambahkan juga tag kondisional kalo cma home page nya saja yang ingin diberi style justify

Balas

Tengkiu banget, sob!
Nggak kepikiran naruhnya di .post-body :D
Sekali lagi makasih ya

Balas

thank you :D www.khmerleadership.org

Balas

Kang..kalo pake auto read more thumbnail ini bisa nggak ditambahin social share button dibawah post nya?

blog saya setelah pake autoreadmore dari si akang tidak ada tampilan share button nya..
pengennya sih di homepage share button nya tidak mucul, tapi di bawah postingan muncul..

mohon bantuannya, tengkiuu ya kang..

Balas

Izin nyimak aja yah !! :D
visit http://river-creative.blogspot.com/

Balas

Wah Thanks Kang, Akhirnya bisa nih :D

Balas

Kalo untuk template zikazev sendiri gimana kang? Pembawaannya kan udah ada script thumbnailnya dan defaultnya tidak memunculkan gambar. Kalo defaultnya ingin dirubah ke no image gimana kang?
Soalnya udah saya coba otak-atik yang ada malah terjadi eror. Hatur nuhun.

Balas
Komentar ini telah dihapus oleh pengarang.

kalo nambahin effect hover ke thumbnailnya gmana gan

Balas

makasih Kang Ismed, artikelnya bermanfaat

Balas

makasih kang ismet, yang ini baru work di template saya

Balas

Makasih banyak. Ini telah melengkapi blog gua Kang :)

Balas

Maksih Gan tutorialnya bermanfaat bgt thanks ya Gan good luck. . .

Balas

Poskan Komentar


×
Chat