Gallery Information

Auto Read More

Friday, June 24, 2011 aandfx

Auto Readmore - Di beberapa template yang di sediakan ada yang sudah diatur script Auto read more nya, namun ada juga yang belum diatur. Kali ini kita akan mengulas cara membuat Auto Read More bagi template yang belum dilengkapi dengan Fitur ini. Apa itu Read More? Read more merupakan Link yang akan menunjukan full post dari sebuah artikel. Fitur ini berfungsi agar suatu postingan tidak ditampilkan semuanya ketika berada di menu utama anda, biasanya Tulisan Read More/Baca Selengkapnya berada di bawah pojok Kanan/kiri. sekian basa basinya mari kita langsung membuatanya, berikut langkah-langkahnya.

Tutorial Auto Readmore

1. Masuk Akun Blogger

2. Pilih Rancangan/Design

3. Pilih EditHTML laul Centang "Expand Template Widget"

4. Kemudian cari kode </head> Untuk mempermudah pencarian tekan CTRL + F

5. Copy script dibawah ini dan Tempatkan DI ATAS kode </head> tersebut diatas

var thumbnail_mode = "float" ;

summary_noimg = 250;

summary_img = 250;

img_thumb_height = 120;

img_thumb_width = 120;

</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(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>

6. Kemudian cari kode <data:post.body/> Kemudian 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>

7. S A V E

Keterangan :

Warna Kuning :
- var thumbnail_mode = "float" ; : Untuk mengganti letak thumbnail berada di “float” kiri atau jika tidak silahkan ganti dengan “no-float”;
- summary_noimg = 250; : Total Jumlah karakter yang akan ditampilkan di posting tanpa gambar / thumbnail;
- summary_img = 250; : Menunjukan Jumlah karakter yang akan ditampilkan di posting dengan gambar / thumbnail;
- img_thumb_height = 120; : Untuk mengganti Tinggi dari thumbnail dalam ukuran piksel;
- img_thumb_width = 120; : Untuk Merubah Lebar thumbnail dalam ukuran piksel;
- READMORE : Bisa anda ganti sesuai dengan karakter anda

Selamat mencoba, jika ada yang kurang jelas, silahkan anda tanyakan. Semoga bermanfaat dan tetap Semangat Keep Blogging !!
Terima Kasih