Cara Mengganti Tampilan Homepage Static Menjadi Grid Pada Blog

tags: cara merubah tampilan home menjadi 4 kolom, cara merubah tampilan home menjadi 3 kolom, cara merubah kotak postingan menjadi kotak-kotak, cara mengatur homepage menjadi magazine

Cara Mengganti Tampilan Homepage Static Menjadi Grid Pada Blog - Pada template biasa, pada umumnya tampilan homepage di blog menggunakan mode static atau list. Tampilan homepage yang mode grid/ kotak biasanya digunakan untuk template sejenis Magazines, Movie, atau Gallery.

Nah, kali ini saya akan berbagi cara atau tips mengubah tampilan hompage blog yang static menjadi grid/ kotak. Namun tentunya blog tersebut akan mengalami sedikit perubahan pada tampilannya, yaitu static atau listnya akan memanjang ke bawah dan lebar, namun akan menjadi kotak-kotak kecil yang akan menghemat luas pada homepage blog tersebut.

ini contoh blog saya dengan tampilan homepage grid via http://diamonita.blogspot.com

Lalu bagaimana cara mengganti tampilan homepage static menjadi grid pada blog ? Itu sangat mudah sekali. Yang perlu Anda perhatikan hanya tutorial yang akan saya bagikan pada blog Endolita ini. Perlu diingat, saya disini hanya akan merubah tampilan dasarnya saja. Untuk masalah penempatan waktu/ tanggal post dengan judul dan lain sebagainya, solusinya harus Anda edit sendiri CSS di template blog Anda. Saya yakin Anda bisa.

1. Login ke akun Blogger
2. Klik Template > Edit HTML
3. Cari kode </head> , lalu letakkan script di bawah ini di atasnya.
<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 = 380;
summary_img = 180;
img_thumb_height = 130;
img_thumb_width = 220;
</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:45%;height:200px;float:left;margin:10px;position:relative;display: block;}
.post h3{height:32px;margin-top:60px; margin-bottom:-15px;padding:5px;font-family: Helvetica, Arial;line-height:1em;font-weight: bold;  font-size:16px;letter-spacing:-0.5px;}
.post-body {padding:5px;height:241.5px;font-family: Helvetica, Arial; font-size: 13px; margin:20px;}
.post-footer {margin-top:30px;height:20px;}
.post-labels {display:none;}
.mobile .post {width:auto;height:auto;}
.mobile .post-body {height:auto;}
.more {float:right;background:#52e052;color:#000!important;padding:5px 10px;text-decoration:none!important;transition: all 1s ease;}
.more:hover {background:#ff0000;color:#fff!important;text-decoration:none!important;}
</style>
</b:if>
</b:if>

4. Klik Simpan Template

Catatan :

• 380 adalah jumlah karakter yang akan ditampilkan jika sebuah posting tidak memiliki gambar.
• 180 adalah jumlah karakter yang akan ditampilkan jika sebuah posting memiliki gambar.
• 130 adalah tinggi gambar.
• 220 adalah lebar gambar.
• 45% adalah ketinggian kotak posting pada homepage.
• 200 adalah lebar kotak posting pada homepage.
• Angka diatas bisa Anda ganti sesuai selera dan keinginan Anda sendiri.

Jika Anda menginginkan ada fitur Readmore di tampilan grid anda, Anda gunakan metode berikut,

1. Cari kode <data:post.body/>, biasanya ada 1-3 kode seperti itu
2. Copy kode dibawah ini, lalu ganti kode <data:post.body/> yang ke 2 dengan script 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>


Catatan :


• Tulisan Read More bisa Anda ganti sesuai dengan keinginan Anda, misalnya dengan Lanjutkan Membaca, Baca Selengkapnya, atau Lihat Selengkapnya.


3. Klik Simpan Template

Catatan :

Jika setelah menggunakan metode grid diatas ada kendala dengan tombol Beranda, Posting Lama, Posting Baru, atau tombol Home, Newer Post, Older Post, pada homepage blog Anda hilang, solusinya adalah cari kode <b:includable id='nextprev'> pada bagian Edit HTML, lalu simpan kode ini <div style='clear:both;'/> dibawahnya.

Udah gitu aja. Thanks :)