Cara Membuat Tampilan Halaman Blog Menjadi Grid Layout Mirip Blog Igniel

Daftar isi [Tampil]
Serieswans.com | Cara Membuat Tampilan Halaman Blog Menjadi Grid Layout - Pada umumnya semua template bawaan default blogger ini di menu halamannya masih menggunakan mode list post. tak hanya itu di template lain selain bawaan blogger juga kebanyakan masih menggunakan mode list, itu juga tergantung ke inginan dari si pembuat template tersebut. namun menurut saya lebih bagus menggunakan mode Grid layout, karena bentuk desain itu sangat menarik dan minimalist.

Membuat Halaman Layout Grid ini juga merupakan salah satu cara untuk membuat blog anda akan menjadi keren, terlihat berbeda dari template lain yang pada umumnya masih menggunakan mode list post. untuk dari segi tampilan saya rasa sudah sangat baik, sedangkan dari segi kecepatan loading juga menurut saya cukup cepat prosesnya.
Cara Membuat Tampilan Halaman Blog Menjadi Grid Layout Mirip Blog Igniel
Grid Layout Mirip Blog Igniel
Untuk Desain Mode Grid Layout yang saya akan share ini mirip dengan blog Igniel dan blog saya sendiri serieswans.com, untuk penerapannya ini cukup lumayan banyak dan rumit bagi anda yang masih awam mengenai dunia coding atau masih memulai membuat blog. 

Tutorial ini saya buat karena banyak sekali permintaan melalui Contact Email blog, dan minta untuk di buatkan menu Grid layout. oleh karena itu saya coba untuk meluangkan waktu, untuk membuat tutorial cara membuat Halaman Grid Layout di blog. cara ini akan berhasil jika anda mengikutinya dengan benar. oke kita langsung saja ke tutorailnya. silahkan simak dan perhatikan langkah-langkah di bawah ini.

Cara Membuat Tampilan Halaman Blog Menjadi Grid Layout Mirip Blog Igniel

  • Login terlebih dahulu ke blogger.com dan masuk menu Dashboard Blogger.
  • Kemudian pilih menu Tema => Edit HTML
  • Lalu cari kode ]]></b:template-skin>  (Tekan tombol CTRL + F untuk mempermudah mencari kode tersebut).
  • Setelah itu copy kode CSS Grid di bawah ini dan letakan tepat di bawah kode tersebut.

