Membuat Mode Galeri di Homepage Blog

Membuat Mode Grid Pada Homepage Blog - Pada kesempatan ini saya akan berbagi tutorial cara membuat tampilan halaman utama Blog dengan mode galeri.

Banyak sekali kita temukan, penyedia template blogger memiliki fitur dan desain yang menarik dengan tampilan galeri. Namun secara umum banyak yang menggunakan template static, namun tidak banyak juga para blogger menginginkan tampilan template yang berbeda dengan mendesainnya sendiri, salah satunya dengan merubah tampilan homepage static menjadi grid.

Jika anda ingin merubah tampilan homepage dengan mode grid, maka lakukan sedikit modifikasi pada kode HTML, seperti Mode Grid yang akan saya share ini dengan sedikit modifikasi. Modifikasi ini menggunakan fungsi jQuery yang nantinya akan menampilkan tumbnail dan read more secara otomatis.

Hal yang perlu dilakukan dalam merubah tampilan template static menjadi grid dengan mencari code </head> , apabila sudah anda temukan terapkan code di bawah ini sebelum code </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 = 400;
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:44%;height:370px;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>

Kemudian anda cari kode <data:post.body/> , anda terapkan sesudah code <data:post.body/>

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

Anda bisa menambahkan modifikasi seperti memberi background dan border atau lainnya agar tampilan template bisa lebih cantik dan serasi lebih cantik dan serasi. Apabila mengalami kendala hilangnya tombol Home, Newer post, maupun Older post, anda cari code <b:includable id='nextprev'> kemudian letakkan code berikut sesudahnya.

  <div style='clear:both;'/>

Demikian yang informasikan tutorial Cara Membuat Mode Grid Pada Homepage Blog, mohon maaf jika ada kekurangan semoga bermanfaat.

Share this post