Blogger fütüristik Cam Efektli ve Parlayan Dikey Menü
Blogger kontrol panelinizdeyken sırasıyla " Düzen >> Gadget ekle " tıklıyoruz. Açılan mini pencereden " HTML/JavaScript ekle " ye tıklıyoruz. Yine açılan pencereye aşağıdaki kodları ekliyoruz. blogger, widget, menu
<style>/* Menü Ana Gövde */#glow-vertical-menu {width: 100%;max-width: 280px;background: #1a1a1a; /* Koyu modern arka plan */padding: 15px;border-radius: 15px;box-sizing: border-box;}/* Liste Yapısı */#glow-vertical-menu ul {list-style: none;margin: 0;padding: 0;}#glow-vertical-menu ul li {margin-bottom: 10px;}/* Linklerin Genel Stili */#glow-vertical-menu ul li a {display: block;padding: 12px 15px;color: #ccc;text-decoration: none;font-family: 'Segoe UI', sans-serif;font-weight: 500;border-radius: 8px;background: rgba(255, 255, 255, 0.05); /* Hafif şeffaf yüzey */transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);border: 1px solid rgba(255, 255, 255, 0.1);}/* Renkli Parlama Efektleri */#glow-vertical-menu li:nth-child(1) a:hover { border-color: #00d2ff; color: #00d2ff; box-shadow: 0 0 15px rgba(0, 210, 255, 0.4); transform: scale(1.05); }#glow-vertical-menu li:nth-child(2) a:hover { border-color: #ff4b2b; color: #ff4b2b; box-shadow: 0 0 15px rgba(255, 75, 43, 0.4); transform: scale(1.05); }#glow-vertical-menu li:nth-child(3) a:hover { border-color: #a8ff78; color: #a8ff78; box-shadow: 0 0 15px rgba(168, 255, 120, 0.4); transform: scale(1.05); }#glow-vertical-menu li:nth-child(4) a:hover { border-color: #fdbb2d; color: #fdbb2d; box-shadow: 0 0 15px rgba(253, 187, 45, 0.4); transform: scale(1.05); }#glow-vertical-menu li:nth-child(5) a:hover { border-color: #b06ab3; color: #b06ab3; box-shadow: 0 0 15px rgba(176, 106, 179, 0.4); transform: scale(1.05); }#glow-vertical-menu li:nth-child(6) a:hover { border-color: #12c2e9; color: #12c2e9; box-shadow: 0 0 15px rgba(18, 194, 233, 0.4); transform: scale(1.05); }#glow-vertical-menu li:nth-child(7) a:hover { border-color: #f64f59; color: #f64f59; box-shadow: 0 0 15px rgba(246, 79, 89, 0.4); transform: scale(1.05); }#glow-vertical-menu li:nth-child(8) a:hover { border-color: #43cea2; color: #43cea2; box-shadow: 0 0 15px rgba(67, 206, 162, 0.4); transform: scale(1.05); }#glow-vertical-menu li:nth-child(9) a:hover { border-color: #8360c3; color: #8360c3; box-shadow: 0 0 15px rgba(131, 96, 195, 0.4); transform: scale(1.05); }#glow-vertical-menu li:nth-child(10) a:hover { border-color: #ff9a9e; color: #ff9a9e; box-shadow: 0 0 15px rgba(255, 154, 158, 0.4); transform: scale(1.05); }/* Mobil Uyum */@media screen and (max-width: 480px) {#glow-vertical-menu { max-width: 100%; }}</style><div id="glow-vertical-menu"><ul><li><a href="#">Keşfet</a></li><li><a href="#">Popüler Yazılar</a></li><li><a href="#">Yeni İçerikler</a></li><li><a href="#">Video Rehberler</a></li><li><a href="#">Oyun İncelemeleri</a></li><li><a href="#">Donanım Testleri</a></li><li><a href="#">Yazılım Arşivi</a></li><li><a href="#">Grafik Tasarım</a></li><li><a href="#">İndirimler</a></li><li><a href="#">Destek / İletişim</a></li></ul></div>
Dinamik Tepki: cubic-bezier geçiş efekti sayesinde menü öğeleri üzerine geldiğinde "zıplama" hissi verir (daha organik bir hareket).
Glow (Parlama) Efekti: Karanlık veya koyu temalı bloglarda (Night Mode gibi) harika durur. Her linkin kendine ait bir neon ışığı vardır.
Modern Katman: Arka plandaki hafif şeffaf beyazlık (rgba), menünün blogun ana arka planından ayrılmasını sağlar.
Kullanılabilirlik: Linkler arasındaki boşluklar (margin-bottom) sayesinde mobil kullanıcılar yanlışlıkla başka linke tıklamaz.
Kaydol:
Kayıt Yorumları (Atom)
0 Yorum:
Yorum Gönder