Membuat Mode Galeri Di Homepage Blog

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

Banyak sekali kita temukan, penyedia template blogger mempunyai fitur dan desain yang menarik dengan tampilan galeri. Namun secara umum banyak yang memakai 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 instruksi HTML, ibarat Mode Grid yang akan saya share ini dengan sedikit modifikasi. Modifikasi ini memakai 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 instruksi <data:post.body/> , anda terapkan sehabis 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 dapat menambahkan modifikasi ibarat memberi background dan border atau lainnya biar tampilan template dapat lebih elok dan harmonis lebih elok dan serasi. Apabila mengalami hambatan hilangnya tombol Home, Newer post, maupun Older post, anda cari code <b:includable id='nextprev'> lalu letakkan code berikut sesudahnya.

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

Demikian yang informasikan tutorial Cara Membuat Mode Grid Pada Homepage Blog, mohon maaf jikalau ada kekurangan semoga bermanfaat.
Sumber http://www.websiteedukasi.com/