• digg
  • google-plus
  • facebook
  • twitter
  • feed
  • delicious

Cara Pasang Tombol Grid Dan List Di Blogspot

Written By Rusman edi on Friday, February 7, 2014 | 3:40 AM
Cara pasang GRID dan LIST pada tampilan posting terbaru di homepage blogs " Grid And List For Lates Post" Buat anda yang ingin memasang tampilan grid dan list untuk tmpilan posting terbaru di blogspot berikut saya jelaskan cara pemasanganya serta tampilan apa yan di iginkan tampil terlebih dahulu di saat user mengunjungi blog anda,Apa anda ngin menampilkan Grid terlebih dahulu atau List.?
list-grid
Berikut cara pemasanganya,Harap baca penjelasan dengan teliti sebelum anda menerapkanya,Tujuanya agar tidak terjdi kesalahan pada pemasangan css,html,jsnya. Step by Step aja..!

1. Silahkan login ke akun blogger anda.
2. Masuk ke dhosbor blog anda.
3. Klik Template terus Edit HTML ( layout )
4.Gunakan Ctrl + F dan cari kode ]]></b:skin> jika sudah ketemu simpan Css berikut tepat di bawah kode ]]></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>

5. Gunakan Ctrl + F cari kode </head> jik sudah ketemu simpan kode berikut tepat di atas kode </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(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>

6. Gunakan Ctrl + F cari kode <b:section class='main' id='main' showaddelement='yes'> jika sudah ketemu simpan kode berikut tepat di atas kode <b:section class='main' id='main' showaddelement='yes'>

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

7. Gunakan Ctrl + F cari kode  <b:includable id='post' var='post'> Gulir kebawahnya lagi cari kode yag mirip seperti ini <div class='post hentry'> Jika sudah ketemu selipkan tulisan BAR di antara tulisan "Post dan Hentry"

Contoh :
1. <div class='post bar hentry'> ( Untuk tampilan bar saat pertama di buka. )
2. <div class='post dat hentry'> ( Untuk tampilan List saat pertama di buka. )

8. Terahir "Save Template" Anda.

Good Luck.!
Advertisement
*Pilih Tab Komentar Yang Di Inginkan->
Comments
0 Comments

Post a Comment

Berikan Komentar Sesuai Dengan Kebijakan Dan Privasi Kami.!