VEzcwOIzJo2ocMRnvNfZmXylSxSqdBdXDBtRZkxw
Bookmark

Cara Membuat Mode Halaman Grid dan List di Blogger

Serieswans.com | Cara Membuat Mode Halaman Grid dan List di Blogger - Hallo sobat blogger, Dalam dunia desain, apalagi membahasa seputar layaout dan bagaimana cara menata elemen-elemen html dalam sebuah halaman  dengan baik. ini sama halnya dengan kita menata sebuah tanaman di dalam rumah jika kita atur dengan baik dan di tata dengan rapih, maka orang-orang yang lewat di depan rumah akan melirik tanaman anda yang tersusun rapih dan merasa ingin mempunyainya juga.

Nah sama halnya dengan website atau blog, jika kita atur dan di tata dengan rapih, terutama pada tampilan user interfacesnya. maka orang yang mengunjungi website kita juga akan merasa nyaman melihatnya dan siapa tau pengunjung tersebut akan tertarik dengan template blog anda dan bersedia membeli template atau memakai jasa designnya. itulah ilustrasi sederhanya dari saya.
Cara Membuat Mode Halaman Grid dan List di Blogger
Cara Membuat Mode Halaman Grid dan List di Blogger
Oleh karena itu pada kesempatan kali ini saya akan membuat tutorial bagimana cara membuat halaman Grid dan List di blog, yaitu kita membuat 2 mode halaman dengan tombol navigasi untuk berpindah dari mode Grid ke Mode List. tutorial ini juga sudah saya coba dan sudah di terapkan pada template saya sendiri.

Pada artikel sebelumnya saya juga membuat tutorial membuat halaman Grid di blog, tapi itu hanya memiliki 1 mode halaman saja yaitu mode Grid. tapi jika anda ingin membuat 2 mode halaman, silahkan ikuti tutorial di bawah ini.

Membuat Mode Halaman Grid dan List di Blogger

  • Pertama, login terlebih dahulu ke blogger.com
  • Setelah masuk ke Halaman Dashboard Blogger, silahkan pilih Tema => Edit HTML
  • Lalu cari kode  ]]></b:template-skin> atau </b:template-skin>, kalo tidak ada silahkan cari saja kode yang sama dengan kode tersebut. (Gunakan fungsi Shortcut CTRL + F untuk memudahkan anda mencari kode tersebut)
  • Setelah itu copy CSS Grid & List di bawah ini dan letakan tepat di bawah kode tersebut
<b:if cond='data:view.isMultipleItems'>
<style>
/*<![CDATA[*/
/* GRID HOME PAGE By Serieswans */
.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:1px solid rgba(0,0,0,.2);border-radius:20px;box-shadow:1px 0 5px rgba(0,0,0,.8);box-sizing:border-box}.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;transition:all .3s ease;margin:0;display:block}.img-thumbnail img:hover{transform:scale(1.1) rotate(-5deg);filter:brightness(75%);-webkit-filter:brightness(75%)}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:16px}.post-label a{background:transparent;color:#666;padding:8px 0}.post-comments:hover{color:#009688;animation:rubberBand 1s}.post-label:hover{color:#009688;animation:rubberBand 1s}@keyframes rubberBand{from{transform:scale3d(1,1,1)}30%{transform:scale3d(1.25,.75,1)}40%{transform:scale3d(.75,1.25,1)}50%{transform:scale3d(1.15,.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}to{transform:scale3d(1,1,1)}}
/** 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};font-size:12px}
.post-container{padding-right:0;width:100%;margin-top:10px}
@media (max-width:480px){.blog-posts .post-outer{padding:0 3px 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;}}
/** s-view **/
.s-view{padding:10px 24px;background:#fff;border-radius:30px;margin-bottom:20px;font-size:14px;color:#444;box-sizing:border-box;box-shadow:1px 0px 5px rgba(0,0,0,0.8)}
.s-view .s-btn{display:inline-block;margin-right:5px;padding:5px 10px 5px 28px;background-color:#dddfe2;color:#444;border-radius:3px;border:1px solid rgba(0,0,0,0.1);cursor:pointer;font-weight:500}
.s-view #grid {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3,11H11V3H3M3,21H11V13H3M13,21H21V13H13M13,3V11H21V3' fill='%231d2129'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
}
.s-view #list {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9,5V9H21V5M9,19H21V15H9M9,14H21V10H9M4,9H8V5H4M4,19H8V15H4M4,14H8V10H4V14Z' fill='%231d2129'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
}
.s-view .s-btn.active{background:#0577e4;color:#fff}
.s-view #grid.active {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3,11H11V3H3M3,21H11V13H3M13,21H21V13H13M13,3V11H21V3' fill='%23fff'/%3E%3C/svg%3E");
}
.s-view #list.active {
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9,5V9H21V5M9,19H21V15H9M9,14H21V10H9M4,9H8V5H4M4,19H8V15H4M4,14H8V10H4V14Z' fill='%23fff'/%3E%3C/svg%3E");
}
/** LIST MODE **/
.blog-posts.list .post-outer{width:100%;height:auto;padding-bottom:10px}.blog-posts.list .post-outer .post{height:auto;margin:0}.blog-posts.list .post-outer .img-thumbnail{float:left;width:40%;padding-bottom:0;height:auto;border-radius:20px 0 0 20px}.blog-posts.list h2.post-title{float:right;width:60%;margin-bottom:0;position:absolute}.blog-posts.list .post-outer .post .post-bottom{width:60%;right:0;bottom:5px}
/*]]>*/
</style>
</b:if>
  • Selanjutnya cari kode </head> dan letakan kode javascript 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>
  • Lalu cari kode seperti di bawah ini 
