Join this site

Membuat Auto Readmore Blog

 
Readmore merupakan sebuah navigasi yang digunakan oleh banyak website maupun blog yang banyak memuat tulisan-tulisan berbasis berita, tutorial dan lain-lain. Readmore membuat blog terlihat lebih minimalis, readmore 'memotong' sebuah posting sehingga hanya 3 - 4 baris kalimat yang tampil yang kemudian sisa tulisan posting tersebut akan tampil jika tombol readmorenya diklik oleh reader.

Selain membuat blog terlihat minimalis, kelebihan lain yang dimiliki blog Auto Readmore adalah akan membuat blog lebih cepat tapi tetap dapat menampilkan (index list) konten lebih banyak dalam satu halaman seperti halaman home.

Contoh Readmore sederhana seperti yang dapat dilihat pada blog ini. Untuk cara membuatnya :

  1. Login pada blog
  2. Pastikan membackup blog terlebih dahulu
  3. Masuk pada menu Template >> Edit HTML >> Lanjutkan
  4. Centang 'Expand Template Widget'
  5. Cari kode </head> dan copy dan letakkan kode berikut ini tepat diatas kode </head>.
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <script type='text/javascript'>
    var thumbnail_mode = &quot;float&quot; ;
    summary_noimg = 250;
    summary_img = 200;
    img_thumb_height = 100;
    img_thumb_width = 100;
    </script>
    <script type='text/javascript'>
    //<![CDATA[
    function removeHtmlTag(b,a){if(b.indexOf("<")!=-1){var d=b.split("<");for(var c=0;c<d.length;c++){if(d[c].indexOf(">")!=-1){d[c]=d[c].substring(d[c].indexOf(">")+1,d[c].length)}}b=d.join("")}a=(a<b.length-1)?a:b.length-2;while(b.charAt(a-1)!=" "&&b.indexOf(" ",a)!=-1){a++}b=b.substring(0,a-1);return b+"..."}function createSummaryAndThumb(d){var f=document.getElementById(d);var a="";var b=f.getElementsByTagName("img");var e=summary_noimg;if(b.length>=1){a='<span style="float:left; padding:0px 10px 2px 0px;"><img src="'+b[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var c=a+"<div>"+removeHtmlTag(f.innerHTML,e)+"</div>";f.innerHTML=c};
    //]]>
    </script>
    </b:if>
    </b:if>
  6. Kemudian cari kode <data:post.body/>, kemudian ganti dengan kode <data:post.body/> dengan kode berikut ini :
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <data:post.body/>
    <b:else/>
    <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:left'><a expr:href='data:post.url'>baca selengkapnya » <data:post.title/></a></span>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
    </b:if>
    </b:if>
    Penting : dalam sebuah blog kemungkinan memiliki lebih dari 1 kode <data:post.body/> silahkan coba ganti kode tersebut dengan kode diatas dan lakukan pratinjau sebelum template disave.
  7. Langka terakhir ubah :
    summary_noimg = 250; = jumlah hurup pada saat tidak ada gambar pada postingan
    summary_img = 200; = Jumlah hurup pada saat terdapat gambar pada postingan
    img_thumb_height = 100; = Tinggi Gambar (thumbnail)
    img_thumb_width = 100; = Lebar Gambar (thumbnail)

    Ubah sesuai dengan keinginan.
Selamat Mencoba & Happy Blogging.
 
Sumber:tanganblogger

1 komentar:

  1. Blog Walking Gan :D
    http://cisaga-cyber.blogspot.com/2013/03/download-lagu-harlem-shake.html

    BalasHapus

[D-S] COMMENTS RULE :

-DONT SPAM
-DONT FLOOD
-BILA ANDA SUKA DENGAN ARTIKEL INI SILAHKAN BERKOMENTAR
-BILA ANDA INGIN MENDAPATAKAN INFO DI BLOG INI SILAHKAN FOLLOW BLOG INI
-GUNAKANLAH BAHASA YANG SOPAN
-FOLLOW THIS BLOG I WILL FOLLOWBACK !!

 
Thanks For Visiting Gunakanlah Google Chrome Untuk Tampilan Sempurna