mas template

Cara Membuat Read More Otomatis Plus Thumbnail Versi 3

Lagi-lagi mengenai readmore, setelah sebelumnya saya membahas read more versi 1 dan versi 2. Kali ini saya akan berbagi dengan temen-temen semua tentang cara membuat readmore otomatis plus thumbnail (versi 3). Sebenarnya apa sih pentingnya readmore pada sebuah blog? Salah satunya adalah dengan menggunakan read more pada blog kita, memungkinkan artikel yang di tampilkan pada halaman utama blog kita akan terpotong alias lebih pendek, sehingga menghemat halaman juga. Lalu, bagi yang sebelumnya sudah pernah mencoba membuat read more ini dengan cara yang manual, kali ini kita akan membuatnya dengan cara otomatis.

readmore maskolis

O..ya, bagi temen-temen blogger semua yang sebelumnya telah membuat read more manual, silahkan edit terlebih dahulu kode pada templatenya ke dalam kode yang semula. Silahkan perhatikan kode di bawah ini yang merupakan contoh pembuatan readmore yang manual :
<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Readmore</a>
</b:if>
<div style='clear: both;'/>
Silahkan hapus kode yang saya tandai dengan huruf cetak tebal. Namun kemungkinan, kode pada setiap blog akan berbeda, jadi sesuaikan saja.....he..he..he...

Setelah selesai melakukan langkah-langkah diatas, lalu kita lanjutkan ke langkah berikut ini. Silahkan masuk terlebih dahulu ke menu edit html kemudian centang pada expand widget template, oya...jangan lupa backup dulu templatenya. Agar mudah dikembalikan seperti semula jika terjadi kesalahan, yaitu dengan cara klik download template lengkap. Setelah itu, silhakan letakan script di bawah ini tepat di atas kode </head>,setelah itu jangan lupa untuk menyimpannya.
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 200;
summary_img = 200;
img_thumb_height = 100;
img_thumb_width = 100;
</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:0px 10px 5px 0px;"><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>
Nah, belum selesai, selanjutnya silahkan cari kode seperti ini <data:post.body/>, nah kalau udah ketemu, ganti kode <data:post.body/> dengan kode dibawah ini:
<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>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
Catatan:
  • img_thumb_height = 100;, merupakan tinggi thumbnail dalam piksel. 
  • img_thumb_width = 100;, merupakan lebar thumbnail dalam piksel. 
  • summary_noimg = 200;, yaitu untuk menentukan banyaknya karakter yang ingin ditampilkan pada posting yang tanpa thumbnail atau gambar. 
  • summary_img = 200; , yaitu untuk menentukan banyaknya karakter yang ingin ditampilkan pada posting dengan thumbnail atau gambar.  
  • Pada bagian Read More, silahkan anda ubah sesuai keinginan, misalnya; selanjutnya, dll.

Selesailah sudah, selamat mencoba dan silahkan lihat hasilnya.
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Creating Website

