Here a Review:
Grid View
List View
How to install this Add a Grid and List View script on your blog
Here a Review:
Grid View
List View
How to install this Add a Grid and List View script on your blog
Cara Memasang Display Grid Dan List Pada Template
1. masuk bagian edit template. centang bagian Expand Widget Templates .2. Pasang HTML : cari kode seperti ini
<b:section class='main' id='main' showaddelement='yes'> . ket : 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/AVvXsEjjcJekmLsXzTUB_OCejPuh7jY_93vvhEJl-APJbYdGzsIe3qqPCw1gGFQYXU3Tp-2zu6EMOm74Y4ffnbOs-DyF_ejenCDREv3xWVkKdcbgRR84Kmea5yKEFfxPxYCcPDKa5ZG3R3Ea1tVU/s1600/drid.gif) no-repeat 3px center;
}
a.dat_view {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihAhRLOjdI1b_gQz93ggNZn665vzP4upSsjZfCU2ejOtUzhmDoLlD_02-IGZhqZLetklTwVTAiF6r6W2FObFheMwMUArArJjTK_ct0bQEOGpfWMTQI5mNE-Tb6ofT6xi_rxeYJtwq8DIRq/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>
CSS yang saya gunakan
sama seperti pada DEMO jika warna kurang cocok dengan template anda
silahkan ganti sesuai kreasi anda dan di harapkan anda harus teliti
membuat CSS karena itu maslah yang sering terjadi yang hasilnya kurang
rapi
5. Simpan template anda dan lihat hasilnya.
Tidak ada komentar:
Posting Komentar