Make short links and earn the biggest money
» » Pasang Simple Grid Design di Blogspot

Pasang Simple Grid Design di Blogspot

Cara Membuat Simple Grid Design dalam Blogger

Cara Membuat Simple Grid Design 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>

<scripttype='text/javascript'>
posts_no_thumb_sum=100;
posts_thumb_sum=100;
</script>

<scripttype='text/javascript'>
//<![CDATA[
functionremoveHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
vars=strx.split("<");
for(vari=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);
returnstrx+'...';
}
functioncreateSummaryAndThumb(pID,pURL,pTITLE){
vardiv=document.getElementById(pID);
varimgtag="";
varimg=div.getElementsByTagName("img");
varsumm=posts_no_thumb_sum;
if(img.length>=1){
imgtag='<spanclass="posts-thumb"style="float:left;margin-right:10px;"><ahref="'+pURL+'"><imgsrc="'+img[0].src+'"/></a></span>';
summ=posts_thumb_sum;
}
else{
imgtag='<spanclass="posts-thumb"style="float:left;margin-right:10px;"><ahref="'+pURL+'"title="'+pTITLE+'"><imgsrc="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;
}
varsummary=imgtag+'<ahref="'+pURL+'"><divclass="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:ifcond='data:blog.pageType!=&quot;static_page&quot;'>
<b:ifcond='data:blog.pageType!=&quot;item&quot;'>
<divexpr:id='&quot;summary&quot;+data:post.id'>
<data:post.body/>
</div>
<scripttype='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;);</script>
<b:ifcond='data:post.allowComments'>
<aclass='comment-bubble'expr:href='data:post.addCommentUrl'expr:onclick='data:post.addCommentOnclick'>
<data:post.numComments/>
</a>
</b:if>
</b:if>
</b:if>
<b:ifcond='data:blog.pageType==&quot;item&quot;'>
<data:post.body/>
</b:if>
<b:ifcond='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:30.8%;overflow: hidden;display:inline-block;text-decoration:none;float:left;margin:0 1.1% 2%;padding: 0px !important;}
h2.post-title a {font-size:14px;line-height:16px;font-family: &#39;Open Sans Condensed&#39;, sans-serif;padding:1px;color:#444;}
h2.post-title {height: 46px;text-align:center;width:100%;margin:0!important;}
.date-header {display: none;}
.post-body a {text-decoration: none;}
.posts-thumb {width:100%!important;height:190px!important;overflow:hidden;clear:both;}
.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:#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:5px;}
a.comment-bubble {color:#fff;text-decoration:none;font-size:100%;font-weight: bold;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;}
@media screen and (max-width: 400px){
.post {height: auto;width:98%;}}
</style></b:if></b:if>
Labels:

Share: