Read More Otomatis ( Auto Read More )

Sobat semua pasti dah tahu banget yang namanya read more. Biasanya blog / website menggunakan  read more untuk menyingkat posting artikel agar terlihat rapi. Banyak sekali versi read more. Yang akan saya share kali ini adalah read more yang secara otomatis bisa mengatur tampilan. Yang dimaksud di sini yaitu kita tidak perlu bersusah payah memotong artikel yang akan di tampilkan di depan. Tetapi sudah otomatis terpotong berdasarkan jumlah karakter yang dapat kita setting sendiri. Ga seperti read more yang lain yang harus memotong secara manual, tetapi program ini dah bekerja otomatis. Ada lagi fasilitas yang lain yaitu  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. Mungkin lebih tepatnya image thumbnail. Tidak hanya itu masih banyak fasilitas lainya.

Ga usah muter muter langsung aja ke TKP. 

Oya bagi sobat semua yang sudah terlanjur menggunakan read more versi lama / manual sebaiknya templete di kembalikan seperti semula kayak waktu masih perawan gtu..hehehe..

Bingung caranya? Ya udah gini aja. masuk ke EDIT HTML, Cari kode seperti ini.

<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'&gt;Readmore</a>
</b:if>
<div style='clear: both;'/>

Lalu hapus kode yang berwarna merah. Setelah itu di save.

Masih di 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>

Jangan lupa di save.

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)

Semoga bermanfaat.

Referensi http://en.vietwebguide.com  

Baca Lengkap - Read More Otomatis ( Auto Read More )

Cara Menampilkan Jumlah Total Posting dan Komentar

Dah beberapa hari neh ga posting. Bingung mau postingin yang mana, akhirnya nemu ide...tapiii....mungkin postingan kali ini ga bermutu lagi. Tapi mungkin bisa sedikit bermanfaat buat para bloger. Kali ini saya akan membagi cara bagaimana agar blog kita bisa memberikan laporan jumlah total postingan dan komentar yang pernah masuk. Yah itung itung sebagai pelangkap aja.

Langsung aja ke TKP. Seperti biasanya login ke blogspot dan sebagainya. Terus langsung aja klik tambah gadget trus pilih HTML/Java script..Kayak biasanya gitu lah..Terus copy paste aja script dibawah ini.

<script style="text/javascript">
function numberOfPosts(json) {
document.write('Total Posting: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
function numberOfComments(json) {
document.write('Total Komentar: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
</script>
<script src="http://[blog km sob]/feeds/posts/default?alt=json-in-script&callback=numberOfPosts"></script>
<script src="http://[blog km sob]/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script>

Ada satu lagi, jangan lupa ganti [blog km sob] dengan alamat blog sobat, sebab kalau sobat sengaja ataupun ga sengaja ga merubah, saya jamin programnya ga bakalan berjalan. Percaya aja deh..

Terus Save..jadi deh 

Di coba dulu yah. jangan lupa kasih komentar biar reportnya banyak..

Baca Lengkap - Cara Menampilkan Jumlah Total Posting dan Komentar