Make short links and earn the biggest money
» » Pasang Masonry Layout seperti Pinterest Grid

Pasang Masonry Layout seperti Pinterest Grid

Cara Membuat Grid Layout dengan Post Summary dan Thumbnail dalam Blogger

Langkah 1. Masuk ke dashboard Blogger Anda dan klik pada blog di mana Anda ingin menerapkan Simple Grid Design.
Langkah 2. Pergi ke "Template" yang terletak di sisi kiri layar dan tekan tombol "Edit HTML".
Langkah 3. Klik di mana saja di dalam area kode dan tekan tombol CTRL + F untuk membuka kotak pencarian, kemudian ketik tag berikut di dalam kotak (tekan Enter untuk menemukannya) :
</head>
Langkah 4. Sekarang salin script di bawah ini dan paste tepat sebelum tag </head>

 <script type='text/javascript'>
 posts_no_thumb_sum = 100;
 posts_thumb_sum = 100;
 </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, pURL, pTITLE){
 var div = document.getElementById(pID);
 var imgtag = "";
 var img = div.getElementsByTagName("img");
 var summ = posts_no_thumb_sum;
 if(img.length>=1) {
   imgtag = '<span class="posts-thumb" style="float:left;  margin-right:  10px;"><a href="'+ pURL +'"><img  src="'+img[0].src+'"  /></a></span>';
 summ = posts_thumb_sum;
 }

 else {
   imgtag = '<span class="posts-thumb" style="float:left;  margin-right:  10px;"><a href="'+ pURL +'" title="'+  pTITLE+'"><img   src="http://2.bp.blogspot.com/-Gbn3dT1R9Yo/VPXSJ8lih_I/AAAAAAAALDQ/24wFWdfFvu4/s1600/sorry-image-not-available.png"   style="margin-top: -30px;" /></a></span>';
 summ = posts_thumb_sum;
 }

   var summary = imgtag + '<a href="'+ pURL +'"><div   class="post-summary-text">' + removeHtmlTag(div.innerHTML,summ) +   '</div></a>';
 div.innerHTML = summary;
 }
 //]]>
 </script>
Langkah 5. Cari potongan kode berikut menggunakan CTRL + F atau Command + F:

 <data:post.body/>
Langkah 6. Setelah menekan tombol "Enter" pada keyboard Anda, Anda mungkin menemukan tiga dari kode di atas, ganti hanya kedua dan ketiga dengan kode di bawah 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>
Langkah 7. Copy kode CSS dibawah dan paste tepat di atas </ head> tag :

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType!= &quot;item&quot;'>
<style>
#blog-pager {
clear: both;
position: absolute;
bottom: 0px;
left: 0px;
}
.blog-feeds {
display: none;
}
.post {
height: auto;
width: 100%;
padding: 0px !important;
margin: 0px 0px 30px;
display: inline-block;
text-decoration: none;
}
h3.post-title a{
font-size: 95%;
font-family: &#39;Open Sans Condensed&#39;, sans-serif;
text-transform: uppercase;
padding: 0px;
color: #fff;
text-shadow: 3px 2px 2px #222;
font-weight: bold;
}
h3.post-title, .comments h4 {
margin: 0px !important;
text-align: center;
padding: 10px 0px;
position: absolute;
top: 10px;
width: 100%;
z-index: 200;
}
.post-header {
display: none;
}
.date-header {
visibility: hidden;
height: 0px !important;
width: 0px !important;
padding: 0px !important;
margin: 0px !important;
}
.posts-thumb {
width: 100%;
height: auto;
overflow: hidden;
clear: both;
}
.post-body {
overflow: hidden;
position:relative; 
}
.post-body a {
text-decoration: none;
}
.post-body img {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: none;
min-width: 100%;
min-height: auto;
margin: 0px;
padding: 0;
border: none;
outline: none;
position: relative;
}
.post-summary-text {
cursor: pointer;
background-color: rgba(44, 77, 163, 0.8);
color:#fff;
font-size:120%!important;
font-family: &#39;Open Sans Condensed&#39;, sans-serif;
clear:both;
overflow:hidden;
padding:25% 10% 0%;
left: 0;
position: absolute;
text-align: center;
vertical-align: bottom;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
top: 0;
transform: scale(1);
opacity: 0;
z-index: 10;
height: 100%;
transition: all 300ms ease-out 0s;
}
.post-summary-text:hover {
opacity: 1;
}
.post-footer {
display: none;
}
a.comment-bubble {
color: #fff;
text-decoration: none;
font-size: 120%;
right: 5px;
z-index: 222;
position: absolute;
top: 5px;
text-shadow: 1px 2px 1px #333;
font-family: &#39;Open Sans Condensed&#39;, sans-serif;
}
a.comment-bubble:before {
content: url(http://4.bp.blogspot.com/-t1i_svebif4/VPMpZqPrKzI/AAAAAAAALAg/TRJ2Un238Gs/s1600/heart-active.png);
}
.main-inner .column-center-inner {
-moz-column-count: 3;
-moz-column-gap: 1px;
-webkit-column-count: 3;
-webkit-column-gap: 1px;
column-count: 3;
column-gap: 1px;
width: 100%;
padding: 0px !important;
}
</style></b:if></b:if>

<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>
Langkah 8. Klik "Preview" dan jika semuanya terlihat baik-baik saja, tekan tombol "Simpan Template" .

Harap dicatat bahwa masonry layout mungkin tidak bekerja jika Anda memiliki customized template, juga posting lama akan muncul secara vertikal (dari atas ke bawah) bukan kiri ke kanan.
Labels:

Share: