Tuesday, 16 December 2014
Fungsi Read More tanpa hosting file .JS,
memang agak berbeda dengan versi Read More biasanya. Bila sebelumnya kita harus meng-cut tulisan menggunakan cara
manual dengan melakukan pemangilan fungsi <div
class="fullpost">..</div> atau <span
class="fullpost">..</span> dimana kode ini biasanya kita
tanamkan secara manual kedalam halaman postingan. Atau penggunaan fungsi
pemenggalan kalimat bawaan blogger seperti dibawah gambar ini:
Fungsi Read More Standar dengan
pemenggalan artikel bawaan blogger
Untuk versi Auto Read More terbaru kali
ini sepertinya lebih canggih lagi, karena fungsi pemenggalan kalimat langsung
bekerja secara otomatis tanpa harus menambahkan kode diatas. Artikel ini dibuat
menjawab pertanyaan zhoe_haemy pada artikel "Cara merubah ukuran, jenis
font dan warna pada judul post" sehubungan dengan fitur readmore pada
blognya tidak berfungsi.
Fungsi Read More berikut ini mampu
menampilkan image pertama dalam postingan dan mem-fload image tersebut di awal
paragraf awal, meskipun gambar yang kita letakan berada di tengah atau akhir
postingan. Atau bisa juga disebut saja dengan fasilitas image thumbnail.
Tidak hanya itu, kita dapat juga
pengatur jumlah karakter yang ditampilkan. Disini ada 2 pilihan untuk jumlah
karakter. Yang pertama, jumlah karakter yang ditampilkan jika ada image yang
diikutsertakan dalam postingan dan yang kedua jumlah karakter tanpa image.
Bahkan kita dapat memodifikasi ukuran image yang akan ditampilkan di home page
blog anda. Hebat bukan??? Yah.. anggap hebat lah....
NOTE!! Bagi anda yang sudah
memasang Read More versi lama atau auto read more-nya tidak berfungsi, sebaiknya
di kodenya kembalikan dulu ke seperti semula, caranya hapus kode yang berwarna
biru di dalam Quote dibawah ini (Setiap template mungkin berbeda, jadi tinggal
disesuaikan saja).
<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;'/>
OK, jika sudah tinggal lanjutkan
langkah-langkah berikut ini:
Pertama : silahkan langsung ke halaman
EDIT HTML, Cari kode </head> kemudian letakan script dibawah ini di atas
kode </head>. Setelah itu, jangan lupa di simpan terlebih dahulu.
<!-- Auto read more script Mulai
-->
<script type='text/javascript'>
var thumbnail_mode = "yes";
summary_noimg = 430; //panjang tulisan
tanpa gambar
summary_img = 340; //panjang tulisan
dengan gambar
img_thumb_height = 200; // tinggi gambar
thumbnail
img_thumb_width = 200; // lebar gambar
thumbnail
</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>
<!-- Auto read more script Berakhir
-->
Kedua : Lalu cari Kode :
<data:post.body/> dan Ganti Dengan Kode di Bawah Ini :
<!-- Auto read more Mulai -->
<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'>Baca Selengkapnya</a>
</b:if>
</b:if>
<!-- Auto read more Berakhir -->
Ketiga : Save Template!. Selesai.
Cara Memodifikasi Auto Read More.
Thumbnail_mode : setting menjadi
"yes" untuk menampilkan Thumbnail pada Auto Read More dan Setting
menjadi "no" untuk menghilangkan Thumbnail pada Auto Read More. Temen
- temen Blogger juga bisa merubah settingan lain seperti panjang tulisan
seperti yang sudah saya jelaskan pada Comment di sebelah setiap barus Kode.
Pada kode kedua, para Blogger juga Bisa
merubah Teks "Baca Selengkapnya" sesuai dengan Keinginan.
Demikian tutorial sederhana Cara pasang
Auto Read More Otomatis #Terbaru. Terima Kasih. Semoga Bermanfaat !.