<b:if cond='data:view.isMultipleItems'>
<style>
/*<![CDATA[*/
/* GRID HOME PAGE by serieswans.com */
.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 rgba(0,0,0,0.2);border-radius:20px;box-shadow: 1px 0px 5px rgba(0,0,0,0.8)}
.img-thumbnail{position:relative;float:none;width:100%;height:0;border-radius:22px 22px 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: #666;
    padding: 5px 8px;
    border-radius: 50px;
    font-size: 10px;
}
.post-label a {
    background: transparent;
    color: #666;
  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: #666;
    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 </head> dan letakan kode Javascript Grid di bawah ini tepat di atas kode tersebut

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'> 
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json) {
    for (var i = 0; i < numposts; i++) {
        var entry = json.feed.entry[i];
        var posttitle = entry.title.$t;
        var posturl;
        if (i == json.feed.entry.length) break;
        for (var k = 0; k < entry.link.length; k++) {
            if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
                var commenttext = entry.link[k].title;
                var commenturl = entry.link[k].href;
            }
            if (entry.link[k].rel == 'alternate') {
                posturl = entry.link[k].href;
                break;
            }
        }
        var thumburl; 
        try {
            thumburl = entry.media$thumbnail.url;
      thumburl = thumburl.replace("s72-c/","/w"+thumb_width+"-h"+thumb_height+"-c/");
        } catch (error) {
            s = entry.content.$t;
            a = s.indexOf("<img");
            b = s.indexOf("src="", a);
            c = s.indexOf(""", b + 5);
            d = s.substr(b + 5, c - b - 5);
            if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {
                thumburl = d;
            } else thumburl = no_thumb;
        }
        var postdate = entry.published.$t;
        var cdyear = postdate.substring(0, 4);
        var cdmonth = postdate.substring(5, 7);
        var cdday = postdate.substring(8, 10);
    document.write('<ul class="rp_thumbs">');
        document.write('<li>');
        if (showpostthumbnails == true)
            document.write('<a href="' + posturl + '"><div class="rp_thumb"><span class="rollover"></span><img width="' + thumb_width + '" height="' + thumb_height + '" alt="' + posttitle + '" src="' + thumburl + '"/></div></a>');
        document.write('<span class="rp_title"><a href="' + posturl + '" target ="_top">' + posttitle + '</a></span>');
        var towrite = '';
        document.write('<span class="rp_meta">');
        if (showpostdate == true) {
            towrite = towrite + '<span class="rp_meta_date">' + cdday + '/' + cdmonth + '/' + cdyear + '</span>';
        }
        if (showcommentnum == true) {
            if (commenttext == '1 Comments') commenttext = '1 Comment';
            if (commenttext == '0 Comments') commenttext = 'No Comments';
            commenttext = '<span class="rp_meta_comment"><a href="' + commenturl + '" target ="_top">' + commenttext + '</a></span>';
            towrite = towrite + commenttext;
        }
        if (displaymore == true) {
            towrite = towrite + '<span class="rp_meta_more"><a href="' + posturl + '" class="url" target ="_top">Read More...</a></span>';
        }
        document.write(towrite);
    document.write('</span>');
    document.write('<span class="rp_summary">');
        if ("content" in entry) {
            var postcontent = entry.content.$t;
        } else
        if ("summary" in entry) {
            var postcontent = entry.summary.$t;
        } else var postcontent = "";
        var re = /<S[^>]*>/g;
        postcontent = postcontent.replace(re, "");
        if (showpostsummary == true) {
            if (postcontent.length < numchars) {
                document.write('');
                document.write(postcontent);
                document.write('');
            } else {
                document.write('');
                postcontent = postcontent.substring(0, numchars);
                var quoteEnd = postcontent.lastIndexOf(" ");
                postcontent = postcontent.substring(0, quoteEnd);
                document.write(postcontent + '...');
                document.write('');
            }
        }
    document.write('</span>');
        document.write('</li>');
    document.write('</ul>');  
    }
    document.write('<ul class="rp_thumbs2">');
    for (var i = 1; i < numposts2; i++) {
        var entry = json.feed.entry[i];
        var posttitle = entry.title.$t;
        var posturl;
        if (i == json.feed.entry.length) break;
        for (var k = 1; k < entry.link.length; k++) {
            if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
                var commenttext = entry.link[k].title;
                var commenturl = entry.link[k].href;
            }
            if (entry.link[k].rel == 'alternate') {
                posturl = entry.link[k].href;
                break;
            }
        }
        var thumburl2;  
        try {
            thumburl2 = entry.media$thumbnail.url.replace("/s72-c/","/w"+thumb_width2+"-h"+thumb_height2+"-c/");
        } catch (error) {
            s = entry.content.$t;
            a = s.indexOf("<img");
            b = s.indexOf("src="", a);
            c = s.indexOf(""", b + 5);
            d = s.substr(b + 5, c - b - 5);
            if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {
                thumburl2 = d;
            } else thumburl2 = no_thumb2;
        }
        var postdate = entry.published.$t;
        var cdyear = postdate.substring(0, 4);
        var cdmonth = postdate.substring(5, 7);
        var cdday = postdate.substring(8, 10);
    if (showpostthumbnails2 == true)
            document.write('<a href="' + posturl + '"><div class="rp_thumb2"><img width="' + thumb_width2 + '" height="' + thumb_height2 + '" alt="' + posttitle + '" src="' + thumburl2 + '"/></div></a>');
    document.write('<li>');
    document.write('<span class="rp_title rp_title2"><a href="' + posturl + '" target ="_top">' + posttitle + '</a></span>');
        var towrite = '';
        document.write('<span class="rp_meta rp_meta2">');
        if (showpostdate2 == true) {
            towrite = towrite + '<span class="rp_meta_date rp_meta_date2">' + cdday + '/' + cdmonth + '/' + cdyear + '</span>';
        }
        if (showcommentnum2 == true) {
            if (commenttext == '1 Comments') commenttext = '1 Comment';
            if (commenttext == '0 Comments') commenttext = 'No Comments';
            commenttext = '<span class="rp_meta_comment rp_meta_comment2"><a href="' + commenturl + '" target ="_top">' + commenttext + '</a></span>';
            towrite = towrite + commenttext;
        }
        if (displaymore2 == true) {
            towrite = towrite + '<span class="rp_meta_more rp_meta_more2"><a href="' + posturl + '" class="url" target ="_top">Read More...</a></span>';
        }
        document.write(towrite);
    document.write('</span>');
    document.write('</li>');
    }
    document.write("</ul>")
}
//]]>
</script>
</b:if>
</b:if>

