×

Author / Admin / Editor

     Jagoan Redesign    

Blog yang membahas Tutorial Blogger, Games, Template, Tips Adsense, SEO, Web Design dan Teknologi

Iklan Bawah Posting

Cara Membuat Homepage Menjadi Grid di Template Viomagz

Jagoan Redesign - kali ini saya akan membagikan sebuah tutorial Cara Membuat Homepage Menjadi Grid di Template Viomagz. Tutorial ini akan membuat blog anda menjadi lebih keren pastinya dan membuat blog kamu menjadi responsive, simple dan pastinya menarik. 

Cara Membuat Homepage Menjadi Grid di Template Viomagz

Secara default tampilan artikel pada homepage template Viomagz blogspot adalah berbentuk statis alias vertikal, Namun anda juga dapat melakukan kustomisasi tampilan tersebut menjadi tampilan grid. untuk tutorial ini sangat mudah sekali hanya menambahkan kode di bawah ini.

Cara Membuat Homepage Menjadi Grid di Template Viomagz

1. Silahkan Login ke Blogger.
2. Selanjutnya masuk ke menu TEMA > klik Edit HTML.
3. Silahkan anda cari kode ini ]]></b:skin>dan pastekan kode dibawah ini tepat DIATAS kode tersebut.

.jagoanredesign-snippet {
 padding: 5px;
    margin-bottom: 20px;
}
.post-snippet-p{
 font-size:13px;
 border-left:2px solid #2962ff;
 padding-left: 2px;
}

4. Silahkan anda cari kode <div class='post-bottom'> Selanjutnya pastekan kode di bawah ini tepat DIATAS kode tersebut.

<div class='jagoanredesign-snippet'>
   <div class='post-snippet-p'>
   <b:eval expr='snippet(data:post.longSnippet, {length: 100})'/>
   </div>
    </div>
5. Selanjutnya cari kode .blog-posts .post-outer {  perlu anda ingat kode tersebut tidak hanya satu, silahkan anda cari kode yang di bungkus oleh kode @media (max-width: 480px). jika sudah ketemu , ubah width:50% ke 100%
6. Kemudian cari kode berikut ini ]]></b: template-skin> dan pastekan kode dibawah ini tepat DIBAWAH kode tersebut.


<b:if cond='data:view.isMultipleItems'>
<style>
/*<![CDATA[*/
/* Grid Home Page by Jagoan Redesign */
.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 Label 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>

7. Selanjutnya cari kode <div class='blog-posts'> atau anda bisa cari kode yang mirip dengan kode itu. 
8. Kemudian anda hapus kode di bawahnya, contoh kodenya seperti dibawah ini.

<b:include data='top' name='status-message'/>

      <data:defaultAdStart/>
      <b:loop values='data:posts' var='post'>
      
      <b:if cond='data:view.isHomepage and data:post.isFirstPost == &quot;true&quot;'>
      <meta expr:content='data:post.firstImageUrl' property='og:image'/>
      </b:if>

        <b:if cond='data:post.isDateStart'>
          <b:if cond='data:post.isFirstPost == &quot;false&quot;'>
            &lt;/div&gt;&lt;/div&gt;
          </b:if>
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-outer&quot;&gt;
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-posts&quot;&gt;
        </b:if>
        <div class='post-outer'>
        <b:include data='post' name='post'/>
        <b:if cond='data:view.isPage'>
          <b:include data='post' name='comment_picker'/>
        </b:if>
        <b:if cond='data:view.isPost'>
          <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'>
        &lt;/div&gt;&lt;/div&gt;
      </b:if>
      <data:adEnd/>
    </div>

9. Setelah itu anda pastekan kode dibawah ini dan letakan di tempat kode yang tadi anda hapus.


<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>
10. Kemudian anda cari kode yang seperti dibawah ini, kode biasanya terletak di atas kode </article>

 <!-- index page (homepage, archive, label, etc.) -->
      <b:include data='post' name='labelsinfo'/>
      <b:include data='post' name='postthumbnail'/>
        <b:if cond='data:post.title'>
          <h2 class='post-title entry-title'>
            <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-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
            <div class='post-snippet'>
            <b:eval expr='snippet(data:post.longSnippet, {length: 80})'/>
            </div>
        </div>
        <div class='post-info info-1'>
            <b:include data='post' name='postauthorinfo'/>
            <b:include data='post' name='postdateinfo'/>
            <b:include data='post' name='postcommentinfo'/>
            <b:include data='post' name='postQuickEdit'/>
        </div> 
    </b:switch>
    <div style='clear: both;'/> 

11. Silahkan anda ganti kode tersebut dengan kode di bawah ini.

<!-- Posting default by Jagoan Redesign (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;'/> 
12. Selanjutnya anda cari kode </head> dan pastekan kode Javascript di bawah ini tepat DIATAS 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>

13. Silahkan anda pastekan CSS dibawah ini tepat DIATAS 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>

14. Kemudian Simpan Tema dan Lihat Hasilnya

Nah, itu adalah tutorial Cara Membuat Homepage Menjadi Grid di Template Viomagz di Blogger semoga totorial bermanfaat bagi anda semua. jika ada yang ingin  anda tanyakan silakan berkomentar saja di bawah.

Previous
Next Post »
avatar
Penulis Blog dan redesigner template blogger.

Related Posts

Komentar
Tutup Komentar

Komentar

  • Berkomentarlah secara bijaksana dan bertanggung jawab.
  • Tidak diperbolehkan mempromosikan barang atau berjualan.
  • Tulis komentar Anda untuk hal yang masih berhubungan dengan posting pada halaman ini.
  • Dilarang memuat Link Aktif pada kolom komentar
  • Komentar dengan link aktif akan otomatis dihapus.
  • Jika ingin menulis kode silahkan anda 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