28 Mart 2017: Salı
Gölge

Mootools ile Değişik Bir Atraksiyon Yapımı

Bu yazı 3 sene [3 seneden daha eski de olabilir] veya daha önce yayınlanmış olduğundan; görülen linklerde, resimlerde veya kodlarda hata olması çok olası. Herhangi bir hata ile karşılaşmanız durumunda bana buradan bildirebilirsiniz. Anlayışınız için teşekkür eder, keyifli okumalar dileriz :) Enes İLHAN
Blogger İpuçları 25 Mart 2010 9 4.160  
Bu Kişisel Blog'da 551 kategori'de yazıya yazılmış adet değerli yorumlarınız bulunmaktadır..

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…

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

    Enes ILHAN

    Herkese Merhabalar, ben Enes İLHAN. Gaziantep'te doğdum, Adana'da Büro Yönetimi ve Yönetici Asistanlığı bölümünü okudum ve 2012'de mezun oldum. Askerliğimi uzun dönem olarak, { acemiliği Ankara/Mamak'ta , usta birliğini ise Hatay/İskenderun'da } yapıp bitirmiş bulunmaktayım. Şimdi ise hayata atılmanın çabası içerisine girmiş bulunmakta olup iş bulma derdindeyim.

    9 Yorum Yapılmış

    • Mahsun ÖNDER

      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.

    • İsmail Durmaz

      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

      @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

      @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.

    • Enes İLHAN

      @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.

    Bir Cevap Yazın

    E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir