Cara Mengganti Tampilan Homepage Static Menjadi Grid Pada Blog

Cara Mengganti Tampilan Homepage Static Menjadi Grid Pada Blog - Pada umumnya tampilan homepage blog menggunakan mode static atau list, seperti template blog yang sudah di sediakan secara default. Namun, kita bisa mengganti tampilan homepage blog static menjadi mode grid atau kotak. Mengganti tampilan homepage blog dari mode static ke mode grid akan menjadikan blog mengalami perubahan diantaranya seperti dari tampilan static atau list yang memanjang kebawah dan lebar, kini menjadi kotak-kotak kecil yang akan menghemat luas pada homepage blog tersebut.

Kedua tampilan yang akan diterapkan pada blog Anda baik itu mode grid (kotak) maupun mode static (list) tergantung pada diri Anda sendiri lebih menyukai mode seperti apa. Tetapi, menurut saya lebih baik menggunakan mode grid, karena dengan menggunakan mode grid kita akan menghemat luas wilayah pada homepage blog, sedangkan dengan menggunakan mode static akan menghabiskan banyak wilayah khususnya memanjang kebawah.

Lalu bagaimana cara mengganti tampilan homepage static menjadi grid pada blog ? Itu sangat mudah sekali, Anda hanya perlu memperhatikan tutorial yang akan saya bagikan pada blog Ficri Pebriyana dibawah ini, dan yang perlu Anda ingat adalah ketika mengganti mode static menjadi mode grid pada homepage blog akan ada beberapa perubahan seperti, tampilan akan acak-acakan antara waktu/tanggal post dengan judul dan lain sebagainya, dan sosulinya adalah Anda harus mengedit juga CSS pada homepage tersebut.

DEMO => Grid
DEMO => Static

1. Masuk ke Blogger.com
2. Klik Template => Edit HTML
3. Cari kode </head>
4. Copy kode html dibawah ini, lalu Paste diatas 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 = 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>

Catatan :
- Fungsinya untuk menampilkan thumbnail post atau gambar postingan, jika di isi dengan no maka tidak akan tampil gambar post tersebut.
- 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.

5. Lalu cari kode <data:post.body/>, biasanya ada 1-3 kode seperti itu
6. Copy kode dibawah ini, lalu ganti kode <data:post.body/> yang ke 2

<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 :
- Read More bisa Anda ganti sesuai dengan keinginan Anda, misalnya dengan Lanjutkan Membaca, Baca Selengkapnya, atau Lihat Selengkapnya.

7. Klik Simpan Template

Catatan :
Jika setelah menggunakan mode grid pada homepage blog seperti diatas, lalu ada masalah 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.

Sekian artikel mengenai Cara Mengganti Tampilan Homepage Static Menjadi Grid Pada Blog. Kurang lebihnya mohon maaf.
Semoga Bermanfaat...

Ficri Pebriyana

Blogger yang jarang nulis artikel :D

Bagikan Artikel ini