Linklere Balooon!

Hani eskiden vardı balon satan amcalar “Bebelere Baloooon!” diye bağırırdı ya başlık ta öyle geldi akılma 🙂 Aslında anlatacağım Tooltip yapımı ancak Dilimizde baloncuk gibi birşey kullanmak ta iyi gider sanki. Şaka bir yana javascript ile css kullanılarak yapılmış olan tooltip tarzı şeyleri temalarımıza ekleyebilmekteyiz. Tabiiki jQuery ile birlikte de bunların efektli olanları da yapılabilir durumda. Ama ben özelleştirebileceğiniz ve sitenizde istediğiniz yerde kullanabileceğiniz bir çeşitleme yapabilirsiniz. Ben sitemde Beni takip edin bölümünde kullandım. Siz de istediğiniz yer de kullanabilirsiniz. Hadi başlayalım…

Önce bir resim…

Site zaten demo alanı gibi oldu ama bir resim de şuraya ben eklemek istiyorum. Resmin üzerine tıklarsanız büyük halini de görebilirsiniz. Bu resimde görüldüğü üzere RSS simgesi üzerine geldiğinizde Bir başlık ve altında da bir link göreceksiniz. İşte bu script a href=” ile başlayıp devam eden link kodumuza eklediğimiz title ve yazdığınız linki alarak bu baloncuk içine yazıyor. bu bana güzel geldi ve kullanmak ihtiyacım vardı ve kullandım. Sizde kullanın diye buraya ekliyorum. bu kadar lak lak yeter. Hadi başlayalım…

İşte o kod!

Bu kod iki aşamalı oalrak düşünülebilir neden mi. Bir nerede kullanacağınız seçmenize gerek kalmayan kullanım var. Bir de istediğiniz yeri belirleyeceğiniz aşama. Şimdi öncelikle saf kodu ekliyorum buraya. Bu kodu header.php dosyası içine wp_head etiketinden önce ekleyin.

İşte bu kod dışında benim yaptığım gibi özel bir alan için de kullanabileceğiniz kod burda. Burada enable Tooltips alanını özelleştirebilirsiniz. Kod aşağıda 🙂

Yukarıda content yazarak sitemizdeki Content alanında tüm bulunan linkleri tooltip olarak ayarlamış olduk. Burada seçmeniz gereken id alanı div içinde kullandığımız id alanıdır.

Gelelim CSS olayına…

Bu kodu style.css dosyanıza direkt oalrak ekleyin. Gerisini java halleder 🙂

Bu aşamada bir imaj ve bir de java dosyası gerekli. Onu da şu aşağıdaki dosya içinde bulabilirsiniz. İndirdiğiniz dosya tam olarak bu anlattıklarım ve örnekleriyle doludur. Hadi Selametle… Orjinal Yazı!

[download id=”17″]

  • mine

    Merhaba,

    Bu balonu sadece istediğim linklerde nasıl kullanabilirim.

    content id içerisinde bir çok link kullanıyorum, istemediğim linklerdede balon çıkıyor, sadece istediğim class etiketinde gösterme gibi bir şansım yok mu? yardımcı olabilirseniz sevinirim. Şimdiden teşekkürler

    • Selam mine,

      Bu javascript içinde yazılma itibariyle belli bir idye sahip taşıyıcının içindeki a etiketine sahip öğeleri bulup ona uygulama esasına dayalı. Eğer başka bir tooltip (class ve rel usulüne dayalı) kullanmak istersen Bootstrap Tooltip sistemi her link vb için ayrı ayrı eklenebiliyor.

      http://twitter.github.com/bootstrap/javascript.html#tooltips

      Saygılar

WordPress gururla sunar.Theme: Flat by YoArts. WpAdamı Uyarlaması : Serkan Algur