Membuat navigasi halaman ala google di blogger

Selasa, 01 Mei 2012

0 Membuat navigasi halaman ala google di blogger

Setelah postingan yang terdahulu cara memasang iklan didalam postingan blog sekarang kita akan membahas cara Membuat navigasi halaman ala google di blogger. Untuk lebih jelasnya silahkan baca tutorial di bawah ini :

Silahkan masuk ke blogger kalian

Pada dashboard pilih Design

Lalu Edit Html

Jangan lupa kalian centang Expand

Lalu cari Script berikut

]]></b:skin>

Lalu ganti code tersebut dengan code dibawah ini

.paginator {
 margin-top:60px;
 font-size:1em;
}
.paginator table {
 border-collapse:collapse;
 table-layout:fixed;
 width:100%;
}
.paginator table td {
 padding:0;
 white-space:nowrap;
 text-align:center;
}
.paginator span {
 display:block;
 padding:3px 0;
 color:#fff;
}
.paginator span strong,
.paginator span a {
 padding:2px 6px;
}
.paginator span strong {
 background:#ff6c24;
 font-style:normal;
 font-weight:normal;
}
.paginator .scroll_bar {
 width:100%; height:20px;
 position:relative;
 margin-top:10px;
}
.paginator .scroll_trough {
 width:100%; height:3px;
 background:#ccc;
 overflow:hidden;
}
.paginator .scroll_thumb {
 position:absolute;
 z-index:2;
 width:0; height:3px;
 top:0; left:0;
 font-size:1px;
 background:#363636;
}
.paginator .scroll_knob {
 position:absolute;
 top:-5px; left:50%;
 margin-left:-10px;
 width:20px; height:20px;
 overflow:hidden;
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJeWXQgT-QySOL9FKli1ogbNCKjHIhfhrgODI9WWjFH8ZpKuX97wgYi7KR47EuI9CaFmuw7mLW76BX1rctnmPHMBPXgy4fIFZdV5vsyGRT5PbqVaoft9Bs8ECbn-Gw700m1ckqXT0R3t0/s1600/slider_knob.gif) no-repeat 50% 50%;
 cursor:pointer; cursor:hand;
}
.paginator .current_page_mark {
 position:absolute;
 z-index:1;
 top:0; left:0;
 width:0; height:3px;
 overflow:hidden;
 background:#ff6c24;
}

.fullsize .scroll_thumb {
 display:none;
}

.paginator_pages {
 width:600px;
 text-align:right;
 font-size:0.8em;
 color:#808080;
 margin-top:-10px;
}
]]></b:skin>

Setelah kalian ganti silahkan cari lagi code berikut ini.

</body>

Lalu ganti lagi dengan code berikut ini.

<script src='http://scriptabufarhan.googlecode.com/svn/trunk/paginator3000.js' type='text/javascript'></script>
<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=6;
</script>
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/paginator3000-forblogger-v1.0.0.js' type='text/javascript'/>
</body>

Setelah kalian ganti sekarang Save Templates dan lihat hasilnya seperti blog Pecinta dua dunia

Powered : Abu farhan