Display Switch Grid And List

Display Grid And List
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.
Demo Switch
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 != &quot;item&quot;'> 
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<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 != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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(http://2.bp.blogspot.com/-7BeF7FZiHo0/T6vZzVSzTzI/AAAAAAAABJs/FlrWN7ZRxmk/s1600/drid.gif) no-repeat 3px center;
}
a.dat_view {
 background:url(http://1.bp.blogspot.com/-43EW3Gjakwc/T6vZz6K4N_I/AAAAAAAABJ0/hi2LK0zc4JQ/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.
Mengatasi kesalahan
Kebanyakan kesalahan biasanya pada bagian CSS karena pada template anda mungkin sudah banyak yang mengedit dengan berbagai style terutama pada bagian post dan gambar post yang hasilnya tidak rapi. serta readmore yang kurang benar cara pemasangannya. jika anda mengalami kesulitan dalam penempatan dan pengaturan css silahkan diskusikan untuk menemukan solusinya. dan jangan lupa tulis URL blog anda yang akan di pasang tutorial di atas. agar saya bisa mereview dan melihat kesalahan untuk mengatasinya.
semoga bermanfaat dan mohon maaf jika banyak kekurangan.

license by under 88 blogspot.com
Post By : denddy

46 comments:

  1. Mantap! Sudah Saya buatkan snippet yang lebih pendek (Untuk universal, bukan hanya Blogger) ⇒ http://jsfiddle.net/tovic/7PaAY/embedded/result%2Cresources%2Chtml%2Ccss%2Cjs/

    ReplyDelete
    Replies
    1. tambah sib aj ni widget tutorialnya kang denddy \o/ , jadi banyak opsi nya, Punya kang taufik juga aganya di edit pake jquery masonry ^^ , div nya jadi lbh keren \m/

      Delete
    2. wah asik nich mas taufik.. saya akan memperluas lagi tutorialnya.. biar pengguna selain blogger bisa merasakannya.. tutorial di atas saya hanya pakai teknik dasar buat template blogger... belum sampai secara luas... thnk .. :-d

      Delete
  2. mantap kang,,,
    d blog saya bisa gak yaa...?

    ReplyDelete
  3. berhasil kang di blog saya... hehehe... makasih kang tutor nya,,,

    mantap dah kang denzdii..

    ReplyDelete
  4. maaf kang,, ternyata di blog saya Switch nya gak jalan...
    apa ada yng kurang yah?? :(

    ReplyDelete
    Replies
    1. waduuhhh si akang udah poho eung... :(

      http://waroengseo.blogspot.com/ yang inih tea kang....

      Delete
    2. bukannya poho kang.. tapi blog yang itu kan belum di pasang grid dan list..
      jadi susah review.. dimana yang salahnya...

      Delete
  5. tong boro didinya , urang oge teu nyaho urang teh siga kumaha.. nu penting mah ganteng jeung bageur. sok mere duit.

    cckck. makin mantap aja, jadi bakalan rajin kediu yeuh :p

    ReplyDelete
    Replies
    1. hahaha... eta profil google weh gawe...
      sok ach sing rajin nya.. sugan aya hadiah mobil-mobilan.. :D

      Delete
  6. mantap tutorialnya...
    btw pada bagian..
    <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>

    agar tulisan "Recent Post" nya hanya muncul pada Home Page dirubah menjadi..
    <div class='switch'>
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <div class='switch-left'>
    <span style='color: #CC0000;'>Recent</span> Post
    </div>
    </b:if>
    <div class='switch-right'>
    <a class='bar_view' href='#'>Grid</a>
    <a class='dat_view' href='#'>List</a>
    </div>
    </div>

    tp i2 hanya saran..
    maaf klo salah hehehe.. :D
    salam..

    ReplyDelete
    Replies
    1. kalau gitu bisa saja.. namun saat di buka label tulisan gak akan muncul.. dan switch akan muncul di halaman mana saja. dan perlu banyak penempatan tag conditionl .
      <b:if cond='data:blog.url == data:blog.homepageUrl'>
      <div class='switch-left'>
      <span style='color: #CC0000;'>Recent</span> Post
      </div>
      </b:if>
      <b:if cond='data:blog.searchLabel'>
      <div class='switch-left'>
      <span style='color: #CC0000;'>Recent</span> Post
      </div>
      </b:if>

      untuk mempersingkat agar grid dan list tampil selain di halaman item(post) dan page_static pake tag ini :
      <b:if cond='data:blog.pageType != &quot;item&quot;'>
      <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
      ------ HTML ----
      </b:if></b:if>

      pranala luar : tentang tag conditional

      Delete
    2. maksud saya sbnarnya tetap memakai yang selain item(post) dan page_static seperti pada tutorial yang awal tp pada bagian tulisan "Recent post" nya di berikan tag conditional hanya untuk Home Page..
      mungkin begini jadinya..
      <b:if cond='data:blog.pageType != &quot;item&quot;'>
      <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
      <div class='switch'>
      <b:if cond='data:blog.url == data:blog.homepageUrl'>
      <div class='switch-left'>
      <span style='color: #CC0000;'>Recent</span> Post
      </div>
      </b:if>
      <div class='switch-right'>
      <a class='bar_view' href='#'>Grid</a>
      <a class='dat_view' href='#'>List</a>
      </div>
      </div>
      </b:if></b:if>

      Jadi tulisan Recent postnya akan muncul hanya di Home Page..
      dan tombol grid dan listnya akan muncul selain item(post) dan page_static...
      Karena klo tdak dibungkus dengan tag conditional Home page. Tulisan "Recent Post" nya akan muncul ketika mengklik label atau bagian archive..

      Delete
    3. boleh .. itu tergantung selera.. tinggal di atur saja penempatannya.. :-d

      Delete
  7. Aduh kan kok jadi ketutup putih putih gan?! T_T
    ini gan gambarnya
    :D
    http://dc531.4shared.com/img/dXbJXqZV/s3/0.5384703452501864/ngaco.jpg

    ReplyDelete
  8. akhirx dpt jg setelah nyari2 di google.., thx ya bro rencanax mau coba pada blog sy... \o/

    ReplyDelete
  9. mas,maaf nih,kalau nambah animasi saat beruba modelnya bagaimana ? :-bd

    ReplyDelete
  10. This comment has been removed by the author.

    ReplyDelete
  11. bang ini punyaku udah bisa tapi kok yang jquery yang slideshownya malah gak bisa?apa karena jquerynya versi dibawahnya?
    Moho bantuannya :( maklum masih nubie
    ini blognya kadoboo.blogspot.com
    makasih sebelumnya :)

    ReplyDelete
  12. Thanks banget untuk triknya.

    Cuma ga 'suitable' untuk blog aku. Aku dah coba, dan hasilnya kurang memuaskan buat aku dan karena males edit css, terpaksa aku ga pake trik ini.

    Setelah aku terapin, aku masuk ke homepage dan tampilannya kotak posnya ga sama tinggi (aku setting 11 artikel di homepage) terus setelah masuk ke posting (artikel) yang ada malah cuma kotak aja (sama seperti homepage tapi cuma satu) isi artikelnya ga ada.

    Ya, itulah laporan aku.

    BTW, two thumb for your effort!

    ReplyDelete
    Replies
    1. sama mas...... gridnya gak rata. solusinya gimana mas???

      Delete
  13. keren postnya,, saya udah cari gimana caranya biar post bisa jadi grid.. eh ketemu disini.. thanks a lot..!

    ReplyDelete
  14. Master ,cba liat nih blog saya http://d-cinema112.blogspot.com/,Masalahnya di mana yah ?
    ko jumlah postnya yang di halaman depan slalu berubah-ubah kadang 3 7 6 ,padahal saya sudah setting yang muncul di halaman depan 8 post.
    ko bisa bgitu master ? :'( =(
    Mohon solusinya master,
    terimakasih.

    Mantap Postnya :-d :-bd

    ReplyDelete
  15. tampilan gridnya tidak sama rata dan saya hanya inggin tampilan grid saja gimana mas???

    ReplyDelete
  16. apa harus ada tabelnya ya!!! at ..............

    ReplyDelete
  17. Udah nyoba .dan settingan grid nya udah pas,ehhh malah list yang ga bisa,, :'(...gimana solusinya ya??? coba liat di www.baliexpose.com

    ReplyDelete
  18. .. aq ijin nyoba ya?!? kayak nya keren nich. he..86x ..

    ReplyDelete
  19. Ijin menggunakan master....
    master, kalau mau membuat tumbnailnya menjadi lebih banyak bagaimana? saya cuma ada 5 disetiap label. mohon bantuannya master.
    lapakrakyat.com

    ReplyDelete
  20. kenapa next pagenya ada di samping gan, & pada display grid kok tidak muncul gambarnya ??
    mohon bantuanya gan. @@,

    http://cahmovies.blogspot.com/

    ReplyDelete
    Replies
    1. Sama gan, templateku juga gitu, pusingggg... next pagenya jadi berantakan

      Delete
  21. does not work, and speak fucking english language

    ReplyDelete
  22. sudah saya coba mas di blog saya.

    mau nanya sekalian, pas di tab grid, biar gambar nya pas sekotak gimana ya mas? terimakasih mas.

    ReplyDelete
  23. Mau tanya, kan berarti ada 2 pilihan grid dan list.
    Kalau mau bikin list nya aja sebagai default gimana ?

    ReplyDelete
  24. mantab,,thanks buat tutornya... \o/

    ReplyDelete
  25. waduh maaf smuanya gak bisa bls komen.. soalnya saya lupa akun google dan verivikasi 2.. jadi blog ini gak bisa beroperasi lagi.. hehehe By : Admin under-88.blogspot.com
    NB : saya lagi fokus kuliah + fokus sama pembrograman Java,Delphi,VB,SQL dll.
    maaf y semuanya blog ini sudah di tidak bisa beroperasi lgi..

    ReplyDelete
  26. terimakasih gan tutorialnya.. lagi pingin buat template sendiri.. ud lama nyari ini akhirnya bisa nemu dimari heheh.. sukses terus yah
    ditunggu kunjungan baliknya http://www.dvodca.com

    ReplyDelete
  27. wahhh keren gan tutorialnya ... gan boleh request nngga cara buat widget label tertentu bentuk grid tapi ada title judul postnya ;) makasih...

    ReplyDelete
  28. mas.. kalo mau kasih read more gmana?

    ReplyDelete
  29. This comment has been removed by the author.

    ReplyDelete
  30. This post is amazing! Thanks for information.
    Feed back Please http://www.animesakuin.blogspot.com/

    ReplyDelete
  31. blog sy tdk berat kalau saya pasangin skripx

    ReplyDelete
  32. kunjungi juga dunia-otomotifbro.blogspot.co.id juga ya teman2...menupas tuntas tentang otomotif

    ReplyDelete

Perhatian !! Komentar Pada Bulan September 2012 belum bisa di balas.
di karenakan semua admin sedang sibuk dengan urusan kulliahnya.
semoga setelah akhir bulan artikel dan komentar akan segera di update.


terima kasih atas perhatiannya sekali lagi kami minta maaf yang sebesar-besarnya.

 
loading...
Top