Cara membuat home menjadi 2 kolom

Cara membuat tampilan home page jadi kotak-kotak atau 2 kolom atau cara membuat tampilan home menjadi banyak kolom atau cara membuat tampilan home page blog seperti toko online.
Tampilan homepage dengan banyak kolom biasanya untuk menampilkan produk-produk atau materi yang banyak sehingga akan mudah di lihat dengan sekaligus.

Contoh dari home berkolom seperti pada gambar di bawah ini

Bagi yang ingin membuat homepage berkolom atau kotak-kotak panduan nya seperti di bawah ini

1.buka blogger anda lalu login ke akun blog masing-masing
2.lalu masuk ke dashboard blogger
3.pilih template dan klik edit html
4.lalu cari kode </head>
5.kemudian kopi kode di bawah ini dan pastekan di atas kode </head>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot; ;
summary_noimg = 350;
summary_img = 100;
img_thumb_height = 100;
img_thumb_width = 200;
</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>
<style type='text/css'>
.post {width:44%;height:250px;float:left;margin:10px;position:relative;display: block;}
.post h3{height:27px;margin-top:0px; margin-bottom:-10px;padding:5px;font-family: Helvetica, Arial;line-height:0,4em;font-weight: bold;  font-size:16px;letter-spacing:-0.1px;}
.post-body {padding:5px;height:231.5px;font-family: Helvetica, Arial; font-size: 13px; margin:5px;}
.post-footer {margin-top:20px;height:10px;}
.post-labels {display:none;}
.mobile .post {width:auto;height:auto;}
.mobile .post-body {height:auto;}
.more {float:right;background:#0080ff;color:#fff!important;padding:5px 10px;text-decoration:none!important;transition: all 1s ease;}
.more:hover {background:#ff0000;color:#ffff00!important;text-decoration:none!important;}
</style>
</b:if>
</b:if>

Setelah memasukan kode diatas sebenarnya tampilan home sudaah berkolom , namun belum ada navigasi read more nya , nah sekarang saatnya Cara menambahkan atau membuat Read More

1.Cari kode <data:post.body/> kode tersebut ada 3 sampai 4 buah , jadi carilah kode <data:post.body/> yang ke dua.
2..Lalu hapus kode <data:post.body/> yang ke dua tersebut dan gantikan dengan kode yang di bawah ini

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a class='more' expr:href='data:post.url'>Read More</a></b:if></b:if>

3.kemudian simpan template nya
4.selesai.

Keterangan setelah anda selesai mengerjakan diatas dan Tombol Home / Newer post atau Older post menjadi hilang / Tidak tampak maka tambahkan kode berikut <div style='clear:both;'/> di bawah kode <b:includable id='nextprev'>

 Demikian tutorial Cara membuat home berkolom dari jasa setting web , semoga bermanfaat.