Mootools ile Değişik Bir Atraksiyon Yapımı
Daha önce şuradaki yazımda Blogger için rozet eklentisinin nasıl yapılacağını anlatmıştım. Bu yazımda ise Mootools yöntemi ile değişik bir atraksiyon yapmayı anlatacağım. Ama öncelikle bu eklentinin nasıl oluştuğuna bakalım:
Eklentinin Hikayesi: Dmoz dizininde gezerken çeşitli kategorilerdeki bloglara göz attım. Onlardan bir tanesi olan Burak İlem adlı sitede değişik bir olay farkettim. Sitenin header kısmındaki lamba sağa sola çekilince güzel bir eklenti oluşturulmuş :) Tabi ben bunu sonradan farkettim. Düşündüm sonra bunu Blogger'a uygulayabilir miyiz diye. Biraz uğraş verdikten sonra yapılmasının mümkün olduğunu gördüm ve bende uygulamaya karar verdim. Sizlerde farkedemediniz herhalde. Yukarıdaki "2" rozetini sağa sola götürün bakalım :)
Neyse ben yine her şeyi kendi kafama göre eklentileri değişik bir şekilde uygulamaya devam ediyorum :-) Fakat bu anlattığım olayın orijinali bu sitede. Girin, bakın estetik bir şey olduğunu sizlerde anlayacaksınız. Ben o lamba yerine rozetimi sağa sola oynatmaya karar verdim. Sizler değişik resimlerle güzel bir şeyler çıkartabilirsiniz. Daha fazla sözü uzatmadan bu eklentinin Blogger'a nasıl uygulanacağını anlatayım:
Öncelikle bu eklentiyi yapmak için Blogger hesabımıza giriş yapıp "HTML'yi Düzenle" kısmına girmeliyiz. ve "Widget Şablonlarını Genişlet" tikini aktif hale getirmeliyiz. Daha sonra ilk <head> kodundan sonra şu kodları ekleyelim:
<script src='http://www.fileden.com/files/2008/6/21/1970078//motools.txt' type='text/javascript'/>
<script src='http://www.fileden.com/files/2008/6/21/1970078//imaj.txt' type='text/javascript'/>
Bu kodları ekledikten sonra birde CSS kodlarımız var. Şimdi vereceğim koduda </b:skin> kodundan önce yapıştıralım:
#veioza {
cursor:e-resize;
position: absolute;
top: -2px;
left: -3px;
width: 70px;
height: 70px;
background: url('http://i40.tinypic.com/b7js7a.png') no-repeat top left;
}Yukarıdaki kırmızı renkli resim adresini kendi resim adresiyle değiştirmeyi unutmayın. Ayrıca yukarıdaki koddaki:
- top: Resmin yukarı-aşağı hizalamasını yapar.
- left: Resmin sola doğru çekmenize yarar.
- widht: Resmin genişliğin,
- height: Resmin yüksekliğini ayarlamamızı sağlar.
Son olarak aşağıda resimle gösterdiğim yere gadget ekle diyeceksiniz ve orayada şu kısa kodu yazdıktan sonra bu işi halletmiş olacaksınız.İşte o resim ve kısa kod satırıda şöyle:
Resim:
Kod:
<div id='veioza'/></div>