Seperti yang kita tahu, sudah tersedia scrip Auto readmore untuk Blogger disamping read more bawaan Blogger itu sendiri (jump link). Script auto readmore itu sendiri setahu saia (yg sering saia jumpai) tidak mendukung clickable image langsung ke alamat postingan (ketika gambar di klik, tidak menuju url postingan) tetapi ke alamat url gambar itu sendiri. Hal ini mungkin menggangu untuk blog khusus gallery ato photo
Berikut ini langkah2 untuk mengaktifkan clickable image pada auto readmore (jangan lupa klik Expand Widget Templates)
Masuk ke Edit HTML dan cari kode berikut :
<script type='text/javascript'>var thumbnail_mode = "float" ;summary_noimg = 500;summary_img =70;img_thumb_height = 230;img_thumb_width = 280;</script><script type='text/javascript'>//<![CDATA[/*Auto-readmore link script, version 2.0 (for blogspot)(C)2008 by Anhvovisit 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:0;margin:0"><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>
Ganti kode berwarna merah dengan kode berikut
function createSummaryAndThumb(pID, pURL, pTITLE){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:0;margin:0"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></a></span>';summ = summary_img;}
Terus, cari kode ini
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/><b:else/><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></b:if><b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if></b:if>
Ganti diatas dengan kode berikut :
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/><b:else/><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/>","<data:post.url/>","<data:post.title/>");</script></b:if><b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if></b:if>
Save
Untuk demonya, sobat bisa liat di demo Poster Inc Blogger Template
Pic : http://www.sodiycxacun.web.id/2011/10/auto-read-more-thumbnail-tanpa-java.html
** Kode auto readmore berdasarkan template Poster Inc.
Description: Membuat Clickable Image Autoreadmore
Rating: 5
Reviewer: 98827 ulasan
Item Reviewed: Membuat Clickable Image Autoreadmore
Rating: 5
Reviewer: 98827 ulasan
Item Reviewed: Membuat Clickable Image Autoreadmore
Anda baru saja membaca artikel yang berkategori Tutorial
dengan judul Membuat Clickable Image Autoreadmore. Anda bisa bookmark halaman ini dengan URL https://kreativitas-bersama.blogspot.com/2012/09/membuat-clickable-image-autoreadmore.html. Terima kasih!
Ditulis oleh:
Unknown - Selasa, 11 September 2012
Wah , Thenk you ni ,, buat artikelnya ..!!
BalasHapus