3/11/2012

Membuat Clickable Image Autoreadmore

3/11/2012 716
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:

  1. makasih kang infonya, ini sangat bermanfaat :D

    ReplyDelete
  2. thanks sharenya sangat membantu gan?

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

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

    ReplyDelete
  5. makasih tipsnya, aku juga baru tahu ada image autoreadmore

    ReplyDelete
  6. makasih banyak nih tutorialnya gan,, sangat membantu

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

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

    ReplyDelete
  9. saya coba dulu bro...
    thanks yah.

    ReplyDelete
  10. bingung nih bro..
    saya lihat demo nya dulu yah.

    ReplyDelete
  11. artikel yang bagus nih..
    thanks yah sudah berbagi ilmu nya.

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

    ReplyDelete
  13. Tutorialnya bermanfaat untuk memperindah blog, terima kasih ....

    ReplyDelete
  14. coba dan di coobaa!!
    lumayan untuk mempercantik blog ..

    ReplyDelete
  15. terimakasih gan teriknya sangat bermanfaat banget buat saya,.
    saya coba gan,.

    ReplyDelete
  16. autoredmore... dengan image... pasti keren... thanks dah share y kk

    ReplyDelete
  17. makasih buat triknya....perlu dicoba nih

    ReplyDelete
  18. masih banyak info nya ,,,,,
    dan salam kenal aja ,,,,,

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

    ReplyDelete
  20. Terima kasih udah berbagi ilmu bloggernya.

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

    ReplyDelete
  22. Bertambah satu ilmu ngeblog yaitu membuat clickable image autoreadmore

    ReplyDelete
  23. ikutan komengtar ya gan :)

    ReplyDelete
  24. Keren Article nya gan...Thxz

    ReplyDelete
  25. terima kasih infonya... sukses selalu mas bro

    ReplyDelete
  26. itu kalo cliksore itu apa ya mas?


    oh ini buat readmore itu ya. keren keren


    Terima kasih atas infonya

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

    ReplyDelete
  28. makasih ya infonya bermanfaat bgt...

    ReplyDelete
  29. image autoreadmore ada pengaruhnya dengan ranking google ga ya?

    ReplyDelete
  30. Keren Article nya gan....Trims

    ReplyDelete
  31. salam jaya,. terimakasih infonya/.,.

    ReplyDelete
  32. terimakasih atas tutuorialnya,,,

    ReplyDelete
  33. Saya lebih senang yg manual mas. :D

    ReplyDelete
  34. salam kenal ya.,. saya suka postingan ini menarik infonya

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

    ReplyDelete
  36. Untuk para Blogger pasti akan sangat membatu.

    ReplyDelete
  37. Wah menarik, tar aku coba deh. makasi.

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

    ReplyDelete
  39. Bisa dijadikan acuan nih..makasih infonya.

    ReplyDelete
  40. kembali berknjung gan ... :)

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

    ReplyDelete
  42. 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

    ReplyDelete
  43. wah agak kurang ngerti nih sob hehe

    ReplyDelete
  44. ya neh sob jadi kurang ngerti saya juga...

    ReplyDelete
  45. Mantaaaapp gan..Makasih bnyak infonya...

    ReplyDelete
  46. Artikel yg sngaat menarik....

    ReplyDelete
  47. Saya kurang Paham Gan....?

    ReplyDelete
  48. Info yg sngat menarik..
    Makasih bnyak infonnya...

    ReplyDelete
  49. terimaksih banyak atas scriptnya gan...

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

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

    ReplyDelete
  52. mantaapppp....nice info gan

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

    ReplyDelete
  54. 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

    ReplyDelete
  55. menatik seklai untuk di coba gan, mantap dach . . .

    ReplyDelete
  56. saya landgsung mempelajari saja,salam kenal dan semoga sukses...

    ReplyDelete
  57. terimaksih ya atas infonya,., semoga ilmunya bertambah

    ReplyDelete
  58. 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/

    ReplyDelete
  59. image autoreadmore memang sip banget, terimaksih tipsnya

    ReplyDelete
  60. ada contohnya gak gan, yg udah jadi

    ReplyDelete
  61. terimakasih atas infonya

    ReplyDelete
  62. apa kelebihan dan kekurangan image autoreadmore?

    ReplyDelete
  63. Thanks infonya gan..... ilmu baru nich...

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

    ReplyDelete
  65. makasih bnyak ilmu nya mas bro,,,,

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

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

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

    ReplyDelete
  69. Mohon diperjelas tentang info clickable image autoreadmore

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

    ReplyDelete
  71. terimaksih gan atas infonya,.,.

    sangat bermanfaat bgt,,.,.

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

    ReplyDelete
  72. Jadi click image itu semacam readmore tapi pada gambar ya....

    ReplyDelete
  73. terima kasih atas infonya bermanfaat sekali

    ReplyDelete
  74. wah ijin peraktek ya ^_^ thnks

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

    ReplyDelete
  76. thanks infonya.....ane coba ya

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

    ReplyDelete
  78. terimaksih atas infonya gan,.,.,.

    sangat bermanfaat bgt,.,.,.

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

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

    ReplyDelete
  80. semoga infonya bermanfaat bagi semuanya gan

    ReplyDelete
  81. weeeh komplit nih baik bener di kasih skrip htmlnya juga

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

    ReplyDelete
  83. mantaaaaaaaaaf
    thanks gan infonya

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

    ReplyDelete
  85. Keren informasinya, langsung ane coba gan...
    terima kasih banyak gan.

    ReplyDelete
  86. langsung dicoba gan, info yang berguna sekali..!

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

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

    ReplyDelete
  89. keren bin mantab gan ...

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

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

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

    ReplyDelete
  93. nice share gan...mksh atas infonya

    ReplyDelete
  94. sangat bermanfaat gan... sukses terus buat blognya,,

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

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

    ReplyDelete
  97. tips tentang read morenya sangat bermanfaat mas..

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

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

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

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

    ReplyDelete
  102. clicable image autoreadmore ..cakep

    ReplyDelete
  103. just a blojhg. tp sungguh rame diluiar dugaaan hehe...

    ReplyDelete
  104. wahh..makasih infonya,...bisa buat percantik blog saya...hehe

    ReplyDelete
  105. than gan infonya... terus ngeblog n semangat.

    ReplyDelete
  106. thanx ya infonya....!!

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

    ReplyDelete
  108. 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

    ReplyDelete
  109. waduh susah kayanya. maklum newbie. kudu belajar dulu kayanya.

    ReplyDelete
  110. infonya menarik dan menambah pengetahuan baru

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

    ReplyDelete
  112. bagus nih, bermanfaat bagi pembaca apalagi saya.

    ReplyDelete
  113. terima kasih informasi yang sangat bagus

    ReplyDelete
  114. makasih yah salam kenalaja yah

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

    ReplyDelete
  116. infonya bermanfaat sekali gan.,. sukses terus ya

    ReplyDelete
  117. terima kasih buat imfonya ....

    ReplyDelete