AJAX navigasyon menü Blogger platformu için özel olarak tasarlanmıştır.Resimli alt menüler sayesinde daha fazla hit alabilirsiniz.
AJAX menü çoklu alt-menülerden oluşur.Mouse'nizi veya farenizi ana menü üstüne getirdiğinizde resimli alt menüler çıkacaktır.Bu özellik sayesinde sayfa görüntüleme sayınız artabilir.Çünkü resimleri gören ziyaretçileriniz bunları tıklamak isteyecektir.
Bu menüler bütün tarayıcılara uygundur.Sadece belirli bir tarayıcı için tasarlanmamıştır.Bunun için AJAX navigasyon menü ideal bir seçenektir.
Eğer farenizi ana menüye getirirseniz alt-menüler otomatik olarak gözükecektir,ana menüye tıklamanıza gerek yoktur.Böylece navigasyon zamanından tasarruf etmiş olursunuz ve trafiğiniz artmış olur.
Menü parametrelerini veya AJAX menü stilini manuel olarak kendinize göre ayarlayabilirsiniz.
Blogger blogunuza resimli mega menü eklemek için alttaki adımları takip edin:
Adım 1:Blogger hesabınıza giriş yapınız sırasıyla Şablon>HTML'yi düzenle kısımlarına tıklayın.Ve Ctrl+F yardımıyla alttaki kodu bulun:
]]></b:skin>
Adım 2:Yukarıda bulduğunuz tagın veya kodun hemen üstüne alttaki kodu ekleyin:
.megamenu *{margin:0;padding:0;font-family:'PT Sans Narrow'}ul.megamenu{list-style:none;line-height:1;overflow:visible !important}ul.megamenu:after{margin:0;padding:0;content:' ';display:block;height:0px;clear:both}ul.megamenu li{float:left;display:inline;position:relative;text-transform:uppercase}ul.megamenu li a.menu-target:after{content:"";width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:3px solid #fff;font-size:0;line-height:0;bottom:22px;right:5px;position:absolute}ul.megamenu li a{display:block;line-height:50px;padding:0px 20px;text-decoration:none;border-left:1px solid #000;box-shadow:1px 0 0 0 rgba(255, 255, 255, 0.1) inset;color:#d9d9d9;font-size:14px;transition:all 0.3s ease-in-out}ul.megamenu li a:hover{background:#111111;color:#fff}ul.megamenu ul{position:absolute;display:none;top:100%}ul.megamenu li:hover > ul{display:block}ul.megamenu ul li{z-index:72;min-width:149px;float:none;background:#000;text-shadow:none}ul.megamenu ul li a{text-transform:none;font-weight:normal}ul.megamenu ul li a:hover,ul.megamenuid ul li a.hover{background:#E0E0E0;color:#444}ul.megamenu ul ul{display:none;left:100%;top:0}ul.megamenuid li div.megasubmenu{background:#F9F9F9;position:absolute;width:830px;z-index:90;left:0;top:100%;overflow:hidden;min-height:150px;-moz-transform:translate(0,30px);-webkit-transform:translate(0,30px);-o-transform:translate(0,30px);transform:translate(0,30px);transform-origin:50% 0;visibility:hidden;opacity:0;color:#888;box-shadow:0 10px 7px -7px rgba(0,0,0,0.1);transition:all 0.3s ease-in-out}ul.megamenuid li:hover div.megasubmenu{visibility:visible;opacity:1;-moz-transform:translate(0,0);-webkit-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0)}ul.megamenuid ul,ul.megamenuid ul li{display:block !important;border:0 none !important;margin:0 !important;padding:0 !important}ul.megamenuid ul li{background:none !important;float:left !important}ul.megamenuid ul.leftmenulist{position:absolute;width:18%;left:0;top:0;bottom:0;background:#EEEEEE;border-right:1px dashed #e5e5e5 !important}ul.megamenuid ul.leftmenulist a{border-left:none !important;color:#555}ul.megamenuid ul.rightmenulist{position:relative;display:block;width:81%;float:right;margin:0px 0px 0px !important;background:none}ul.megamenuid ul.rightmenulist li{display:block;overflow:hidden;position:relative;min-height:210px;padding:5px 17px 5px 0px !important}ul.megamenuid ul.rightmenulist li .thumb-container{left:0;width:100%;height:100%;position:absolute;overflow:hidden;font-size:0;line-height:0}ul.megamenuid ul.rightmenulist li .thumb-container img{position:relative;top:10px;padding:0;width:100%;height:100%;display:block}ul.megamenuid ul.rightmenulist li a{display:block;border-left:none !important;padding:0px 5px !important;line-height:1.4;color:#777;font-weight:bold;font-size:14px}ul.megamenuid ul.rightmenulist li a:hover{color:#000;background:transparent}ul.megamenuid .loading-icon{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjha_Y-cch_uLVVl6DSjyq2eWX63_9HUvLpKFBJXR4tTsfG8aF2G0mY3HPZ5b08fLu_VzOeZ0O5_D2zyPqoRkBCTRpiMZH0SS3fMymhcPHyKLIrc-WwxAACb3-aq_O3P4Jtqp9E6SN3gig/s1600/wait.gif') no-repeat scroll 0 0 transparent;width:22px;height:22px;position:absolute;top:50%;margin-top:-11px;right:5px}ul.megamenuid .menu-icon{border-bottom:4px solid transparent;border-top:4px solid transparent;border-left:4px solid #777;display:block;height:0;margin-top:-4px;position:absolute;right:11px;top:50%;width:0}#megamenuid{background:rgba(0, 0, 0, 0) -moz-linear-gradient(center top , #3d3d3d, #212121) repeat scroll 0 0;background:-webkit-linear-gradient(top,#3d3d3d,#212121);background-color:#3d3d3d;box-shadow:1px 1px 0 0 rgba(255, 255, 255, 0.1) inset;height:50px;width:100%;position:relative;max-width:1000px;margin:0 auto;padding:0px}#megamenuid h5{font-size:16px;margin-top:70px;text-align:center}#megamenuid h5:before{content:"";position:absolute;top:50px;left:50%;width:5px;height:2px;margin-left:-4px;border-left:2px solid black;border-right:2px solid black}#megamenuid h5:after{content:"";position:absolute;top:55px;left:50%;width:10px;height:5px;margin-left:-7px;border-top:2px solid black;border-left:2px solid black;border-right:2px solid black;border-radius:8px 8px 0px 0px}li.search-box{float:right !important;line-height:35px;margin:7px 10px 0 0}li.search-box .search-field{border:none;padding:3px;background:#3F3F3F;color:#fff;width:135px;font-size:13px}li.search-box .search-field:focus{border:none;outline:none;background:#4C4C4C;color:#fff}li.search-box .search-button{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5W3w1Xy25hrYCgMPtecTDU4fRta3qDzp32ytksdlY-_ltS8kFEHuhz-l6CUtdIIxuom4QmWERemXPijd3biRW88aNWUAmnUNbuv7uYAhGFhvwlJZubQk2i5ovK8VttHESyNB7ATxZMM8/s1600/search.png') no-repeat;border:none;cursor:pointer;padding:5px 10px;transition:all 0.3s ease-in-out}li.search-box .search-button:hover{opacity:0.9}.search-alert{background:#E84C3D url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4gCsadiZQBZz60c2FPFTiev5XJeWvIdgKq7XO3qY4bhWs54N4o2TV6FbDrjdnVkIH3iHcq-B27WWavxYvJ1pglmn-NNuMxmplhcFQ8QVCexX0SwxPTL5Bmn_TH8yDELz69FD3_xe54aU/s1600/search-info.png) no-repeat;background-position:5px;text-transform:capitalize;color:#fff;margin:-5px;padding:0px 15px 0px 40px;display:none;border-radius:5px}
Adım 3:Blogunuzda jQuery eklentisinin kurulup kurulmadığını kontrol edin.Eğer kurulmamışsa </head> kodundan önce bir kaç satırlık kod eklemeniz lazım.</head> kodunu Ctrl+F yardımıyla bulun ve hemen öncesine alttaki kodu ekleyin:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script src='https://helplogger.googlecode.com/svn/trunk/megamenu.js' type='text/javascript'/><script type='text/javascript'>jQuery(document).ready(function($) { $('#megamenuid').megaBloggerMenu({ postsNumber : 4,
noThumbnail : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1uBEYphD4kcFSBscb8GUyWvKH1hLcQSWZ8OgQbDcpuFlbCR9MPrTaKYgKrrUYU6RtKnx2RjlLZe8EP41WZOfmozztjAZ049x-jyaXcUcYK6kI-5DRpBtsynzPOj-zpWEeJ8_xRQtX67U/s1600/no_image_available.png'
});});
$(function(){ $('.search-here').submit(function(e){ if($('.search-box .search-field').val().length==0){ $('.search-box .search-alert').fadeIn().css('display','inline-block'); e.preventDefault(); } });});</script>
Not:
-Eğer jQuery eklentisi çoktan eklenmişse kırmızı satırı silin.
-Post sayısını değiştirmek için 4 rakamını değiştirin.
postsNumber : 4
-Eğer postunuzda herhangi bir foto yer almıyorsa ziyaretçilernize göstermek isteyeceğiniz sabit foto için yeşil renkle belirtilen url'değiştirin altta olduğu gibi :
noThumbnail : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1uBEYphD4kcFSBscb8GUyWvKH1hLcQSWZ8OgQbDcpuFlbCR9MPrTaKYgKrrUYU6RtKnx2RjlLZe8EP41WZOfmozztjAZ049x-jyaXcUcYK6kI-5DRpBtsynzPOj-zpWEeJ8_xRQtX67U/s1600/no_image_available.png'
Adım 4:Ctrl+F yardımıyla alttaki kodu bulun:
<div class='main-outer'>
Adım 5:Yukarıda bulduğunuz kodun hemen üstüne alttaki kodu yapıştırın:
<ul class='megamenu' id='megamenuid'><li><a href='/'>Ana Sayfa</a></li>
<li><a class='menu-target' href='#'>MENÜ BAŞLIĞI</a><ul><li><a href='http://BURAYAURLEKLE.com'>ETİKET ADI</a></li><li><a href='http://BURAYAURLEKLE.com'>ETİKET ADI</a></li><li><a href='http://BURAYAURLEKLE.com'>ETİKET ADI</a></li></ul></li><li><a class='menu-target' href='#'>MENÜ BAŞLIĞI</a><ul><li><a href='http://BURAYAURLEKLE.com'>ETİKET ADI</a></li><li><a href='http://BURAYAURLEKLE.com'>ETİKET ADI</a></li><li><a href='http://BURAYAURLEKLE.com'>ETİKET ADI</a></li></ul></li><li><a href='http://BURAYAURLEKLE.com'>Normal Link</a></li><li class='search-box'><form action='/search' class='search-here' method='get'><input class='search-field' name='q' placeholder='Search Here' size='30' type='text'/><input class='search-button' type='submit' value=' '/></form><p class='search-alert'>Arama formu boştur!</p></li></ul><div class='clear'/>
<div class='clear'/>
Not: ETİKET ADI yerine post etiketini , http://BURAYAURLEKLE.com yerine etiket url'si ,MENÜ BAŞLIĞI yerine menünüzün ismini yazın.