Cara Membuat Post Display Grid Dan List jarang orang yang membuat
tutorial ini karena saya sendiri suka sulit untuk menemukannya di google.
kebanyakan semua dalam bahasa ingris. dan kesempatan kali ini saya akan mencoba
membuatnya semudah mungkin. sebelumnya kita akan mengetahui dulu apa yang di
maksud dengan grid dan list. penggunaan ini untuk menambahkan style pada
readmore otomatis dengan javascript plus tumbnail.
tombol switch ini hanya untuk mempercantik blog anda dan bisanya Display Grid Dan List ini di gunakan untuk blog dengan konten gallery, template blog, iklan, pemasaran produk, info movies, download software dan lainnya.
tombol switch ini hanya untuk mempercantik blog anda dan bisanya Display Grid Dan List ini di gunakan untuk blog dengan konten gallery, template blog, iklan, pemasaran produk, info movies, download software dan lainnya.
Switch Display Grid And List
GRID: Posisi default saat membuka blog maka yang akan active adalah
pada display grid.
LIST : untuk melihat artikel dengan keternagan serta gambar kita hanya
cukup mengklik tombol list.
Contoh Display Grid Dan List
Artikel Grid : Jika pengunjung buka blog kita maka pada halaman depan
blog secara default yang akan tampil adalah grid dengan artikel gambar. ini
akan cocok sekali jika blog anda berupa blog dengan mengutamakan sebuah gambar.
Artikel List : pengunjung akan sangat terbantu dengan list ini agar
pengunjung tidak perlu secara langsung membuka artikel blog untuk melihat
keterangan. cukup klik timbol list maka keterangan akan muncul. seperti pada
gambar di atas.
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>
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/AVvXsEjk2IUq1K5LtA5RibTvFEHe2rkTMw2JhAt06j4XpM8Y_lRh6adTBnfICQkOP4NdnQFHUC_erqo7oMG_DHNhmxAr6ZRwoESo1fnli9qAjEfqB8ky9p7WBv4AsEGz59w-Dqmh09zJ2PDDr-9U/s1600/drid.gif)
no-repeat 3px center;
}
a.dat_view {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-IpF_2ha4g-Eao1miNmGFaq-q0gxWw_i4fch13NtIHSbZyvdM-6YPHbYKFZpaKm5LQhuZndl99T_ivANIfEmkPPx500c3m4rkLKxGrwCWt-CuCEqk4NIYoCHZMc7KNfNMhO8dv78JxyW9/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>
Sumber : Disini
0 komentar:
Post a Comment