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.