Blogger'ın varsayılan etiket listesi genellikle alt alta ya da yan yana düz metin şeklinde görünür. Bu CSS ve HTML kodlarını uyguladığınızda şu değişiklikler gerçekleşir:
1. Görsel İyileştirme
Kutucuk Tasarımı: Etiketler basit birer kelime olmaktan çıkıp, etrafı çerçeveli veya arka planı renkli butonlar (chip) haline gelir.
Hover Efekti: Fareyle bir etiketin üzerine geldiğinizde rengin değişmesi, gölge eklenmesi veya büyümesi gibi etkileşimli özellikler kazandırılır.
Sayı Gösterimi: Eğer ayarlardan "Etiket başı yayın sayısını göster" seçeneği aktifse, bu sayılar genellikle etiketin yanında şık bir balonun içinde görünür.
2. Kullanıcı Deneyimi (UX)
Okunabilirlik: Karmaşık görünen uzun bir liste yerine, ekranı daha verimli kullanan düzenli bir yapı sunar.
Navigasyon: Ziyaretçilerin blogunuzdaki kategorileri daha hızlı fark etmesini ve tıklamasını sağlar.
Kod Nasıl Kullanılır?
Bağlantıdaki içerik genel olarak iki aşamadan oluşur:
CSS Bölümü: Bu kodlar
]]></b:skin>veya<style>etiketlerinin arasına eklenir. Tasarımın rengini, yazı tipini ve boşluklarını belirler.Widget Düzenleme: Blogger panelinde "Yerleşim" (Layout) kısmından "Etiketler" gadget'ını eklemeniz ve ayarlarını (Bulut görünümü veya Liste görünümü gibi) koda uygun şekilde seçmeniz gerekir.
Özetle: Bu kod, sitenizin sağ veya sol sütununda yer alan kategori listesini "demode" görünümden kurtarıp, modern bir web sitesi havası katmak için kullanılır.
2. CTRL+F tuş kombinasyonu'nu kullanarak sayfada " ]]></b:skin> " aratın ve bu kodun bir kaç satır üstüne aşağıda verilen kodu ekleyin.;
.label-size {
margin:0 2px 6px 0;
padding: 3px;
border: solid 1px #C6C6C6;
border-radius: 6px;
float:left;
text-decoration:none;
font-size:11px;
color:#666;
}
Hiç yorum yok:
Yorum Gönder