Memasang Auto read more tanpa javascript pada postingan blog

Auto read more tanpa javascript, terkadang, bagi blogger pemula seperti saya, membuat read more otomatis pada setiap postingan akan terasa sangat menyulitkan, terlebih jika mengingat kita harus melalui proses hosting file java script terlebih dahulu, hingga pada akhirnya seringkali lebih memanfaatkan kebaikan hati para blogger senior yang telah banyak menuliskan artikel tentang bagaimana cara membuat auto read more. Setelah mencari cari beberapa artikel yang terkait pada blog para senior, akhirnya saya menemukan juga artikel yang menuliskan tentang cara membuat auto read more tanpa menggunakan java script pada blog  o-om. Di blog o-om.com banyak sekali ilmu yang dapat kita peroleh, yang tentunya berguna sekali bagi kita yang masih belajar. Adapun cara memasang auto read more adalah sebagai berikut;

1. Login ke BLOG - TEMPLATE - EDIT HTML ( biasakan back up data terlebih dahulu untuk menghindari terjadinya kesalahan pada saat perubahan data )

2. PENTING : Bagi kita yang sebelumnya telah menggunakan read more manual ( menggunakan Insert jump break) maupun menggunakan pemanggilan fungsi <span class="fullpost">.....</span> atau <div class="fullpost">.....</div>, sebaiknya kode tersebut dihapus terlebih dahulu, adapun caranya bisa dilakukan dengan membuka template kita, lalu cari kode yang seperti ini ( mengingat setiap template berbeda, sebaiknya sesuaikan dengan template yang kita pakai

<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;'/>
hapus kode yang berwarna biru

3. Selanjutnya cari kode </head>, gunakan Ctrl+F untuk mempermudah pencarian, kemudian letakkan kode script berikut ini di tepat di atas kode </head>

<script type='text/javascript'> var thumbnail_mode = "float" ; summary_noimg = 250; summary_img = 250; img_thumb_height = 120; img_thumb_width = 120; </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>

klik pratinjau, apabila tidak terjadi kesalahan, lanjut dengan simpan, jangan dulu keluar dari menu EDIT HTML, lanjutkan dengan langkah berikutnya

4. Centangi kotak kecil Expand Widget Template, kemudian cari kode berikut ini
<data:post.body/>
ganti kode tersebut 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>

Simpan hasil perubahan, dan lihat hasilnya, read more otomatis telah kita buat.

Keterangan tambahan :
var thumbnail_mode = "float";  (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)

Semoga bermanfaat bagi kita semua, salam hangat.


ARTIKEL TERKAIT :

6 komentar:

  1. laaaahhh sih,, katanya tanpa javascript,, gmna tuh gan???

    BalasHapus
  2. kita juga punya nih artikel mengenai java script, berikut linknya semoga bermanfaat ya :D
    http://repository.gunadarma.ac.id/bitstream/123456789/2371/1/02-02-011.pdf

    BalasHapus
  3. saya butuh bantuan gan,,bagai mana jika kode nya hilang,,,saya bingung sekali
    moohon bantuan nya gan
    jangan lupa kunjungan baliknya,,
    http://dhanicyx.blogspot.com

    BalasHapus
  4. makasih atas infonya ya,,,,
    jangan lupa mampir di gubug sederhana saya http://erulsimple.blogspot.com

    BalasHapus
  5. postingan yg bagus ..
    salam blogwalking

    mampir juga
    djarumnews.blogspot.com

    BalasHapus

Agar ter-index oleh mbah google, alangkah lebih baik anda gunakan Alamat Blog/Website anda, jangan lupa juga untuk klik sponsor yang ada di blog ini, siapa tau bermanfaat buat anda,terimakasih.