Cara Mudah Membuat Posting Blog jadi Kotak Kotak

Translate

Merubah Halaman Utama Menjadi Kotak Kotak Kecil;

Contoh Halaman Utama

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

<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 psotingan rapi. Oke, sudah selesai.
Jangan save template, preview atau pratinjau dulu untuk melihat seperti apa tampilannya. Kalau kurang perbaiki, ntar sudah pas baru save.
-Selesai

Semoga artikel cara Membuat Posting Blog jadi Kotak Kotak Kecil pada blogger bermanfaat bagi anda.

Edit; wawansurya
Sumber;
www.affiliate-waones.com

Artikel Menarik Lainnya :