renkli teneke » CSS İle Linklerinize Resimli veya Yazılı Açıklama Ekleyin

internet çöplüğünden renkli kırıntılar…

Anasayfa » Web Programlama

CSS İle Linklerinize Resimli veya Yazılı Açıklama Ekleyin

20 Ekim 2008 Görüntülenme: 1.541 4 Yorum Yazar: Ahmet

(Bu yazı 1 oy aldı. Ortalama Değeri: 5,00 oy dan 5)

CSS her zaman dediğim gibi gelecek vaad eden bir web programlama dillerinden birisi. Bende bu dili her geçen gün iyice kavrıyor ve öğreniyorum. Pratik bulduğum bazı bilgileride bu site aracılığı ile sizlerle paylaşıyorum.

Şimdi size kendi yaptığınız web siteleri için linklerinize nasıl açıklama ekleyebileceğiniz konusunda yardımcı olacağım. Dikkatinizi çektiyse genellikle bu şekilde sizlerle paylaştığım uygulamalar ve çalışmalar her defasında kendi oluşturduğunuz çalışmalara entegre edilecek cinsten oluyor. Çünkü web tasarım ve programlama ile ilgilendiğim için bu şekilde sizleri bilgilendiriyorum.

Resimde de gördüğünüz gibi linkimizin üzerinde gelince bir açıklama satırı ekleniyor. Bu açıklama satırınıda istediğiniz şekilde kendinize göre özelleştirebilirsiniz. İstediğiniz gibi resimde ekleyebilir kullanıcılarınızı bilgilendirebilirsiniz. Bu tarz bir açıklama verme şeklini eminim ki birçok arkadaşım severek kullanacaktır.

Şimdi ise bu çalışmanın kaynak bilgileriniz sizlerle paylaşayım. Aşağıdaki CSS kodlarını sayfanızın <head> </head> tagları arasında herhangi bir yere kopyalayın.

PLAIN TEXT

CSS:

<style type="text/css">
* {
font-family:Tahoma;
font-size:11px; }
a:hover {
background:#ffffff;
text-decoration:none;}
a.aciklama span {
display:none;
padding:2px 3px;
margin-left:8px;
width:170px;}
a.aciklama:hover span{
display:inline;
position:absolute;
border:1px solid #cccccc;
background:#ffffff;
color:#6c6c6c;}
</style>

Bu CSS kodlarını kullanma zamanı geldi. Sitemizde bu açıklama satırını nasıl kullanacağız? Aşağıdaki kodlar aracılığı ile sitenize monte edebilir ver kullanmaya başlayabilirsiniz. Gerekli açıklamalar kodlar arasında olduğu için burada pek laf kalabalığı yapmıyorum. (:

PLAIN TEXT

HTML:

Bu bir deneme <a class="aciklama" href="#">Linkidir<span> <img src="http://www.renkliteneke.com/wp-content/themes/arthemia/images/logo.png" alt="" />
Bu alan linkimizin açıklayıcı satırıdır. Bu alana istediğiniz uzunlukla metin girebilir ve resim ekleyebilirsiniz. Bu alanı özelleştirmek isterseniz CSS kodlarını kullanabilirsiniz.</span></a>.

Eğer bu örneği canlı canlı denemek isterseniz sizi buraya alalım. İndirmek istersenizde buradan buyrun. (:

Yazıyı beğendiysen başka yerlerde paylaşabilirsin:

RenkliTeneke.Com blogundaki yeni yazılardan haberdar olmak için RSS Abonesi olabilirsiniz. İsterseniz Twitter'dan ya da FriendFeed'den takip edebilirsiniz. Ya da "Yeni yazılar e-mail adresime gelsin" diyorsanız e-mail abonesi olabilirsiniz.

Merhaba sevgili ziyaretçi. Şuanda renkliteneke.com bloguna " Ahmet" tarafından " 20 Ekim 2008" tarihinde yazılmış olan "CSS İle Linklerinize Resimli veya Yazılı Açıklama Ekleyin" başlıklı bu yazıyı okuyorsun. Bu yazının başka bir yerde yayınlaması yasaktır. Her yazı ayrı bir özen içerisinde hazırlanıyor ve bu emeğin iki tık ile heba edilmesi pek hoşuma gitmez. Bu açıklama ise bilgilenmeniz için yazılmıştır.

4 Yorum »

Murat Elbeye demiş ki:

Tarih: 21 Ekim 2008Saat: 21:49

Ahmetcim yazın çok güzel ellerine sağlık fakat yanlış anlamazsan bir fikrimi dile getirmek istiyorum.
Css bir web programlama dili değildir. Yardımcı bir dildir yani tek başına bir anlam ifade etmez.

Kolay Gelsin

Ahmet (Admin Abi) demiş ki:

Tarih: 21 Ekim 2008Saat: 22:04

Murat sağol (: Haklısın bir tam olarak bir web programlama dili değil ama çok etkili bir yardımcı bir dil (: Teşekkürler.

gNcWebmaster l Emre demiş ki:

Tarih: 31 Ekim 2008Saat: 18:15

Ahmet Gerçekten çok güzel bir yazı olmuş. Eminim bir çok yerde işime yarayacaktır. Çok teşekkürler

Eren demiş ki:

Tarih: 27 Aralık 2008Saat: 18:10

Böyle bir kod arıyordum. Teşekkür ederim.

Yukarıdaki yazı hakkında kendi düşüncelerinizi yazın!

Lütfen yukarıdaki yazı hakkında düşüncelerini paylaş. Senin düşündüklerin bazen bu blogdaki yeni yayınlanacak yazının hangi konuda yazı yazılması gerektiğini belirliyor.