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

76 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. yes, its working now. thank you!

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

    ReplyDelete
  10. mba ebong ..
    ng ...
    ng ...
    ng ...

    bahasa indonesiain .. :D

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

    keep up the good work bonggggg :D

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

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

    blognya anteb!!!

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

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

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

    ReplyDelete
  17. i found the crystal package most interesting one at www.auracamera.com

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

    ReplyDelete
  19. 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
  20. @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
  21. 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
  22. @hendriono:makasih mas koreksinya

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

    ReplyDelete
  24. 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
  25. kalau xnak ade read more function macamana? tutorial ni untuk wujudkan readmore function kan..

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

    ReplyDelete
  27. 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
  28. 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
  29. @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
  30. Makasih mbak :) maklum masih pemula

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

    ReplyDelete
  32. 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
  33. erm...how about changing the automatic read more link to full post? can you help me??

    ReplyDelete
  34. @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
  35. Well, all works, but text formatting in summary is missing... How can I take summary with text (html) formatting? Thank you!

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

    ReplyDelete
  37. 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
  38. 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
  39. 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
  40. wah jan.. bloge cebong terkenal.. xixixi, nomer loro nek nggo automatic readmore. :D

    ReplyDelete
  41. Bandwithnya dah Exceeded tuh kk Cebong

    bisa minta script js nya?

    kirim via email?

    fazz_frozen_heart@yahoo.com

    thx sebelumnya

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

    ReplyDelete
  43. complicated enough for blogspot but I like blogspot

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

    ReplyDelete
  45. 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
  46. yes... this is dillema.. you should decide it :)

    ReplyDelete
  47. 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
  48. thank you very much!
    it works perfekt!
    i am john from Greece

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

    http://peluangusaha101.blogspot.com/

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

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

    ReplyDelete
  52. it's v. gooooooooooood

    but how can i fix the problem in for the pages

    plz help

    ReplyDelete
  53. 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
  54. When UGG Classic Tall moment in Classic Tall Boots time Classic Tall uggs pertains find ugg 5815 expensive jewelry regarding UGG Cardy Mother you'll notice Cardy Boots engagement rings is among the actual
    Classic Tall uggs ideal presents you can actually produce your mother. You Cardy Ugg boots can find explanation Cardy uggs why folks should display his or her's mother's ugg 5819 with gifts. A birthday and mom's birthday are usually a couple of the extremely UGG Classic Short

    ReplyDelete
  55. 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
  56. Holen Sie thomas sabo was Sie brauchen, wenn Sie thomas sabo schmuck sie benötigen und wo immer thomas sabo Kette Sie brauchen it.Once das Budget für diese thomas sabo 2010 Ornamente ist dann der nächste Aspekt, der berücksichtigt thomas sabo Halsschmuck wird der Schnitt des Diamanten Bedürfnisse fixiert. Wenn man thomassabo online shop die Planung ist der Vorschlag zu einer thomas sabo onlineshop das Leben lieben, dann die am meisten bevorzugte sabo schmuck Diamanten sind die Prinzessin Diamanten. Die folgenden thomas sabo shop Zeilen in diesem Artikel frönen ein bisschen tiefer in das Konzept thomas sabo shop online in Bezug auf die verschiedenen Teilstücke von Diamanten. Der Schnitt thomas sabo preisvergleich ist hauptsächlich in vier Typen, die guten Schnitt thomas sabo preise , sehr guter Schnitt, gut geschnitten und ziemlich gut thomas sabo Armband abgeschnitten sind geteilt. Je besser der Schnitt dieser Edelsteine desto Brillanz sie emittieren. Die verschiedenen Arten von Schnitten auf thomas sabo Anhänger dem Markt verfügbar sind Princess Cut, Marquise geschnitten, Oval schneiden, Birne geschnitten, thomas sabo charms , Brilliant-Runde, Radiant schneiden, Smaragd geschnitten und Kissen geschnitten. Je niedriger die Klarheit desto niedriger wird der Preis sein. Es gibt verschiedene Grade der Klarheit, die im Netz zu finden sind.

    ReplyDelete
  57. 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
  58. oooooooooooohh ternyata saya salang 'nimpa'nya mbak... harusnya yg k2 ya yg diganti... sudah beres mbak... makasih ya buat template cantiknya :)

    ReplyDelete
  59. 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
  60. 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
  61. 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
  62. 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
  63. Makasih atas info bagus ini...
    Salam kenal....

    ReplyDelete

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

 

Related Websites

Blogroll

Ipietoon-Cute Blog Design Blogging Since 2008