Lambang

Saling berbagi dan bertukar Informasi Pengetahuan yang unik - unik

Follow Me and Like My Facebook,Please!!! =)THANKYOU(=

Follow Me and Like My Facebook,Please!!! =)THANKYOU(=

Sabtu, 12 November 2011

Beautiful New Page Navi For Blogger With Scroll

Bismillah (in the Name of Allah), Alhamdulillah (All Praise to Allah)
After Long time not post in my Blog. I didna’t post anything because I was busy for my Dissertation for my Doctor Defense. Alhamdulillah now I’m graduated (not in web designer, my major is not related with web designer)
Now I want to give all of you beautiful Page Navigation. Like I said before in my comment I’ll make new Page Navigation that can support more than 500, and now this Page Navigation can support more than 500, Alhamdulillah.
To make it beautiful I used New Pugin from WP Paginator
This Plugin call Paginator 3000
- idea by ecto (ecto.ru)
- coded by karaboz (karaboz.ru)
To see the result open This


Paginator3000

Step 1 : Apply Style

  1. Login to Blogger Dashboard and navigate to Layout > Edit Html
  2. Dona’t click the checkbox which says “Expand Widget Templates”
  3. Find this
]]>
 
and replace it with
 
.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/AVvXsEiqFco5NhLJiXX4l9D-DVKewMORVz8HkjrbSpQMpkJuu4wlwrVsrVlmcYxS0g59xj8E8QYtPTwslTagb6Vwxz0XBpvxGhcEDUoG8O_pijwu7Bfe30gn7xSr2FLZ-x1v-5E9b2oQtOQrnDo/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;
}
]]>
 

Step 2 : Aplly Javascript

Find This :
  
 
Replace with :
 


0 komentar:

Posting Komentar

Thumbnail Related Post blogger tutorials
Thumbnail Related Post blogger tutorials
Tiap Hari ISI Pulsa ke Orang lain??? Jalan Kaki Ke Depan Buat Beli Pulsa?? Butuh Pulsa Tengah Malam Tidak Ada Yang Jual, Padahal Lagi Butuh??? CAPEK DEH!!! =D, AYO!!! ISI Pulsa Sendiri Yuuk.. Praktis!!! Dimana saja kita butuh Pulsa, Kita Bisa ISI Sendiri.. Klik Gambar Di Bawah INI