<div class='latest-post-title'>
<h2><b:switch var='data:blog.locale'><b:case value='id'/>Postingan Terbaru<b:default/>Latest Posts</b:switch></h2>
</div>
</b:if>
  • jika tidak ada silahkan cari kode yang mirip dengan kode tersebut ya.
  • Silahkan tambahkan kode barikut dan letakan tepat di bawah kode di atas
    <b:if cond='data:view.isMultipleItems'>
    <div class='s-view'>
        Tampilan: <span class='s-btn active' id='grid' onclick='sViewGrid()'>Grid</span><span class='s-btn' id='list' onclick='sViewList()'>List</span><div class='setting-container'><ul class='setting-menu'><li></li></ul></div></div></b:if> 
    
  • Langkah selanjutnya cari kode <div class='blog-posts'> atau cari kode yang mirip dengan kode tersebut.
  • Lalu hapus kode di bawahnya, untuk contoh kodenya bisa anda lihat pada gambar di bawah ini.
    Cara Membuat Mode Halaman Grid dan List di Blogger
    Tag Blog-Post
  • Kemudian copy kode 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 elemen postingan halaman default dari template tersebut. biasanya kode tersebut terletak di atas kode </article> dan contoh kode lengkapnya seperti gambar di bawah ini
    Cara Membuat Mode Halaman Grid dan List di Blogger
    Html Postingan default
  • Jika sudah ketemu dengan kode tersebut, silahkan hapus dan ganti dengan kode html 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;'/>
  • Selanjutnya kita akan memasang kode javascript agar tombol navigasi Grid & Listnya berfungsi dengan baik, silahkan copy kode di bawah ini dan letakan tepat di atas kode </body>

<script type='text/javascript'>/*<![CDATA[*/
function sViewGrid(){
  document.getElementsByClassName('blog-posts')[0].classList.remove('list')
  document.getElementById('grid').classList.add('active')
  document.getElementById('list').classList.remove('active')
}
function sViewList(){
  document.getElementsByClassName('blog-posts')[0].classList.add('list')
  document.getElementById('grid').classList.remove('active')
  document.getElementById('list').classList.add('active')
}
/*]]>*/</script>
  • Tahap pemasangan mode Grid & List sudah selesai, sekarang tinggal menyesuaikan ukuran tampilannya agar terlihat rapih, silahkan copy kode di bawah ini dan letakan di atas </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 Mengatasi Jarak antara Postingan dengan Sidebar saling berdekatan

Jika anda mengalamai masalah jarak antara postingan sama sidebat terlalu berdekatan seperti gambar di bawah ini.
Cara Membuat Mode Halaman Grid dan List di Blogger
Fix Jarak Postingan dengan Sidebar

