Cara Membuat Tampilan Blog Menjadi Grid Seperti Igniel

Jagoandzgn.com - Pada kesempatan kali ini saya akan memberikan sebuah tutorial keren Bagaimana Cara Membuat Tampilan Blog Menjadi Grid Seperti Igniel. Seperti yang kita ketahui tampilan seperti ini sudah tidak asing lagi bagi kita dikalangan design yang pasti membuat tampilan blog kamu menjadi lebih keren.

Sebenarnya tutorial ini sudah dibuat oleh beberapa blog hanya saja untuk tampilannya agak berantakan dibagian CSS nya, nah disini saya akan membagikan tutorialnya agar menjadi rapih dan bagus untuk dipandang.

Cara Membuat Tampilan Blog Menjadi Grid Seperti Igniel

1. Silahkan kamu Login ke blogger.com dengan menggunakan Gmail kamu.
2. Masuk ke menu TEMA > klik Edit HTML
3. Silahkan kamu cari kode ]]></b:template-skin> dan Pastekan kode dibawah ini tepat DIBAWAH kode tersebut.

<b:if cond='data:view.isMultipleItems'> <style>
/* GRID HOME PAGE BY JAGOANDZGN */
.post-container{
padding:0;
background:transparent;
}
.blog-posts{
margin:0 -7px;
}
.blog-posts .post-outer{
width:50%;
padding:0 10px 30px 10px;
box-sizing:border-box;
}
.blog-posts{
display:flex;
flex-wrap:wrap;
}
.blog-posts .post-outer .post{
width:100%;
height:100%;
background:#fff;
overflow:hidden;
position:relative;
border:2px solid #fff;
border-radius:20px;
box-shadow: 4px 4px 4px rgba(0 , 0 , 0 , 0.12) , 0 4px 4px 4px rgba(0 , 0 , 0 , 0.12);
}
.img-thumbnail{
position:relative;
float:none;
width:100%;
height:0;
border-radius:20px 20px 0 0;
overflow:hidden;
padding-bottom:66.666666%;
}
.img-thumbnail img{
width:100%;
height:auto;
border-radius:0;
box-sizing:border-box;
}
h2.post-title {
margin: 0;
padding: 14px 10px; font-size: 16px;
display: inline-block;
width: 100%;
box-sizing: border-box;
margin-bottom: 30px;
}
.post-outer .post .post-bottom {
position: absolute;
bottom: 10px;
width: 100%;
overflow: hidden;
padding: 10px;
font-size: 11px;
box-sizing: border-box;
}
.post-outer .post span.post-comments{
float:right;
}
span.post-label{
float:left;
}
span.post-label a:nth-child(n+2){
display:none;
}
.post-bottom a {
color: #fff;
background: #22a7f0;
padding: 5px 8px;
border-radius: 50px;
font-size: 10px;
}
.post-label a {
background: transparent;
color: #22a7f0;
padding:8px 0px;
}

/* ICON DEFAULT */
.post-label a::before {
content: "\f02c";
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit; margin-right: 2px;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; color: #fff;
padding: 10px;
background: #22a7f0;
border-radius: 30px;
font-size: 12px;
}
.post-container{
padding-right:0;
width:100%;
margin-top:10px;
}
@media (max-width:480px){
.blog-posts .post-outer{
padding:0 8px 4px;
margin:0 0 10px 0
}
.img-thumbnail{
margin:0;
}
h2.post-title{
margin-bottom:14px;
font-size:10px;
padding:1px 5px
}
.post-label a::before{
padding:5px;
}
.post-outer .post .post-bottom{
padding:5px;
}
}
@media (max-width:640px){
.post-container{
width:100%;
}
.item-thumbnail{
width:70px;
float:left;
padding-bottom:0;
height:70px;
margin-right:14px;
margin-bottom:14px
}
.PopularPosts .item-title{
padding:0;
font-size:14px;
}
.post-outer .post .post-bottom {
bottom:5px;
}
}
</style>
</b:if>

4. Selanjutnya, cari kode berikut ini <div class='blog-posts'>
5. Kalau sudah dapat silahkan hapus kode yang berwarna merah seperti dibawah ini.

<!-- posts -->
    <div class='blog-posts'>
<b:include data='top' name='status-message'/>
      <data:defaultAdStart/>
      <b:loop values='data:posts' var='post'>
        <b:if cond='data:post.isDateStart'>
          <b:if cond='data:post.isFirstPost == &quot;false&quot;'>
            &lt;/div&gt;&lt;/div&gt;
          </b:if>
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-outer&quot;&gt;
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-posts&quot;&gt;
        </b:if>
        <div class='post-outer'>
        <b:include data='post' name='post'/>
        <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
          <b:include data='post' name='comment_picker'/>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:include data='post' name='comment_picker'/>
        </b:if>
        </div>
        <b:if cond='data:post.includeAd'>
          <b:if cond='data:post.isFirstPost'>
            <data:defaultAdEnd/>
          <b:else/>
            <data:adEnd/>
          </b:if>
          <div class='inline-ad'>
            <data:adCode/>
          </div>
          <data:adStart/>
        </b:if>
      </b:loop>
      <b:if cond='data:numPosts != 0'>
        &lt;/div&gt;&lt;/div&gt;
      </b:if>
      <data:adEnd/>
    </div>
    <!-- navigation -->

