Widget HTML #1

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

Cara Membuat Halaman Grid dan List di Blog
Cara Membuat Halaman Grid dan List di Blog

Cara Membuat Halaman Grid dan List di Blog dengan Mudah dan Profesional. 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 akan memberikan tutorial bagaimana cara untuk merubah tampilan halaman menjadi Grid.

Dengan menggunakan tampilkan Grid di blog sobat, akan menambah nilai + dimata pengunjung.

Baca juga: Cara Mudah Memasang Script Streaming TV Online di Blog

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 ShortcutCTRL + Funtuk 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>.

Baca juga: Cara Membuat Menu Navigasi Profil di Header Blog yang Keren dan Profesianal

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

Baca juga: Cara Membuat Kotak Teks di Postingan Blog yang Menarik dan Benar

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.

Cek Berita dan Artikel yang lain di Google News.

Recommended By The Author

Cara Memasang Menu Berlangganan di Blogger Template Viomagz

Cara Membuat Backlink Di Blogger

Cara Membuat Daftar Isi Otomatis di Postingan Blogger

Cara Membuat Daftar Isi dalam Satu Label Tertentu di Postingan Blog dengan Benar

Cara Membuat Halaman Daftar Isi yang Benar, SEO dan Mudah di Pahami di Blog