Selasa, 12 November 2013
Browse Manual »
Wiring »
bentuk
»
blog
»
cara
»
dan
»
di
»
gambar
»
membuat
»
more
»
otomatis
»
read
»
tips
»
Tips Cara Membuat Read More Bentuk Gambar dan Otomatis di Blog
********************************************/
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>
Temukan (Ctrl + F) tag <data:post.body/> atau <p><data:post.body/> </p> kemudian gantilah tag tersebut dengan kode script berikut.
Temukan (Ctrl + F)tag <data:post.body/> atau <p><data:post.body/></p> kemudian gantilah tag tersebut dengan kode script berikut.
NOTE :
Salam
Tips Cara Membuat Read More Bentuk Gambar dan Otomatis di Blog
Pernahkah anda melihat sebuah situs yang artikelnya seperti diringkas, kemudian diisi dengan keterangan read more/selengkapnya? Terlihat lebih menarik bukan ?
Ada beberapa manfaat kenapa perlu adanya ringkasan seperti ini:
Pertama, artikel dan tampilan blog akan terlihat lebih menarik. Ini penting agar pengunjung memberikan kesan positif dan beranggapan bahwa pemilik blog adalah seorang blogger yang profesional dan layak untuk selalau dikunjungi.
Kedua, menghemat ruang. Ketika kita memberikan sejumlah ruang di halaman utama blog kita, kemudian kita membatasi jumlah postingan yang bisa dimunculkan di halaman tersebut, maka sangat penting untuk meringkas masing-masing artikel. Kenapa ? Agar pembaca tidak harus membaca satu persatu artikel untuk mengetahui semua artikel yang ada di halaman utama. Sehingga ini bisa memberikan kemudahan bagi pengunjung, karena tidak harus repot-repot melihat sampai jauh ke bawah untuk mengetahui artikel apa saja yang ditulis pemilik blog di halaman utama.
Bagaimana cara membuat read more secara otomatis ?
Langkah Pertama
Masuk ke blog anda
Langkah Kedua
Klik templete
Langkah Ketiga
Edit HTML (jangan lupa centang Expand Widget Templete)
Langkah Keempat
Temukan (Ctrl + F) tag </head>, setelah itu letakan kode script berikut tepat diatasnya :<script type=text/javascript>
var thumbnail_mode = "float" ;
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 hacksvar thumbnail_mode = "float" ;
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
********************************************/
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>
Langkah Kelima A
Membuat read more bentuk gambar
Temukan (Ctrl + F) tag <data:post.body/> atau <p><data:post.body/> </p> kemudian gantilah tag tersebut dengan kode script berikut.
<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 style=float:right><a expr:href=data:post.url><img alt=Read More.. src=http://i1339.photobucket.com/albums/o719/nym_artopraph/Tombol%20WEb/buttton10_zps0ff4b929.png/></a></a></span>
<b:else/>
<data:post.body/>
</b:if>
<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><img alt=Read More.. src=http://i1339.photobucket.com/albums/o719/nym_artopraph/Tombol%20WEb/buttton10_zps0ff4b929.png/></a></a></span>
<b:else/>
<data:post.body/>
</b:if>
Langkah Kelima B
Membuat read more otomatis
Temukan (Ctrl + F)tag <data:post.body/> atau <p><data:post.body/></p> kemudian gantilah tag tersebut dengan kode script berikut.
<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 style=float:right><a expr:href=data:post.url>Read More..</a></span>
<b:else/>
<data:post.body/>
</b:if>
<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>Read More..</a></span>
<b:else/>
<data:post.body/>
</b:if>
Langkah Keenam
Kemudian save dan lihat hasilnya!
NOTE :
<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/>
<a expr:href=data:post.url><strong>Selengkapnya...</strong></a></p>
</b:if>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href=data:post.url><strong>Selengkapnya...</strong></a></p>
</b:if>
Demikianlah sedikit tips cara membuat read more secara otomatis baik menggunakan gambar atau pun secara otomatis dengan tulisan. Semoga tips ini bisa bermanfaat buat anda.
Salam
Langganan:
Posting Komentar (Atom)
Tidak ada komentar:
Posting Komentar