Yeni, yine yeniden...Blogger şablonumuza burada genel bir bakış attıktan sonra size söz verdiğim gibi script.aculo.us JavaScript kütüphanesini kullanarak blogumuza bazı efektler katacağız. Bu güzel kütüphanenin sadece efekt verme işine yaradığını sanmayın. Başka ne işlere yaradığını görmek isterseniz buradaki demolara bakmanız yeterli.
script.aculo.us kütüphanesi sayesinde burada gösterilen efektleri kullanabilirsiniz.
Dersimize başlamadan önce rutin uyarılarımı mutlaka okuyun.
Uyarı: Her zamanki rutin ve yerinde bir uyarı olarak; Blogger şablonunda (illa Blogger olmak zorunda değil, ancak benim verdiğim örnek kodlar Blogger'a aittir) yapacağınız herhangi bir değişikliğin yanlış olması durumunda zarar görmemek için şablonuzun mutlaka bir yedeğini alın. Şablonuzun yedeğini alırken kodları kopyala-yapıştır (en çok yapılan yanlışlardan biri) yaparak değil, sayfada bulunan "Tam Şablonu Yükle" bağlantısını kullanarak yedekleyin!
Uyarı 2: Blog şablonunuz varsayılan olarak Widget Şablonlarını göstermez. Bu nedenle kodlarla uğraşmaya başlamadan önce lütfen "Widget Şablonlarını genişlet" kutucuğunu işaretleyin.
Uyarı 2: Blog şablonunuz varsayılan olarak Widget Şablonlarını göstermez. Bu nedenle kodlarla uğraşmaya başlamadan önce lütfen "Widget Şablonlarını genişlet" kutucuğunu işaretleyin.
Şimdi çalışmamıza başlayalım.
İlk olarak Prototype kütüphanemizi (script.aculo.us bu ana kütüphaneye ihtiyaç duyuyor) buradan script.aculo.us kütüphanesini ise buradan indirip bir dizine kaydettikten sonra bu dosyaları şablonumuzdan çağırıp içe aktarmalıyız. Bu dosyaları Google hesabımız olduğu için GooglePages'te bize ait olan dizine kaydedebilirsiniz. Şimdi dosyaları kaydettikte sonra şablonumuzdan çağırmak için:
<script src='http://kullanıcıadınız.googlepages.com/prototype.js' type='text/javascript'/>
<script src='http://kullanıcıadınız.googlepages.com/scriptaculous.js?load=effects' type='text/javascript'/>Yukarıdaki kodu şablonuzda <head> etiketinden hemen sonra koyun. Burada farkettiyseniz kırmızı ile yazdığımız sorgu sayesinde script.aculo.us kütüphanesinden sadece efekt vermek için gerekli kısmı çağırdık. Yazımın başında bu kütüphanenin sadece bir efekt verme kütüphanesi olmadığını belirtmiştim. Böyle yaparak gereksiz önbelleğin önüne geçmiş olduk.
Bu aşamadan sonra sıra neye nasıl bir efekt vermek istediğinize kalmış. Ben yaptığım örneklerde blogun sidebar kısmında bulunan Etiketler sayfa ögesini açılır-kapanır yapmayı ve blogun footer (yazı çok uzun olacağından bunu başka bir yazıda anlatacağım) kısmını açılır-kapanır yapmayı göstereceğim. Mantığını anladıktan sonra siz istediğiniz yere uygulayın ;-)
Bilgi: Örnekleri canlı kanlı görmek için deneme bloguma bakabilirsiniz. Deneme blogunda sayfada sabit bir şekilde bulunan künye (footer'un bulunduğu yer) kısmında "Bilgi alanını genişlet/daralt" bağlantısına tıkladığınızda yarı saydam olan künye yukarı doğru açılıp diğer bilgiler gösteriliyor. Bunu dediğim gibi yazı çok uzun olup karışmasın diye başka bir yazımda anlatacağım ;-)
Örnek: Etiketleri Açılır-kapanır Yapma
Örneği açıklamaya başlamadan önce ne yapmak istediğimiz ve neler yapmamız gerektiğini bir açıklığa kavuşturalım.
- Yapmak istediğimiz: Etiketler başlığının açılır-kapanır olması.
- Yapmamız gerekenler: Kodlarımız arasında etiketler sayfa ögesinin bulunduğu yeri bulup, başlığa onclick fonksiyonu ekleyerek script.aculo.us kütüphanesinden efekt çağırmak.
Şablonunuzda b:widget id='Label1' ibaresini arattıktan sonra aşağıdaki kodları bulmalısınız.
<b:widget id='Label1' locked='false' title='Etiketler' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content' id='etiketler'>Yukarıdaki koda baktığımızda sizin şablonunuzda verdiğiniz isme bağlı olarak title değeri değişecektir. <h2> etiketine onclick fonsiyonu ile efekti yüklemek için koyu bölgeyi aşağıdaki kod ile değiştirin.
<h2 class='acilir-kapanir' onclick='new Effect.toggle("etiketler", "blind");'><data:title/></h2>Şimdi bu son eklediğimiz kodu parça parça inceleyelim:
Kırmızı renk ile belirttiğim class özniteliği efektin çalışması için gerekli olmasa da fare ile üzerine gelindiğinde tıklanabildiği anlaşılsın diye CSS'te bir tanım yaparak dikkat çekmeyi sağladık :-D CSS'te kendisine yaptığımız tanımlama:
.acilir-kapanir {
cursor: pointer;}.sidebar h2 {
stil tanımlama değerleri}Gelelim h2 etiketi içerisindeki mavi renk ile belirttiğim onclick fonsiyonuna. Fonksiyona bakarsak bizim ondan istediğimiz şey açıkca görünüyor:
h2 etiketi üzerine tıklandığı zaman etiketler (div id) kimliğine sahip ögeyi açılır-kapanır (blind) yap.
İşlem bu kadar. Bundan sonra nerede nasıl bir efekt kullanacağınız size kalmış.
Bir başka derste buluşmak üzere. Büyüklerimin elerinden küçüklerimin de gözlerinden öper, herkese iyi bloglamalar dilerim.(-:
Saygılarımla...
çok teşekkürler gene yararlı bir konu ne diyim :)
YanıtlaSilKullanmak isteyenlere yardımcı olabilecek bir yazı.
YanıtlaSilAma biz web siteleri yapmaya başladığımızda internet bu kadar hızlı değildi. Modem sesi duyarak bağlanırdık nete. Hâlâ eski alışkanlıklarım sürüyor. Bu efektler için 98 kb'lık iki JS dosyası yüklemeye değer mi diye düşünüyorum.
:-D Modem sesi demişken geçende birinin cep telefonunda bu bizim 56K ların sesi melodi olarak vardı. Duyduğumda çok hoşuma gitmişt. Şimdi kaygınızı anlıyorum. Çünkü sırf bir yere efekt vereyim diye kullanmaya sıcak bakmayabilirsiniz. İlk kütüphane prototype'ı zaten bir çok kişi kullanıyor, onlardan biri de benim. Yani kullanmamak elde değil, öyle söyleyeyim :-)
YanıtlaSilİkinci olarak 98kb şu anki hızımız için hiçbirşey. Eğer JavaScripti düzgün kullanırsanız, sözüm ona gerekli gereksiz heryerde kullanmazsanız hiçbir sorun oluşturmuyor. Ben yaklaşık 4 aydır JS'yi özellikle kategoriler bölümümde kullanıyorum ve şimdiye kadar ne hız ne de başka bir sorun yaşamadım. Zaten dediğim gibi JS'siz bir Web düşünemiyorum.
Blogger kullanıcıları için faydalı şeyler.. Bu arada mafimax'In yorum aparatını seviyorum diğer blogger'lerin ki gibi değil.Hemen küçük pencerede gönderilebiliyor. :)
YanıtlaSilBlog okuyucularımın rahat olduğunu ve yazılarımdan birşeyler öğrenebildiğini görebilmek bana kendimi geliştirmek adına gaz veren unsurlardan biri.
YanıtlaSilDüşüncelerini üşenmeden yazan ziyaretçilerime teşekkür ederim. Çünkü blogların gelişmesinde yorumların önemi çok büyük. Bir yazar nasıl algılandığını yorumlar sayesinde anlayabilir...
sayfa altı için olan uygulama yazısı yazıldı mı acaba ?
YanıtlaSil@Shawn Ralf, hayır yazmadım. Ama hatırlattığın iyi oldu.
YanıtlaSilsayın mafiamax yazılarınızı beğenerek okuyorum .. çok faydalı, çok şey öğrendim..
YanıtlaSilyalnız yukarda googlepages kısmına kütüphaneleri ekleyelim dedik.. yalnız eklemeye çalışıyorum .js dosya tipi geçersiz diyerek ekleme yapmıyor.. ne yapmam lazım.. bakmadığım bilmediğim vbişi var mı? teşekkürler..
@Gültekin,
YanıtlaSilSanırım siz Google Pages yerine Google Sites'i kullanıyorsunuz. Google kısa bir süre önce Google Pages'i Google Sites'e aktaracağını ve yeni üye kabul etmeyeceğini duyurmuştu. Konu ile ilgili daha detaylı yazımı okuyabilirsiniz.
Ne yazık ki Google Pages hesabınız önceden açılmamışsa, başka bir barındırma (hosting) servisi kullanmalısınız.