1. Masuk bagian Edit template.
2. Pasang HTML : cari kode seperti ini <b:section class='main' id='main' showaddelement='yes'>
keterangan : kode tersebut adalah widget post cari yang mirip saja. jika ketemu maka simpan HTML berikut di atas kode tadi.
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div class='switch'>
<div class='switch-left'>
<span style='color: #CC0000;'>Recent</span> Post </div>
<div class='switch-right'>
<a class='bar_view' href='#'>Grid</a>
<a class='dat_view' href='#'>List</a>
</div>
</div>
</b:if></b:if>
keterangan : perhatikan yang di garis bawahi (no.5). ganti sesuai yang anda inginkan.
2. Sisipkan class="bar" : cari kode <div class='post hentry uncustomized-post-template'> atau <div class='post hentry'> jika sulit menemukannya gunakan ctrl+F untuk mempercepat. biasanya kode tersebut lebih dari satu. sisipkan pada semua kode tersebut. jika ketemu maka sisipkan bar pada atribut class maka hasilnya akan seperti ini.
<div class='post bar hentry uncustomized-post-template'>
atau
<div class='post bar hentry'>
3. Pasang Javascript dan jQuery. cari kode </head>
dan simpan kode berikut di atasnya.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='https://css3-tutsplus.googlecode.com/svn/trunk/personal/switch-display.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
/**
* jQuery switch
*
* active class active pada switch grid atau list
* update by denddy gustiana
* http://under-88.blogspot.com/
* https://plus.google.com/109783772548428705949
*
*/
jQuery(document).ready(function () {
var $box=jQuery(".post"),
$bar=jQuery("a.bar_view");
$dat=jQuery("a.dat_view");
$dat.click(function () {
$box.removeClass("bar");
jQuery(this).addClass("active");
$bar.removeClass("active");
jQuery.cookie("dat_style", 0);
return false
});
$bar.click(function () {
$box.addClass("bar");
jQuery(this).addClass("active");
$dat.removeClass("active");
jQuery.cookie("dat_style", 1);
return false
});
if(jQuery.cookie("dat_style")==0) {
$box.removeClass( "bar");
$dat.addClass("active")
} else {
$box.addClass("bar");
$bar.addClass("active")
}
});
//]]>
</script>
Catatan : script yang di garis bawahi di atas adalah plugin jquery versi 7. jika pada template anda sudah terpasang maka jangan di pasang kembali
4. Pasang CSS : karena grid ini hanya di tampilakan pada bagian home dan menggunakan tag conditional maka kita akan menaruh css di bawah ]]></b:skin> .
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style>
/*FONT PT Sans Narrow*/
@font-face {
font-family:'PT Sans Narrow';
font-style:normal;
font-weight:400;
src:local('PT Sans Narrow'),local('PTSans-Narrow'),
url(http://themes.googleusercontent.com/static/fonts/ptsansnarrow/v3/UyYrYy3ltEffJV9QueSi4RdbPw3QSf9R-kE0EsQUn2A.woff) format('woff');
}
/* CSS Untuk Tombol Switch*/
.switch {
border-bottom:5px solid #CC0000;
height:35px;
color:#444;
margin:0 10px;
padding:5px 9px;
text-transform:uppercase;
}
.switch-left {
width:360px;
float:left;
margin:0 auto;
padding-top:5px;
font:20px PT Sans Narrow;
text-shadow:1px 1px 0 #000;
color:#AAA;
}
.switch-right {
width:120px;
float:right;
margin:0 auto;
padding-top:10px;
}
.switch a {
border:1px solid #999;
font:11px Arial;
padding:3px 8px 3px 25px;
text-transform:none;
color:#aaa;
}
a.bar_view {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPLBDaZaRoHkWtzQKSPKkgYbXzYheCczwqNnJFiByDl4HX_rHwvAxiYfiDyHvWC3SoEMZr1PitQw_x-3B0abIdawGFNlFmKxqRDtu8b4Yp2VZlsX7O8Q7PIBIXb2Ru3TzcO-Clmt2w3oie/s1600/drid.gif) no-repeat 3px center;
}
a.dat_view {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjayQBYkiQCPO-t_pVT7N93j4xAc_fVAqdMpco9PfMvH3k9nKX5UvPA2vDg_2SDsvmXoHMnF4wdRx5fS0TfRiMK4wHFyUG-5vkr6sBd0VBLghL5i4FxaHCq9cXzc0c83QLdbtU8PD0inZld/s1600/listed.gif) no-repeat 3px center;
}
.switch a.active {
background-color:#aaa;
border:1px solid #999;
color:#111;
cursor:default;
}
/* CSS Bar untuk bagian grid */
.bar {
background-color:rgba(0,0,0,0.3);
border:1px solid #000;
box-shadow:0 0 0 1px #333;
-moz-box-shadow:0 0 0 1px #333;
-webkit-box-shadow:0 0 0 1px #333;
-o-box-shadow:0 0 0 1px #333;
display:inline;
float:left;
height:160px;
list-style:none;
margin:10px 0 0 9px;
overflow:hidden;
padding:2px 3px 5px;
position:relative;
text-align:center;
width:160px;
}
.bar h3 {
height:30px;
border:0 none;
line-height:8px;
margin:0 5px 5px;
padding:2px;
text-shadow:1px 1px 0 #000;
}
.bar h3 a {
font:14px PT Sans Narrow;
text-align:center;
line-height:16px;
}
.bar h3 a:hover {
color:#c1541a;
}
.bar .post-body {
background:none;
height:245px;
overflow:hidden;
width:167px;
padding:0;
margin:0 0 .3cm;
}
.bar img {
float:left;
height:110px;
margin:0 18px;
width:110px;
}
</style>
</b:if></b:if>
5. Simpan template anda dan lihat hasilnya.
