Cara Memposting Kode di Postingan Blog

Lagi-lagi karena mengalami kesusahan dalam melakukan postingan atau mengutak atik blog. Saya dapet ilmu baru :) yak! gimana caranya memposting kode HTML di postingan blog. Awalnya sih karena pengen sharing cara memasang read more di blog, tapi ternyata memposting postingan yang ada kodenya tidak segampang seperti yang dibayangkan tinggal ketik dan jadi deh, ternyata setelah kode yang kita paste di postingan trus kita preview penampakannya bakalan berubah dan tentunya hasilnyapun tidak sesuai dengan harapan. Niatnya sharing script mantab eh, malah ntar ujung-ujungnya bakalan di caci maki seantero jagad raya. Huft...pusing beud dech!!!

Jurus andalan....ngubek-ngubek Google buat nyari solusi. Tapi sayang sekali lagi sayang, ternyata kebanyakan informasi yang hanya menshare cara manual, alias cara memposting kode dengan merubah scriptnya satu-persatu. Wew!!!! kalo cuma seuprit mah kagak papa, tapi kalo scriptnya panjang lebar atas bawah begimane dong? pasti bakalan dirundung duka dah seumur idup gara-gara harus kerja rodi.

Tapi untungya, direktori informasi yang ada di google ga cuma sebatas kumpulan-kumpulan informasi nanggung atau malah menyusahkan. Salah satu blog cukup brilian memberikan solusi, yaitu informasi dimana kita bisa merubah / memparse kode HTML sehingga bisa dipajang di blog. Langsung aja deh ke TKP tempat memparse kode-kode secara otomatis http://www.blogcrowds.com/resources/parse_html.php

Semoga bermanfaat.

Read more »

Cara Memasang Read More Otomatis

Awalnya sebelum posting tema ini, saya lumayan pusing karena pengen masang tombol "Read More" pada blog saya. Nah saya coba-coba cari cara dan script nya di Google, nemu deh. Tapi kebanyakan postingan tentang cara memasang read more versi lama alias kita harus cut and paste script sebelum melakukan posting atau harus memotong secara manual postingan dan menyisipkan kode <div class="fullpost">..</div> atau <span class="fullpost">..</span> diantara kalimat yang ingin kita jadinya paragraf awal dan paragraf selanjutnya apabila nantinya kita klik link "Read More". Berbekal sedikit ingatan karena saya juga ada beberapa blog yang ternyata sudah ada fungsi read more otomatisnya tapi saya lupa script nya :D ... saya cari deh, dan akhirnya berlabuhlah pencarian saya di official blognya si O-om.com . Di artikel yang o-om.com tulis pas dan sesuai sekali dengan apa yang saya inginkan. Read More otomatis tanpa harus cut and paste postingan. Eits...ternyata fungsi script yang dijelaskan oleh o-om.com tidak hanya sebatas memberikan fungsi "Read More" saja, tapi kita juga bisa mengatur berapa jumlah kata yang akan ditampilkan sebagai paragraf awal secara otomatis juga dapat secara langsung meng-capture gambar pada postingan kita sehingga akan tampil pada paragraf awal meskipun posisi gambar tersebut terletak di tengah ataupun di akhir paragraf postingan.

Berikut ini adalah cara pemasangan "Read More" otomatis :
Langsung ke Edit HTML cari kode ini </head> nah kalo dah ketemu berikutnya pasti kode dibawah ini tepat diatas kode </head> trus di jangan lupa di save.

Kode yang harus di copy

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

Masih di halaman Edit HTML, centang Expand widget template trus cari kode dibawah ini
<data:post.body/>

kalo dah ketemu, ganti kode <data:post.body/> tersebut 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>

kalo sudah beres copy and paste nya, silahkan di simpan 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)

NB :
Buat mempermudah, gunakan Ctrl + F pada saat melakukan pencarian kode di template.

Read more »