Bumerang - Yazarkafe

Blogger Sayfa Numaralandirma (Page Navi) Eklentisi-Animasyonlu

Bildiğiniz gibi blogger şablonlarının çoğunda sayfa numaralandırma eklentisi yok.Sayfalar arasında geçiş, sayfa sonunda bulunan daha eski kayıtlar, daha yeni kayıtlar gibi linklerle sağlanıyor.Daha önce sizlere "blogger sayfa numaralandırma eklentisini"(Page Navi), kod ekleme yöntemi ile anlatmıştık.Şimdi ise herkesin yapabileceği, basit kafa karıştırmayacak, üstelik daha şık görünümlü, animasyonlu  sayfa numaralandırma eklentilerinden beğendiğinizi yada temanıza uygun tasarımdaki sayfa numaralandırma eklentisini gadget ekleme yöntemiyle blogunuza uygulamayı sizlere anlatacağız.
Yapmanız gereken işlem çok basit 2-3 saniyenizi bile almayacak;
Kumanda Paneli>Tasarım>Gadget Ekle>Html/Javascript yolunu takip ediyoruz.Aşşağıda beğendiğimiz sayfa numaralandırma eklentilerinden altında bulunan kodu kopyalayıp açılan gadgetimizin içine yapıştırıp kaydediyoruz. (Gadgete başlık eklemeyin) .Sayfa Numaralandırma Eklentimiz kullanıma hazır.
1.Tema:Yeşil Sayfa Numaralandırma Eklentisi
Image Hosted by ImageShack.us
<!-- Stylish Colored Page Navigation Widget For Blogger By Blog Okulu @ http://www.blogokulu.blogspot.com --><style type="text/css">
#blog-pager{padding:10px 0 !important;clear:both;}
.showpageArea {font-weight: bold;margin:5px;}
.showpageArea a {text-decoration:underline;color: #fff;}
.showpageNum a, .showpage a {color: #fff;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;margin:0 3px;padding:3px 5px; background: #9dd53a; background: -moz-linear-gradient(top, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=0 ); }
.showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc; background: #6db3f2; background: -moz-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6db3f2), color-stop(50%,#54a3ee), color-stop(51%,#3690f0), color-stop(100%,#1e69de)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 ); }
.showpagePoint {color: #aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #e2e2e2; background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); }
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}
</style><script type="text/javascript">
var home_page="/";
var urlactivepage=location.href;
var postperpage=5;
var numshowpage=5;
var upPageWord ='Önceki';
var downPageWord ='Sonraki';
</script>
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/pagenaviv202-min.js' type='text/javascript'></script>
<!-- Stylish colored Numbered Page Navigation Widget For Blogger By Blog Okulu @ http://www.blogokulu.blogspot.com -->

2.Tema:Turuncu Sayfa Numaralandırma Eklentisi
Image Hosted by ImageShack.us
<!-- Stylish Colored Page Navigation Widget For Blogger By Blog Okulu @ http://www.blogokulu.blogspot.com --><style type="text/css">
#blog-pager{padding:5px 0 !important;clear:both;}
.showpageArea {font-weight: bold;margin:5px;}
.showpageArea a {text-decoration:underline;color: #fff;}
.showpageNum a, .showpage a {color: #fff;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #ffb76b; background: -moz-linear-gradient(top, #ffb76b 0%, #ffa73d 50%, #ff7c00 51%, #ff7f04 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb76b), color-stop(50%,#ffa73d), color-stop(51%,#ff7c00), color-stop(100%,#ff7f04)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb76b', endColorstr='#ff7f04',GradientType=0 ); }
.showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc; background: #9dd53a; background: -moz-linear-gradient(top, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=0 ); }
.showpagePoint {color: #aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #e2e2e2; background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); }
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}
</style><script type="text/javascript">
var home_page="/";
var urlactivepage=location.href;
var postperpage=5;
var numshowpage=5;
var upPageWord ='Önceki';
var downPageWord ='Sonraki';
</script>
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/pagenaviv202-min.js' type='text/javascript'></script>
<!-- Stylish colored Numbered Page Navigation Widget For Blogger By Blog Okulu @ http://www.blogokulu.blogspot.com -->
3.Tema:Mavi Sayfa Numaralandırma Eklentisi
Image Hosted by ImageShack.us
<!-- Stylish Colored Page Navigation Widget For Blogger By Blog Okulu @ http://www.blogokulu.blogspot.com --><style type="text/css">
#blog-pager{padding:5px 0 !important;clear:both;}
.showpageArea {font-weight: bold;margin:5px;}
.showpageArea a {text-decoration:underline;color: #fff;}
.showpageNum a, .showpage a {color: #fff;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #3b679e; background: -moz-linear-gradient(top, #3b679e 0%, #2b88d9 50%, #207cca 51%, #7db9e8 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3b679e), color-stop(50%,#2b88d9), color-stop(51%,#207cca),  color-stop(100%,#7db9e8)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b679e', endColorstr='#7db9e8',GradientType=0 ); }
.showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc; background: #aebcbf; background: -moz-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aebcbf), color-stop(50%,#6e7774), color-stop(51%,#0a0e0a), color-stop(100%,#0a0809)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf', endColorstr='#0a0809',GradientType=0 ); }
.showpagePoint {color: #aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #e2e2e2; background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); }
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}
</style><script type="text/javascript">
var home_page="/";
var urlactivepage=location.href;
var postperpage=5;
var numshowpage=5;
var upPageWord ='Önceki';
var downPageWord ='Sonraki';
</script>
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/pagenaviv202-min.js' type='text/javascript'></script>
<!-- Stylish colored Numbered Page Navigation Widget For Blogger By Blog Okulu @ http://www.blogokulu.blogspot.com -->
4.Tema:Kırmızı Sayfa Numaralandırma Eklentisi
Image Hosted by ImageShack.us
<!-- Stylish Colored Page Navigation Widget For Blogger By Blog Okulu @ http://www.blogokulu.blogspot.com --><style type="text/css">
#blog-pager{padding:5px 0 !important;clear:both;}
.showpageArea {font-weight: bold;margin:5px;}
.showpageArea a {text-decoration:underline;color: #fff;}
.showpageNum a, .showpage a {color: #fff;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #f85032; background: -moz-linear-gradient(top, #f85032 0%, #f16f5c 50%, #f6290c 51%, #f02f17 71%, #e73827 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f85032), color-stop(50%,#f16f5c), color-stop(51%,#f6290c), color-stop(71%,#f02f17), color-stop(100%,#e73827)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#e73827',GradientType=0 ); }
.showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc; background: #aebcbf; background: -moz-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aebcbf), color-stop(50%,#6e7774), color-stop(51%,#0a0e0a), color-stop(100%,#0a0809)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf', endColorstr='#0a0809',GradientType=0 ); }
.showpagePoint {color: #aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #e2e2e2; background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); }
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}
</style><script type="text/javascript">
var home_page="/";
var urlactivepage=location.href;
var postperpage=5;
var numshowpage=5;
var upPageWord ='Önceki';
var downPageWord ='Sonraki';
</script>
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/pagenaviv202-min.js' type='text/javascript'></script>
<!-- Stylish colored Numbered Page Navigation Widget For Blogger By Blog Okulu @ http://www.blogokulu.blogspot.com -->
5.Tema:Açık Mavi Sayfa Numaralandırma Eklentisi
Image Hosted by ImageShack.us
<!-- Stylish Colored Page Navigation Widget For Blogger By Blog Okulu @ http://www.blogokulu.blogspot.com --><style type="text/css">
#blog-pager{padding:5px 0 !important;clear:both;}
.showpageArea {font-weight: bold;margin:5px;}
.showpageArea a {text-decoration:underline;color: #fff;}
.showpageNum a, .showpage a {color: #fff;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #789EB1; background: -moz-linear-gradient(top, #789EB1 0%, #618FA7 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#789EB1), color-stop(100%,#618FA7)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#789EB1', endColorstr='#618FA7',GradientType=0 ); }
.showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc;background: #7d7e7d; background: -moz-linear-gradient(top, #7d7e7d 0%, #6B6B6B 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#6B6B6B)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#6B6B6B',GradientType=0 ); }
.showpagePoint {color: #aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #e2e2e2; background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); }
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}
</style><script type="text/javascript">
var home_page="/";
var urlactivepage=location.href;
var postperpage=5;
var numshowpage=5;
var upPageWord ='Önceki';
var downPageWord ='Sonraki';
</script>
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/pagenaviv202-min.js' type='text/javascript'></script>
<!-- Stylish colored Numbered Page Navigation Widget For Blogger By Blog Okulu@ http://www.blogokulu.blogspot.com -->
PAYLAŞ

BLOG OKULU

Merhabalar, 2012 yılından beri editörlüğünü yaptığım blogokulu.org sitesinde blogger kullanıcıları için gerekli olan bir çok bilgiyi bulabilrsiniz.Blogger temaları,blogger eklentileri ve blogger dersleri ile blog yazarlarına elimizden geldiğince yardımcı olmaya çalışıyoruz.

  • Image
  • Image
  • Image
  • Image
  • Image
    Disqus Yorumları
    Facebook Yorumları

19 yorum:

  1. Basakdemirhan8 Mart 2012 14:07

    Bütün bilgilemdirmeler için çok teşekkürler. blogspot kullanmayı çok iyi bilmeyenlerin işine inanılmaz yarayan bilgiler paylaşıyorsunuz. Teşekkürler
     

    YanıtlaSil
  2. rica ederim faydamız olduysa ne mutlu...

    YanıtlaSil
  3. Hocam iyide bunu yaptıktan sora makale yazıyorum gene aşağı doğru gidior 2.sayfa felan açılmıyor ki ?

    YanıtlaSil
  4. Son yazdığınız yazıilk başta görünür.
    Aşşağı doğru giden ney tam olarak soruyu anlamadım?

    YanıtlaSil
  5. ilk önce diğer birçok sitede bulunmayan bu konuları paylaştığınız için teşekkürler. ben numaralandırmanın altında çıkan "widget by abu farhan" yazısını silmek istiyorum. birde başka bir konuyla alakalı ama ınuda burdan cevaplarsanız çok iyi olur. widgetleri ana safada veya yazıyı açtıktan sonra görünmesi için gereken kodu eklemeye çalıştım ama sidebara etiketleri ekledim ve html de html1 2 3  gibi değilde label1 2 3 olarak görünüyor. bunun için ne yapmam gerekiyor?

    YanıtlaSil
  6. Ice_mouse_x85x30 Nisan 2012 15:58

    Çok Güzel Paylaşımlar Dostum Ellerine Sağlık

    YanıtlaSil
  7. sağolun vallha oldu süpermiş

    YanıtlaSil
  8. Html Kod arasına nasıl koyabiliriz?

    YanıtlaSil
  9. Widget by Abu-farhan bunu nasıl kaldırabiliriz acaba ?

    YanıtlaSil
  10.  zaman bulduğumda istediğiniz gibi bu kodları düzenliyeceğim, bahse konu işlem çok uzun olduğu için burda anlatamıyorum

    YanıtlaSil
  11. Widget by Abu-farhan kaldırılması ile ilgili bir çözümü olan var mı?
    Kodun en altındaki linki (http://scriptabufarhan.googlecode.com/svn/trunk/pagenaviv202-min.js) internet explorer' a yapıştırınca aşağıdaki metin çıkıyor.
    /* Widgte by www.abu-farhan.comcopyright by Abu FarhanDont edit without permission from the Copyright owner*/

    YanıtlaSil
  12. ben yeni bbir blog açtım ama ana sayfa ve moda gibi odacıklar yapmak istiyorum actıgım bu isimleri her gün yeni yazılarla nasıl kullanabilirim.

    YanıtlaSil
  13.  burdaki yazımızı okursanız sorunuzun cevabını bulursunuz.

    YanıtlaSil
  14. harıka hersey bukadar basıt olasa ne guzel

    http://haberblogum.blogspot.com/ 

    YanıtlaSil
  15. reklam var çok kötü olmuş 

    YanıtlaSil
  16. Merhaba,

    İlgili kodu sayfama eklediğimde Ana Sayfa da sorunsuz açılırken,etiketlerden oluşturduğum katagorilerin ilk sayfasında çıkmıyor. Yine altta Önceki Kayıtlar çıkıyor ve onu tıkladığımda açılan sayfada gözüküyor. 
    Garip bir hata.

    YanıtlaSil
  17. hocam bu konuyu beklıyorum uzun zamandır

    YanıtlaSil
  18. Bende aynı derttan muzdarıbın :S

    YanıtlaSil

Belirtmek istediğiniz farklı konular varsa Burdan Yazabilrisiniz...