Cara Mengubah Tampilan Homepage Statis Menjadi Grid Pada Blog

Perbedaan Tampilan Statis Dan Grid

Cara Membuat Tampilan Homepage Blogspot Dari Statis Menjadi Grid Style. Secara default tampilan artikel pada homepage blogspot adalah berbentuk statis alias vertikal, Namun kita juga dapat melakukan kustomisasi tampilan tersebut menjadi tampilan grid atau kotak secara horizontal. Untuk lebih jelasnya silahkan ikuti tutorial berikut ini

Baca juga :
Cara Membuat Auto Readmore Keren Otomatis

Cara Mengubah Tampilan Homepage Blogspot Statis Menjadi Grid Style

1. Masuk ke dalam menu "Tema" dan klik "Edit HTML"
2. Letakkan kode berikut ini di atas kode tag </head>

<b:if cond='data:blog.pageType != &quot;item&quot; and data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;archive&quot;'>
<style type='text/css'>
.post-outer{float:left;width:calc(50% - 2px);height:210px;margin:4px 1px}
div.post-body{padding:5px}
.post.hentry{border:1px solid red;margin:4px}
.post-title a,.post-title{font-size:20px;text-decoration:none;color:#f8695e;height:47px;overflow:hidden;display:block}
.thumbnail-post{width:100%;height:140px;display:block;margin:0}
</style>
</b:if>

3. Kemudian cari kode <data:post.body/> yang ada di dalam <b:includable id='post' var='post'>...</b:includable> dan ganti kode tersebut dengan kode berikut

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:post.firstImageUrl'>
      <a expr:href='data:post.url'><img class='thumbnail-post' expr:src='data:post.firstImageUrl' expr:title='data:post.title'/></a>
    <b:else/>
      <a expr:href='data:post.url'><img class='thumbnail-post' expr:title='data:post.title' src='http://1.bp.blogspot.com/-XeZs003zT-4/UwM1mfc9l3I/AAAAAAAAAlw/TNTcFCMPH4A/s1600/no-image-thumbnail.jpg'/></a>
    </b:if>
  </b:if>
</b:if>

Setelah itu simpan perubahan tema tersebut dan lihatlah hasilnya

Baca juga :
Cara Membuat Template Blog Dari Awal
Cara Membuat Menu Navigasi Dropdown Sederhana
Template Professional Absolute Grid Style For Blogspot

Itu tadi tutorial singkat mengenai Cara Membuat Tampilan Homepage Statis Menjadi Grid Pada Blog yang dapat saya sampaikan, semoga bermanfaat

Share this post