Mar 7, 2009

Automatic Thumbnail and Readmore Function

Readmore function is used to cut our post on homepage, post will appear fully when we click readmore link. You can see my post on homepage. It's cut automatically and if we insert image, it appears thumbnail. This is automatic readmore function with thumbnail. We just need to set up our HTML code. How to?

1. Go to "Layout" click "Edit HTML"
2. Tick on "Expand Widget Templates"
3. Find </head> code
4. Insert this javascript under </head> code

<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script src='http://cebong.ipit.googlepages.com/read-moreotomatis.js' type='text/javascript'/>




Note :

You can cutomize this size

summary_noimg = 430; is post cut height without image
summary_img = 340; is post cut height with image
img_thumb_height = 100; is thumbnail image height
img_thumb_width = 120; is thumbnail image width

5. Find this code

<data:post.body/>



6. Replace with this code below

<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>
<span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> read more &#8220;<data:post.title/>&#8221;</a></span>

</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>



7. Save


Now you can try to post and it cut automatically.

Note :

Please save javascript , here's the URL, http://cebong.ipit.googlepages.com/read-moreotomatis.js, upload to your own filehosting. I can't guarantee if my bandwidth exceeded :D

or download readmore-otomatis-script here

After upload script to your own hosting, replace http://cebong.ipit.googlepages.com/read-moreotomatis.js to your own URL javascript
Source : Kang Jaloee Punya

