Enes İLHAN\ Mootools ile Değişik Bir Atraksiyon Yapımı

Blogger İpuçları 9 yorum 4.357 25 Mart 2010

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 HikayesiDmoz 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:resim

Kod:

<div id='veioza'/></div>

     Herhangi bir sorunda elimden geldiğince yardımcı olmak için ben buradayım. Sizlere kolay gelsin…


    Diyarbakır escort bayan


    Konya escort bayan


    Malatya escort bayan


    Diyarbakır escort bayan


    Bursa escort bayan


    Eskişehir escort bayan


    Tekirdağ escort bayan

    Bu yazıdan önce yazmış olduğum "Blogger Tarih Sayacı Eklentisi" başlıklı yazımı da okumanızı tavsiye ederim.

    Yorumlar ;

    Mahsun ÖNDER
    25 Mart 2010 - 18:02:40

    Burak İlem kişisinin sitesinde müthiş duruyo. Seninki de iyi ama o bi başka hava katmış :P. Anlatımın için teşekkürler. Arşivime ekliyorum. İleride lazım olacakmış gibi geliyor :). Paylaşımın için teşekkürler Enes.

    Sir.Monk3y
    27 Mart 2010 - 11:04:39

    Yazılarınların hepsini yapmama rağmen olmadı. Neden?

    İsmail Durmaz
    27 Mart 2010 - 11:11:09

    Evet güzel bir atraksiyondur:),Yanlış hatırlamıyorsam 'Turkuaz Design' adıyla daha önce blogunda tanıttığın temanın da böyle bir atraksiyonu vardı:)Hem o yerinde bile durmuyordu:)))

    Enes İLHAN
    27 Mart 2010 - 15:46:59

    @Sir.Monk3y,
    Doğuhan dikkatin için teşekkürler. Kısa bir kod satırını eklemeyi unutmuşum. Birde şunu anladım burada anlattıklarımı bir tek sen uyguluyorsun herhalde 🙂

    Sir.Monk3y
    28 Mart 2010 - 00:06:09

    @Enes İLHAN
    Estağfurullah abi, ne demek. Eminim ki uygulayanlar vardır. Ben zaten bu kodları kullanarak yapamayınca Burak beyin sitesine girip kodları tek tek uyarladım kendi blogum'a ama sonra benim temama yakışmayınca kaldırdım.

    Eline sağlık.

    Anonymous
    7 Nisan 2010 - 17:51:45

    Kendi Blogumda Denemdim Gerçekten Güzel Durdu Eline Sağlık Teşekkürler

    Anonymous
    15 Nisan 2010 - 12:39:40

    wordpress te nasıl yapabiliriz dostum bunu bi fikrin varmı acaba

    Vedat
    17 Nisan 2010 - 08:19:15

    evet wp ye nasıl uyarlayabiliriz :S biraz denedimde temada kaymalar oldu 🙂

    Enes İLHAN
    19 Nisan 2010 - 11:46:00

    @Adsız ve Vedat;
    İnanın wordpress'e nasıl yapılacağı hakkında bir fikrim yok. Ben bu eklentiyi zaten wordpress'den blogger'a çevirmeyi başardım fakat wordpress'de nasıl yapılır gerçekten fikrim yok. Orijinal sitenin sahibi ile bir iletişime geçeyim belki nasıl yapıldığını söyler. İlginiz için ayarıca sağolun.