Untuk cara membetulkannya seperti berikut
  • Silahkan cari kode #post-wrapper {
  • Lalu ubah ukura Widthnya dari 70% ke 67% , contohnya seperti gambar di bawah
    Cara Membuat Mode Halaman Grid dan List di Blogger
  • Setelah itu cek hasilnya

Cara Mengatasi Thumbnail tidak full di Halaman Hompage

Cara Membuat Mode Halaman Grid dan List di Blogger
Nah permasalah yang ke 2 adalah pada gambar thumbnailnya yang tidak full dan untuk cara membetulkannya silahakan perhatikan langakah berikut
  • Silahkan cari kode .img-thumbnail { dan .img-thumbnail img { 
  • Jika sudah ketemu, silahakan hapus kedua Class CSS tersebut
    Cara Membuat Mode Halaman Grid dan List di Blogger
  • Setelah itu cek hasilnya dan selesai.

Jika anda masih belum mengerti dengan cara membetulkan permasalahanya, silahkan kunjungi artikel membuat halaman grid di blog untuk melihat video tutorial cara mengatasi pemasalahnnya.

Nah, mungkin itu saja tutorial kali ini mengenai Cara Membuat Mode Halaman Grid dan List di Blogger. jika anda memiliki pertanyaan terkait postingan ini, silahkan tanyakan di kolom komentar atau langsung contact saya melalui email. semoga bermanfaat dan terima kasih.
14 komentar

14 komentar

  • Sasaa
    Sasaa
    Februari 21, 2023
    Bang untuk tampilin mobile masih berantakan gambarnya dan sama mode list juga tampilan mobile kecil klo mode deskstop udah bagus
    Mohon bantuannya bang
    • Sasaa
      Kurniawan
      Februari 22, 2023
      silahkan lampirkan link blognya bang, biar saya cek atau email saja ke saya
    Reply
  • Giri Diwa Adam
    Giri Diwa Adam
    Maret 10, 2020
    Sedikit bantu admin ,Jika Kalian mengalami Gambar turun di Mobile harap hapus
    height: 160px pada @media screen and(max-width:400px){} semoga membantu Teman-teman blogger yang mau buat blognya Lebih Keren :)
    • Giri Diwa Adam
      Kurniawan
      April 20, 2020
      Mantap gan :)
    Reply
  • Agung Irianto
    Agung Irianto
    Maret 07, 2020
    sudah ikut tutor di youtubenya gan. Tapi masih kurang responsive atau memanjang di tampilan mobilenya🙏
    • Agung Irianto
      Kurniawan
      Maret 07, 2020
      Di video nya kan sudah ada fix nya .. mas nya pake template apa ?
    Reply
  • RIthon Bayu Dwi
    RIthon Bayu Dwi
    Februari 28, 2020
    mas, untuk mobile jadi lonjong ya? gak responsive kah? Oh iya, untuk kategorinya, jadi f02c kategori, terus baru tombol komentar. ==> di homepagenya.

    Regards.
    • RIthon Bayu Dwi
      Kurniawan
      Februari 28, 2020
      Itu fixnya sudah saya buatkan video tutorialnya di channel saya atau di artikel cara membuat halaman grid. coba mas tonton videonya dari awal sampai akhir ya.
    Reply
  • Anonim
    Anonim
    Januari 30, 2020
    Nice tutorial.
    • Anonim
      Kurniawan
      Februari 05, 2020
      Kodenya sudah saya update lg, silahkan di coba kembali
    Reply
  • Khenzl
    Khenzl
    Januari 30, 2020
    bagian pemasangan tombol grid nya salah, tidak muncul entah karena salah tutorial nta atau gara2 script nya di encrpt. jngan di encrpt dong mas script nya jadi tau bagian mana yang salah..
    • Khenzl
      Kurniawan
      Februari 04, 2020
      oke gan atas masukannya, akan saya update lagi kodenya
    Reply
  • Revrine
    Revrine
    Januari 25, 2020
    keren mas tutorialnya,
    adakah tutorial tentang buat tombol share sticky dibawah sperti blog igniel ?
    matur nuwun
    • Revrine
      Kurniawan
      Januari 28, 2020
      Alhamdulillah mas, inshallah nanti saya coba dulu ya
    Reply