Auto Read Mode dengan Thumbnail No Image di Blogger
0 views
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.

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 :
1. Tambahkan JavaSript
2. Tambahkan HTML
Apabila Anda sudah menggunakan Auto Readmore dengan Thumbnail lama (V.1) cukup mengganti JavaScript pada langkah ke-1.
Semoga bermanfaat....

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
Untuk membuat Auto readmore dengan default thumbnail, anda perlu melakukan 2 langkah mudah1. 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
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
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 » </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?Semoga bermanfaat....
48 komentar
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
5. Untuk menghapus komentar, geser kursor ke sebelah kanan komentar Anda.
image quote pre code
Soalnya udah saya coba otak-atik yang ada malah terjadi eror. Hatur nuhun.
visit http://river-creative.blogspot.com/
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..
Kalau tampilan auto readmore-nya di kasih align: justify, bisa ga Kang?
Kalau bisa, naruh kode justifynya dimana>
Trims sebelumnya.
text-align: justify;
} tambahkan juga tag kondisional kalo cma home page nya saja yang ingin diberi style justify
<!-- Then use the post body as the schema.org description,
for good G+/FB snippeting. -->
<div class='post-body entry-content' expr:id='"post-body-" + 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='"post-body-" + 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...?
Tolong bantuannya hehe :D
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>';
kalo di klik postingan tampil dobel dobel
ini alamat nya
sewa-mobil-mewah-bandung blogspot titik com
bagaimana cara benerinya
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
gimana cara mengatasi error 'NO IMAGE'
Mohon pencerahannya
hatur nuhun pisan kang... sangat bermanfaat!
Akhirnya, yang ini bisa kepake di Blogsaya
Makasih saranya ya ! Bermanfaat banget !
Wass :)
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
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}
2 hari ini ada yang aneh sama blog saya. trnyata googlecodenya udah gak work
Salam sukses selalu...
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.
Maaf...