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ı.

Blogger Sayfa Navigasyonunu Düzenleyin

Çok basit bir şekilde Blogger blogumuzun sayfa navigasyon kısmını nasıl düzenler ve değiştiririz göreceğiz. Bunun için hali hazırda var olan bu uygulama kullanacağız ve widgetler yardımıyla sayfa navigasyonumuzu basit bir şekilde blogumuza ekleyeceğiz. Bu yöntem hem basit hem de hızlı. İlk olarak aşağıdaki adrese gidin;

Blogger Sayfa Navigasyon

Bu sayfada karşınızda çıkan yazımızdaki görselde gördüğünüz uygulama üzerinde değişiklik yapacağız. Değiştirilebilir alanlar zaten belli.

• Previous Page Text: Bir önceki sayfa için istediğiniz şeyi yazın
• Next Page Text: Bir sonraki sayfa için istediğiniz yazın
• Posts Per Page: Her sayfada kaç yazı görünsün
• Max Number of Page navs before and after current page: Navigasyonda kaç tane sayfa görünsün

Bu basit değişikliklere istediklerinizi yazdıktan sonra yapmanız gereken tek şey “Customize” butonuna tıklamak. Ardından “Add Widget To My Blog” butonuna tıklayıp açılan sayfada eklenmesini istediğiniz blogunuzu seçmek. Bu işlem blogunuza otomatik olarak bir widget ekleyecek ve artık düzenlediğiniz gibi görünecek...

Kendileri widget olarak eklemek isteyenler için aşağıdaki kodları yeterli olacaktır.

<style type='text/css'>.showpageArea a {text-decoration:underline;}.showpageNum a {text-decoration:none;border: 1px solid #cccccc;margin:0 3px;padding:3px;}.showpageNum a:hover {border: 1px solid #cccccc;background-color:#cccccc;}.showpagePoint {color:#333;text-decoration:none;border: 1px solid #cccccc;background: #cccccc;margin:0 3px;padding:3px;}.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}.showpage a {text-decoration:none;border: 1px solid #cccccc;padding:3px;}.showpage a:hover {text-decoration:none;}.showpageNum a:link,.showpage a:link {text-decoration:none;color:#333333;}</style><script style='text/javascript'>var pageCount=5;var displayPageNum=5;var upPageWord="Previous";var downPageWord="Next";</script><script style='text/javascript' src='http://blogergadgets.googlecode.com/files/blogger-page-nav-v2.js'></script>

Kırmızı ile yazılanları değiştirebilirsiniz...

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