Cara Membuat Grid and List View Postingan Blog

1. Tempatkan kode berikut ini Diatas kode  </head>

 
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType!= &quot;item&quot;'>
<style>
#list-view-button {cursor:pointer;text-decoration: none;padding-top: 10px;margin: 5px;padding: 0 20px;}
#list-view-button a{text-decoration: none; color: #212529;}
.grid-view-button {padding: 10px 25px;border-radius: 8px;display: -ms-flexbox;-ms-flex-direction: row;-webkit-flex-direction: row;flex-direction: row;-ms-flex-align: center;-webkit-align-items: center;align-items: center;-ms-flex-pack: justify;-webkit-justify-content: space-between;justify-content: space-between;backdrop-filter: saturate(180%) blur(20px);transition-timing-function: cubic-bezier(0.28, 0.11, 0.32, 1);transition-delay: 0s;background-color: rgb(255 255 255);-webkit-box-shadow: 0 2px 6px 0 rgba(0,0,0,0.12);box-shadow: 0 2px 6px 0 rgba(0,0,0,0.12);-webkit-box-sizing: border-box;box-sizing: border-box;left: 0;}
.list-view-button {padding: 10px 25px;border-radius: 8px;display: -ms-flexbox;-ms-flex-direction: row;-webkit-flex-direction: row;flex-direction: row;-ms-flex-align: center;-webkit-align-items: center;align-items: center;-ms-flex-pack: justify;-webkit-justify-content: space-between;justify-content: space-between; backdrop-filter: saturate(180%) blur(20px);transition-timing-function: cubic-bezier(0.28, 0.11, 0.32, 1);transition-delay: 0s;background-color: rgb(255 255 255);-webkit-box-shadow: 0 2px 6px 0 rgba(0,0,0,0.12);box-shadow: 0 2px 6px 0 rgba(0,0,0,0.12);-webkit-box-sizing: border-box;box-sizing: border-box;left: 0;}
.post-grid-view {overflow: hidden;float: left;margin: 0px 0px 20px !important;position: relative;display: block;transition: all 0.5s ease 0s;border-radius: 8px;background: #fff;width: 100%;border: solid #dfdfdd;border-width: 0 .1rem .1rem 0;height: 10rem;}
.post-grid-view .posts-thumb {width:40% !important;height:250px !important;float:left;margin:0px;position:relative;border-top: 0px solid transparent !important;overflow: hidden;}
.post-grid-view .post-header {display: none;}
.post-grid-view .post-body img {min-width: 300px !important; min-height: 250px !important;display:block;width:100%!important;height:auto!important;max-width:800px!important;max-height:400px!important;border:none;outline:none;position:relative;margin: 0px;padding:0;}
.post-grid-view .post-summary-text {opacity: 1; background: none; width: 58%;font-size: 12px !important;clear: none !important; display: inline-block !important; padding: 80px 0px !important; color: #212529 !important; text-shadow: none !important; float: right !important; text-align: left; position: relative !important;}
.post-grid-view .post-body {height: 250px;background:#f5f5f5; box-shadow: none !important;}
.post-title-grid a { font-size:18px;color: #212529;font-weight: 500;text-transform: capitalize;}
.post-title-grid { position: absolute; left: 42%; top: 5%; z-index: 1;}
.post-grid-view .post-footer {left: 41%; display:block;position: absolute; bottom: 2%;font-size: 1.5rem;; background: transparent !important; border: 0px solid transparent !important;}
.post-grid-view .post-footer a{color: #128EC9;}
.post-grid-view a.comment-bubble {display: none;}
.main-inner .column-center-inner .section {margin: 0px !important;}
.post {height: 285px;width: 18%;float: left;margin: 1%;justify-content: space-between;backdrop-filter: saturate(180%) blur(20px);transition-timing-function: cubic-bezier(0.28, 0.11, 0.32, 1);transition-delay: 0s;background-color: rgb(255 255 255);box-shadow: 0 2px 6px 0 rgba(0,0,0,0.12);box-sizing: border-box;}
#blog-pager {clear:both;}
.post { text-decoration: none;padding: 0!important;border-radius: 3px;}
.date-header {display: none;}
h3.post-title a {font-size:16px;color:#212529;}
h3.post-title {text-align: left;top:0;width:100%;overflow:hidden;margin:0px !important;padding: 15px 0;padding-top: 5%;transform: scale(1);height: 100%;}
h3.post-title:hover {color:#c3002e;}
.posts-thumb {width:100%!important;height:200px!important;overflow:hidden;clear:both;}
.post-body {border-radius:2px;box-shadow:0 5px 4px 1px rgba(0,0,0,0.1);position:relative;overflow: hidden;}
.post-body a {text-decoration: none;}
.post-body img {display:block;width:100%!important;height:auto!important;max-width:800px!important;max-height:400px!important;min-width:200px!important;min-height:200px!important;border:none;outline:none;position:relative;margin: 0px;padding:0;}
.post-summary-text {display: none;}
a.comment-bubble {color:#fff;text-decoration:none;font-size:100%;width: 100%;text-align: center;position:absolute;top:175px;left: 0px;z-index: 122;}
a.comment-bubble:before { content: &quot;Comments: &quot; url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCN2LBHDOEWvVcIj4kXd4WCzPkoQwBDpJ31HeJeFmZqfcuSagA_mpYDLqCUnHy8wx-E71sX5qZ4jAxvZoehSZSzpgvNZ-Qj8XmYdzN8rxIAUj1TNcx58b5wJPE5gFjZ4-a30LLuq7fZF0p/s1600/hati.png);}
.post-header,.post-footer {display:none;}
</style></b:if></b:if> 

2.kopas kode berikut ini dan tempatkan juga  Di atas kode   </head>

 
<script type='text/javascript'>
function list_view(){
if(document.getElementsByClassName(&quot;post&quot;)) {elementArray = document.getElementsByClassName(&quot;post&quot;); while (elementArray.length) {elementArray[0].className = &quot;post-grid-view&quot;;}}
if(document.getElementsByClassName(&quot;post-title&quot;)) {elementArray = document.getElementsByClassName(&quot;post-title&quot;); while (elementArray.length) {elementArray[0].className = &quot;post-title-grid&quot;;}}
}
function grid_view(){
if(document.getElementsByClassName(&quot;post-grid-view&quot;)) {elementArray = document.getElementsByClassName(&quot;post-grid-view&quot;); while (elementArray.length) {elementArray[0].className = &quot;post&quot;;}}
if(document.getElementsByClassName(&quot;post-title-grid&quot;)) {elementArray = document.getElementsByClassName(&quot;post-title-grid&quot;); while (elementArray.length) {elementArray[0].className = &quot;post-title&quot;;}}
}
</script>
<script type='text/javascript'>
posts_no_thumb_sum = 100;
posts_thumb_sum = 350;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID, pURL, pTITLE){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'"><img src="'+img[0].src+'" /></a></span>';
summ = posts_thumb_sum;
}
else {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirM7Sbx4QlHA3F2xyHpHWB2FbqCTx-RrGWx1J0VyhcUUTvpK43ZyCXzViVuWItD_f-fN_I_x588BezfnjIhfoSP5PbqCCE6QA37MlmHiA9973sacu5fqpYdBbmVeiHWuHbhCKVoXZSfo05/s1600/no+image.jpg" style="margin-top: -30px;" /></a></span>';
summ = posts_thumb_sum;
}
var summary = imgtag + '<a href="'+ pURL +'"><div class="post-summary-text">' + removeHtmlTag(div.innerHTML,summ) + '</div></a>';
div.innerHTML = summary;
}
//]]>
</script> 

3. Terakhir, letakkan kode berikut ini Dibawah kode  <div id='main-wrapper'>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType!= &quot;item&quot;'>
<div id='list-view-button'><a class='grid-view-button' onclick='grid_view()'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmWGBJNEqE03-L20AIUxAW7oprg-7dzKeUsumPFyGIHa-3uRiCGlX8W37EBUXuxFouo8LznGvMpNNYy69svD212tREy4c_je-QpVczniTQDV4OfcLPPMc4D9CiuMmeXowQu5kC3_-UGqNp/s1600/grid-icon.png' style='margin: -8px 1px -3px -6px;width: 16px;'/> Grid View</a> <a class='list-view-button' onclick='list_view()'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTSsqpF39FWcU5n-g__hB0wQNb4sUGJk__dshHpVOHhEQABUierN1L839l98WB70ALdAMgADY1EoLQdlcxJz03uB4r6o2Qqs9ktretg_fC9NkxQE9OmvTkvMi-XTVM1cA45pTYXkSWv5tK/s1600/list-icon.png' style='margin: -8px 1px -3px -6px;width: 16px;'/> List View</a></div>
</b:if></b:if>  

4. Preview and Save