Blogger Soft-3D (Neumorphic) Renkli Dikey Menü

Yazı Boyutu Ayarla büyüt (A+) (A-) küçült

Özellikle modern web arayüzlerinde sıkça gördüğümüz "Neumorphism" (Yeni Morfizm) ve "Glassmorphism" (Cam Efekti) karışımı, oldukça yumuşak ve derinlik hissi veren bir model. Bu menü, diğerlerinden farklı olarak kutu içinde kutu gibi görünmek yerine, blog sayfanızın zemininden yükseliyormuş gibi (3D etkisi) bir izlenim bırakır. blogger, dikey, menu

İçe Çökme (Inset) Efekti: Linke tıkladığında veya üzerine geldiğinde, fiziksel bir düğmeye basıyormuşsun gibi butonun "içe çöktüğü" hissini verir (box-shadow: inset).

Soft Renk Geçişleri: Renkler sadece sol tarafta ince bir şerit olarak başlar, böylece gözü yormaz ama şık bir rehberlik sağlar.

Temiz ve Ferah: Arka plan rengi (#f0f2f5) modern web sitelerinde (Facebook, LinkedIn vb.) sıkça kullanılan dinlendirici bir ton seçildi.

Blogger Uyumu: modern-soft-menu ID'si ile izole edildiği için temanızdaki diğer CSS kodlarıyla çakışmaz.

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.

<style>
/* Menü Arka Planı ve Konteynır */
#modern-soft-menu {
width: 100%;
max-width: 300px;
background: #f0f2f5; /* Açık gri/mavi tonlu zemin */
padding: 20px;
border-radius: 20px;
box-sizing: border-box;
}

#modern-soft-menu ul {
list-style: none;
margin: 0;
padding: 0;
}

#modern-soft-menu ul li {
margin-bottom: 15px;
}

/* Linklerin Genel Tasarımı */
#modern-soft-menu ul li a {
display: block;
padding: 14px 20px;
color: #666;
text-decoration: none;
font-family: 'Segoe UI', Roboto, sans-serif;
font-weight: 600;
font-size: 14px;
border-radius: 12px;
background: #f0f2f5;
/* Yumuşak Gölgeler - 3D Etkisi */
box-shadow: 6px 6px 12px #d1d9e6,
-6px -6px 12px #ffffff;
transition: all 0.3s ease-in-out;
position: relative;
overflow: hidden;
}

/* Üzerine Gelince İçeri Çökme Efekti */
#modern-soft-menu ul li a:hover {
box-shadow: inset 4px 4px 8px #d1d9e6,
inset -4px -4px 8px #ffffff;
color: #333;
transform: translateY(2px);
}

/* Sol Taraftaki Renkli Çizgi (Her öğe için farklı) */
#modern-soft-menu ul li a::before {
content: "";
position: absolute;
left: 0;
top: 15%;
height: 70%;
width: 4px;
border-radius: 0 5px 5px 0;
transition: all 0.3s;
}

/* Renk Atamaları */
#modern-soft-menu li:nth-child(1) a::before { background: #FF5252; }
#modern-soft-menu li:nth-child(2) a::before { background: #FF4081; }
#modern-soft-menu li:nth-child(3) a::before { background: #E040FB; }
#modern-soft-menu li:nth-child(4) a::before { background: #7C4DFF; }
#modern-soft-menu li:nth-child(5) a::before { background: #536DFE; }
#modern-soft-menu li:nth-child(6) a::before { background: #448AFF; }
#modern-soft-menu li:nth-child(7) a::before { background: #40C4FF; }
#modern-soft-menu li:nth-child(8) a::before { background: #18FFFF; }
#modern-soft-menu li:nth-child(9) a::before { background: #64FFDA; }
#modern-soft-menu li:nth-child(10) a::before { background: #69F0AE; }

/* Hover Durumunda Çizginin Genişlemesi */
#modern-soft-menu li a:hover::before {
width: 8px;
}

@media screen and (max-width: 480px) {
#modern-soft-menu { max-width: 100%; }
}
</style>

<div id="modern-soft-menu">
<ul>
<li><a href="#">Masaüstü</a></li>
<li><a href="#">Dizüstü</a></li>
<li><a href="#">Donanım</a></li>
<li><a href="#">Yazılım</a></li>
<li><a href="#">İnternet</a></li>
<li><a href="#">Mobil Dünya</a></li>
<li><a href="#">Oyun Haberleri</a></li>
<li><a href="#">E-Spor</a></li>
<li><a href="#">Sosyal Medya</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</div>