-->

Cara Membuat Halaman Blog Menjadi Grid Layout Mirip Blog Igniel

Daftar Isi [Tampilkan]
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 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
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.
Next
Previous
Tidak ada kata "Tapi" dan "Nanti" jika anda ingin Sukses
  • Facebook
  • Twitter
  • Instagram
  • Related Posts

    Buka Komentar ( 57 )
    Tutup Komentar

    57 Komentar

    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. Terima kasih infonya mas.

      BalasHapus
    3. Balasan
      1. Sama-sama gan, terimakasih sudah mencoba

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

      Salam dari InfoGaes.Com

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

      BalasHapus
      Balasan
      1. Insha allah bisa gan, harus di coba dulu

        Hapus
      2. Karena strukturnya berbeda

        Hapus
    6. 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
    7. work gan , mantap tutorial nya sangat berguna, nunggu tutorial lainya

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

        Hapus
    8. mantap gan work di template viomagz saya

      BalasHapus
    9. 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
    10. Artikel sangat bermanfaat bagi saya yang pemula belajar edit template

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

        Hapus
    11. 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
    12. 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
    13. Makasih kak artikel tentang membuat halaman grid. Ini sangt membantu buat blog saya

      BalasHapus
      Balasan
      1. Sama-sama mas, senang bisa membantu :)

        Hapus
    14. Error bang saat di upload

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

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

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

      BalasHapus
    18. tutorial cara setting untuk ampilan mobilenya dong

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

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

      BalasHapus
      Balasan
      1. KurniawanzApril 03, 2020

        fixnya sudah ada itu di atas, di videonya juga sudah ada tutorialnya

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

      BalasHapus
      Balasan
      1. oke gan, akan saya update artikelnya

        Hapus
    21. 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

      BalasHapus
    22. Wah keren nih, saya harap next bikin tutorial icon svg untuk label seperti punya igniel atau serieswana

      BalasHapus
      Balasan
      1. oke gan nanti saya buatkan tutorialnya

        Hapus
    23. gan bisa redesainkan template saya gak ?

      BalasHapus
    24. kalau di telatakan di atas skin tidak bisa ada kode beerikut:
      /*]]>*/
      </style>
      </b:if>

      BalasHapus
      Balasan
      1. coba sertakan kode lengkapnya gan, lewat pastebin saja kalo bisa

        Hapus
    25. Alangkah baikknya,, mnjadikan teks biasa gak bisa dicopas, biar permudah kami copas kode yg ente bagikan

      BalasHapus
    26. kaya nya untuk template viomagz 2022 udah ga work gan

      BalasHapus
      Balasan
      1. Di template terbaru udah ga work, karena strukturnya udah beda, silahkan coba di template versi 3.2 dan 3.3

        Hapus
    27. Untuk viomag v1.1.0 gak work kah mas help mee jawab please

      BalasHapus
    28. 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

      BalasHapus
    • 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.
    • Jika ingin menulis kode maka harus di-parse terlebih dulu (terutama Javascript dan HTML)
    • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
    • Gunakan tag <i> dan diakhiri dengan kode </i> untuk menuliskan kode. Contoh:
      <i>#comments</i>
    • Gunakan tag <em> dan diakhiri dengan kode </em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
      <em>#comments {margin:0; padding:10px 15px}</em>

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel

    x
    Berlangganan

    Dapatkan pemberitahuan melalui email setiap ada artikel baru. Gratis!