CARA MEMBUAT TEMPLATE DENGAN HOMEPAGE BERGAYA GRID MASONRY | editblogtema editblogtema: CARA MEMBUAT TEMPLATE DENGAN HOMEPAGE BERGAYA GRID MASONRY

Logtema

×
tutorial dan teknik

CARA MEMBUAT TEMPLATE DENGAN HOMEPAGE BERGAYA GRID MASONRY

template bergaya grid masonry
Demo
Tentu saja template adalah salah satu faktor paling penting dalam website dan blog. Dan tidak sedikit blogger yang menginginkan tema atau template blognya unik kemudian sesuai dengan misi blognya. Salah satunya adalah teknik pembuatan tampilan grid. Lihat Template hasil percobaan saya, (mungkin gayanya sama dengan beberapa template yang dipakai oleh blogger lain, ini hanya sekedar percobaan:
Bukan hanya itu, Fitur ini juga menyediakan tombol "pengalih" yang dapat  mengalihkan tampilan "Grid" ke tampilan "List" dan sebaliknya. Akan tetapi dalam kesempatan ini saya ingin berbagi bagaimana caranya menambahkan style grid pada homepage blog dengan menambahkan gaya Masonry pada template lama blogspot:

1. Tambahkan CSS

Cari kode </head> dan letakan kode dibawah ini tepat diatasnya:
<script type='text/javascript'>
posts_no_thumb_sum = 100;
posts_thumb_sum = 100;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(a,b){if(a.indexOf("<")!=-1){for(var c=a.split("<"),d=0;d<c.length;d++)c[d].indexOf(">")!=-1&&(c[d]=c[d].substring(c[d].indexOf(">")+1,c[d].length));a=c.join("")}for(b=b<a.length-1?b:a.length-2;" "!=a.charAt(b-1)&&a.indexOf(" ",b)!=-1;)b++;return a=a.substring(0,b-1),a+"..."}function createSummaryAndThumb(a,b,c){var d=document.getElementById(a),e="",f=d.getElementsByTagName("img"),g=posts_no_thumb_sum;f.length>=1?(e='<div class="posts-thumb" style="float:left;"><a href="'+b+'"><img src="'+f[0].src+'" /></a></div>',g=posts_thumb_sum):(e='<div class="posts-thumb" style="float:left;"><a href="'+b+'" title="'+c+'"><img src="https://2.bp.blogspot.com/-Gbn3dT1R9Yo/VPXSJ8lih_I/AAAAAAAALDQ/24wFWdfFvu4/s1600/sorry-image-not-available.png" /></a></div>',g=posts_thumb_sum);var h=e+'<div class="post-summary-text">'+removeHtmlTag(d.innerHTML,g)+"</div>";d.innerHTML=h}
//]]>
</script>

2. Cari kode <data:post.body> 

Ada beberapa kode yang sama pada template, pilih yang kedua hapus kode tersebut dan ganti dengan kode dibawah ini:
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;);</script>
<b:if cond='data:post.allowComments'>
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:post.numComments/>
</a>
</b:if>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
</b:if>


3. Pilih Gaya Grid:

Pilih saja salah satu kode dibawah berikut dan letakan diatas kode </head>


Desain Grid sederhana:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'><b:if cond='data:blog.pageType!= &quot;item&quot;'>
<style type="text/css">
#blog-pager{clear:both}.post{height:auto;width:30.8%;overflow:hidden;display:inline-block;text-decoration:none;float:left;margin:0 1.1% 2%;padding:0!important}h3.post-title a{font-size:75%;font-family:&#39;Open Sans Condensed&#39;,sans-serif;text-transform:uppercase;padding:0;color:#444}h3.post-title{height:26px;text-align:center;width:100%;margin:0!important;padding-bottom:4%}.date-header{display:none}.post-body a{text-decoration:none}.posts-thumb{width:100%;height:190px;overflow:hidden;position:relative}.posts-thumb img{position:absolute;left:-100%;right:-100%;top:-100%;bottom:-100%;margin:auto;width:auto;max-width:340px;height:auto;padding:0;border:none;outline:none;}.post-summary-text{color:#777;font-size:100%!important;font-family:&#39;Open Sans Condensed&#39;,sans-serif;text-align:center;clear:both;overflow:hidden;margin:5px 0 0;padding:7% 10%}a.comment-bubble{color:#fff;text-decoration:none;font-size:100%;font-weight:700;right:10px;position:absolute;top:165px;text-shadow:1px 2px 1px #333;font-family:&#39;Open Sans Condensed&#39;,sans-serif;}a.comment-bubble:before{content:&quot;Comments: &quot;;}.post-header,.post-footer{display:none}
</style></b:if></b:if><link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>


Tolong di preview dulu sebelum save. Back up juga template sobat. Karena layout masonry bisa saja tidak bekerja jika template sobat sebelumnya telah di kostumisasi, tampilannya salah salah bisa berantakan.

Ingin download tempat ini? Silahkan request melalui komentar!

www.editblogtema.net
Sumber: https://helplogger.blogspot.com/

Bagikan (share):

2 comments:

  1. Jadi begini ya cara membuat templatenya

    ReplyDelete
    Replies
    1. Tentu saja tidak, ini hanya "menambahkan" gadget tampilan, bukan membuat templat

      Delete

🌐请给我们一个礼貌的评论与任何相关的主题
⚘⚘Kami menghargai semua masukan
👫👫 Namun kami juga menjunjung tinggi kesopanan