Sabtu, 23 November 2013

Browse Manual » Wiring » » » » » » » » » » Cara Membuat Read More Baca Selengkapnya Di Posting Blogger

Cara Membuat Read More Baca Selengkapnya Di Posting Blogger


Pada kesempatan kali ini saya akan memberikan trik dan panduan tentang Cara untuk membuat read more / baca selengkapnya di postingan pada blogspot.
Contohnya seperti ini :
Cara Membuat Read More Di Postingan Blogspot 
  • Login pada Blogger 
  • Setelah berada di Dashbore 
  • Masuk mode Rancangan 
  • Kemudian Edit HTML 
  • Centang Expand Widget Templates 
  • Cari kode </head> 
  • Jika sudah ketemu, letakan kode berikut diatas kode tadi
<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>
Keterangan : 
summary noimg = 250 = adalah jumlah ringkasan tulisan jika tidak ada gambarnya
summary img = 250 = adalah jumlah ringkasan tulisan jika ada gambarnya
img thumb height = 120 = adalah tinggi gambar
img thumb width = 120 = adalah lebar gambar 
  • Selanjutnya cari kode <data:post.body/>
  • Ganti kode tadi dengan kode dibawah ini
<b:if cond=data:blog.pageType != &quot;item&quot;>
<b:if cond=data:blog.pageType != &quot;static_page&quot;>
<div expr:id="summary" + data:post.id><data:post.body/></div>
<script type=text/javascript>createSummaryAndThumb("summary<data:post.id/>");</script>
<span style=float:right><a expr:href=data:post.url>Baca Selengkapnya... </a></span>
</b:if>
</b:if>
<b:if cond=data:blog.pageType == &quot;item&quot;><data:post.body/></b:if>

<b:if cond=data:blog.pageType == &quot;static_page&quot;><data:post.body/></b:if>
  • Jika sudah silahkan preview, jika sudah ada tulisan Baca Selengkapnya… dan tulisan sudah ditampilkan sebagian saja itu artinya sudah berhasil.
  • Setelah berhasil, Simpan Template
Demikian blogger tutorial mengenai Cara Membuat Read More / Baca Selengkapnya Di Postingan Blogspot.


Semoga bermanfaat dan semoga berhasil
Terima Kasih ^_^

Tidak ada komentar:

Posting Komentar