<script type='text/javascript'>
var widgetBacaJuga = true;
var numposts = 1;
var numposts2 = 3;
var showpostthumbnails = true;
var showpostthumbnails2 = true;
var displaymore = false;
var displaymore2 = false;
var showcommentnum = false;
var showcommentnum2 = false;
var showpostdate = true;
var showpostdate2 = true;
var showpostsummary = true;
var numchars = 100;
var thumb_width = 300;
var thumb_height = 140;
var thumb_width2 = 100;
var thumb_height2 = 70;
var no_thumb = &#39;https://1.bp.blogspot.com/-7vDs5hMaDho/U268E2ecF4I/AAAAAAAADY8/RBHVTTuJrxc/w300-h140-c/no-image.png&#39;
var no_thumb2 = &#39;https://3.bp.blogspot.com/-ltyYh4ysBHI/U04MKlHc6pI/AAAAAAAADQo/PFxXaGZu9PQ/s60-c/no-image.png&#39;
</script>

<script type='text/javascript'>
//<![CDATA[
function bp_thumbnail_resize(image_url,post_title)
{
var image_width=200;
var image_height=150;
image_tag='<img width="'+image_width+'" height="'+image_height+'" src="'+image_url.replace('/s72-c/','/w'+image_width+'-h'+image_height+'-c/')+'" alt="'+post_title.replace(/"/g,"")+'" title="'+post_title.replace(/"/g,"")+'"/>';
if(post_title!="") return image_tag; else return ""; 
}
//]]>
</script>

<style>
    }
    @media only screen and (max-width:1024px){
      .post-bottom a {
        font-size: 22px;
      }
    }
    @media only screen and (max-width:800px){
      .post-bottom a {
         font-size: 10px;
      }
    }
    @media only screen and (max-width:640px){
      .post-bottom a {
         font-size: 8px;
      }
    }
    @media only screen and (max-width:568px){
      .post-bottom a{
        font-size: 5px;
      }
    }
    @media only screen and (max-width:480px) {
      .post-bottom a{
        font-size: 7px;
      } 
    }
    </style>

  • Selanjutnya cari kode <div class='blog-posts'> atau yang mirip dengan kode tersebut. biasanya setiap template berbeda. 
  • Lalu hapus kode di bawahnya, contoh kodenya seperti pada gambar di bawah ini.
    Cara Membuat Tampilan Halaman Blog Menjadi Grid Layout Mirip Blog Igniel
    Blog-post
  • Kemudian copy HTML di bawah ini dan letakan di tempat anda menghapus kode tersebut.

<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 kita akan mengganti postingan halaman default dari template tersebut dari mulai snippet dan yang lainnya. cari kode seperti gambar di bawah ini.  letak kode tersebut biasanya di atas kode </article>
  • Cara Membuat Tampilan Halaman Blog Menjadi Grid Layout Mirip Blog Igniel
    Postingan Halaman Default Template
  • Jika sudah ketemu, silahkan ganti tersebut dengan kode di bawah ini.

<!-- 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;'/>   

  • Tahap pemasangan kode tersebut sudah selesai, sekarang tinggal membuat judul postingannya menjadi responsive di semua layar.
  • Silahkan copy script CSS di bawah ini dan letakan di atas 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>

  • Terakhir simpan Tema dan cek hasilnya.

Cara ini juga sudah saya test di template viomagz versi terbaru, jika anda mengggunakan template lain, silahkan sesuaikan saja mengenai penempatannya. 

Nah sampai di sini caranya sudah selesai dah hasillnya akan seperti gambar di atas. jika setelah anda cek hasilnya berantakan, silahkan anda tanyakan di kolom komentar, saya akan bantu sebisanya.

Jika anda mengalami masalah seperti gambar di bawah ini :
Cara Membuat Tampilan Halaman Blog Menjadi Grid Layout Mirip Blog Igniel
Mode Mobile
Jika kita lihat pada gambar pertama di atas ini, pada bagian gambar masih belum responsive, Icon label masih belum muncul (hanya cuma kode dari font awesome).
Cara Membuat Tampilan Halaman Blog Menjadi Grid Layout Mirip Blog Igniel
Mode Dekstop
Sedangkan pada gambar yang kedua, jarak antara halaman postingan dengan sidebar itu sangat dekat, silahkan cari kode wrapper dan ubah lebar widthnya. silahkan sesuaikan saja.

Untuk anda yang masih belum paham dan mengalami masalah seperti gambar di atas, silahkan tonton video cara membuat halaman mode grid layout lengkap di bawah ini.

Demikian pembahasan tutorial kali ini mengenai Cara Membuat Tampilan Halaman Blog Menjadi Grid Layout Mirip Blog Igniel.  jika anda masih belum mengerti mengenai tutorial diatas, silahkan ajukan pertanyaannya di kolom komentar ya. semoga bermanfaat.
Show comments
Hide comments

