7 Eylül 2013 Cumartesi

Bloggerda Sayfa Navigasyon

Blogger tabanlı bloglarda sayfa navigasyon eklentisi kodunu bu yazımızda sizlerle paylaşacağız. Burda ayrıca kodla birlikte kodun içinde hangi kısımları değiştirebileceğinizden bahsedeceğiz. Bu sayede kodu kendinize özgü bir şekilde düzenleyebilecek, Blogger sayfa navigasyon eklentisini blogunuza uyarlayabileceksiniz.

<style type="text/css">#blog-pager{font-size:normal}.showpageArea{font-family:verdana,arial,helvetica;color:#000;font-size:11px;margin:10px}.showpageArea a{color:#fff}.showpageNum a{padding:3px 8px;margin:0 4px;text-decoration:none;background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV8QPxteicSYQccv1OR_tP2mOZjoyr1pl6CroiTvjS-hG2Ij2OOzBbNFQFEZS-Qh9j_ft-5fGh3v1ynuyXuyZpGHwHVj16OWZkMa3p8YWKQ_psmaPYk5-wk5J0Lh7sGtlbhGvoRM16DwI/s1600/wp5.jpg) 0 -50px repeat-x}.showpageNum a:hover{background:#666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV8QPxteicSYQccv1OR_tP2mOZjoyr1pl6CroiTvjS-hG2Ij2OOzBbNFQFEZS-Qh9j_ft-5fGh3v1ynuyXuyZpGHwHVj16OWZkMa3p8YWKQ_psmaPYk5-wk5J0Lh7sGtlbhGvoRM16DwI/s1600/wp5.jpg) 0 -25px repeat-x}.showpagePoint{color:#fff;padding:3px 8px;margin:2px;font-weight:700;background:#06a2b9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV8QPxteicSYQccv1OR_tP2mOZjoyr1pl6CroiTvjS-hG2Ij2OOzBbNFQFEZS-Qh9j_ft-5fGh3v1ynuyXuyZpGHwHVj16OWZkMa3p8YWKQ_psmaPYk5-wk5J0Lh7sGtlbhGvoRM16DwI/s1600/wp5.jpg) 0 0 repeat-x;text-decoration:none}.showpageOf{margin:0 5px 0 0} </style>
<script style='text/javascript'>
var postperpage=10;
var numshowpage=5;
var upPageWord="Önceki Sayfa";
var downPageWord="Sonraki Sayfa";
var home_page="/";
var urlactivepage=location.href;
</script>
<script style='text/javascript' src='http://code.helperblogger.com/10page-navi.js'></script>


Yukardaki kodumuzu bir Blogger sayfa navigasyon eklentisi gibi kullanabilmek için aşağıdaki işlemleri gerçekleştirin.


  • Blogger yönetim paneline gidin.
  • Yerleşim sekmesine gidin
  • Gadget ekleye tıklayın
  • Html/Javascript ekleye tıklayın
  • Yukardaki kodu yapıştırıp kaydedin


Bu işlemlerden sonra sayfa navigasyon eklentisini kullanabileceksiniz. Şimdi gelelim kodda değişiklik yapabileceğiniz kısımlara. Kod üzerinde kırmızı yazıları değiştirebilirsiniz. Belirgin olsun diye birde kalın yaptım. Kırmızılar haricinde değişiklik yaparsanız kodun çalışmama ihtimali var.

Font Family kısmı yazı fontuyla ilgili bir kısım. Color ve Backgroun kısmı renklerle alakalıdır. Eğer blogunuza uyarlamak istiyorsanız buraya uygun renk kodlarını yazabilirsiniz. Kırmızı ile işaretlediğimiz görsel linkleridir. Bu görselleri kendinizinkiyle değiştirebilirsiniz. Son olarak postperpage sayfada gösterilecek yazı anlamına gelir, rakamı dilediğiniz gibi ayarlayın. Aynı yerde numshowpage kodu ise gösterilecek rakam sayısını belirler. Açıklanması gereken başka birşey yok... Çözemediğiniz bir durum olduğunda yorum vasıtasıyla bizimle iletişime geçebilirsiniz.


Bu yazı http://webmaster.10line.net adresinde yayınlandı.

Hiç yorum yok:

Yorum Gönder