Membuat Clickable Image Autoreadmore

auto readmore blogger logo 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 = &quot;float&quot; ;
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 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: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 == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<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>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
</b:if>
</b:if>


Ganti diatas dengan kode berikut :

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<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;,&quot;<data:post.url/>&quot;,&quot;<data:post.title/>&quot;);</script>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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.

716 Comments

«Oldest   ‹Older   1 – 200 of 716   Newer›   Newest»
  1. makasih kang infonya, ini sangat bermanfaat :D

  2. thanks sharenya sangat membantu gan?

  3. sangat membantu ?

  4. ilmu baru buat para blogger pemula :) makasih infonya mas.

  5. baru tau gw kalo ada yang kya gini di blogger hha,,

  6. makasih tipsnya, aku juga baru tahu ada image autoreadmore

  7. thanks tipsnya gan ?

  8. pelajaran baru gan?

  9. info nya sangat bagus nie gan,,,,

  10. makasih banyak nih tutorialnya gan,, sangat membantu

  11. wah saya ingin sekali gan menerapkan sekali tapi sayang nih saya masih kurang faham, cz gak ada contohnya nih gan................untuk itu ijin untuk mencobanya gan

  12. tetep gak ngerti nicch,pedhal tinggal masang java script nya kan??

  13. thanks gan tipsnya.?

  14. saya coba dulu bro...
    thanks yah.

  15. bingung nih bro..
    saya lihat demo nya dulu yah.

  16. artikel yang bagus nih..
    thanks yah sudah berbagi ilmu nya.

  17. artike nya cukup bermanfaat juga nih bro..
    semoga bermanfaat juga untuk orang banyak yah.

  18. Tutorialnya bermanfaat untuk memperindah blog, terima kasih ....

  19. coba dan di coobaa!!
    lumayan untuk mempercantik blog ..

  20. terimakasih gan teriknya sangat bermanfaat banget buat saya,.
    saya coba gan,.

  21. autoredmore... dengan image... pasti keren... thanks dah share y kk

  22. makasih buat triknya....perlu dicoba nih

  23. masih banyak info nya ,,,,,
    dan salam kenal aja ,,,,,

  24. thanks for sharing it mas...
    memang kadang2 tulisan readmore saja terlihat membosankan...

  25. Terima kasih udah berbagi ilmu bloggernya.

  26. tips n triknya kerna gan,,entar ane coba sapa tau cocok ma blog ane thanks sharnya

  27. Bertambah satu ilmu ngeblog yaitu membuat clickable image autoreadmore

  28. ikutan komengtar ya gan :)

  29. Keren Article nya gan...Thxz

  30. terima kasih infonya... sukses selalu mas bro

  31. itu kalo cliksore itu apa ya mas?


    oh ini buat readmore itu ya. keren keren


    Terima kasih atas infonya

  32. Siap dicoba, mudahan ketemu tuh kode, maklum tiap2 template kadang2 berbeda. Tenkiyu Mas infonya. by julak

  33. makasih ya infonya bermanfaat bgt...

  34. image autoreadmore ada pengaruhnya dengan ranking google ga ya?

  35. Keren Article nya gan....Trims

  36. salam kenal ya,.. sukses

  37. salam jaya,. terimakasih infonya/.,.

  38. salam kenal ya.,.

  39. ok gan infonya?

  40. terimakasih atas tutuorialnya,,,

  41. Saya lebih senang yg manual mas. :D

  42. wah, manfaat nih gan ..
    thanks ya

  43. nice posting yeah....

  44. bagus sekali bisa di coba yah

  45. terimaksih atas infonya

  46. salam kenal ya.,. saya suka postingan ini menarik infonya

  47. hidup ini sangat berarti bagi info

  48. infonya saya suka

  49. saya suka berita ini

  50. informasi yang menarik nih
    selain itu bermanfaat juga
    thanksnya udah share

  51. Untuk para Blogger pasti akan sangat membatu.

  52. Wah menarik, tar aku coba deh. makasi.

  53. artikel membuat click image autoreadmore dah saya baca berkali kali, saatnya ganti artikel..

  54. Bisa dijadikan acuan nih..makasih infonya.

  55. kembali berknjung gan ... :)

  56. Bagus infonya...sukses terus..nice share bro...
    http://sarahnetslawi.blogspot.com
    http://umidansarah.blogspot.com

  57. yah belum ganti artikel, dah hafal diluar kepala cara membuat clikable image autoreadmore karena dah saya baca berkali kali, ga percaya? silakan di tes/ dikasih pertanyaan.
    wk wk wk wk wk wk

  58. wah agak kurang ngerti nih sob hehe

  59. ya neh sob jadi kurang ngerti saya juga...

  60. Mantaaaapp gan..Makasih bnyak infonya...

  61. Artikel yg sngaat menarik....

  62. Saya kurang Paham Gan....?

  63. Info yg sngat menarik..
    Makasih bnyak infonnya...

  64. Nice post....

  65. mantap tuh ,,. thanks infonya

  66. terimaksih banyak atas scriptnya gan...

  67. wah trik yang ane cari neh gan, salam kenal dan izin praktek

  68. makasih gan buat infonya..

  69. Clickable image autoreadmore memang sangat berguna dan bermanfaat, makasih ya......

  70. mantaapppp....nice info gan

  71. info yang bermanfaat sekali...
    ditunggu ea tips dan tutorial yang lainnya untuk lebih menyempurnakan blog saya yang sangat sederhana ini

  72. Clickable image autoreadmore dah saya pelajari, saatnya ganti tips yang lain, komentar saya juga dah banyak, tapi saya tertib satu hari kirim 1 saja, jangan dihapus ya, terimakasih

  73. menatik seklai untuk di coba gan, mantap dach . . .

  74. Thanks sharenya :)

  75. saya landgsung mempelajari saja,salam kenal dan semoga sukses...

  76. terimaksih ya atas infonya,., semoga ilmunya bertambah

  77. mantap terus ya .,. jika anda ingin memesanan obat herbal dari kulit manggis bisa konfirmasi ke sini www.obatalternatif.biz/cara-pemesanan-jus-kulit-manggis-xamthone/

  78. mantaf gan, thanks for share

  79. image autoreadmore memang sip banget, terimaksih tipsnya

  80. ada contohnya gak gan, yg udah jadi

  81. terimakasih atas infonya

  82. wah lumayan nih ilmu baru.

  83. apa kelebihan dan kekurangan image autoreadmore?

  84. Thanks infonya gan..... ilmu baru nich...

  85. mantap juga nie gan info nya,,,,
    semogga bermanffat buat saya,,,,,

  86. makasih bnyak ilmu nya mas bro,,,,

  87. Blog ini memakai autoreadmore tidak? dikasih contohnya ya biar lebih jelas

  88. mantap gan informasinya...
    ane suka.
    moga mnafaat... ya gan,,
    kunjung tmpat ane jg ya..
    ane tunggu.

  89. Waahh... ngga ngerti saya kalo di blogcepot.. hehe :)
    Ijin menyimak postingan yg lain dulu yakk..
    salam kenal...

  90. Mohon diperjelas tentang info clickable image autoreadmore

  91. Blog ane juga pakai auto readmore kayak gini. selain enak dipandang, juga dapat menghemat tempat.

  92. thanx infonya gan..

  93. terimaksih gan atas infonya,.,.

    sangat bermanfaat bgt,,.,.

    http://gamatluxorr.com/obat-alami-kanker-usus/

  94. selamat malam blog

  95. mantap terus infonya ya

  96. Jadi click image itu semacam readmore tapi pada gambar ya....

  97. terima kasih atas infonya bermanfaat sekali

  98. wah ijin peraktek ya ^_^ thnks

  99. thanks infonya sob :) tapi cukup ribet juga ya heheh

  100. nice post..

  101. thanks infonya.....ane coba ya

  102. Sebetulnya saya itu kurang begitu pahan dengan clickable image autoreadmore, tolong diperjelas, juga kalau bisa dijadikan bahan postingan selanjutnya......

  103. terimaksih atas infonya gan,.,.,.

    sangat bermanfaat bgt,.,.,.

    http://gamatluxorr.com/obat-alami-trigliserida/

  104. Makasih share nya gan. :) kayaknya makin mantap aja ya makin hari ini kreasi nya blogspot...

  105. Layak untuk dicoba gan.

  106. semoga infonya bermanfaat bagi semuanya gan

  107. bagus jga infony,,,
    makasih,,,

  108. weeeh komplit nih baik bener di kasih skrip htmlnya juga

  109. menanti artikel baru setelah postingan berjudul membuat clickable image autoreadmore. diupdate ya...

  110. makasih gan,,,,,artikelnya

  111. ok sip ... thanks infonya .

  112. mantaaaaaaaaaf
    thanks gan infonya

  113. Terimakasih gan sudah mau berbagi ilmunya sangat bermanfaat banget. ane akan langsung gunakan deh pada blog ane , buat percbaan barang kali aja berhasil

  114. mksih info nya gan..

  115. Berkunjung lagi ...

  116. Keren informasinya, langsung ane coba gan...
    terima kasih banyak gan.

  117. langsung dicoba gan, info yang berguna sekali..!

  118. saya baru tau nie gan, maklum bloger pemula, ini jadi ilmu buat saya. terimakasih sebelumnya..

  119. terimakasih atas informasinya!!!salam kenal dan semoga sukses... saya lansung mencobanya!!!

  120. makasih infonya gan

  121. keren bin mantab gan ...

  122. ilmu yang bermanfaat, terima kasiiih banyak yah udah mau berbagi...

  123. boleh nih laen kali di coba ..
    :)

  124. nice info.. thanks gan :D

  125. asyikk ,, ilmunya bermanfaat sekali bisa saya kembangkan lagi :)

  126. like this gan,thanks dah berbagi infonya sangat menarik sekali n bermanfaat.lam kenal yah moga sukses selalu.

  127. nice share gan...mksh atas infonya

  128. sangat bermanfaat gan... sukses terus buat blognya,,

  129. sangat membantu ni gan untuk bikin readmore... thx udh berbagi,,

  130. Auto readmore merupakan salah satu hal terpenting untuk sebuah blog, sehingga bisa meminimalisir jumlah posting di halaman utama blog..

  131. tips tentang read morenya sangat bermanfaat mas..

  132. makasih gan infonya..

  133. terima ksih banyak nih infonya, sangat berguna.
    Salam kenal gan..

  134. wah boleh juga nih gan informasinya bisa menarik kalo dipasang di blog...............ijin langsung mencoba gan

  135. trimakasih info

  136. trimakasih info

  137. trimakasih infonya

  138. trimakasih info

  139. trimakasih info

  140. trimakasih info

  141. wah artikel yg sangat bermanfaat dan membantu saya sekali ini :) jadi tambah semangat deh :D thanks yah :)

  142. wah tutorial yg super sekali dan kebanyakan dicari orang nih :) thanks yah ^^

  143. clicable image autoreadmore ..cakep

  144. just a blojhg. tp sungguh rame diluiar dugaaan hehe...

  145. wahh..makasih infonya,...bisa buat percantik blog saya...hehe

  146. than gan infonya... terus ngeblog n semangat.

  147. thank gan infonya

  148. thanx ya infonya....!!

  149. mantap juga ni info.....

  150. wah gan boleh di coba tuh walaupun masih belum paham,thanks atas infonya sangat bermanfaat sekali...........?

  151. gan....ane bookmark dulu ya, secara blog http://aming-ma.com masih menggunakan flatform WP, bikin dulu di blogspot deh...
    btw kira2 ada ngga untuk WP?

    thank

  152. nice info gan...

  153. waduh susah kayanya. maklum newbie. kudu belajar dulu kayanya.

  154. infonya menarik dan menambah pengetahuan baru

  155. Wah ane baru tahu ada trik yang begini, perlu dicoba dan dipraktekan.
    Makasih atas sharingnya Gan :)

  156. bagus nih, bermanfaat bagi pembaca apalagi saya.

  157. makin sukses aja

  158. terima kasih informasi yang sangat bagus

  159. makasih yah salam kenalaja yah

  160. nice info gan...

  161. terimakasih atas inofonya

  162. thanks gan, sngat mmbantu infonya.
    jd wa"san bru

  163. infonya bermanfaat sekali gan.,. sukses terus ya

  164. terima kasih buat imfonya ....

«Oldest ‹Older   1 – 200 of 716   Newer› Newest»

Post a Comment

- Blog ini DoFollow tapi dimoderasi.

- Silahkan gunakan Name Author sebagai Keyword karena Link Live tidak diperkenankan.

- Link taruhan & lendir tidak diperkenankan.