Advertise

Tampilkan posting dengan label Readmore. Tampilkan semua posting
Tampilkan posting dengan label Readmore. Tampilkan semua posting

Klasik Readmore Tidak Sempurna Di Browser Google Crome

Akhirnya tampilan template blog ini bisa sedikit rapih dibuka pada browser Google Crome, setelah sebelumnya mengalami masalah pada bagian readmore di postingan yang kadang muncul full di halaman depan atau homepage.

Sebelumnya Saya ucapkan terimakasih untuk Mas ALamathuR d'hileudjapanist II yang telah memberikan informasi mengenai tampilan blog ini yang terkesan seperti gado gado kalau di buka di browser Google Crome karena beberapa posting terlihat full di halaman depan.

Sebenarnya masalah ini sudah saya ketahui sudah lama namun memang belum menemukan solusinya jadi saya biarkan saja, hingga akhirnya saya menemukan juga solusi mengatasi tampilan postingan di browser google crome.

Ternyata permasalahannya ada pada penggunaan readmore yang saya pasang di blog ini, kebetulan blog ini masih menggunakan readmore jadul dan setelah saya cek dengan blog saya yang lain yang menggunakan readmore jadul, ternyata permasalahan yang sama pun terjadi tampilannya tidak sempurna pada beberapa postingan.

Dan untuk mengatasinya saya coba memasang auto readmore di blog ini, dan ternyata setelah di cek di browser google crome, auto readmore ini tampil sempurna dalam menampilkan penggalan readmore disetiap postingan.

Sebenarnya saya kurang menyukai auto readmore ini karena untuk penggalan artikel suka tidak pas dan juga thumbnail gambar yang terkesan memaksakan sehingga terlihat kurang nyaman, tapi apalah daya tangan tak sampai hehehehe akhirnya saya pasang juga auto readmore di blog ini.

Buat temen temen blogger yang menggunakan readmore klasik mungkin bisa cek tampilan blognya di browser google crome apakan tampilannya sudah baik atau mengalami hal yang sama seperti blog ini, yaitu beberapa postingan kadang tampil full di halaman depan.

Dan kalau blogger ingin migrasi dari klasik readmore menjadi auto readmore ya silahkan saja karena memang auto readmore tidak bermasalah di buka di browser google crome, silahkan klik disini jika ingin memasang auto readmore pada postingan.

Untuk blogger yang tahu solusi mengatasi readmore klasik agar bisa sempurna tampilannya di browser google crome mungkin bisa memberikan solusinya untuk saya dan rekan rekan blogger semua yang mengalami hal yang sama pada readmore klasik ini trimakasih.

Cara Membuat Auto ReadMore

Setelah putar - puter sana sini , searching di blog-y para master seperti blog-ya kang Rohman dan yang laenyanyari cara membuat pasang auto readmore pada postingan, tapi semuanya masih pake auto readmore versi lama....! eeeeee.... akhirnya dapat juga di blog bang O-Om yang memposting tentang Cara membuat auto readmore yang gw cari-cari.

Disini saya mw sharing buat teman teman blogger yang lagi nyari tips untuk membuat auto readmore. Dengan Auto read more ini kita tidak perlu memotong artikelnya karena dengan auto readmore ini akan secara otomatis memotong sendiri artiklel tersebut.

Cara ini di ambil dari postingannya bang o-Om . Cuma ada kekurangannya menggunakan auto readmore ini yaitu dari masalah menampilkan image thumbnailnya pada postingan, jadi diusahakan kalau mau memasukan image ke dalam postingan pastikan ukurannya sama untuk setiap postingan, supaya tidak terjadi perubahan image thumbnailnya pada awal auto readmore di posting. Gimana kalau langsung aja pada proses pembuatannya.....!

Buat yang udah memasang auto read more versi lama mendingan di balikin lagi kodenya seperti semula.

langkah pertama membuat auto read more :

Silahkan tuju langsung ke halaman EDIT HTML, Cari kode </head> kemudian letakan script dibawah ini di atas kode </head>


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

Lalu Simpan.
Masih pada halaman EDIT HTML, Beri tanda centang pada "Expand widget template" lalu temukan kode seperti dibawah

<data:post.body/>


Kalo sudah, 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 == &quot;item&quot;'><data:post.body/></b:if>

silahkan disimpan dan lihat hasilnya :)


Keterangan:

var thumbnail_mode = "float"; (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)