Blogger Animasyonlu CSS dikey menu

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,css menu

<style>

/* Menü Konteynırı */

.vertical-menu-box {

  width: 100%;

  max-width: 300px; /* Genişliği blog yan sütununa göre ayarlar */

  background: #fff;

  border-radius: 12px;

  overflow: hidden;

  box-shadow: 0 4px 15px rgba(0,0,0,0.1);

  font-family: 'Segoe UI', sans-serif;

}

/* Menü Listesi */

.vertical-menu-box ul {

  list-style: none;

  margin: 0;

  padding: 0;

}

.vertical-menu-box ul li {

  border-bottom: 1px solid #f0f0f0;

  transition: all 0.3s ease;

  position: relative;

}

/* Link Yapısı */

.vertical-menu-box ul li a {

  display: block;

  padding: 15px 20px;

  color: #555;

  text-decoration: none;

  font-weight: 600;

  font-size: 15px;

  transition: all 0.3s ease;

  border-left: 5px solid transparent; /* Renk şeridi için */

}

/* Her Eleman İçin Farklı Sol Renk Şeridi ve Hover Efekti */

.vertical-menu-box ul li:nth-child(1) a:hover { border-left-color: #FF5722; color: #FF5722; background: #FFF5F2; padding-left: 30px; }

.vertical-menu-box ul li:nth-child(2) a:hover { border-left-color: #E91E63; color: #E91E63; background: #FDF2F5; padding-left: 30px; }

.vertical-menu-box ul li:nth-child(3) a:hover { border-left-color: #9C27B0; color: #9C27B0; background: #F9F2FA; padding-left: 30px; }

.vertical-menu-box ul li:nth-child(4) a:hover { border-left-color: #673AB7; color: #673AB7; background: #F6F2FB; padding-left: 30px; }

.vertical-menu-box ul li:nth-child(5) a:hover { border-left-color: #3F51B5; color: #3F51B5; background: #F2F4FB; padding-left: 30px; }

.vertical-menu-box ul li:nth-child(6) a:hover { border-left-color: #2196F3; color: #2196F3; background: #F2F9FF; padding-left: 30px; }

.vertical-menu-box ul li:nth-child(7) a:hover { border-left-color: #00BCD4; color: #00BCD4; background: #F0FDFF; padding-left: 30px; }

.vertical-menu-box ul li:nth-child(8) a:hover { border-left-color: #009688; color: #009688; background: #F0FAF9; padding-left: 30px; }

.vertical-menu-box ul li:nth-child(9) a:hover { border-left-color: #4CAF50; color: #4CAF50; background: #F2FAF2; padding-left: 30px; }

.vertical-menu-box ul li:nth-child(10) a:hover { border-left-color: #FFC107; color: #FFC107; background: #FFFBF0; padding-left: 30px; }

/* Son elemanın çizgisini kaldır */

.vertical-menu-box ul li:last-child {

  border-bottom: none;

}

/* Mobil için tam genişlik */

@media screen and (max-width: 480px) {

  .vertical-menu-box {

    max-width: 100%;

  }

}

</style>

<div class="vertical-menu-box">

  <ul>

    <li><a href="#">Kategori 1</a></li>

    <li><a href="#">Kategori 2</a></li>

    <li><a href="#">Kategori 3</a></li>

    <li><a href="#">Kategori 4</a></li>

    <li><a href="#">Kategori 5</a></li>

    <li><a href="#">Kategori 6</a></li>

    <li><a href="#">Kategori 7</a></li>

    <li><a href="#">Kategori 8</a></li>

    <li><a href="#">Kategori 9</a></li>

    <li><a href="#">Kategori 10</a></li>

  </ul>

</div>

Animasyonlu Geçiş: Mouse ile üzerine geldiğinde yazı hafifçe sağa kayar (padding-left: 30px), bu da kullanıcıya etkileşim hissi verir.

Renk Kodlaması: Her menü öğesi kendine has bir renge sahip. Bu, sitene hem canlılık katar hem de kategorilerin ayrışmasını sağlar.

Temiz Görünüm: Arka plan beyaz, gölgelendirme (shadow) ise derinlik katıyor. Blogger'ın genellikle kalabalık olan yan sütununda sade ve şık duracaktır.

Responsive: Mobilde ekranı tam kaplayacak şekilde (max-width: 100%) esner.