CSS3 Hover Efektli Menü

 
     Blogger Menülerine yeni bir tanesini daha ekliyoruz.Hover efektli CSS3 menü beğeneceğinizden eminim.Çünkü her temaya uyum sağlayan ve her menü başlığına ait bir icon içeren bu menü gayet hoş görünüyor.Menü başlıklarına ait iconları ve renkleri değiştirmekte mümkün.

    CSS3 Hover Efektli Menü Kurulumu:

1. Adım

1. Blogger hesabınıza giriş yapın.
2. Kumanda paneli / Yerlelim / HTML Düzenle yolunu izleyin.
3. Şablon yeteğinizi almayı unutmayın.
4. CTRL+F tuşları alttaki kodu aradın bulun.

]]></b:skin>
5. Hemen üst kısmına altta ki kodları ekleyin ve şablonu kaydedip çıkın.
/* Blogger CSS3 Hover Efektli Sevimli Menü bloggerturkey.com */ #btrix-nav {margin: 100px auto;list-style: none;width: 632px;height: 87px;overflow-y: hidden;} <br /> #btrix-nav li {float: left;} <br /> #btrix-nav li a {display: block;color: white;width: 120px;height: 61px;margin-top: 24px;text-decoration: none;text-align: center;border-top: 1px solid #bbb;border-bottom: 1px solid #555;} <br /> #btrix-nav li a span.aname {font: bold 17px/61px "Arial";color: #fff;text-transform: uppercase;cursor: pointer;position: relative;top: 0;transition: top .5s ease;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);} <br /> #btrix-nav li a img {position: relative;top: 0;transition: top .5s ease;} <br /> #btrix-nav li a:hover {cursor: pointer;} <br /> #btrix-nav li a:hover img {top: -85px;} <br /> #btrix-nav li a:hover .aname {top: 85px;} <br /> #btrix-nav li:nth-child(1) a {background: #3eb006;border-radius: 5px 0 0 5px;border-left: 1px solid #bbb;} <br /> #btrix-nav li:nth-child(2) a {background: #9bc704;} <br /> #btrix-nav li:nth-child(3) a {background: #0dc3ff;} <br /> #btrix-nav li:nth-child(4) a {background: #51a2ec;} <br /> #btrix-nav li:nth-child(5) a {background: #6e3cab;border-radius: 0 5px 5px 0;border-right: 1px solid #555;}

2. Adım
1. Kumanda panelinden Yerleşim / Gadget Ekle / HTML/Javascript yolunu izleyin
2. Açılan gadget içerisine aşağıdaki kodları ekleyin
3. Blog ana sayfanızın neresinde görünmesini istiyorsanız Gadgeti oraya sürükleyin.
4. Kod içerisinde ki Menü başlıklarını değiştirirseniz iconlarıda değiştirmek zorundasınız.
5. Kod içerisinde ki # simgesi yerine menü başlığına ait linkleri ekleyin.

<div id="btrix-nav"> <br /> <li> <a href="#"><span class="aname">Ana Sayfa</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHmT-Ruh7QMdPyRGJ5jnRykkMW90ocxkY2vHnC3ignRSy4i_WjzbtkL521utfYpZhcTwCOKQNGNis7uxBQeZEgGWRz090Q5qDq9kS_YWXSxBR3M6BuEF2Qzd5f-6EzZMv1IuXj5IXNk5I/s1600/btrix-home.png" /> </a> </li> <br /> <br /> <li> <a href="#"> <span class="aname">İndir</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQeWVea7N4aEN9ks8mH5m1vS0GItHpPSeH80RKl6qShtuTD7PgEoIXs0LIoP39D8dqE184Af0Km8LKtIOOryoxTak0VSTWSWOr7FoYl0GFu9D2aC1bDpK-UT8KXM2nSofyKRCi6Sf_SbM/s1600/btrix-download.png" /> </a> </li> <br /> <br /> <li> <a href="#"> <span class="aname"> Blogger</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRTAQYks8eA6IbI1BwUptHHFwuuD7ryMFd_GQeuM-1HMlx6a8g-zJKMYKaSb0Fmnvw27wdI_e7IIiIGhI-6YN2YfcbC7T9eu5v1OA8u29v6-A2bUvflabiIwWdY-zZOzh8rJiuryOjE_8/s1600/ads%C4%B1z.PNG" /> </a> </li> <br /> <br /> <li> <a href="#"> <span class="aname"> Html Kod</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCruEoP3C9CuvTrSciYDgCKnkwHHHWwz3Id2XJQTg5WvAOWFdrBB1J3eKC3GSHxIFR6L8t1i49T-V22lzbZ-61M_ss1dvupp6nhTUoGjqO23UHDUw8AcD04aNbSwuvpfEQjJ8a2CqeJys/s1600/Btrix-html.png" /> </a> </li> <br /> <br /> <li> <a href="#"> <span class="aname">İletişim</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMyvLaXEDG4WNhk2Rz-6z41EeKx-MD21HbxRgZNR8jHSdHd3A82XVWjjJtQmOe4CIpi-G3Y6XD_P2p3lXXfd9hW61Q-qvJG7uTUsZDjbtyUEoo-8JUVWUL6JwZTMYgXlcYLP-ScuuPJSk/s1600/btrix-contact.png" /> </a> </li> <br /> </div>

CSS3 Hover Efektli Menü Demo Görümünü altta ki kod ön izleme bölümünde görebilirsiniz.

Bizi Takip Edin...
Pinterest>>Facebook>>Twitter
 © by bilgicafem61
Aşağıdan Yorum ve Sorularınızı Bırakın...