Cara Merubah Tampilan Homepage Static Menjadi Grid Pada Blog

Cara Merubah Tampilan Homepage Static Menjadi Grid Pada Blog - Bosan dengan tampilan homepage dengan model static?Pengunjung tentunya juga bosan jika sudah bertahun-tahun melihat tampilan homepage blog kamu tidak ada perubahan.Untuk membuat pengunjung betah di blog kamu bisa dengan merubah tampilan homepage menjadi grid.Tapi ingat terlalu sering merubah tampilan homepage juga tidak bagus.

Langsung saja kita simak tutorial di bawah ini.

• Langkah pertama kamu masuk ke blogger
• Klik Tema-pilih edit HTML
• Silahkan copy script di bawah ini dan letakan tepat 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 = 300;
summary_img = 120;
img_thumb_height = 100;
img_thumb_width = 150;
</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:275px;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>

Note:
100 adalah nilai untuk tinggi gambar
150 adalah nilai untuk lebar gambar
45% adalah nilai untuk tinggi kotak artikel pada homepage
275px adalah nilai lebar kotak artikel di homepage

• Langkah selanjutnya cari kode <data:post.body/> ada beberapa kode tersebut pada template kamu.Coba pilih kode yang ke 2
• Ganti kode <data:post.body/> dengan kode 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'>Selengkapnya</a></b:if></b:if>

BACA JUGA : Cara Membuat Script box Di Artikel Blog

Jika tampilan kotak homepage cuma 1,kamu bisa perkecil kotak tersebut dengan cara merubah angka pada script di atas berdasarkan fungsinya.Karena jika terlalu besar kotak di homepage maka tampilan kotak akan seperti gambar dibawah ini.

Jadi lebih baik buat kotak yang standar jangan terlalu besar untuk menghindari kotak error seperti gambar di atas.Itulah cara merubah tampilan artikel homepage menjadi grid.Semoga bermanfaat.Baca juga artikel kami lainnya

Share this post