Home » » Cara membuat Read More Otomatis

Cara membuat Read More Otomatis

Written By Unknown on Senin, 16 April 2012 | 00.32

Jika kita kemaren sudah belajar Cara Membuat Share Button Melayang, kali ini kita akan mempelajari  Cara membuat Read More Otomatis - Agar dalam potingan anda bisa menampilkan beberapa artikel anda tinggal mengatur pada jumlah postingan yang akan ditampilkan.. itu hal yang sangat mudah. Namun jika artikel yang ada tampil seluruh kontennya, ini akan membuat beranda anda sangat panjang dan akan membuat loading semakin lama dan berat. Langkah yang di ambil andalah memenggal setiap postingan dan hanyya menampilkan beberapa cuplikan artikel yang telah anda buat. Dan untuk hal ini biasa di sebut dengan Read More atau Baca selengkapnya. Dan berikut ini adalah cara pembuatannya :

1. Silahkan anda masuk ke Dasbord - Templete ( jangan lupa amankan dulu template anda)
2. Edit HTML - Lanjutkan - Centang Expand Widget
3. Cari Kode </head> (Gunakan kontrol F) lalu Pastekan kode ini diatasnya

<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 = 280;
summary_img = 250;
img_thumb_height = 70;
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>

4. Cari kode  <data:post.body/> dan ganti 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>

5. Save template

Keterangan
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)
Untuk Bagian yang disorot kuning Left bisa diganti dengan right.
Dan Untuk <data:post.title/> bisa anda hapus jika tidak ingin menampilkan judul
Selesai dan Lihat hasilnya.

Untuk Tulisan READ MORE bisa anda ganti dengan Button dengan memasukkan URL button yang anda punya.

Contoh : <img src='URL Button Anda'/>

Demikian Cara membuat Read More Otomatis di Blog. Semoga bermanfaat.
Share this article :

1 komentar:

Posting Komentar

Berkomentarlah dengan baik dan relevan. No Spam.!!

Deskripsi Iklan
Deskripsi Iklan
Deskripsi Iklan
Deskripsi Iklan
Advertise Now!
 
Support : About Me | Contact Us | Privacy Policy
Copyright © 2013. Belajar Blog - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger