Yine Blogger İpuçları Serisi ile devam ediyoruz arkadaşlar. Bugün, anlatımı birçok sitede mevcut olduğu halde herkesin yapamadığı bu eklentiyi yapıcaz inşallah.Benim blogumda da kullandığım üzere bu eklenti Wordpress bloglardan görülerek Blogger'a uyarlanmıştır. Yapacağımız bu sayfalandırma eklentisi bence herkesin blogunda olmasını istediği ve gerçekten olması gereken bir eklenti. Şimdi "Ben o kadar sitede gördüm yapamadım.Buda kesinlikle olmaz" diyen arkadaşlar olabilir. Haklılarda aslında.Ama ben bu eklentiyi tam tamına 4 farklı tema yükleyerek deneme blogunda hepsinde çalıştırdım. Şuda denediğim bloglardan 4 tanesi:
Daha fazla deneyip size göstermek isterdim de insan bir yerden sonra bıkıyor. Hep aynı işlemler yani 4 tane de az değil bence.Bu eklenti o kadar kolayki size sadece iki kod vereceğim. Vereceğim bu iki kod ile inşallah sizlerde blog sayfalarınızda bu eklentiyi çalıştıracaksınız.Hazırsak hemen anlatıma geçelim:
Çok Önemli Not: Önceki yazımda da belirttiğim gibi blogumda smiley eklentisi kullandığımdan dolayı kodlar smiley olarak gözüküyor.Bunun için sayfa tam yüklenmeden tarayıcınızdaki "Durdur" ikonuna tıklayarak kodları çok kolay bir şekilde kopyalayabilirsiniz...
Her zaman ki gibi Blogger hesabımıza girip "Yerleşim/HTML'yi Düzenle" sekmesine gelip "Widget Şablonlarını Genişlet" tikini aktif hale getirdikten sonra kodundan önce şu kodları yapıştıralım:
.showpageNum a {
font-size:12px;font-weight:bold;
padding:5px 7px 5px 7px;
color:#006699;
border:1px solid #CCC;
-moz-border-radius:3px;-
webkit-border-radius:3px;
}
.showpageNum a:hover {
text-decoration:none;
padding:5px 7px 5px 7px;
color:#3C78A7;
border:1px solid #1584d9;
background:#f0f4f7;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
.showpagePoint {
background:#84bb01;
font-size:12px;font-weight:bold;
padding:5px 7px 5px 7px;
color:#fff;
border:1px solid #CCC;
-moz-border-radius:3px;-
webkit-border-radius:3px;
}
.showpageOf {
clear:both;
padding:15px;
text-align:center;
font-size:12px;
font-weight:bold;
color:#999;
margin:10px auto 10px auto;
}
.showpage a {
font-size:12px;font-weight:bold;
padding:5px 7px 5px 7px;
color:#006699;
border:1px solid #CCC;
-moz-border-radius:3px;-
webkit-border-radius:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
font-size:12px;font-weight:bold;
padding:5px 7px 5px 7px;
color:#006699;
border:1px solid #CCC;
-moz-border-radius:3px;-
webkit-border-radius:3px;
}
Burası işin en basit tarafıydı şimdi size bulmanız gereken ikinci kodu vericem.Ama burayı detaylı anlatmazsam yine yapamayanlardan olabilirsiniz ! O yüzden burayı daha dikkatli okumanızda fayda var.Şimdi yukarıdaki kodları yapıştırdıktan sonra CTRL+A tuşuna basıp kodunu bulunca klavyenizden "Enter" tuşuna basıktan sonra şöyle bir kod bulmuş olacaksınız: (Resimle göstereyim)
Evet yukarıdaki resimde de görüleceği gibi siz "Enter" tuşuna basarak 2.section yani bölüme gelmiş olacaksınız. Yalnız resimde de görüldüğü gibi section kodunun altında div kodu olmasına dikkat edin. İşte ile div kodunun arasını yine Enter tuşuna basarak açın ve o ara boşluk bölüme şu kodları yapıştırın:
Eveeet bu iş burada biter :) Sizde artık bloglarınızda bu eklentiyi uygulamış bulunuyorsunuz. Kırmızı renkle gösterdiğim yerleri kendinize göre "İleri,Sonraki,Önceki" diye ayarlayabilirsiniz.Ve birde bu eklentiyi yapmayı başardıktan sonra dua ederseniz çok makbul geçer dostlar ;) Eğer sorununuz olursa yorum kısmından belirtebilirsiniz.