Cara Mudah Membuat Home Page Display Switch List dan Grid Lengkap

Selamat Datang di Wahyu Development, kali ini saya ingin membagikan tutorial membuat tampilan home page pada blog menjadi 2 tampilan, yakni bisa List atau Grid. Dengan menggunakan mode ini pengunjung dapat sesuka hati memilih tampilan halaman website yang diinginkan. Ok langsung saja untuk tutorialnya berikut !

Pertama, buka blogger anda --> kemudian buka menu tema/theme --> lalu klik Edit HTML, pada halaman ini silahkan anda cari code <b:section class='main' id='main' showaddelement=,  Jika sudah menemukan code tersebut dan code tersebut memiliki variabel NO silahkan anda ubah menjadi YES, sehingga code akan tampil seperti ini.

Kemudian copy code HTML ini tepat diatas code diatas, maka akan tampil seperti ini.

<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>

Kedua, cari code <div class='post hentry uncustomized-post-template', setelah menemukan code tersebut silahkan tambahkan kata bar, sehingga tampil seperti ini.

[Catatan] code ini biasanya hanya terdapat satu di tema atau template anda sehingga anda jangan bingung atau salah mengganti code.

Ketiga, cari code </head> lalu tambahkan code HTML ini tepat diatasnya atau sebelum code </head>.

<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>

Keempat, cari code ]]></b:skin>, lalu tambahkan code CSS berikut ini tepat diatasnya atau sebelum code ]]></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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ23rsA2X_ieX17WwTRr8pAUFyJoRhUEUaXhINbReOTgetmEcomq-f2v-0Du9IO8LS_HxXWEsFyFEmjtk-zoMn1fQlmp5z62390uSfGOkDIag15ApvuPOjYQab1m0nSoSdN4nmMCLW_0ZQ/s1600/drid.gif) no-repeat 3px center;
}
a.dat_view {
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXWyBI3Ii3ShUT7InrY7rVrjeiHDR3aBwikyqulrD9MYl8tQ-OooSrsWETYDT9uC5aL-LLzKfAaVi5tp_puhvzuCjPUCNALyRPUeA3JU61RJS9DddenKnb153IBQj3Ck8R7YQLt_1Y2dla/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>

Langkah terakhir simpan tema/theme dan lihat hasilnya.

Itulah cara membuat home page display switch grid and list, selanjutnya untuk mempercantik tampilan Grid silahkan anda ubah code CSS Grid diatas sesuai yang anda inginkan, berikan komentar anda dan semoga bermanfaat . . .

Wahyu Development

Situs download software lengkap dan mudah - Tutorial lengkap tentang website, sosial media, dan komputer - Sumber referensi tugas sekolah dan informasi lainnya

Share this post

Related Post