Cara Membuat Automatic Readmore (Readmore Otomatis)
Automatic Readmore merupakan lanjutan dari ReadMore manual. Tetapi dalam automatic readmore kita tidak lagi memasukkan kode maupun script manual setiap kali membuat postingan. Karena semuanya akan berjalan secara otomatis.
Hal ini dapat menghemat waktu postingan dalam memisahkan paragraf mana yang akan dimunculkan dan paragraf mana yang disematkan dibawah tulisan readmore-nya. Nah, bagi sobat yang ingin mencoba menggunakan automatic readmore seperti yang saya pakai di blog ini, begini caranya :
Pertama, silahkan login dan masuk ke dalam halaman edit html yang berada di tata letak
Kedua, beri tanda centang pada expand widget template. Sebelumnya back up dulu template sobat untuk menghindari jika nanti eksperimen ini gagal. Hehehe…
Ketiga, sobat cari kode </head>
Keempat, letakkan kode berikut diatas kode </head> tadi.
Kelima, setelah itu sobat cari kode <data:post.body/> dan ganti kode tersebut dengan kode dibawah ini :
Pratinjau template sobat kemudian lihat hasilnya. Jika telah berhasil simpan template-nya dan jangan lupa sampaikan Alhamdulillah.
Hal ini dapat menghemat waktu postingan dalam memisahkan paragraf mana yang akan dimunculkan dan paragraf mana yang disematkan dibawah tulisan readmore-nya. Nah, bagi sobat yang ingin mencoba menggunakan automatic readmore seperti yang saya pakai di blog ini, begini caranya :
Pertama, silahkan login dan masuk ke dalam halaman edit html yang berada di tata letak
Kedua, beri tanda centang pada expand widget template. Sebelumnya back up dulu template sobat untuk menghindari jika nanti eksperimen ini gagal. Hehehe…
Ketiga, sobat cari kode </head>
Keempat, letakkan kode berikut diatas kode </head> tadi.
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 400;
summary_img = 400;
img_thumb_height = 125;
img_thumb_width = 125;
</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>
var thumbnail_mode = "float" ;
summary_noimg = 400;
summary_img = 400;
img_thumb_height = 125;
img_thumb_width = 125;
</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>
Kelima, setelah itu sobat cari kode <data:post.body/> dan ganti kode tersebut 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'>Readmore - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><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 class='rmlink' style='float:left'><a expr:href='data:post.url'>Readmore - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
Pratinjau template sobat kemudian lihat hasilnya. Jika telah berhasil simpan template-nya dan jangan lupa sampaikan Alhamdulillah.
Selamat siang sahabat...
Tips yang menarik sahabat. Boleh juga dicoba nanti. Terimakasih telah memasang link saya.
Oya, templatenya bagus, tapi hati-hati loh banyak yang pakai template ini. Nanti dikira jiplak sahabat..Karena saya dulu pernah pake template ini
Saya gak jiplak kok mas, saya hanya menerapkan apa yang saya pelajari dan dapat dari membaca dan belajar
yang ni q cari2..
TERAPKAN!!
Terimakasih tutorialnya, sangat bermanfaat
biasanya readmore otomatis ini ada di template bawaan yang seo friendly ya..! tapi ini juga sangat bermanfaat! terimakasih ya..
wah mantap dan makasih buat infonya.
Terimakasih atas cara ini, sangat bermanfaat untuk saya, saya memerlukannya, salam kenal juga ya..sukses selalu..!
Congratulations on possessing definitely certainly one of one of the vital refined blogs Ive arrive across in some time! Its just superb how much you'll be able to contemplate away from a factor mainly simply because of how visually beautiful it is. You've place collectively an incredible weblog website house -great graphics, motion pictures, layout. That is definitely a must-see web site!
ini cuma berlaku untuk blog di blogspot ya, kalo di wordpress gimana? atau mungkin lebih baik langsung tanya sama konsultan yang kompeten di bidang ini ya. ada nggak ya di jakarta.
baru kali ini nih gan aku ngebaca artikel yang sangat bagus,ditgu ya yg artikel selanjutnya..!!
Nice post gan, sangat membantu