Cara Membuat Halaman Blog Menjadi Grid Layout Mirip Blog Igniel - SeriesWans

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.

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZtd-LT7HVx44sKz2N78nl9CzOsx6SGlhrlqDW5zxfF7qu50tJBZ_xAodigwExURSVXHIIPN3CkubAQ0Tm0LCnpowm0Fxl82JpgxiExN_CQ0aXHx00ehRG08dSuh-_GofDkDxDZ7VLWt2W/w300-c-h140/no-image.png&#39;
var no_thumb2 = &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSvtYejmXX1NWGIHanSQA5UqYKtUmdxqaqfN8MWJt7bElL0jC7ZSDBAGpVLafOfkL6uiZyAN7St2jMuFRhzNUTLmpIVSz0hqalUrMbTSDluBWWPqPEAVb7Q-6LgeX7TrrpAkY5h3Br4-Jj/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.
  
• 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>

• 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 3.1 dan 3.2, 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 :

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).

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.

tips — Update V.2 Mode Halaman Grid

Rincian Perubahan/Penambahan 04/05/2020 :
1. Penambahan Snippet
2. Perubahan column dari 2 baris menjadi 1 baris di mode tampilan mobile

Pada perubahan kali ini saya menambahkan snippet pada halaman gridnya dan merubah tampilan di smartphone dari 2 bars menjadi 1 baris saja, agar terlihat rapih dan tidak terlalu kecil melihat isi snippetnya.  oke kita langsung saja ke tutorialnya.

• Masuk ke Edit HTML
• Silahkan cari kode <div class='post-bottom'> 
• Selanjutnya copy kode di bawah ini dan letakan di atas kode tersebut

<div class='serieswans-snippet'>
   <div class='post-snippet-p'>
   <b:eval expr='snippet(data:post.longSnippet, {length: 100})'/>
   </div>
    </div>

• Lalu copy kode CSS di bawah ini dan letakan di atas kode ]]></b:skin>

.serieswans-snippet {
 padding: 5px;
    margin-bottom: 20px;
}
.post-snippet-p{
 font-size:13px;
 border-left:2px solid #2962ff;
 padding-left: 2px;
}

• Pemasangan Snippet sudah selesai, tinggal kita ubah tampilan pada mode mobilenya
• Cari kode .blog-posts .post-outer {  perlu di ingat kode tersebut tidak hanya satu, silahkan anda cari kode tersebut yang di bungkus oleh kode @media (max-width: 480px). jika sudah ketemu , ubah width:50% ke 100%
• Terkahir simpan tema dan cek hasilnya

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.

Related Posts