Baca juga ya tentang Tampilkan juga sembunyikan google+ plus komentar
Membuat Grid View Switcher
Sebelumnya backup dahulun template blog Anda, untuk jaga-jaga bila kode error sudah tak valid.
1). Silahkan masuk ke akun blogger anda.
3). Cari kode di bawah ini :
</ head>
<script type=’text/javascript’>
function list_view(){
if(document.getElementsByClassName("post")) {elementArray = document.getElementsByClassName("post"); while (elementArray.length) {elementArray[0].className = "post-grid-view";}}
if(document.getElementsByClassName("post-title")) {elementArray = document.getElementsByClassName("post-title"); while (elementArray.length) {elementArray[0].className = "post-title-grid";}}
}
function grid_view(){
if(document.getElementsByClassName("post-grid-view")) {elementArray = document.getElementsByClassName("post-grid-view"); while (elementArray.length) {elementArray[0].className = "post";}}
if(document.getElementsByClassName("post-title-grid")) {elementArray = document.getElementsByClassName("post-title-grid"); while (elementArray.length) {elementArray[0].className = "post-title";}}
}
</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://ciriseo.net/wp-content/uploads/2015/04/sorry-image-not-available.png” 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>
<b:if cond=’data:blog.pageType != "static_page"’>
<b:if cond=’data:blog.pageType!= "item"’>
<style>
#list-view-button {font-family: Verdana; text-align:left;cursor:pointer;font-size: 14px;border-bottom: 5px solid #eaeaea;text-decoration: none;}
#list-view-button a{text-decoration: none; color: #666;}
.grid-view-button {background-color:#efefef;color:#666;padding:5px 10px;border-radius: 5px;font-size: 12px;}
.list-view-button {background-color:#efefef;color:#000;padding:5px 10px;border-radius: 5px;font-size: 12px;}
.post-grid-view {width:100%;height:250px;overflow: hidden;float:left;margin:0px 0px 20px !important;position:relative;display: block; -webkit-transition:all 0.5s ease 0s; -moz-transition:all 0.5s ease 0s; -o-transition:all 0.5s ease 0s; transition:all 0.5s ease 0s; }
.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: 120% !important;clear: none !important; display: inline-block !important; padding: 80px 0px !important; color: #666 !important; text-shadow: none !important; float: right !important; text-align: left; position: relative !important; font-family: ‘Open Sans Condensed’, sans-serif;}
.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 { -webkit-transition:all 0.5s ease 0s; -moz-transition:all 0.5s ease 0s; -o-transition:all 0.5s ease 0s; transition:all 0.5s ease 0s;}
#blog-pager {clear:both;}
.post {height:auto;width:32.2%;display:inline-block;text-decoration:none;float:left;margin:0 1% 1% 0%;overflow: hidden;padding:0!important;}
.date-header {display: none;}
h3.post-title a {font-size:90%;font-family: ‘Open Sans Condensed’, sans-serif;text-transform:uppercase;color:#fff;text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);font-weight: bold;}
h3.post-title {text-align: center; position:absolute;top:0;width:100%;overflow:hidden;margin:0px !important;padding-top: 30%; background-color: rgba(50, 126, 213, 0.8);transform: scale(1);opacity: 0;z-index: 10;height: 100%;transition: all 300ms ease-out 0s;}
h3.post-title:hover {opacity: 1;}
.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;text-shadow:1px 2px 1px #333;font-family: ‘Pacifico’, cursive;z-index: 122;}
a.comment-bubble:before { content: “Comments: ” url(https://ciriseo.net/wp-content/uploads/2015/04/heart-active.png);}
.post-header,.post-footer {display:none;}
5). Selanjutnya Cari baris berikut:
<B: section class = ‘main’ id = showaddelement ‘main’ = ‘no’>
Jika anda tidak dapat menemukannya, mencari satu ini sebagai gantinya:
<B: section class = ‘main’ id = showaddelement ‘main’ = ‘yes’>
6). Simpan kode di bawah tepat diatas kode nomor 5
<B: section class = ‘main’ id = showaddelement ‘main’ = ‘yes’>
<b:if cond=’data:blog.pageType != "static_page"’>
<b:if cond=’data:blog.pageType!= "item"’>
<div id=’list-view-button’><a class=’grid-view-button’ onclick=’grid_view()’><img src=’https://ciriseo.net/wp-content/uploads/2015/04/search-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://ciriseo.net/wp-content/uploads/2015/04/icon-list-view.png’ style=’margin: -8px 1px -3px -6px;width: 16px;’/> List View</a></div>
</b:if></b:if>
7). Kemudian cari kode ini :
<Data: post.body />
8). Ada 3 kode :
<Data: post.body />
Ambil yang ke dua saja, silahkan ganti dengan kode di bawah ini :
<B: if ‘Data: blog.pageType = & quot; static_page & quot;’ = cond>
<B: if cond = ‘! Data: blog.pageType = & quot; barang & quot;’>
<Div expr: id = ‘& quot; summary & quot; + Data: post.id ‘>
<Data: post.body />
</ Div>
<Script type=’text/javascript’>createSummaryAndThumb("summary<data:post.id/>","<data:post.url/>");</script>
<B: if cond = ‘data: post.allowComments’>
<a class=’comment-bubble’ expr:href=’data:post.addCommentUrl’ expr:onclick=’data:post.addCommentOnclick’>
<Data: post.numComments />
</a>
</ B: if>
</ B: if>
</ B: if>
<B: if ‘data: blog.pageType == & quot; item yang & quot;’ = cond>
<Data: post.body />
</ B: if>
<B: if cond = ‘data: blog.pageType == & quot; static_page & quot;’>
<Data: post.body />
</ B: if>