Favorilere Ekleme Butonu Html

Favoriye Ekleme Butonu HTML: Kapsamlı Bir Rehber

Favoriye Ekleme butonu, web sitelerinde sık kullanılan sayfaları veya kaynakları kullanıcıların kolayca erişebilmeleri için kaydetmelerine olanak tanıyan önemli bir özelliktir. Bu buton, kullanıcı deneyimini iyileştirmek ve web sitesinin ziyaretçiler tarafından daha kullanışlı hale getirilmesini sağlamak için kullanılır.

Favoriye Ekleme Butonunun HTML Kodu

Favoriye Ekleme butonunun HTML kodu oldukça basittir ve aşağıdaki gibidir:

html <a href="javascript:void(0);" onclick="addFavorite();">Favoriye Ekle</a>

Bu kodda, href özelliği boş bırakılmıştır. Bunun nedeni, Favoriye Ekleme butonunun herhangi bir sayfaya yönlendirmemesi ve sadece JavaScript fonksiyonunu çalıştırmasıdır. onclick özelliği ise, butona tıklandığında addFavorite() adlı JavaScript fonksiyonunun çalıştırılmasını sağlar.

Favoriye Ekleme Butonunun JavaScript Fonksiyonu

Favoriye Ekleme butonunun JavaScript fonksiyonu, kullanıcının tarayıcısında yerleşik olan window.external.AddFavorite() yöntemini kullanarak sayfayı favorilere ekler. Bu yöntemin kullanımı oldukça basittir ve aşağıdaki gibidir:

javascript function addFavorite() { window.external.AddFavorite(location.href, document.title); }

Bu kodda, location.href değişkeni, kullanıcının şu anda bulunduğu sayfanın URL’sini içerir. document.title değişkeni ise, sayfanın başlığını içerir. Bu iki değişken, window.external.AddFavorite() yöntemine parametre olarak geçirilir ve sayfa favorilere eklenir.

Favoriye Ekleme Butonunun CSS Stili

Favoriye Ekleme butonunun CSS stili, web sitesinin tasarımına göre özelleştirilebilir. Aşağıdaki CSS kodu, butona temel bir stil uygular:

“`css
a.favorite-button {
display: inline-block;
padding: 5px 10px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #fff;
color: #333;
text-decoration: none;
}

a.favorite-button:hover {
background-color: #f5f5f5;
}
“`

Bu kodda, a.favorite-button seçicisi, Favoriye Ekleme butonuna uygulanır. display özelliği, butonun satır içi bir blok öğe olarak görüntülenmesini sağlar. padding özelliği, butonun iç boşluğunu ayarlar. border özelliği, butona bir kenarlık ekler. border-radius özelliği, butonun köşelerini yuvarlatır. background-color özelliği, butonun arka plan rengini ayarlar. color özelliği, butonun yazı rengini ayarlar. text-decoration özelliği, butondaki metnin alt çizgisini kaldırır.

a.favorite-button:hover seçicisi, Favoriye Ekleme butonunun üzerine gelindiğinde uygulanır. background-color özelliği, butonun arka plan rengini değiştirir.

Favoriye Ekleme Butonunun Kullanım Alanları

Favoriye Ekleme butonu, web sitelerinde birçok farklı amaçla kullanılabilir. İşte birkaç örnek:

Sık kullanılan sayfaları kaydetmek: Kullanıcılar, sıklıkla ziyaret ettikleri sayfaları Favoriye Ekleme butonuyla favorilerine ekleyebilirler. Bu sayede, bu sayfalara daha sonra kolayca erişebilirler.
Önemli kaynakları kaydetmek: Kullanıcılar, önemli buldukları kaynakları (örneğin, makaleler, videolar, resimler) Favoriye Ekleme butonuyla favorilerine ekleyebilirler. Bu sayede, bu kaynaklara daha sonra kolayca ulaşabilirler.
Sosyal medyada paylaşmak: Kullanıcılar, beğendikleri web sayfalarını Favoriye Ekleme butonuyla favorilerine ekleyebilirler ve daha sonra bu sayfaları sosyal medyada paylaşabilirler.