44 Komentar untuk "Cara Membuat Tampilan Halaman Blog Menjadi Grid Layout Mirip Blog Igniel"

  1. Mantap postingannya mas, akhirnya dibikin juga tutorialnya, saya yang email mas kemarin.. saya coba dulu, kalau ada yg tidak dimengerti mohon dibantu ya mas

    BalasHapus
    Balasan
    1. setelah selesai saat mau di save muncul tulisan ini : Kesalahan saat mengurai XML, baris 2769, kolom 8: The element type "style" must be terminated by the matching end-tag "/style" , itu kenapa ya mas?

      Hapus
    2. Ada 2 kemungkinan mas yaitu tag "/style" ada yng kehpus sama mas, atau coba mas tambahiin tag "</style" nya. silahkan mas coba cek lagi. karena sensitif mas . kalo kode kurang satu aja,pasti akan eror

      Hapus
  2. Balasan
    1. Sama-sama gan, terimakasih sudah mencoba

      Hapus
  3. Mantap.. step nya sudah saya terapkan ke dalam website dan berhasil membuat tampilan halaman menjadi grid layout..

    Salam dari InfoGaes.Com

    BalasHapus
  4. om kalau template https://fiksioner.blogspot.com/ bisa nggak ya dibuat versi grid ?

    BalasHapus
  5. Min tolong buatkan menu seperti web admin Serieswans

    BalasHapus
    Balasan
    1. kalo untuk menu, ada banyak kode yang harus di sesuaikan, agar responsive.
      insha allah nanti kalo ada waktu luang, saya akan coba membuat tutorialnya :)

      Hapus
  6. work gan , mantap tutorial nya sangat berguna, nunggu tutorial lainya

    BalasHapus
    Balasan
    1. terimakasih atas feedbacknya gan. pantengin terus blognya ya bro :)

      Hapus
  7. mantap gan work di template viomagz saya

    BalasHapus
  8. F02c itu apa gan??

    Dan biar pas sejajar gmna gan pnya aku 7 grid di menu utama, mau aku hilangin satu biar rapih carany gmna biar 6 postingan ???

    BalasHapus
    Balasan
    1. Itu kode font awesome, kalo mau di sejajarin , mas edit tita letak, edit post, lalu ubah jumlh postingan yg di tampilkan menjadi 6

      Hapus
  9. Artikel sangat bermanfaat bagi saya yang pemula belajar edit template

    BalasHapus
    Balasan
    1. Alhamdulillah kalo begitu gan, semngt terus bljr edit templatenya :)

      Hapus
  10. min biar gak melengkung bagaimana?? kurang suka melengkung begitu sudut nya, tolong kirim tutor nya ke khenzlcasher@gmail.com

    BalasHapus
    Balasan
    1. caranya tinggal ubah border-radius:20px menjadi 0px... silahkan di coba

      Hapus
  11. Wihh mantap nih grid :D

    Tapi viomagz ditampilan mobile juga udah Grid, tapi satu baris eh ini dua baris keren joonn

    BalasHapus
    Balasan
    1. Alhamdulillah senang bisa membantu anda mas :) hatur nuhun

      Hapus
  12. Makasih kak artikel tentang membuat halaman grid. Ini sangt membantu buat blog saya

    BalasHapus
  13. Coba cek lagi kodenya, apa ada yang kurang atau lebih.

    BalasHapus
  14. Baru bisa untuk non AMP.. semoga para peneliti CSS bisa buatkan juga grid atau list untuk non AMP..

    BalasHapus
  15. Kode pengganti itu kira kira apa ya gan? Soalnya di template gw nggak ada kode gituan

    BalasHapus
  16. tutorial cara setting untuk ampilan mobilenya dong

    BalasHapus
    Balasan
    1. Setting tampilan mobile yg bagian mana gan ?

      Hapus
  17. kok di hp turun ya gan gambarnya,cara fixnya gimana ?? Mohon pencerahanya terimakasih

    BalasHapus
    Balasan
    1. fixnya sudah ada itu di atas, di videonya juga sudah ada tutorialnya

      Hapus
  18. Cara tambahin snippet article /summary post di grid gimna??

    BalasHapus
Catatan Untuk Para Jejaker
  • Mohon Tinggalkan jejak sesuai dengan judul artikel.
  • Tidak diperbolehkan untuk mempromosikan barang atau berjualan.
  • Dilarang mencantumkan link aktif di komentar.
  • Komentar dengan link aktif akan otomatis dihapus
  • *Berkomentarlah dengan baik, Kepribadian Anda tercemin saat berkomentar.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Copyright © 2019 - 2020 Serieswans - All Rights Reserved Created With