Make short links and earn the biggest money
» » Pasang Grid Layout Text Snippet - Hover

Pasang Grid Layout Text Snippet - Hover

Cara Membuat Grid Layout dengan Text Snippet dan Hover 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'>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;}
.post {height:auto;
width:31%;
display:inline-block;
text-decoration:none;
float:left;
margin:0 1.1% 2%;
padding:0;}
h3.post-title a {
font-size:95%;
font-family: &#39;Open Sans Condensed&#39;, sans-serif;
text-transform:uppercase;
color:#fff;
padding:0;
text-shadow: 2px 2px 3px #222;}
h3.post-title {height: 22px;
text-align:center;
position:absolute;
top:1%;
width:100%;
z-index:101;
overflow:hidden;
margin:0;
padding:10px 0;}
.date-header {visibility:hidden;
height:0;
width:0;
margin:0;
padding:0;}
.posts-thumb {width:100%;
height:190px;
overflow:hidden;
clear:both;}
.post-body {border-radius:2px;
box-shadow:0 5px 4px 1px rgba(0,0,0,0.1);
position:relative;
overflow: hidden;}
.post-body a {text-decoration: none;}
.post-body img {display:block;
width:100%;
height:auto;
max-width:800px;
max-height:400px;
min-width:190px;
min-height:190px;
border:none;
outline:none;
position:relative;
margin: 0px;
padding:0;}
.post-summary-text {cursor: pointer;
background-color: rgba(44, 77, 163, 0.8);
color:#fff;
font-size:120%;
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;}
a.comment-bubble {color:#fff;
text-decoration:none;
font-size:100%;
width: 100%;
text-align: center;
 position:absolute;
top:165px;
left: 0px;
text-shadow:1px 2px 1px #333;
font-family: &#39;Pacifico&#39;, cursive;
z-index: 122;}
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'/>
<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'/>
langkah 8. simpan template, selesai.
Labels:

Share: