Blogger 3D Harika Bir Menü Eklentisi

ads

ads

Blogspot 3D Açılır Menü Eklentisi

Blogger için yapılmış en gösterişli ve kaliteli menülerden bir tanesini paylaşacağım. Renk ayalarını kendime göre yaptığım için bazı kişiler bu renk tonlamalarını beğenmeyebilir.  Renk kodlarında oynama yaparak istediğiniz renklere getirebilirsiniz menüyü.

Daha önceki yazımızda blogger yatay menü paylaşmıştım.

Blogger temaların en önemli aksesuarlarından biri menülerdir.Tasarıma önem veren blog kullanıcıları için gösterişli ve sitenize profesyonellik katacak menü eklentilerini araştırıp sizlere sunuyorum. 

3 Boyutlu Blogger Menü Kurulumu

Şablon > HTML’yi Düzenle yolunu takip ederek şablon bölümünden temanızın kodlarına girin ve Ctrl + F yardımı ile arama kutusuna ]]></b:skin> yazarak bulun. Bulduğunuz ]]></b:skin> üst kısmına gelecek şekilde aşağıdaki kodu ekleyin

/* ibrahimfirat.net 3D Açılır Menü */ .menuHolder {margin:25px 0 100px 0; text-align:center; position:relative; height:40px; z-index:20; background:#bf0000; border-radius:8px; box-shadow:0 15px 10px -8px rgba(0,0,0,0.4); -moz-perspective: 100px; -webkit-perspective: 100px; -o-perspective: 100px; perspective: 100px; } .menuHolder ul.nav li {display:inline-block; display:inline;} .menuHolder ul.nav {padding:0; margin:0; list-style:none; display:inline-block; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } .menuHolder ul.nav li {float:left; display:block; padding:0 4px;} .menuHolder ul.nav > li {-moz-transform-style: preserve-3d;-webkit-transform-style: preserve-3d;} .menuHolder ul.nav li a.top-a {display:block; text-decoration:none; margin-top:4px; float:left; height:36px;} .menuHolder ul.nav li a.top-a b {display:block; padding:0 20px; font:bold 14px/30px arial, sans-serif; color:#ffffff;} .menuHolder ul.nav li:hover a.top-a {background:#679EC9; border-radius:8px 8px 0 0; -moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); } .menuHolder ul.nav div {position:absolute; top:40px; left:4px; background:#679EC9; padding:5px 0 10px 0; border-radius:0 0 15px 15px; box-shadow:0 15px 10px -8px rgba(0,0,0,0.4); -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; -moz-transform-origin: 0px 0px; -moz-transform: rotateX(-90deg); -webkit-transform-origin: 0px 0px; -webkit-transform: rotateX(-90deg); -o-transform-origin: 0px 0px; -o-transform: rotateX(-90deg); transform-origin: 0px 0px; transform: rotateX(-90deg); -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .menuHolder ul.nav div.left {left:auto; right:4px;} .menuHolder ul.nav div ul {padding:10px 0; list-style:none; width:140px; margin:10px 5px 0 5px; float:left; display:inline; text-align:left; background:#ffffff; border-radius:6px; -moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); } .menuHolder ul.nav div ul.colLeft {margin-left:10px;} .menuHolder ul.nav div ul.colRight {margin-right:10px;} .menuHolder ul.nav div ul.colSingle {margin-left:10px; margin-right:10px;} .menuHolder ul.nav div ul li {float:left; border-bottom:1px dotted #191919; margin:0 5px 0 5px; display:inline;} .menuHolder ul.nav div ul li:last-child {border:0;} .menuHolder ul.nav div ul li a {display:block; width:105px; text-decoration:none; font:13px/16px arial, sans-serif; color:#ffaa56; margin:0; padding:4px 0 4px 15px; background:black ;} .menuHolder ul.nav div ul li a:hover {color:#000; background:black ;} .menuHolder ul.nav div.col1 {width:160px;} .menuHolder ul.nav div.col2 {width:310px;} .menuHolder ul.nav div.col3 {width:460px;} .menuHolder ul.nav li:hover div { -moz-transform: rotateX(0deg); -webkit-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } /* ibrahimfirat.net 3D Açılır Menü */

Kodumuzu ekledikten sonra kaydedin ve yerleşim + gadget ekle yolunu takip ederek HMTL JavaScript ekle
seçeneğine aşağıdaki kodu ekleyin..

<!--ibrahimfirat.net 3D Açılır Menü--> <div id='info'> <div class='menuHolder'> <ul class='nav'> <li><a class='top-a' href='http://www.ibrahimfirat.net/2012/10/misafir-yazar-ol.html'><b>Konuk Yazar</b></a></li> <li><a class='top-a' href='#url'><b>GeneL Kategori</b></a> <div class='col3'> <ul class='colLeft'> <li><a href='http://www.ibrahimfirat.net/2012/06/astroloji-burclar-fal-gunluk-burc.html'>Astroloji</a></li> <li><a href='http://www.ibrahimfirat.net/search/label/Astronomi'>Astronomi</a></li> <li><a href='http://www.ibrahimfirat.net/search/label/blogger'>Blogger</a></li> <li><a href='http://www.ibrahimfirat.net/search/label/blogger%20eklentileri'>Blogger Eklenti</a></li> <li><a href='http://www.ibrahimfirat.net/search/label/Blogger%20Temalar%C4%B1'>Blogger Tema</a></li> </ul> <ul class='col'> <li><a href='http://www.ibrahimfirat.net/search/label/Bilim%20Felsefesi'>Bilim Felsefesi</a></li> <li><a href='http://www.ibrahimfirat.net/search/label/Biyografi'>Biyografi</a></li> <li><a href='http://www.ibrahimfirat.net/search/label/E%C4%9Fitim'>Eğitim</a></li> <li><a href='http://www.ibrahimfirat.net/2013/05/egitim-haberleri.html'>Eğitim Haberleri</a></li> <li><a href='http://www.ibrahimfirat.net/search/label/Etkinlikler'>Etkinlikler</a></li> </ul> <ul class='colRight'> <li><a href='http://www.ibrahimfirat.net/search/label/Felsefe'>Felsefe</a></li> <li><a href='http://www.ibrahimfirat.net/search/label/F%C4%B1kra'>Fıkralar</a></li> <li><a href='http://www.ibrahimfirat.net/2012/07/fragman-izle-film-dizi-fragmanlar.html'>Fragman</a></li> <li><a href='http://www.ibrahimfirat.net/search/label/facebook'>Facebook</a></li> <li><a href='xx'>FeedBurner</a></li> </ul> <ul class='colLeft'> <li><a href='http://www.ibrahimfirat.net/search/label/Pedagoji'>Pedagoji</a></li> <li><a href='http://www.ibrahimfirat.net/search/label/Psikoloji'>Psikoloji</a></li> <li><a href='http://www.ibrahimfirat.net/search/label/proxy%20list'>Proxy Listeleri</a></li> <li><a href='http://www.ibrahimfirat.net/search/label/Programlar'>Programlar</a></li> <li><a href='http://www.ibrahimfirat.net/search/label/pc%20teknik?max-results=10'>Pc-Teknik</a></li> </ul> <ul class='col'> <li><a href='http://www.ibrahimfirat.net/p/sohbet_03.html'>Chat/Sohbet</a></li> <li><a href='http://www.ibrahimfirat.net/search/label/Cep%20Telefonu'>Cep Telefonları</a></li> <li><a href='http://www.ibrahimfirat.net/search/label/garip%20olaylar?max-results=10'>Garip Olaylar</a></li> <li><a href='http://www.ibrahimfirat.net/2013/05/islamiyet_2.html'>İslami Konular</a></li> <li><a href='http://www.ibrahimfirat.net/search/label/%C4%B0nsan%20ve%20Ya%C5%9Fam'>İnsan/Yaşam</a></li> </ul> <ul class='colRight'> <li><a href='http://www.ibrahimfirat.net/search/label/wordpress'>WordPress</a></li> <li><a href='http://www.ibrahimfirat.net/search/label/WordPress%20temalar%C4%B1'>Wp Tema</a></li> <li><a href='http://www.ibrahimfirat.net/search/label/WordPress%20Eklentileri'>Wp Eklenti</a></li> <li><a href='http://www.ibrahimfirat.net/search/label/webmaster'>Webmaster</a></li> <li><a href='http://www.ibrahimfirat.net/search/label/seo'>seo</a></li> </ul> <ul class='colLeft'> <li><a href='http://www.ibrahimfirat.net/search/label/Sosyoloji'>Sosyoloji</a></li> <li><a href='http://www.ibrahimfirat.net/'>Tarih</a></li> </ul> <ul class='col'> <li><a href='http://www.ibrahimfirat.net/search/label/teknoloji'>Teknoloji</a></li> <li><a href='http://www.ibrahimfirat.net/'>Zooloji</a></li> </ul> <ul class='colRight'> <li><a href='http://www.ibrahimfirat.net/search/label/Felsefe'>Donanım</a></li> <li><a href='http://www.ibrahimfirat.net/search/label/F%C4%B1kra'>Yazılım</a></li> </ul> </div> </li> <li><a class='top-a' href='#url'><b>Sağlık Kategorisi</b></a> <div class='col2'> <ul class='colLeft'> <li><a href='http://www.ibrahimfirat.net/search/label/Sa%C4%9Fl%C4%B1k'>Sağlık</a></li> <li><a href='http://www.ibrahimfirat.net/search/label/Genel%20Sa%C4%9Fl%C4%B1k'>GeneL Sağlık</a></li> <li><a href='http://www.ibrahimfirat.net/search/label/Erkek%20Sa%C4%9Fl%C4%B1%C4%9F%C4%B1'>Erkek Sağlığı</a></li> </ul> <ul class='colRight'> <li><a href='http://www.ibrahimfirat.net/search/label/Kad%C4%B1n%20Sa%C4%9Fl%C4%B1%C4%9F%C4%B1'>Kadın Sağlığı</a></li> <li><a href='http://www.ibrahimfirat.net/search/label/A%C4%9F%C4%B1z%20ve%20Di%C5%9F%20Sa%C4%9Fl%C4%B1%C4%9F%C4%B1'>Ağız/Diş Sağlığı</a></li> <li><a href='http://www.ibrahimfirat.net/search/label/Beslenme%20ve%20Diyet'>Beslenme/Diyet</a></li> </ul> </div> </li> <li><a class='top-a' href='#url'><b>Film Tanıtım</b></a> <div class='col1'> <ul class='colSingle'> <li><a href='http://www.ibrahimfirat.net/search/label/aksiyon'>Aksiyon</a></li> <li><a href='http://www.ibrahimfirat.net/search/label/animasyon'>Animasyon</a></li> <li><a href='http://www.ibrahimfirat.net/search/label/bilim%20kurgu'>Bilim Kurgu</a></li> <li><a href='xx'>Biyografi</a></li> <li><a href='http://www.ibrahimfirat.net/search/label/dram'>Dram</a></li> <li><a href='xx'>Fantastik</a></li> <li><a href='xx'>Korku</a></li> <li><a href='http://www.ibrahimfirat.net/search/label/gerilim'>Gerilim</a></li> <li><a href='xx'>Psikolojik</a></li> <li><a href='http://www.ibrahimfirat.net/search/label/komedi'>Komedi</a></li> <li><a href='http://www.ibrahimfirat.net/search/label/macera'>Macera</a></li> <li><a href='http://www.ibrahimfirat.net/search/label/romantik'>Romantik</a></li> <li><a href='xx'>Savaş</a></li> <li><a href='http://www.ibrahimfirat.net/search/label/su%C3%A7'>Suç</a></li> <li><a href='http://www.ibrahimfirat.net/search/label/tarih'>Tarih</a></li> <li><a href='http://www.ibrahimfirat.net/search/label/yerli'>Türk</a></li> </ul> </div> </li> <li><a class='top-a' href='http://www.ibrahimfirat.net/search/label/%C4%B0nternet'><b>Internet</b></a></li> </ul> </div> </div> <!--ibrahimfirat.net 3D Açılır Menü-->

ads