3 Ağustos 2010

Blogger için Page Navigation 3000 (Hareketli Sayfalandırma)

Hiç Page Navigation 3000 kullandınız mı? Bu blogcuların genelde kullandığı bir sayfalandırma (navigasyon) işidir. İşte bu navigasyonun demosunu resimde görebilirsiniz. Kullanılması basit ve çok kaliteli olduğundan bunu çok seveceksiniz. İstediğiniz sayfayı bulmak için hareketinize izin veriyor. Aynı Sayfada kalarak tüm sayfa numaralarını görebiliyorsunuz. Bu sayede diğer sayfaya geçmeden çok daha sonraki sayfa numaralarına tıklayarak istenilen sayfaya gidebiliyorsunuz. Bu navigasyon işlevi düzgün çalışabilmesi için blogger tabanlı  web sitenizde en az 10 makaleden oluşması gerekir. Bunu dikkate alarak navigasyon işlevini kullanabilirsiniz.
 Nasıl Eklenir?
1.Adım:
Blogger'e Giriş / Kumanda Paneli / Tasarım(Yerleşim) / HTML'yi Düzelt / Widget Şablonunu Genişlet bölümlerinden sonra CTRL+F(Arama) yardımıyla ;

]]></b:skin>
kodunu buluyorsunuz ve hemen üstüne;

.paginator {
font-family: Trebuchet MS;
margin-top:60px;
font-size:1.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:#0AA5D5;
font-style:normal;
font-weight:bold;
}
.paginator .scroll_bar {
width:100%;    height:20px;
position:relative;
margin-top:10px;
}
.paginator .scroll_trough {
width:100%;    height:3px;
background:#E8E8E8;
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://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:#0AA5D5;
}
.fullsize .scroll_thumb {
display:none;
}
.paginator_pages {
width:600px;
text-align:right;
font-size:0.8em;
color:#808080;
margin-top:-10px;
}
kodlarını ekliyorsunuz.
2- Adım:

</body>
kodunu buluyorsunuz ve hemen üstüne;

<script src='http://all-in-one-blogger-widget.googlecode.com/files/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://all-in-one-blogger-widget.googlecode.com/files/paginator3000-forblogger-v1.0.0.js' type='text/javascript'/>
kodlarını ekliyorsunuz.
İşlem bitti. Temanızı önce önizlemeye alın sorun vermezse kaydedin. İlgili görüşlerinizi yorum bölümünde belirtiniz.

0 yorum:

Yorum Gönder

Ziyaretci içerik hakkında düşüncelerini bizimle paylaşmak ister misin?