Yeni sekmede açılan bağlantılar nasıl özelleştirilir?

css-newtabWeb sayfanızda kullandığınız dış bağlantıları özelleştirmeniz, kullanıcılarınızı ilgili linke tıkladıklarında yeni bir sekme açılacağına dair uyarmanızı sağlar. Bu tip küçük hatırlatmalar kullanıcı deneyimi seviyenizi arttırır ve takipçilerinizde farkındalık yaratır.

Peki böylesine bir işlemi yaparken sitenizde daha önceleri kullandığınız yüzlerce dış bağlantıyı da tetiklemek, bütün linkleri tek tek düzenlemek zor olmaz mı? Evet, ancak CSS‘in attribute selectorü sayesinde bu işlemi yapmak çocuk oyuncağı.

ÖRNEĞİ GÖRÜNTÜLE


Yeni sekmede açılan linklerin yanına ikon nasıl eklenir?

İlk olarak web sayfanızın her ekranında bulunan bir CSS dosyanızı açın. Daha sonra aşağıdaki kodu bu CSS dosyanızın herhangi bir yerine yapıştırın.

a[target="_blank"]:after,
a[target="new"]:after {
  color:#A4B3C4;
  margin-left:5px;
  font:400 14px Tahoma  !important;
  vertical-align:middle;
  content: '\29C9';
}

Üstteki kod bloğu sayesinde target=”_blank” ve target=”_new” attribute yapısına sahip tüm linklerinizin yanına otomatik olarak yeni sekme ikonu eklenir.



  • Volkan Yıldız

    Yararlı bir makale olmuş paylaşım için teşekkürler. Yalnız demoda ufak bir hata olmuş bağlantılarda “adobewordpress.com” yerine “adobewordperss.com” yazılmış.

    • Dikkatiniz için çok teşekkürler 🙂
      Düzelttim.