Cara Membuat Halaman Grid dan List di Blog dengan Mudah dan Profesional

Cara Membuat Halaman Grid dan List di Blog gengan Mudah
Cara Membuat Halaman Grid dan List
Assalamu’alaikum Warahmatullahi Wabarakaatuh

mastagul.com - Memiliki Blog yang menarik merupakan idaman bagi para blogger. Terkadang tidak sedikit para blogger yang rela mengeluarkan biaya lebih, untuk mendesain blog yang dimiliki supaya tampil lebih menarik.

Semakin menarik tampilan sebuah Blog biasanya akan mempengaruhi pengunjung yang akan datang. Jika dimata pengunjung blog sobat memiliki desain menarik dan memiliki konten yang bermanfaat, saya yakin pengunjung tidak segan-segan untuk sering-sering mengunjungi blog sobat.

Ngomong-ngomong masalah tampilan Blog, mastagul.com akan memberikan tutorial bagaimana cara untuk merubah tampilan halaman menjadi Grid. Dengan menggunakan tampilkan Grid di blog sobat, akan menambah nilai + dimata pengunjung.

Cara Membuat Halaman Grid dan List di Blog dengan Mudah

Langkah 1:
Silahkan Sobat masuk ke Dashboard Blogger Sobat kemudian pilih Tema => pilih Edite HTML

Langkah 2:
Setelah masuk ke Edite HTML silahkan sobat cari kode ]]></b:template-skin> ( Gunakan bantuan fungsi Shortcut CTRL + F untuk mencari kode tersebut). Setelah kode tersebut ketemu, ambil kode CSS dibawah dan tempelkan dibawah kode tersebut.
 
<b:if cond='data:view.isMultipleItems'>
<style>
/*<![CDATA[*/
/* GRID HOME PAGE By Mas Tagul */
.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>
 

Langkah 3:
Langkah selanjutnya cari kode </head> dan ambil kode javascrip dibawah ini kemudian letakkan di atas kode </head>.

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

 

Langkah 4:
Cari kode <div class='blog-posts'> jika tidak ketemu silahkan cari kode yang mirip. Sobat bisa lihat kode seperti gambar dibawah.


Hapus kode seperti gambar diatas, kemudian ganti dengan kode HTML dibawah ini.
 
<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>
 

Langkah 5:
Kemudian yang perlu sobat lakukan mengganti elemen postingan bawaan template. Biasanya kodenya berada di atas </article>. Bisa lihat seperti gambar dibawah.
Hapus kode diatas ganti dengan kode HTML dibawah 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;'/>
 

Langkah 6:
Langkah selanjutnya sobat tinggal memasang kode javascript Navigasi Grid supaya bisa berfungsi dengan baik dan menyesuaikan ukuranynya supaya terlihat lebih rapi. silahkan ambil kode dibawah dan tempatkan 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>

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


Silahkan Simpan Tema kemudian cek hasilnya.

Dapatkan Artikel Tips AdSense, Blogging, SEO setiap harinya.

Tampilkan Komentar
Sembunyikan Komentar

Belum ada Komentar untuk "Cara Membuat Halaman Grid dan List di Blog dengan Mudah dan Profesional"

Posting Komentar

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar bersifat iklan, spam, titip link Semua akan dihapus oleh admin

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel