Sesuai dengan judulnya "CARA MEMBUAT READMORE ATAU BACA SELENGKAPNYA SECARA OTOMATIS PADA BLOGGER". Maka langsung saja kita menuju TKP.
Ada 2 readmore yang ingin saya bagikan tipsnya, yang pertama REAMORE yang bergambar dan yang kedua READMORE berupa tulisan atau text saja.
Sekarang mari kita membuat script utamanya dulu!!
Pertama Masuklah ke BLOGGER anda terlebih dahulu
Kemudian pilihnya menu Template, lalu
Pilih Tombol Edit HTML
Selanjutnya, carilah kode </head> silakan gunakan CTRL + F untuk mempermudah pencarian kode ini, kemuian jika sudak ketemu letakkan kode berikut tepat diatas </head>
<!-- START AUTO READMORE letakkan script diatas </head> -->
<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>
<!-- END AUTO READMORE -->
Jika sudah, silakan ikuti satu langkah lagi yakni cari kembali kode <data:post.body/> atau <p><data:post.body/></p> tetap gunakan CTRL + F untuk mempermudah dan mempercepat pencarian kode ini.
Lalu TENTUKAN PILIHAN ANDA??? ingin READMORE yang BERGAMBAR atau ingin READMORE dalam benruk Text atau tulisan saja???
Jika anda memilih ingin READMORE yang BERGAMBAR, maka hapus kode <data:post.body/> atau <p><data:post.body/></p> dan gantikan dengan kode yang ada dibawah ini
<!-- START READMORE Ubah <p><data:post.body/></p> menjadi script 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 style='float:right'><a expr:href='data:post.url'><img alt='Read More..' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3Fr613ig_DZaQCwbPUyv-a0efThp9Rf9DWVj4El5-UwXIlEzOr2Jhggd_J_GrImsky3N8iBBfDGOWWljgVPW-S-T0U-bz7IMzEV-vhvGWS-1Tr6msa3l44NyE7cLDwlu8DJa9i6EBK7Um/s1600/readmore.png'/></a></span>
<b:else/>
<data:post.body/>
</b:if>
<!-- END READMORE -->
Silakan ganti kode yang saya tandai warna merah dengan gambar yang anda suka.
Jika anda memilih ingin READMORE yang berupa text saja, maka hapus kode <data:post.body/> atau <p><data:post.body/></p> dan gantikan dengan kode yang ada 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 style='float:right'><a expr:href='data:post.url'>Read More..</a></span>
<b:else/>
<data:post.body/>
</b:if>
Silakan ganti kode yang saya tandai dengan warna merah dengan judul text yang anda inginkan!.
Sekarang silakan anda tekan tombol Save Template, tunggu hingga proses penyimpanan selesai dilakukan, jika sudah, silakan anda refresh atau segarkan halaman blogger anda, dan lihatlah perubahannya.
Selamat mencoba
[Source: Berbagai sumber]
* Untuk membiayai situs ini, Link Download akan di forward ke Adf.ly
(baca petunjuk download), silakan request pesan jika file yang ingin Anda download ternyata hilang, rusak atau alamat link tidak falid. terima kasih
0 komentar:
Post a Comment