Cari Artikel Blog Ini

Total Tayangan Laman

MEMBUAT READMORE OTOMATIS DENGAN THUMBNAIL IMAGE

Walau terlambat membuatnya. akhirnya jadi juga postingan " Membuat Read More otomatis dengan Thumbnail Image ". Pemahaman dari postingan ini adalah : Read More akan muncul secara otomatis tanpa harus menambah kode tetentu pada waktu membuat postingan. Selain itu pada awal postingan akan muncul sebuah image sebagai asesoris yang diambil dari image pertama dari sejumlah image yang ada pada pada postingan.
Sebagai acuan, coba anda perhatikan halaman awal EPG Studio yang juga menggunakan trik ini untuk menampilkan fasilitas read more.

Berikut langkah-langkahnya :

TAHAP PERTAMA

Tahap Pertama ini ditujukan bagi anda yang sudah menggunakan fasilitas read more dari versi lama. Silahkan kembalikan template anda terlebih dahulu seperti sebelum ditambahkan fasilitas read more
Sebagai comtoh :

<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 warna putih kemudian simpan template anda. Setelah selesai silahkan anda ikuti tutorial dibawah ini.

TAHAP KEDUA.

Tahap ini dapat diterapkan oleh anda yang blognya belum ditambah fasilitas Read More, termasuk anda yang telah selesai pada TAHAP PERTAMA tadi.

  • Masuk ke Blogger.
  • Pilih Rancangan bagian Edit HTML.
  • Kasih tanda cek pada Expand Template Widget.
  • Backup dulu template blog anda, jika takut gagal.
  • Copy kode dibawah ini kemudian paste tepat diatas 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[
    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>


    Keterangan :
    • var thumbnail_mode = "float"; = kode untuk menampilkan image secara otomatis. Ganti kata float dengan no-float untuk tidak menampilkan gambar.
    • summary_noimg = 250; = untuk menentukan jumlah karakter/kata yang tampil pada postingan tanpa image thumbnail
    • summary_img = 250; = untuk menetukan jumlah karakter/kata yang tampil pada postingan dengan image thumbnail
    • img_thumb_height = 120; dan
    • img_thumb_width = 120; = merupakan tinggi dan lebar dari image thumbnail yang ditampilkan.

  • Berikutnya cari kode <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:right'><a expr:href='data:post.url'><img src='http://lh5.ggpht.com/_1j80TgNqd_8/TUgNLsV-HxI/AAAAAAAABiM/YbNrE45Z4WI/readmorew.png'/></a></span>
    </b:if>
    <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>


    Perhatikan kode warna kuning merupakan pengganti kata readmore yang menggunakan gambar, Silahkan anda ganti dengan URL image milik anda.
  • Setelah selesai, klik tombol Simpan Template.
  • Lihat Blog anda sekarang...

Penting..!!!

Bagi anda yang sudah memasang fasilitas read more versi lama, walaupun telah berhasil menerapkan trik ini, postingan jika dibuka hanya tampil separoh. Oleh karena itu anda harus mengedit ulang seluruh postingan untuk membuang kode untuk menampilkan read more yang ditambahkan pada postingan .
Sebagai contoh kode yang dtambahkan pada postingan :

<div class="fullpost">


</div>


Hapus kode diatas dari seluruh postingan blog anda.
Bagi blog yang memiliki laman cara ini kurang tepat karena laman akan ikut terpasang read more dan yang lebih parahnya tidak bisa dibuka...atau diklik read more-nya

Jika artikel ini bermanfaat..? Bagikan lewat :


BACA JUGA ARTIKEL DIBAWAH INI



Comments
13 Comments

13 komentar :

asoka-site mengatakan...

Oke.. .trimakasih Kang EPG. sudah lama saya tidak berkunjung yaa. ..inget gak??. .dulu kita seering chatting lewat yahhoo chatbox??

M Isron Widodo mengatakan...

mampir ke Blog baru saya. (semoga jadi blog saya yang terbaru dan terakhir) hhehee. Silahkan masuk di sini

Galang mengatakan...

mantep nih tutorial y..

Ghostwriter mengatakan...

thanks for your informations.... it is usefull for me..

happy blogging..

Ivan Jonathan mengatakan...

Thx bnget ... Blog nya hebat (y)

Anonim mengatakan...

Bagaimana caranya sih kalau buat link?
Maksudnya mengkonek data html dengan link yang kita buat.....Tolong Dong
nih email aq (kecamatandengilo@yahoo.co.id)

Andri Slamet M mengatakan...

apa semua auto readmore berpengaruh ke laman?

ada ga caranya supaya laman saya tidak ikut menggunakan readmore

smansa-lbk.blogspot.com mengatakan...

Makasih...cukup membantu... tapi masih mengalami kegagalan pada saat edit HTML pada rancangan.terkadang kode pada toturial tidak sesuai dengan yang ada di blog kami.

tridenda mengatakan...

I like it..

Edib Sambas mengatakan...

thanks gan,ane dah berhasil praktikin read more ini pada blog ane...
Kunjungi : Blog Ane

Tri denda mengatakan...

Terima kasih sob!! ditunggu kunjungan baliknya:
http://3denda.blogspot.com/ (kunjungi oke)

Ades Sambas mengatakan...

@Tri denda Sama-sama Makin keren blog kamu tuh...!!!

Tri denda mengatakan...

Pabo: iya dong, itu semua berkat pabo, semua ilmunya saya dapet dari pabo gk ada yg laen... terima kasih banyak pak!! :D

Posting Komentar

Ceritakan keberhasilan/kegagalan anda setelah mencoba Tutorial Blogger pada kotak komentar. Kritik dan Saran juga boleh asal sifatnya membangun...!!!