×

search by faronesia.com

Faronesia
Profesional and Specialist ReDesign Template blogger

Cara Membuat Tampilan Blog Menjadi Grid ala Blog Igniel

Faronesia.com - Membuat Layout postingan grid atau tampilan postingan blog kotak-kotak mungkin sudah tidak asing lagi dengan istilah tersebut apalagi bagi para Redesign template blog mungkin sudah makanan sehari-hari. Anda juga ingin mengubah layout postingan blog yang anda kelola menjadi grid juga? Wah kebetulan sekali jika anda berkunjung di halaman web ini. Tapi sebelum itu, simak dulu penjelasan berikut ini.

Dalam tutorial kali ini kita akan membuat sebuah layout grid ala Igniel yang pasti dijamin blog yang anda kelola makin keren dan cantik. Sebelumnya, pastinya saya sudah melakukan uji coba terlebih dahulu sebelum tutorial ini saya upload, dan hasilnya lumayan memuaskan. Dengan berbekal template viomagz v.2.6 yang mulanya terkesan biasa-biasa menjadi sebuah template yang menawan.

Sebenarnya tutorial ini sudah dibuat oleh beberapa blogger, namun pada tutorial yang disampaikan terdapat kode yang terlihat berantakan terlebih pada bagian CSS yang mungkin membuat para pembaca bingung untuk memahaminya terlebih untuk pemula. Nah disini saya hanya mengupload kembali kode tersebut yang sudah saya rapikan dan saya modif sedikit serta penyampaian yang berbeda dengan ciri khas faronesia.com.

Jika anda kurang puas melihat hasil hanya dari tumbnail postingan ini, anda bisa mengklik tombol view demo dibawah ini untuk bisa merasakan secara langsung perubahannya.
Bagaimana? Tertarik untuk merubah tampilan post blog menjadi grid? Baiklah mari kita mulai oprasi tempate. Tapi saya ingatkan kepada anda bahwa backuplah template anda terlebih dahulu untuk berjaga-jaga jika terdapat hal-hal yang tidak di inginkan saat proses pengeditan tempate.


Cara Membuat Tampilan Blog Menjadi Grid ala Blog Igniel

  • Masuk dashboard blog anda
  • Lalu masuk ke menu tema
  • Cari kode ]]></b:template-skin>
  • Tempelkan kode dibawah ini tepat setelah kode ]]></b:template-skin>
<b:if cond='data:view.isMultipleItems'> <style>
/* GRID HOME PAGE BY FARONESIA */
.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>
  • Selanjutnya cari kode <div class='blog-posts'>
  • Lalu hapus kode dibawahnya yang berwarna merah
<!-- 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 -->
  • Kemudian salin kode HTML dibawah ini lalu tempelkan ditempat anda menghapus kode 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>
  • Setelah itu hapus kode postingan halaman default dibawah ini, biasanya terletak di atas kode </article>, hapus 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>
  • Tempelkan kode dibawah ini tepat dimana anda menghapus kode diatas
<!-- 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;'/> 
  • Baiklah, sampai disini post grid style sudah jadi, tinggal membuat judul postingan responsive disemua layar.
  • Salin kode CSS dibawa ini lalu letakkan 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>
  • Sampai disini sudah selesai, anda bisa menyimpan template dan melihat hasilnya.
  • Mengenai permasalahan terlalu dekat bahkan saling menimpa antara postingan dan sidbar caranya cari masuk ke pengeditan template lagi dan cari kode post-wrapper 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;
}
  • Ubah yang berwarna merah menjadi 67% 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;
}
Untuk anda yang mengalami permasalahan-permasalahan lain yang menyangkut tutorial diatas silahkan tinggalkan komentar atau hubungi contact yang tersedia untuk mendapatkan bantuan.

Demikianlah mengenai Cara Membuat Tampilan Blog Menjadi Grid ala Blog Igniel semoga bermanfaat untuk para pembaca dimanapun anda berada. Jika menurut anda artikel ini bermanfaat jangan lupa share karena dengan share artikel ini sama halnya anda berpartisipasi dalam mengembangkan website faronesia.
Buka komentar
Tutup komentar
  1. Bagus gan
    Jangan lupa mampir ke blog kami
    Www.bangklik.com

    ReplyDelete
  2. Keren min, ijin bookmark

    ReplyDelete
  3. Ini yang gua cari .. thanks ilmunya :)

    Mampir juga akal remaja

    ReplyDelete
  4. Wow, very interesting and informative post you have done bro. I was looking for a tutorial like this, thank you so much.

    Please how can I reach you on Facebook? I want us to talk.

    ReplyDelete
  5. cara setting untuk tampilan mobilenya gimana ya ?

    ReplyDelete
    Replies
    1. Masalah responsive saya sershkan kepada pengguna hehe

      Delete
  6. cara ubah nav menu di template yang lain ngak bisa ya gan.?

    ReplyDelete
  7. Gan ko punya saya gk kotak tampilannya. Malah jadi panjang kebawah.

    ReplyDelete

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar selalu di moderasi.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Notifikasi pengguna

Tetap selalu terhubung dengan kami untuk menjadi bagian dari Faronesa caranya cukup dengan menekan tombol dibawah ini.

Tutup
×

Faronesia

Kami senantiasa membantu memecahkan masalah seputar desain blog melalui request tutorial

Request tutorial