Post Snippet pada HomePage

PostSnippet ini agar memotong artikel anda sehinggan membuat loading lebih cepat pada homepage. Untuk membuatnya silahkan keluar dari menu Template kemudian masuk lagi ke menu Template agar isi dari widget POSTING terlihat.

Gantikan kode KEDUA <data:post.body/> dengan kode berikut

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id' itemprop='articleBody'>
<b:if cond='data:post.thumbnailUrl'>
<script type='text/javascript'>
//<![CDATA[
function bp_thumbnail_resize(image_url,post_title)
{
var image_size=70;
image_tag='<img src="'+image_url.replace('/s72-c/','/s'+image_size+'-c/')+'" class="postthumb" alt="'+post_title+'" title="'+post_title+'"/>';
if(image_url!="") return image_tag; else return "";
}
//]]>
</script>
<a expr:href='data:post.url'><script type='text/javascript'>
document.write(bp_thumbnail_resize(&quot;<data:post.thumbnailUrl/>&quot;,&quot;<data:post.title/>&quot;));
</script></a>
<b:else/>
<a expr:href='data:post.url'><img class='postthumb' expr:alt='data:post.title' expr:title='data:post.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ1MQ-Tc_Tzubo_fe7xTG4E-_M0WqSnP2bRRXu1tzChIO319Qg657U1jyjA3mHxGXk_9e-GU8gQ9OtM7F4wWUH-8WVojrPE6XS46K654CZiWGp0Pmh2AsXzbMeOtt3UYL78S5ZE742V_M/s70-c/default.png'/></a>
</b:if>
<b:if cond='data:post.snippet'><data:post.snippet/>
</b:if>
</div>
<b:else/>
    <b:if cond='data:blog.metaDescription == &quot;&quot;'>
      <!-- Then use the post body as the schema.org description,
          for good G+/FB snippeting. -->
      <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>
        <data:post.body/>
        <div style='clear: both;'/> <!-- clear for photos floats -->
      </div>
    <b:else/>
      <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
        <data:post.body/>
        <div style='clear: both;'/> <!-- clear for photos floats -->
      </div>
    </b:if>
</b:if>
</b:if>
    <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if> 

Kemudian letakkan kode CSS berikut tepat di bawah ]]></b:skin>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
  <style type='text/css'>
    .post{margin-bottom: 10px;
background: #f5f5f5;
width: 100%;
float: left;
margin-top: 10px;
overflow: hidden;
      text-align: justify;}
    .post-footer{display:none;}
    .postthumb{float:left;}
  </style>
  </b:if>

Simpan Template Anda

Pembuatan Responsive

Berikut beberapa permasalahan yang akan diselesaikan dengan cara damai (?) yaitu pada device ukuran 800px, template mulai terlihat terlalu lebar. Agar menyesuaikan dengan ukuran device dari 800px sampai 0px akan dibuat #tumpas-wrapper dengan width 100%, padding dihilangkan dan border dihilangkan.

Kode media query dasar nya seperti berikut

@media screen and (max-width:UKURANDEVICEpx){
#NAMAELEMENT{CSS:VALUE}
}

Prakteknya, seperti berikut. Letakkan kode berikut tepat di atas ]]></b:skin>

@media screen and (max-width:800px){
#tumpas-wrapper{width:100%;border:0px solid #eee;padding:0px;}
}

Simpan Template. Selesai anda telah membuat template responsive anda sendiri

sumber google.com