pada Artikel sebelum nya saya sudah share tips dan trik Cara buat menu di bawah Header blog/Menu horizontal Dropdown, dan kali ini saya akan share tips dan trik lagi tentang Cara pasang Auto Read More di blog.
Perlu sobat ketahui, Fungsi Read More kali ini memang berbeda dengan versi Read More yang lama.
Bila pada Read More versi terdahulu kita harus meng-cut tulisan menggunakan cara manual, yaitu dengan cara melakukan pemangilan fungsi <div class="fullpost">..</div> atau <span class="fullpost">..</span>
Dengan penjelasan =>> kode ini biasanya di taruh dan di tanamkan secara manual kedalam halaman postingan.
Untuk versi Auto Read More kali ini sepertinya lebih canggih lagi, karena fungsi pemenggalan kalimat langsung bekerja secara otomatis tanpa harus menambahkan kode Read More diatas.
Hebatnya lagi sobat, fungsi Read More ini mampu menampilkan image/gambar pertama dalam postingan dan mem-fload image tersebut di awal paragraf awal, meskipun gambar/image yang kita letakan berada di tengah atau akhir postingan blog sobat.
Tidak hanya itu saja, sobat juga bisa mengatur jumlah karakter/tulisan yang akan ditampilkan.
Disini ada 2 pilihan untuk jumlah karakter/tulisan.
1. jumlah karakter/tulisan yang ditampilkan jika ada gambar/image yang di ikutsertakan dalam postingan.
2. jumlah karakter/tulisan tanpa gambar/image.
Ok sobat, kita Langsung saja ke inti nya Cara pasang Auto Read More di blog.
Cara-cara nya Sebagai berikut :
1. Login ke blog sobat >> klik Menu rancangan >> Edit HTML
2. Beri tanda centang pada >> “Expand Widget Templates ”
3. Lalu sobat cari kode </head>
gunakan CTRL + F , untuk memudahkan pencarian.
4.kemudian taruh script di bawah ini tepat diatas nya code </head>
Langsung saja sobat copy dan paste kode dibawah ini:
<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)2012 by KUCOPAS
visit http://kuc0pas.blogspot.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 = 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)2012 by KUCOPAS
visit http://kuc0pas.blogspot.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>
5. Kalau sudah, jangan lupa sobat save/simpan terlebih dahulu.
6. Masih pada halaman EDIT HTML, lalu sobat cari kode <data:post.body/>
Kalo sudah ketemu, sobat ganti kode <data:post.body/> dengan semua 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'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
7. Sekarang sobat preview/pratinjau terlebih dahulu, kalau hasil nya sudah pas, silahkan sobat SAVE/simpan dan lihat hasilnya.
Keterangan:
- img_thumb_height = 120; = (ukuran Thumbnail/gambar, tinggi dalam piksel)
- img_thumb_width = 120; = (ukuran Thumbnail/gambar, lebar dalam piksel)
- var thumbnail_mode = "float"; = (kita dapat memutuskan apakah letak thumbnail/gambar berada di (float) kiri, atau jika tidak silahkan ganti dengan (no-float)
- summary_noimg = 250; = (Menetapkan berapa banyak karakter/tulisan yang akan di tampilkan pada posting tanpa gambar / thumbnail)
- summary_img = 250; = (Menetapkan berapa banyak karakter/tulisan yang akan di tampilkan pada posting dengan gambar / thumbnail)
Penting.!!!
Bagi sobat yang sudah memasang Read More versi lama sebaiknya kodenya di kembalikan dahulu seperti semula.
Cara nya hapus kode yang berwarna BIRU dibawah ini.
<div class='post-header-line-1'/>
<div class='post-body'>
<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/></p>
<a expr:href='data:post.url'>Readmore</a>
</b:if>
<div style='clear: both;'/>
Nb :
Setiap template mungkin berbeda, jadi tinggal sobat sesuaikan saja dengan template sobat.
Demikian Cara pasang Auto Read More di blog.
Semoga sobat tidak ada kesulitan dan berhasil...
| Supported by http://kuc0pas.blogspot.com |
0 komentar:
Posting Komentar