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.

<script type="text/javascript" src="BubbleTooltips.js"></script>
<script type="text/javascript">
window.onload=function(){enableTooltips()};
</script>

İş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 :)

<script type="text/javascript" src="BubbleTooltips.js"></script>
<script type="text/javascript">
window.onload=function(){enableTooltips("content")};
</script>

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 :)

.tooltip{
width: 200px; color:#000;
font:lighter 11px/1.3 Arial,sans-serif;
text-decoration:none;text-align:center}

.tooltip span.top{padding: 30px 8px 0;
    background: url(bt.gif) no-repeat top}

.tooltip b.bottom{padding:3px 8px 15px;color: #548912;
    background: url(bt.gif) no-repeat bottom}

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″]