« İmlemenin Adabı
Telekom Sağolsun »

Css ile Linklere Simge Eklemek

Öncelikle bu yazı buradaki yazının Türkçeleştirilmiş ve değiştirilmiş halidir. Yazının amacı bir dosyaya e-posta adresine vs link verdiğinizde yanında simge görüntüleyerek kullanıcıya ipucu vermesini sağlamaktır. Üzerinde değişiklik yapmamız gereken tek dosya css dosyamızdır. Kullanacağımız grafikleri kendiniz yaratabilir ya da başka yerlerden edinebilirsiniz. Ama boyutuna ve uyumuna dikkat etmeniz görsel açıdan önemlidir.

Grafikler
PopupPopup olarak açılacak link simgesi
Dış BağlantıYeni pencerede açılacak link simgesi
E-postaE-postalar için link simgesi
PDFPDF dosyaları için link simgesi

Örnek 1- Pdf dosyasına link vermek

PLAIN TEXT
HTML:
  1. <a href="dosyalar/dokuman.pdf">CSS Döküman</a>

Normalde linki böyle veririz ve sonuç da böyle olur:Döküman
Eğer gerekli css kodunu :

PLAIN TEXT
CSS:
  1. a[href $='.pdf'] {
  2.    padding-right: 20px;
  3.    background: transparent url(icon_pdf.gif) no-repeat center right;
  4. }

eklersek bu sefer CSS Döküman yazısının yanında bir pdf simgesi görüntülemiş oluruz. Tabi burda simgenin adresi size bağlı Döküman2

Örnek 2- Popup için link vermek

PLAIN TEXT
HTML:
  1. <a class="popup specialstyle" href="dokuman.htm">CSS Döküman</a>

Normalde popup linki böyle veririz ve sadece link görülür,
eğer gerekli css kodunu :

PLAIN TEXT
CSS:
  1. a[class ~="popup"] {
  2.    padding-right: 20px;
  3.    background: transparent url(icon_popup.gif) no-repeat center right;
  4. }

eklersek bu sefer CSS Döküman yazısının yanında bir simge görüntülemiş oluruz. Döküman3

Örnek 3- Site dışına link vermek

PLAIN TEXT
HTML:
  1. <a href="dokuman.htm" target="_blank">CSS Döküman</a>

Normalde yeni sayfa açılması için linki böyle veririz ve sadece link görülür,
eğer gerekli css kodunu :

PLAIN TEXT
CSS:
  1. a[target ="_blank"] {
  2.    padding-right: 20px;
  3.    background: transparent url(icon_new.gif) no-repeat center right;
  4. }

eklersek bu sefer CSS Döküman yazısının yanında bir simge görüntülemiş oluruz. Tabi burda simgenin adresi size bağlı Döküman4
Örnek 4- E-posta adresine link vermek

PLAIN TEXT
HTML:
  1. <a href="mailto:css@site.com">E-posta Gönder</a>

Normalde e-posta gönderilmesi için gerekli link kodu bu şekildedir ve sadece "E-posta Gönder" yazısı görüntülenir,
eğer gerekli css kodunu :

PLAIN TEXT
CSS:
  1. a[href ^="mailto:"] {
  2.    padding-right: 20px;
  3.    background: transparent url(icon_mail.gif) no-repeat center right;
  4. }

eklersek bu sefer "E-posta Gönder" yazısının yanında bir simge görüntülemiş oluruz. Eposta
Burdaki örnekler çoğaltılabilir, örneğin pdf yerine başka şeyler de kullanılabilir. Yazı ile ilgili herhangi sorun ya da sorunuzu yorum olarak gönderebilirsiniz

EkleBunu Sosyal Paylaşım Butonu

Bu yazı Çarşamba, 18 Temmuz 2007, 21:51 tarihinde Teknoloji kategorisi altında yazılmış, 1,510 kez okunmuş Bu yazıya yapılacak yorumlardan haberdar olmak için RSS 2.0 beslemesini kullanabilirsiniz.

1 Yıldız2 Yıldız3 Yıldız4 Yıldız5 Yıldız (6 oy, ortalama:5)
Loading ... Loading ...

“Css ile Linklere Simge Eklemek” için 5 Yorum

  1. yakuter diyor ki:
    20 Temmuz 2007, 19:06 tarihinde.

    Mükemmel bir makale. Ellerine sağlık Mustafa, iyi oldu bunları öğrendiğim :)

  2. Musty diyor ki:
    20 Temmuz 2007, 19:19 tarihinde.

    Beğendiysen ne mutlu bana :D Artık css de öğreniyorum ya ohh :D php ile csste biraz ilerleyip sonra kısmetse javascript/ajaxe geçmeyi planlıyorum. Bakalım üniversiteden önce bunlar iyi gelir bana umarım :)

  3. Eda Suner diyor ki:
    03 Ağustos 2007, 01:07 tarihinde.

    Mustafa kimse değinmemişti iyi oldu çok sağol ya

  4. Css ile Linklere Simge Eklemek #2 at Mustafa Türksavaş diyor ki:
    21 Şubat 2008, 16:46 tarihinde.

    […] önce css ile linklere simge eklemek konusunda bir makale yazmıştım. Bugün ise bununla tek tek uğraşmadan ve daha geniş bir şekilde yapmamızı sağlayacak bir […]

  5. Artvinli diyor ki:
    03 Mart 2008, 16:11 tarihinde.

    Çok güzel bir makale olmuş tebrikler daha neler acaba css hakkında bilmediklerimiz.

Yorum Yapın