Cara Membuat Posting Blog jadi Kotak Kotak Kecil

Ingin membuat postingan di blog blogger menjadi kotak-kotak kecil? Berikut adalah script pendukungnya. Pertama-tama cari kode:

 </head>

Setelah ketemu kode diatas, letakan semua kode dibawah diatasnya.

<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
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>
Penjelasan kode diatas :
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
Silahkan diutak atik biar pas di postingan.

Berikutnya cari kode <data:post.body/> Kode ini biasanya ada dua, di blog yang sudah di buat readmore, saya sarankan anda berhati-hati (lihat susunannya ada kayak gini : <div expr:id='”summary.…). Tapi bila kode ini masih 1 ganti dengan semua kode dibawah :

<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>

<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:right;padding-top:20px;'><a expr:href='data:post.url'>read more</a></span>

</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
</b:if>

Selanjutnya, tambahkan kode dibawah untuk mengatur lebar dan tinggi posting, letakan setelah kode
]]></b:skin>
<b:if cond=’data:blog.pageType != &quot;item&quot;’><style>
.post{border:1px solid #ddd;margin:3px;text-align:left;width:318px;padding:4px;height:200px;float:left;}
</style></b:if>

Lebar (width) dan tinggi (height) harus disesuaikan dengan template blog anda. Harus pas biar postingan rapi. Oke…Jangan save template, preview atau pratinjau dulu untuk melihat seperti apa tampilannya. Kalau kurang perbaiki, ntar sudah pas baru save..

Semoga Manfaat …

Iklan

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s