72 comments:

  1. thank you for this post! =) i tried doing the above steps but it seems i have to impose again XD i can't find the code: [data:post.body/] =( help? *used the alt+f on firefox and there was no code on it*

    also, what would be the ideal filehost that i can use to upload the javascript? ideally a free one?

    i really appreciate that you always help us n00bs whenever we run on problems =)

    ReplyDelete
  2. @animanga: don't miss this step Tick on "Expand Widget Templates"

    ReplyDelete
  3. @anima:do you have googlepages account?

    ReplyDelete
  4. Itulah bong, yang kumaksud dengan Blogger Wedok. Mereka ga neko-neko...
    Expand widget aja belum di checked...:)
    ketika mbaca ini, aku langsung gemes...:)

    Benar katamu, karena ga neko-neko, mereka ga akan pernah merubah footer link credit. Kuamati, Footer creditmu selalu keep intact di setiap templatemu yang dipakai.

    Ini Beda ama pasienku... yang laki-laki, lucu-lucu... dan sering ngeselin...
    Masa', aku sudah 10 kali lebih ketemu orang pake template gubahanku dan mereka mengganti footer credit ... minimal dihapus...
    setelah lihat itu, bibirku muncung kedepan... kesel aku. uwaaaa... uwaaa...

    Tapi, yo wes lah... no problem...nasib...nasib
    emang ini ujian bagi para converter template.

    Aku juga akan rilis template feminin...
    keuntungannya jelas... footer credit selalu utuh
    hem ... heheheheh... ini bisa ningkatin rank. :).... :)

    viva template wedok... :)...

    wekekekek...... :)

    ReplyDelete
  5. @cahaya biru:wkakakakakkaka ngakak aku moco komenmu gyagayagyagaya....doh wetengku loro..HoOh udah diobrak abrok total tetep nyantol xixixiixix

    ReplyDelete
  6. "Expand Widget Templates" - i see. got it working

    about googlepages... i don't have one... and it seems it was already closed by google.. i do have an account for sites.google.com. will that do?

    ReplyDelete
  7. @animanga: yess sites.google.com is a new version of googlepages.. but i've never use that.. it's okey, you can use that script now..I'll ask my friend how to upload to sites.google.com ;)
    it's work now? great...

    ReplyDelete
  8. Hm, nice tutorial!

    ReplyDelete
  9. wee thanks, this is what i need.

    ReplyDelete
  10. @annamonique: :) try it anna...thanks for visiting again
    @kang dede:nice like me
    @animanganiac:great

    ReplyDelete
  11. mba ebong ..
    ng ...
    ng ...
    ng ...

    bahasa indonesiain .. :D

    ReplyDelete
  12. weh salut euyyy udah mulai pake basa londo.. :D

    keep up the good work bonggggg :D

    ReplyDelete
  13. walah.. ra mudheng aq..

    ReplyDelete
  14. @ariefdj: --'
    @om Nara:wkekwkew berhubung ada yg nanya y di jawab
    @kucing:alibi

    ReplyDelete
  15. gmn caranya membuat 1 kolom di bawah 2 kolom sidebar yang tersedia?
    makasih en salam kenal....

    blognya anteb!!!

    ReplyDelete
  16. @genial:bisa dilihat di tutorial http://subagya.blogspot.com :) ada banyak penjelasan hacking di sana atau http://catalog-tutorial.blogspot.com

    ReplyDelete
  17. wah, manteb sekali bong

    ReplyDelete
  18. Not working for me!

    ReplyDelete
  19. @suryaden:hayah
    @me:dont know your url

    ReplyDelete
  20. lah, mbak ebong crito opo to, nang nduwur iku?

    ReplyDelete
  21. critanya koq gitu yah...

    ReplyDelete
  22. Wah, gitu ternyata caranya..!
    nice share gan.. :D blognya keren..

    ReplyDelete
  23. I love the fact that you continually help people with the use of your templates! Yours is the first one that I actually put onto my site that worked - and the instructions were easy to follow.

    I actually like Wordpress better than blogger, but wordpress is way too much drama and not very user friendly.

    Question, though - if you look at my page: http://pearlswindow.com, you'll see that the "read more" link is there, however, it shows up at the end of the post, which defeats the purpose.

    I'd like to have a certain amount of text show in addition to the pictures and videos on the main page while if more than say... anything more than 600 characters will be followed by the "read more" link.

    I tried changing the numbers in the HTML code provided, but it still shows the entire post and shows the "read more" link at the bottom, but by the time you actually GET to the read more link - there is nothing left to read.

    PLEASE HELP

    ReplyDelete
  24. @pearl: i've seen your code, looks like you still using my host
    http://cebong.ipit.googlepages.com/read-moreotomatis.js

    Please save javascript , here's the URL, http://cebong.ipit.googlepages.com/read-moreotomatis.js, upload to your own filehosting. I can't guarantee if my bandwidth exceeded :D

    if bandwidth exceeded readmore function won't works properly

    i've gave download link. Download the script and then upload to your own hosting

    ReplyDelete
  25. Mampir... Ikut menambahkan... Jika hasilnya tidak rata kiri-kanan (justify) pada halaman utamanya tambahkan "style='text-align: justify;'" (tanpa tanda kutip sehingga menjadi :
    <div expr:id='&quot;summary&quot; + data:post.id' style='text-align: justify;'> (lihat langkah 6)
    class='rmlink' bisa saja tidak digunakan

    ReplyDelete
  26. Untuk yang versi Indonesia silahkan kunjungi Blogger Tune-Up

    ReplyDelete
  27. Its Great Hack Thanks For Sharing With us I will Soon Do A Post For This On My Blog. It Saves Times And Makes Our Blog Looking Cool. A Little Afford to Setup it given My Blog A Great Look. Keep it up.

    ReplyDelete
  28. kalau xnak ade read more function macamana? tutorial ni untuk wujudkan readmore function kan..

    ReplyDelete
  29. @khazinatul: dihilangkan saja apa yg ditambahkan ketika membuat readmore, i can't write code on comment.

    ReplyDelete
  30. i have the same problem as @pearl's. the whole post is still showing.

    but i have uploaded it to my own hosting. heeeeelp!!

    ReplyDelete
  31. Please! mbak Cebong. Aku baru belajar bikin blog, bisa diliat di http://tjapdesain.blogspot.com Aku coba praktekkan {automatic readmore function with thumbnail} seperti panduan mbak. Tapi kok gagal??? gimana nih, bantu ya...:)

    ReplyDelete
  32. @cekyan: script nya jgn makek yg itu. hosting ku udah overload, exceeded. Tuh kan udah aku kasi catatan

    Note :

    Please save javascript , here's the URL, http://cebong.ipit.googlepages.com/read-moreotomatis.js, upload to your own filehosting. I can't guarantee if my bandwidth exceeded :D

    or download readmore-otomatis-script here
    After upload script to your own hosting, replace http://cebong.ipit.googlepages.com/read-moreotomatis.js to your own URL javascript

    ReplyDelete
  33. Makasih mbak :) maklum masih pemula

    ReplyDelete
  34. Sock and only sock

    ReplyDelete
  35. This comment has been removed by the author.

    ReplyDelete
  36. Hi Cebong Ipiet,

    How did you manage to put a box or border around the HTML code you have shown in this post. I tried to search for that on the internet but could not find anywhere. Can you please give me the code for that. You may write to me at aravindreddy.d@gmail.com.
    Thanks in advance.

    ReplyDelete
  37. erm...how about changing the automatic read more link to full post? can you help me??

    ReplyDelete
  38. @aravind:
    define on your css, for this HTML code background, for example

    .code{
    background:#fff;
    padding:10px;
    border:1px solid #000;
    }

    then when you post HTML code
    put <div class='code'>YOUR HTML CODE</div>

    ReplyDelete
  39. Well, all works, but text formatting in summary is missing... How can I take summary with text (html) formatting? Thank you!

    ReplyDelete
  40. @atomic: script just read text :) any formatting won't effect

    ReplyDelete
  41. hi. i really liked most of ur posts, straight into my favs however, dis is not working as it shows the whole post n den the read more link???
    downloaded dat file...nw wt to do???
    help me

    ReplyDelete
  42. Please save javascript , here's the URL, http://cebong.ipit.googlepages.com/read-moreotomatis.js, upload to your own filehosting. I can't guarantee if my bandwidth exceeded :D

    or download readmore-otomatis-script here
    After upload script to your own hosting, replace http://cebong.ipit.googlepages.com/read-moreotomatis.js to your own URL javascript

    upload it to your own hosting
    you can regist on http://fileave.com

    ReplyDelete
  43. hey nw i got it!! it worked...thanx!
    nw jst need some help in changing my blogs template as i tried ur stuff but still some errors n all!! visit me at http://thepagesofmind.blogspot.com/
    i hope u vl luv it!!

    ReplyDelete
  44. wah jan.. bloge cebong terkenal.. xixixi, nomer loro nek nggo automatic readmore. :D

    ReplyDelete
  45. Bandwithnya dah Exceeded tuh kk Cebong

    bisa minta script js nya?

    kirim via email?

    fazz_frozen_heart@yahoo.com

    thx sebelumnya

    ReplyDelete
  46. @fazz: itu ada link di bawahnya
    http://www.box.net/shared/zhdx2j6v3b
    klik ajah

    ReplyDelete
  47. complicated enough for blogspot but I like blogspot

    ReplyDelete
  48. i cant find the "[data:post.body/]" ! i already tick the Expand Widget Templates. But really i cant find it. Please Help me. :(

    ReplyDelete
  49. thank you this is very useful, i have installed it on my blog
    But the big problem that all read more widget cause is, preventing blogger page to be shown,

    i have add a "guest book" and "sitemap" in a page to my blog, but the read more widget prevent them to appear,
    see this link to understand
    http://al3arabiya.blogspot.com/p/guest-book.html

    how can i stop the "readmore widget" to not work in "pages" .?

    ReplyDelete
  50. yes... this is dillema.. you should decide it :)

    ReplyDelete
  51. Hi Cebong Ipiet...!
    Nice to have your blogpost on my bookmark.It's very instructive i.e you 'read more' post.I've clipped it onto my blog as well.I'm sorry as no permission requested prior to this.Hope you don't mind.Thanks again.

    ReplyDelete
  52. thank you very much!
    it works perfekt!
    i am john from Greece

    ReplyDelete
  53. Weleh...weleh...weleh... tuturial and jvscriptnya top abis. Thanks. Nih buktinya:

    http://peluangusaha101.blogspot.com/

    ReplyDelete
  54. Yeah...thank's a lot tips...It''s work

    ReplyDelete
  55. kok gak ada kode itu di htmlku...jadi sampe skrg gak bs buat read more......

    ReplyDelete
  56. it's v. gooooooooooood

    but how can i fix the problem in for the pages

    plz help

    ReplyDelete
  57. One accessory that many pandora beads women consider a necessity is a handbag. In fact there is such a demand for pandora bracelet ladies handbags in the marketplace that the selection just constantly pandora bracelets ebay increases. As each new season begins there are pandora bracelets uk dozens of new designs of ladies handbags available. pandora charm bracelet Every woman has her own sense of style and therefore she’ll tend to purchase ladies pandora charms handbags that reflect that. For some women they only buy designer ladies handbags. pandora charms bracelets These particular types of ladies handbags are crafted from the finest materials and pandora jewellery carry the names of some of the most celebrated designers in the world. Designer pandora jewelry ladies handbags are very expensive but many women view them as a fashion pandora uk investment.

    ReplyDelete
  58. How can I see full page contents? When I have click on continue reading in newly created page that will not shows any contents, pls help me.

    ReplyDelete
  59. mbak... saya sudah aplod js nya.. tp gak jalan readmorenya ya?!??! saya baca di centrangan Expand Widget Templates itu ada tulisan readmore sampe dua kali... apa itu salah...

    soalnya saya ganti (menimpa langsung) kode [data:post.body/] dengan
    kode di kotak k2 yg banyak di perintahnya mbaknya :(

    ReplyDelete
  60. oooooooooooohh ternyata saya salang 'nimpa'nya mbak... harusnya yg k2 ya yg diganti... sudah beres mbak... makasih ya buat template cantiknya :)

    ReplyDelete
  61. After upload script to your own hosting, replace http://cebong.ipit.googlepages.com/read-moreotomatis.js to your own URL javascript---->>> berarti ni blm pasti y ms.kalo bikin readmore manual caranya gmn mas.....thx

    ReplyDelete
  62. One of the reasons why I like visiting your blog so much is because it has become a daily reference I can use in order to learn new nice stuff. It's like a curiosities box that surprises you over and over again.

    ReplyDelete
  63. Coach outlet online Leading American designer and maker of luxury lifestyle handbags and accessories.Large market in Europe and Canada,UK,USA etc.Welcome to Order!2011 New Style arrive,Free Shipping!

    ReplyDelete
  64. There are opulent and luxury fashion stores in Dubai.Luxury stores in Dubai draw great amount of global visitors in the city.Virtually every brand makes their presence felt in these super stores.The whole UAE is world-famous for its lifestyle stores and one has the unlimited choice of buying finest Silk Carpets, Silver Furniture, Marble Art, Breathing Opulence.

    ReplyDelete
  65. Makasih atas info bagus ini...
    Salam kenal....

    ReplyDelete

Hi, thanks for visiting. You can leave your comment here

 

Ipietoon - Blog Design and Online Business Blogging Since 2008