Make short links and earn the biggest money
» » Pasang Grid Layout Post Summary - Thumbnail

Pasang Grid Layout Post Summary - Thumbnail

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIBGoaozxlKfCievaac0uQ9cNUyWquzrvQ5myCtJ-eChgIBlNN8_qVWWPZ4W9worL0F7T4NpRiiT0edTqNLSF2ynb6q2B4YAjwJnt39635KgkOMI4kBrbNtwVVm-dFzqVsAejPjaA909lX/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'>cckquote class="tr_bq">reateSummaryAndThumb(&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;
 }
 .post {
 height:auto;
 width:31%;
 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;
 color:#111;
 padding:0;
 }
 h3.post-title {
 text-align:center;
 height:22px;
 position:absolute;
 bottom:23%;
 width:100%;
 z-index:101;
 overflow:hidden;
 margin:0!important;
 padding:10px 0;
 }
 .date-header {
 visibility:hidden;
 height:0!important;
 width:0!important;
 margin:0!important;
 padding:0!important;
 }
 .posts-thumb {
 width:100%!important;
 height:190px!important;
 overflow:hidden;
 clear:both;
 border-bottom:3px solid #00C8BD;
 border-top:3px solid #558ABB;
 }
 .posts-thumb:hover {
 border-top:3px solid #FF664E;
 border-bottom:3px solid #FEBE36;
 }
 .post-body {
 border-radius:2px;
 box-shadow:0 0 6px 1px rgba(0,0,0,0.1);
 position:relative;
 height:auto;
 }
 .post-body a {
 text-decoration: none;
 }
 .post-body img {
 display:block;
 width:100%!important;
 height:auto!important;
 max-width:800px!important;
 max-height:400px!important;
 min-width:190px!important;
 min-height:190px!important;
 border:none;
 outline:none;
 position:relative;
 margin: 0px;
 padding:0;
 }
 .post-summary-text {
 color:#555;
 background:#f5f5f5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-T1G77dSHvG488UxejY5I-tvqWwEMhvAFbfWsx786jQAc6HQ_nYTnQsIvi7TKnO3SEiHubAc4YCs8Luwbf0LrsoZVB2ShGe2gGH7o-fEgaKdRYOylso9737DUyeWM3an93SKTdWqQM1IT/s1600/blueprint.png);
 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:17% 10% 6%;
 }
 a.comment-bubble {
 color:#fff;
 text-decoration:none;
 font-size:110%;
 right:10px;
 position:absolute;
 top:165px;
 text-shadow:1px 2px 1px #333;
 font-family: &#39;Pacifico&#39;, cursive;
 }
 a.comment-bubble:before {
 content: &quot;Comments: &quot; url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUUaKiVwgZsSOCC_4V0leOF7dAtUIfDSjkLpWcxEZFFg60yp7W-OzdY5np-K1MKP1nN-RB2iGkLCY9bk8wF8UN0AB1EWe-DHR8C_X5zysl2D1CXyv9grYQOgqs3ScPaJyDAKz0BHQeNKWS/s1600/heart-active.png);
 }
 .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'/>
 <link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'/>
Labels:

Share: