Cara Membuat Auto-Redmore tanpa Menggangu Halaman Statis
Mungkin diantara kalian pernah mencoba menambahkan script auto-readmore pada blog Anda, atau mungkin Anda mendapat script itu dari TammamBlog yang sempat Saya share. Ternyata setelah diperiksa ada beberapa script auto-readmore yang tidak sempurna, dan yang kemarin TammamBlog share juga termasuk kedalamnya. Lalu dimana ketidaksempurnaan itu ? Ketidaksempurnaan tersebut berada pada fungsi auti-readmore yang seharusnya hanya untuk posting blog, ternyata berimbas juga ke halaman statis atau laman. Hal ini mengakibatkan laman menjadi ditampilkan sebagian, dan muncul tombol Readmore. Namun ketikan tombol tersebut di klik, tidak terjadi apa-apa. Tentu itu merusak penampilan blog kita, jika menggunakan laman. Nah, karena itu TammamBlog mencoba mencari solusinya. Dan jawabannya ketemu di blog Serba Serbi. Disana Saya menemukan script yang berfungsi sebagai auto-readmore, tetapi tidak menggangu halaman statis. Berikut scriptnya.
<script type='text/javascript'>
var thumbnail_mode = "yes"; //yes-dengan gambar,no-tanpa gambar
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 150;
img_thumb_width = 150;
</script>
<script type='text/javascript'>
//<![CDATA[
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(thumbnail_mode == "yes") {
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 : Script berwarna biru adalah jumlah dan ukuran tampilan.
summary_noimg = Jumlah karakter tanpa gambar
summary_img = Jumlah karakter dengan gambar
img_thumb_height = Tinggi gambar {dalam pixel}
img_thumb_width =Lebar gambar { dalam pixel }
Ubahlah sesuai keinginan anda
Untuk penggunaannya silahkan ikuti petunjuk di bawah ini.
- Pertama masuk dulu ke akun blogger Anda, kemudian masuk ke dashboard - template - Edit HTML. Jangan lupa untuk mencentang Expand Widget Template
- Apabila anda sudah mengisi script Auto Read More maka anda harus menghapusnya terlebih dahulu. Gunakan Tutorial Auto Read More yang anda pakai sebelumnya, untuk mengetahui script mana yang harus anda hapus
- Kemudian cari tag </head> dan copy script diatas tepat dibawah tag </head>
- Kemudian cari tag <data:post.body/>
- Preview dan simpan template Anda jika sudah merasa cocok.
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>");
</script>
<a class='more' expr:href='data:post.url'>Read More >></a>
</b:if>
</b:if>
Share This:
Gusti Tammam
Blogger paling malas !
Terimakasih sudah berkunjung di blog Saya, sebelumnya maaf jika blog ini terkesan berantakan. Seperti yang Saya bilang, Saya blogger yang malas. Namun Saya masih punya harapan, semoga tulisan-tulisan Saya ini bisa bermanfaat untuk Anda para pengunjung.
No Comment to " Cara Membuat Auto-Redmore tanpa Menggangu Halaman Statis "
Sampaikan pendapat atau pertanyaan Anda di kotak komentar berikut