6. Kemudian copy kode HTML dibawah ini dan Pastekan ditempat anda menghapus tadi.

<data:defaultAdStart/>
      <b:loop values='data:posts' var='post'>

     <div class='post-outer'>
    <b:include data='post' name='post'/>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
      <b:include data='post' name='comment_picker'/>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <b:include data='post' name='comment_picker'/>
    </b:if>
    </div>
    <b:if cond='data:post.includeAd'>
      <b:if cond='data:post.isFirstPost'>
        <data:defaultAdEnd/>
      <b:else/>
        <data:adEnd/>
      </b:if>
      <div class='inline-ad'>
        <data:adCode/>
      </div>
      <data:adStart/>
    </b:if>
  </b:loop>
  <b:if cond='data:numPosts != 0'>
  </b:if>
  <data:adEnd/>
</div>

7. Setelah itu hapus kode postingan di halaman default dibawah ini, yang biasanya terletak DIATAS kode </article> hapus kode yang berwarna merah.

<b:default/>
<!-- Posting halaman default (index, arsip, dll.) -->
  <b:include data='post' name='postthumbnail'/>
  <b:if cond='data:post.firstImageUrl'>
<meta expr:content='data:post.firstImageUrl' itemprop='image'/>
  </b:if>
  <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
          <h2 class='post-title entry-title' itemprop='name headline'>
            <b:if cond='data:post.link'>
              <a expr:href='data:post.link'><data:post.title/></a>
            <b:else/>
              <b:if cond='data:post.url'>
                <b:if cond='data:blog.url != data:post.url'>
                  <a expr:href='data:post.url'><data:post.title/></a>
                <b:else/>
                  <data:post.title/>
                </b:if>
                <b:else/>
                  <data:post.title/>
              </b:if>
            </b:if>
          </h2>
</b:if>
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description'>
<div class='post-snippet'>
<data:post.snippet/>
</div>
</div>
<div class='post-info info-1'>
<b:include data='post' name='postauthorinfo'/>
<b:include data='post' name='postdateinfo'/>
<b:include data='post' name='postcommentinfo'/>
<b:include data='post' name='postQuickEdit'/>
</div>
</b:switch>
<div style='clear: both;'/>
  </article>

8. Silahkan kamu copy kode dibawah ini dan pastekan di kode yang kamu hapus tadi.

<!-- Posting halaman default (index, arsip, dll.) -->
<b:if cond='data:post.labels'>
</b:if>
<b:include data='post' name='postthumbnail'/>
<b:if cond='data:post.firstImageUrl'>
<meta expr:content='data:post.firstImageUrl' itemprop='image'/>
</b:if>
<a expr:name='data:post.id'/>
  <b:if cond='data:post.title'>
      <h2 class='post-title entry-title' itemprop='name headline'>
        <b:if cond='data:post.link'>
          <a expr:href='data:post.link'><data:post.title/></a>
        <b:else/>
          <b:if cond='data:post.url'>
            <b:if cond='data:blog.url != data:post.url'>
              <a expr:href='data:post.url'><data:post.title/></a>
            <b:else/>
              <data:post.title/>
            </b:if>
            <b:else/>
              <data:post.title/>
          </b:if>
        </b:if>
      </h2>
</b:if>
  <!-- <div class='post-snippet'>
  <data:post.snippet/>
  </div> -->
<div class='post-bottom'>
<span class='post-comments'>
  <b:include data='post' name='postcommentinfo'/>
</span>
<b:if cond='data:post.labels'>
<span class='post-label'>
  <b:loop values='data:post.labels' var='label'>
  <a expr:href='data:label.url' rel='tag'> <data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'/>
  </b:loop>
</span>
<div style='clear: both;'/>
</b:if>
</div>
</b:switch>
<div style='clear: both;'/>

9. Selanjutnya, salin kode CSS dibawah ini dan pastekan tepat DIATAS kode </body>

<style>
    h2.post-title {
      margin-left: 2px;
    }
    @media only screen and (max-width:1080px){
      h2.post-title {
        margin-left: 2px;
      }
    }
    @media only screen and (max-width:800px){
      h2.post-title {
        margin-left: 1px;
      }
    }
    @media only screen and (max-width:640px){
       h2.post-title {
        margin-left: 1px;
      }
    }
    @media only screen and (max-width:480px) {
       h2.post-title {
        margin-left: 0px;
      }
    }
    </style>

10. Langkah terakhir silahkan kamu cari kode seperti dibawah ini.

/* POST WRAPPER */
.post-container {
padding-right: 25px;
}
#post-wrapper {
background:transparent;
float:left;
width:70%;
max-width:700px;
margin:0 0 10px;
}

11. Ubah kode yang berwarna merah menjadi 67% dan hasilnya akan seperti dibawah ini.

/* POST WRAPPER */
.post-container {
padding-right: 25px;
}
#post-wrapper {
background:transparent;
float:left;
width:67%;
max-width:700px;
margin:0 0 10px;
}

12. Kalau sudah silahkan klik SIMPAN dan Selesai.

Demo

Untuk demonya silahkan tombol demo diatas, Bagaimana hasilnya keren bukan hampir sama seperti igniel pada umumnya apabila kamu memiliki pertanyaan seputar blogger silahkan komen di kolom komentar dibawah artikel ini.