4

Cara Membuat Read More.. atau Baca Selengkapnya..


Membuat Otomatis Read More - Auto Readmore Button.

Beberapa waktu lalu telah diposting cara membuat Read More.. / Baca Selengkapnya.. secara manual oleh beberapa sahabat blogger, namun kendalanya bagi blog yang terlanjur sudah memiliki banyak artikel tentu akan banyak makan waktu dan tenaga untuk mengedit satu persatu.

Nah, dengan kombinasi javascript read more yang akan kita ciptakan ini akan tampil otomatis meskipun kita tidak mengeditnya kembali.
Lalu bagaimana jika saya telah menggunakan read more secara manual?
Tidak perlu cemas sob, karena tinggal ganti kodenya :D



Langkah Cara Membuat Read More Otomatis pada Blogger dengan Bahasa Javascript

Ada 2 pilihan cara membuat Read More Otomatis pada blog ini sob, yakni read more yang menggunakan gambar dan hanya menggunakan tulisan
Untuk pertama kali, seperti biasa pilih Dashboard, lalu klik Layout, kemudian Template, pilih Edit HTML  dan tandai/ contreng kotak tulisan Expand Widget Templates.
Cara membuat readmore otomatis.
(1)

membuat read more baca selengkapnya otomatis.
(2)

otomatis read more.
(3)


Selanjutnya, cari kode </head>, setelah ketemu tepat di atas kode 
</head> letakkan kode javascript berikut:

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 150;
summary_img = 150;
img_thumb_height = 100;
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>


Kemudian cari kembali kode <data:post.body/> atau <p><data:post.body/></p>

Setelah itu untuk Cara 1. Read More Button Otomatis yang menggunakan gambar, hapus kode 
<data:post.body/> atau <p><data:post.body/></p> 
dan ganti dengan kode berikut:

<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 style='float:right'><a expr:href='data:post.url'><img alt='Read More..' src='http://1.bp.blogspot.com/-IHpf1c0gAZE/TahDsOmCrCI/AAAAAAAAAy0/lOZgwgw7eHg/s1600/pelajaran%2Bblog%2Bread%2Bmore%2Botomatis.jpg'/></a></a></span>
<b:else/>
<data:post.body/>
</b:if>


Sedangkan untuk Cara 2. Read More Button Otomatis hanya berupa text, hapus kode <data:post.body/> atau <p><data:post.body/></p>
dan gantilah dengan kode berikut:

<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 style='float:right'><a expr:href='data:post.url'>Read More..</a></span>
<b:else/>
<data:post.body/>
</b:if>


Lalu Save templates dan lihat hasilnya.
Semoga berhasil sob...!


Share this post :

Posting Komentar

Peraturan Berkomentar :

• Jangan menggunakan bahasa yang tidak sopan dan mengandung Politik,
Sara, Pornografi serta Menyinggung.
• Bentuk komentar tidak bernilai keagamaan.
• Tidak di ijinkan menampilkan link (URL).
• Dilarang promosi saat berkomentar.

Jika melanggar kriteria di atas, maka admin berhak menghapus komentar tersebut.

Terima kasih sudah berkunjung.
by Aneka Informasi

 
Design by: Darmanto.com. Modified by: Aneka Informasi
Copyright © 2012. Aneka Informasi . All Rights Reserved
Created by: Creating Website. Published by: Mas Template
Powered by Blogger
Top Bottom