Home » » Membuat Navigasi Halaman Versi Terbaru

Membuat Navigasi Halaman Versi Terbaru



membuat navigasi halaman

Sekarang saya ingin membahas tentang Membuat Navigasi Halaman yang indah sekali. Navigasi Halaman ini dibuat versi terbaru dan dapat mendukung lebih dari 500 halaman.

Sobat pasti tertarik dengan Navigasi Halaman Ini. Mari kita menuju ke tip dan triknya dibawah ini.

Langkah 1: Terapkan Style

  • Login ke Dashboard Blogger dan arahkan ke Layout> Edit Html
  • klik atau centang kotak kecil yang ada tulisan "Expand Template Widget"
  • Cari ini kode ]]></b:skin>
  • Untk mencarinya sobat tinggal tekan Ctrl + F
  • Kalau sudah ketemu kode tersebut.
  • Copy Paste kode dibawah ini tepat di atas kode ]]></b:skin>


.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(http://3.bp.blogspot.com/_McxL-_3YYuM/TBG843o8-TI/AAAAAAAAAAM/tAE1hAOX6Ys/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;
}



Langkah 2: Terapkan Javascript
  • Cari kode ini : </body>
  • Setelah sobat menemukan kode tersebut, Copy Paste kode dibawah ini dan taruk di atasnya kode </body>


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


Ubah berdasarkan pengaturan blog Anda:
Var postPerPage = 7;
numshowpage var = 6;

Post Per Page: Berapa banyak Post setiap Halaman untuk blog Anda
Num Show Page:
Banyak cara nomor akan muncul pada halaman Anda Navigasi


Langkah 3
Customize Label jika anda sudah menggunakan Halaman Navi sebelumnya menggunakan langkah ini

Buka halaman Edit HTML dan "Expand Template Widget"
Cari kode ini :
'data:label.url'

Ganti dengan kode berikut ini : 'data:label.url + &quot;?&amp;max-results=7&quot;'
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Lora Malunk Blog
tutorial blog up to date
Loading...

+ komentar + 1 komentar

9 April 2011 12.54

nice tips sob...!!!!

Terimakasih Kian Coy atas Komentarnya di Membuat Navigasi Halaman Versi Terbaru

Posting Komentar

Kebijakan berkomentar akan dihapus, jika tidak sesuai dengan aturan dibawah ini, Demi kenyamanan kita bersama :

» Menggunakan bahasa yang tidak sopan (Sara, Pornografi, Menyinggung)
» Duplikat komentar
» Komentar menautkan link secara langsung
» Komentar tidak berkaitan dengan artikel
» Judul Komentar Berupa Promosi

Terima Kasih .... Lora Malunk Blog

 

Configurasi

Alexa :
Stats :
Page Rank : Free PageRank Checker
DMCA :
Amung :
Bloggers : Bloggers - Meet Millions of Bloggers
Extreme :
eXTReMe Tracker
Support : Lora Malunk Blog | Songong Template | Tutorial Blog
Copyright © 2011. Lora Malunk Blog - All Rights Reserved
Template Modify by Lora Malunk Blog
Proudly powered by Blogger