53 comments:

  1. cara mem back up tempalate gmn?

    ReplyDelete
  2. @shavira:
    Klik download full template mbak, untuk berjaga0jaga nanti sewaktu pengeditan ada yg salah

    Makasih udah mampir

    ReplyDelete
  3. bro, template jhonny backup udah pake yah? tapi kok thumbnailnya gak otomatis keluar yah?

    ReplyDelete
  4. Terima Kasih Maskolis, Sip Bang Infonya Banyak Skrip saya yang berbenturan jdi berantakan :)
    Read More Penting Tuk Menghemat Page

    ReplyDelete
  5. Maturnuwun kang Kholis atas inponya...........

    ReplyDelete
  6. Makasih juragan untuk tutorial cara membuat read more diatas sangat berguna banget buat ane.

    ReplyDelete
  7. terima kasih gan !, tapi untuk ditemplate saya, code diatas berhasil di data.post.body yang kedua.

    ReplyDelete
  8. kode ada 3 yang diganti yang mana???????

    ReplyDelete
  9. mas.. perasaan kalo pake readmore diatas loading blognya jadi berat ya?

    ReplyDelete
  10. mas untuk april 2013 readmore diblogger dah gak ada lagi menu Expand Widget Templates.jadi head dan post body gak ada
    gmn mau edit

    ada solusi lain gak agar bisa buat read more diblogger
    makasih

    ReplyDelete
  11. saya mencari cari artikel ini dari satu blog ke blog yang lain, hasilnya nihil, alias ngk jadi. saya memakai template DTE 210492

    ReplyDelete
  12. tulisan yang ini dimn ya
    Pada bagian Read More, silahkan anda ubah sesuai keinginan, misalnya; selanjutnya, dll.
    winkomnet.blogspot.com

    ReplyDelete
  13. tulisan judulnya kekecilan
    huft gak seru

    ReplyDelete
  14. ALHAMDULILLAH ya Alloh. setelah berkali2 gagal. akhirnya berhasil.. makasih maskolis .. saya berhasil di "" yang ke 2

    ReplyDelete
  15. berhasil... berhasil hore thank you sis....http://akuntansi-maissya.blogspot.com/search/label/MY%20JOB

    ReplyDelete
  16. gan... cara ngilangin tulisan komentar di bwah readmore tu gmna...

    ReplyDelete
  17. Terima kasih mas artikelnya berguna banget buat saya, saya ikuti step by step memang ada yang berbeda di koding blog saya. dan ternyata bisa juga. jreng... Keep blogging

    ReplyDelete
  18. Ijin coba gan,,,,
    mampir gan , cyber-hard.blogspot.com

    ReplyDelete
  19. selam teşekkürler sağ olun çok faydalı bir blog

    ReplyDelete
  20. kode ini ditemplate ada beebrap mas, yang diganti yang keberapa ?

    ReplyDelete
  21. mas kenapa di artkelnya ada tulisan normal false false flase in-sexone sexone, padahl dah berhasil rdmorenya

    ReplyDelete
  22. ko punya saya banyak banget data:post.body nya
    yg diganti yg mana ya ?

    ReplyDelete
  23. Master yang 1 ini memang top, udah lama nyari2 dan nyoba2 baru disini nemu yang pas :)

    ReplyDelete
  24. Terima kasih maskolis atas Template serta Tutorialnya
    sekarang blog saya jauh lebih rapi dan bagus.
    Kunjungi blog saya :
    FREE NEW MOVIES AND FILM

    ReplyDelete
  25. Sungguh aneh tapi nyata mas, lebih dari 5o kali saya gagal terus... Tolong mas, semua langkah udah saya terapkan, tapi selalu GAGLUN KABIRUN.

    ReplyDelete
  26. Ane pasang read morenya di data:post.body/ ke 2 gagal,terus saya pindah pada data:post.body/ yang ke 3 dan jadi....

    ReplyDelete
  27. makasih lagi mas infonya.sekalian absen komen :)

    ReplyDelete
  28. nggak work kang.... 1-2-3 dh ane jelajah....

    ReplyDelete
  29. kalau di joomla 3.3.1 gimana, mas?

    ReplyDelete
  30. mantap master tapi gak berhasil di default template

    http://mahfudsidik.blogspot.com/

    ReplyDelete
  31. singakat pada dan jelas.. makasih atas ilmunya

    ReplyDelete
  32. tq gan atas infonya & sukses selalu gan :)


    PROMOSI

    hello semua para coment gan gan :)
    ayo bergabung bersama kami di website www.senang77.com
    cara mendapatkan uang dengan mudah gabunglah bersama kami..
    kami juga menyediakan bonus turn over 0.3% dan akan di bagikan dalam

    1 minggu dan balance akan masuk kedalam secara otomatisnya


    WWW.senang77.COM
    PENDAFTARAN
    http://senang77.com/Register000.aspx

    Kami juga menyediakan kode referral :)

    http://www.senangpoker.com/?ref=859522

    kami bisa dihunbungi melalui :

    YM : cs.senangpoker@yahoo.com
    FACEBOOK : cs.senangpoker@yahoo.com
    BBM : 764a99d1
    Twitter : senangpoker
    SKYPE : senang.poker


    Untuk anda kami suport dengan 5 bank Lokal : BANK BCA, BANK BNI, BANK

    BRI, BANK MANDIRI, DAN BANK DANAMON.


    TERIMA KASIH
    salam manis :) senang77.com / senang77.net / senang77.info :)

    ReplyDelete
  33. Nah ini bagus banget, keren dah,suka saya. makasih ya mas kolis salam kenal
    semoga sukses slalu

    ReplyDelete
  34. thank you mas... bermanfaat banget, silahkan kunjungi http://downloadgameandropc94.blogspot.com/ masih ijo sih tp nanti saya update terus.. makasih mas... infonya sangat berguna...

    ReplyDelete
  35. thx bang ,sngt bermanfaat,, kunjungi balik ya http://frdz211.blogspot.com/

    ReplyDelete
  36. makasih mas wkwwk work 100% :D

    salam dari Tamfanshare.blogspot.com

    ReplyDelete
  37. Sehat itu murah, sehat itu milik kita semua. Bagi sebagian orang sehat itu mahal, memerlukan banyak biaya dan perawatan, tetapi bila anda rajin dan sering menggunakan alat Terapi Ion elektrik rendam kaki, sehat itu murah dan mudah. Oleh karena itu penting bagi anda untuk menjaga kesehatan semenjak dini dengan secara rutin membuang racun dan toksin dari tubuh anda dengan menggunakan alat terapi ion elektrik rendam kaki.
    Terapi Ion
    Terapi Ion Rendam Kaki Air Garam
    Peluang Usaha Rumahan
    Terapi Ion Elektrik Rendam Kaki Detox
    Manfaat Terapi Ion Elektrik
    Terapi Ion Elektrik
    Terapi Kesehatan Murah
    Peluang Usaha Modal Kecil
    Harga Paket Alat Terapi Ion Elektrik
    Pengedar Alat Terapi Ion Di Malaysia

    ReplyDelete
  38. wah kalau sedemikian detail sampai utak-atik script tempplate, bisa2 berpengaruh pada lainnya

    ReplyDelete
  39. Apakah hasilnya seperti punya mas?

    ReplyDelete
  40. Kang, ane sudah coba tapi gak work.

    Please check disini >> https://yotubetrends.blogspot.com

    Mohon advice nya Kang Maskolis.


    thanks sebelumnya.
    Richard D.

    ReplyDelete

No comment moderation in this page
Do not put the link in this comment, I'll make it disappear forever
I hate when people play cheat to increase their blog, meanwhile everyone else do it politely and honestly

 
CREATING WEBSITE © 2012 the other blog Mas Template | Look at this Johny Template | Powered by Blogger