Memasang Read More Otomatis pada Template Rancangan Sendiri - Baru !

Blogger Template umumnya tidak semua disertai ‘Read More’, tergantung penyesuaian gaya dari sang desainernya. Tanpa ‘Read More’ sering ditemui pada template default yang telah disediakan oleh Blogger. Permasalahannya ketika berada di halaman utama muncul tulisan artikel secara vertikal memanjang sehingga cukup memberatkan loading blog.

Membuat read more pada blog solusi jitu meringankan proses, blog tertata rapi dan terlihat modis. Menu entri Blogger sebenarnya telah menyediakan aplikasi read more yang dapat dilakukan secara manual, yaitu menambahkan kode  dibagian editor HTML.

Terkadang "Tutorial Read More" yang kita browsing di internet tidak berfungsi sama sekali di template kita. Apalagi Template tersebut rancangan sendiri alias Template yang bukan bawaan dari Blogger maupun Template yang di download. Oleh karena itu kita perlu mengaturnya untuk memunculkan Read More Otomatis.

Persoalan yang kita jumpai diatas tidaklah begitu rumit. Hanya perubahan tempat kode HTML Read More saja.

Ada cara otomatis ‘gak ribet’ membuat read more di tempalate blog rancangan sendiri. Demi memudahkan sobat dalam ‘ngeblog’, langsung saja ikuti langkah-langkah cara memasang read more otomatis pada blog di bawah ini:

Silahkan login ke akun Blogger,

Setelah berada di halaman Dashboard, beralih ke Template,

Klik tombol Edit HTML,

Sembarang klik di kotak editor, tekan Ctrl + F cari kode </head>,

Copykan kode berikut di bawahnya,

<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[
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>

Selanjutnya temukan script berikut: <data:post.body/> Jika sudah ditemukan, ganti dengan kode 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 class='rmlink' style='float:left'>Read More »»» <b><a expr:href='data:post.url' expr:title='data:post.title' rel='tag'><data:post.title/></a></b></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Catatan :

Kode <data:post.body/> lebih dari satu di template sobat, saya sarankan ganti kode scriptnya yang kedua

Tulisan "Read More »»»" bisa sobat ganti sesuai keinginan

var thumbnail_mode = "float"; (menempatkan image thumbnail di kiri "float", jika tidak suka dengan opsi ini, silahkan ganti dengan "no-float")

summary_noimg = 250; (mengatur jumlah karakter yang akan ditampilkan jika tanpa image thumbnail)

summary_img = 250; (mengatur jumlah karakter yang akan ditampilkan jika menggunakan image thumbnail)

img_thumb_height = 120; (mengatur tinggi pixel thumbnail)

img_thumb_width = 120; (mengatur lebar pixel thumbnail)#Silahkan ganti angka-angkanya saja script diatas sesuai keinginan anda.

Untuk menampilkan Read More di sebelah kanan cukup ganti) "style='float:left" dengan style='float:right"

Intinya, sobat hanya meletakkan kode script yang pertama sesudah </head>, bukan meletakkannya sebelum </head>.

Selesai, klik Simpan Template. Jika langkah-langkah di atas sudah benar, sobat sudah bisa
melihat hasilnya.

Share This Article :

2 comments:

Agus Setya26/7/13 09:52
numpang mampir dan menyimak turorialnya mas
ReplyDelete
Replies

Add comment

Terimakasih telah berkenan mengunjungi dan meninggalkan komentar di Blog ini. Setiap Saran & Kritik yang masuk akan kami jadikan sebagai bahan Evaluasi untuk perbaikan Blog ini.
CATATAN :
1. Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA DISINI...</i>
2. Untuk menyisipkan kode panjang, gunakan tag <i rel="pre">KODE ANDA DISINI...</i>
3. Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DISINI...</i>
4. Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DISINI...</b>

NB: Jika anda ingin menyisipkan kode diatas silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar.
Jika anda ingin berkomentar "BIASA", abaikan no 1-4