Cara Buat Pagenavigation Jquery

Pada kesempatan kali ini saya akan membagikan cara untuk membuat "Pagenavigation Jquery" sebelumnya tips blogger ini adalah request-an atau pesanan dari sobat blogger saya, menurut saya tampilan "Pagenavigation Jquery" ini sangat bagus, berikut adalah screenshotnya :

Nah bagaimana tampilannya ?? bagus kan ?? kalau berminat cekidot yuk gan,,

1. Yang pasti hal yang sobat blogger lakukan pertama harus login ke blogger dulu
2. Langkah yang kedua sobat blogger pilih "Rancangan" atau dalam bahasa inggris disebut juga "Design", setelah itu klik "Edit HTML", setelah mengklik "Edit HTML" jangan lupa di centang "Expand Widget Template"

3. Kemudian carilah kode ]]></b:skin> untuk memudahkan klik CTRL+F kemudian di bidang kosong tersebut masukan kode ]]></b:skin>

4. Setelah ketemu kode ]]></b:skin> masukan kode dibawah ini diatas kode ]]></b:skin>

/* Paginator Originaly By dode-xpblog.blogspot.com */.paginator {
margin-top:28px;
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:5px;
}
.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:-3px; left:50%;
margin-left:-9px;
width:20px; height:20px;
overflow:hidden;
background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/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;
}

5. Setelah itu carilah kode </head>
6. Setelah mencari kode </head> masukan kode dibawah ini dan letakan diatas kode </head>

 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/> 

Jika sudah ada kode tersebut sobat blogger tidak perlu menambahkan kode jquery itu lagi
7. Setelah itu carilah kode </body> dan letakan kode dibawah ini tepat diatas kode </body>

<script src='http://izulpagenumberruler.googlecode.com/files/izoelpagenumberruler.js' type='text/javascript'/>
<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=4;
var numshowpage=10;
</script>
<script src='http://izulpagenumberruler.googlecode.com/files/izoelpagenumberruler2.3.js' type='text/javascript'/> 

8. Dan  yang terakhir jangan lupa di SIMPAN TEMPLATE,, Jadi deh!!

Semoga cara ini bermanfaat!

share this article to: Facebook Twitter Google+ Linkedin Technorati Digg

Posted by tes, Published at Sunday, October 09, 2011 and have 0 komentar