VEzcwOIzJo2ocMRnvNfZmXylSxSqdBdXDBtRZkxw
Bookmark

Cara Membuat Halaman Blog Menjadi Grid Layout Mirip Blog Igniel

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 Halaman Blog Menjadi 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
  • 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
  • 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 :
Cara Membuat Tampilan Halaman Blog Menjadi Grid Layout Mirip Blog Igniel
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
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.
58 komentar

58 komentar

  • Kurniawan
    Kurniawan
    Maret 10, 2024
    Tutorialnya daging mas, ini yg saya cari-cari berhasil di terapin di blog saya, boleh request ga mas, bikin fitur dark mode seperti di blognya mas, ditunggu ya mas next tutorialnya 😁
    Reply
  • Admin
    Admin
    April 29, 2023
    tolong kasih fullnya aja mas, saya mau build dari 0. masalahnya ketika nyari div class='blog-post' ga ketemu, karena widget postnya default by blogger
    • Admin
      Kurniawan
      Mei 02, 2023
      Pake template apa?
    Reply
  • Sasaa
    Sasaa
    Februari 19, 2023
    Untuk viomag v1.1.0 gak work kah mas help mee jawab please
    • Sasaa
      Kurniawan
      Februari 21, 2023
      coba pakai viomagz v 3.2
    Reply
  • Egi Prasetio
    Egi Prasetio
    Februari 19, 2022
    kaya nya untuk template viomagz 2022 udah ga work gan
    • Egi Prasetio
      Mr.Tutorial
      Maret 03, 2022
      Di template terbaru udah ga work, karena strukturnya udah beda, silahkan coba di template versi 3.2 dan 3.3
    Reply
  • Rabbit Run
    Rabbit Run
    Desember 30, 2021
    Alangkah baikknya,, mnjadikan teks biasa gak bisa dicopas, biar permudah kami copas kode yg ente bagikan
    Reply
  • sufyan Yaan
    sufyan Yaan
    Juli 31, 2021
    kalau di telatakan di atas skin tidak bisa ada kode beerikut:
    /*]]>*/
    </style>
    </b:if>
    • sufyan Yaan
      Belajar Blogging
      Agustus 02, 2021
      coba sertakan kode lengkapnya gan, lewat pastebin saja kalo bisa
    Reply
  • Gabriel Irfan
    Gabriel Irfan
    Juni 18, 2020
    gan bisa redesainkan template saya gak ?
    Reply
  • Putra
    Putra
    Juni 12, 2020
    Wah keren nih, saya harap next bikin tutorial icon svg untuk label seperti punya igniel atau serieswana
    • Putra
      Kurniawan
      Juni 16, 2020
      oke gan nanti saya buatkan tutorialnya
    Reply
  • Kurniawan
    Kurniawan
    April 05, 2020
    Sudah saya ubah dan ada beberapa penambahan snippet dan mode tampilan mobilenya dari 2 column menjadi 1 column saja. selamat mencoba dan terimakasih sudah berkunjung
    Reply
  • @Ara
    @Ara
    April 04, 2020
    Cara tambahin snippet article /summary post di grid gimna??
    • @Ara
      Kurniawan
      April 05, 2020
      oke gan, akan saya update artikelnya
    Reply
  • Giri Diwa Adam
    Giri Diwa Adam
    Maret 10, 2020
    kok di hp turun ya gan gambarnya,cara fixnya gimana ?? Mohon pencerahanya terimakasih
    • Giri Diwa Adam
      Kurniawanz
      April 03, 2020
      fixnya sudah ada itu di atas, di videonya juga sudah ada tutorialnya
    Reply
  • Muhmmd Faisal
    Muhmmd Faisal
    Februari 21, 2020
    tutorial cara setting untuk ampilan mobilenya dong
    • Muhmmd Faisal
      Kurniawan
      Februari 21, 2020
      Setting tampilan mobile yg bagian mana gan ?
    Reply
  • Dava
    Dava
    Februari 18, 2020
    Kode pengganti itu kira kira apa ya gan? Soalnya di template gw nggak ada kode gituan
    • Dava
      Kurniawan
      Februari 19, 2020
      Bisa di jelaskan, kode yg mana ya ?
    Reply
  • Supplier marmer
    Supplier marmer
    Februari 08, 2020
    Baru bisa untuk non AMP.. semoga para peneliti CSS bisa buatkan juga grid atau list untuk non AMP..
    Reply
  • Kurniawan
    Kurniawan
    Februari 04, 2020
    Coba cek lagi kodenya, apa ada yang kurang atau lebih.
    Reply
  • @Ara
    @Ara
    Februari 01, 2020
    Error bang saat di upload
    Reply
  • csow.net
    csow.net
    Januari 26, 2020
    Makasih kak artikel tentang membuat halaman grid. Ini sangt membantu buat blog saya
    • csow.net
      Kurniawan
      Januari 28, 2020
      Sama-sama mas, senang bisa membantu :)
    Reply
  • Miradeviluke Rock ツ
    Miradeviluke Rock ツ
    Januari 25, 2020
    Wihh mantap nih grid :D

    Tapi viomagz ditampilan mobile juga udah Grid, tapi satu baris eh ini dua baris keren joonn
    • Miradeviluke Rock ツ
      Kurniawan
      Januari 28, 2020
      Alhamdulillah senang bisa membantu anda mas :) hatur nuhun
    Reply
  • Khenzl
    Khenzl
    Januari 06, 2020
    min biar gak melengkung bagaimana?? kurang suka melengkung begitu sudut nya, tolong kirim tutor nya ke khenzlcasher@gmail.com
    • Khenzl
      Mr.Tutorial
      Januari 07, 2020
      caranya tinggal ubah border-radius:20px menjadi 0px... silahkan di coba
    Reply
  • Aorlin
    Aorlin
    Desember 17, 2019
    Bermanfaat min!
    • Aorlin
      Kurniawan
      Desember 18, 2019
      Thanks gan, sudah berkunjung
    Reply
  • Komentator
    Komentator
    Desember 07, 2019
    Artikel sangat bermanfaat bagi saya yang pemula belajar edit template
    • Komentator
      Kurniawan
      Desember 08, 2019
      Alhamdulillah kalo begitu gan, semngt terus bljr edit templatenya :)
    Reply
  • Master Search
    Master Search
    November 25, 2019
    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 ???
    • Master Search
      Kurniawan
      November 25, 2019
      Itu kode font awesome, kalo mau di sejajarin , mas edit tita letak, edit post, lalu ubah jumlh postingan yg di tampilkan menjadi 6
    Reply
  • Anonim
    Anonim
    November 25, 2019
    mantap gan work di template viomagz saya
    • Anonim
      Kurniawan
      November 25, 2019
      Mantap gan ,
    Reply
  • Miss.Wiendhy
    Miss.Wiendhy
    November 03, 2019
    work gan , mantap tutorial nya sangat berguna, nunggu tutorial lainya
    • Miss.Wiendhy
      Kurniawan
      November 04, 2019
      terimakasih atas feedbacknya gan. pantengin terus blognya ya bro :)
    Reply
  • Anonim
    Anonim
    Oktober 27, 2019
    Min tolong buatkan menu seperti web admin Serieswans
    • Anonim
      Kurniawan
      Oktober 28, 2019
      kalo untuk menu, ada banyak kode yang harus di sesuaikan, agar responsive.
      insha allah nanti kalo ada waktu luang, saya akan coba membuat tutorialnya :)
    Reply
  • Diyana Harmitha
    Diyana Harmitha
    Oktober 05, 2019
    om kalau template https://fiksioner.blogspot.com/ bisa nggak ya dibuat versi grid ?
    • Diyana Harmitha
      Kurniawan
      Oktober 05, 2019
      Insha allah bisa gan, harus di coba dulu
    • Diyana Harmitha
      Kurniawan
      Oktober 05, 2019
      Karena strukturnya berbeda
    Reply
  • InfoGaes.Com
    InfoGaes.Com
    September 29, 2019
    Mantap.. step nya sudah saya terapkan ke dalam website dan berhasil membuat tampilan halaman menjadi grid layout..

    Salam dari InfoGaes.Com
    • InfoGaes.Com
      Kurniawan
      Oktober 01, 2019
      Oke gan, sama-sama
    Reply
  • Marlin Hidayat Tanjung
    Marlin Hidayat Tanjung
    September 29, 2019
    Thanks gan
    • Marlin Hidayat Tanjung
      Kurniawan
      Oktober 01, 2019
      Sama-sama gan, terimakasih sudah mencoba
    Reply
  • Alekpedia
    Alekpedia
    September 28, 2019
    Terima kasih infonya mas.
    • Alekpedia
      Kurniawan
      September 29, 2019
      sama-sama gan, selamat mencoba :)
    Reply
  • Syahrul Arul
    Syahrul Arul
    September 28, 2019
    Nice tutorial gan
    • Syahrul Arul
      Kurniawan
      September 29, 2019
      Terima kasih gan, selamat mencoba :)
    Reply
  • Anonim
    Anonim
    September 27, 2019
    Mantap postingannya mas, akhirnya dibikin juga tutorialnya, saya yang email mas kemarin.. saya coba dulu, kalau ada yg tidak dimengerti mohon dibantu ya mas
    • Anonim
      Anonim
      September 27, 2019
      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?
    • Anonim
      Kurniawan
      September 28, 2019
      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
    Reply