Blogger blogunuza resimli mega menü ekleyin

Artık AJAX navigasyon menü widget'ti ile sub-menü yanı alt menülerinize resim veya foto ekleyebilirsiniz.

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($) { $(&#39;#megamenuid&#39;).megaBloggerMenu({ postsNumber : 4,
noThumbnail : &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1uBEYphD4kcFSBscb8GUyWvKH1hLcQSWZ8OgQbDcpuFlbCR9MPrTaKYgKrrUYU6RtKnx2RjlLZe8EP41WZOfmozztjAZ049x-jyaXcUcYK6kI-5DRpBtsynzPOj-zpWEeJ8_xRQtX67U/s1600/no_image_available.png&#39;
});});
$(function(){ $(&#39;.search-here&#39;).submit(function(e){ if($(&#39;.search-box .search-field&#39;).val().length==0){ $(&#39;.search-box .search-alert&#39;).fadeIn().css(&#39;display&#39;,&#39;inline-block&#39;); 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 : &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1uBEYphD4kcFSBscb8GUyWvKH1hLcQSWZ8OgQbDcpuFlbCR9MPrTaKYgKrrUYU6RtKnx2RjlLZe8EP41WZOfmozztjAZ049x-jyaXcUcYK6kI-5DRpBtsynzPOj-zpWEeJ8_xRQtX67U/s1600/no_image_available.png&#39;

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.

Blogger blogunuza tab navigasyon menü ekleyin

Tab navigasyon çok sekmeli menülerden oluşur.Eğer blogunuzun çok karmaşık bir hal almasını istemiyorsanız blogunuza tab navigasyon menü ekleyebilirsiniz.Tab navigasyon sayesinde bir çok gadgeti aynı kutu veya pencerenin içinde barındırabilirsiniz.Tab navigasyonun amacı gadgetlerin veya kenar çubukların fazla yer kaplamasını önlemek ve onları bir arada tutmaktır.Alttaki resimde gördüğünüz gibi bir kutunun içine birden fazla menü eklenmiştir.Eğer bu menüler için ayrı ayrı gadgetler veya kenar çubukları eklenseydi blogunuzda yer kalmazdı ve blogunuz çok karmaşık hale gelirdi.



                       



Eğer blogunuza tab navigasyon veya çok sekmeli menü eklemek isterseniz aşağıdaki adımları takip edin:

Adım 1:Blogger hesabınıza giriş yapınız ve sırasıyla Şablon>HTML'yi düzenle'ye tıklayın.

Adım 2:Html kodu içinde herhangi bir yere tıklayın ve CTRL+F kombinasyonu kullanarak alttaki kodu bulun:

]]></b:skin>

Adım 3:Yukarıda bulduğunuz kodun hemen üstüne alttaki kodu ekleyin:

.tabviewcont{margin:15px 0;padding:0;clear:both;}
.tabviewnav {margin: 0 0 0 14px;padding:3px 0; /* If you are using a Blogger Template change 0 with 15px */font-size:12px; /* Font size of text inside tabs */font-weight:bold;}.tabviewnav li {list-style:none;margin:0;display:inline;}.tabviewnav li a {padding:3px 6px;margin-right:1px;background:#F6F6F6; /* The background color of the tabs */border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;
-webkit-border-radius:5px 5px 0 0;
text-decoration:none;color:#222222;}.tabviewnav li a:hover {color:#222222;background:#EBEBEB; /* Background color of the tab on mouseover */text-decoration:none;}.tabviewnav li.tabviewactive a,.tabviewnav li.tabviewactive a:hover {background:#EBEBEB; /* Background color of the active tab */color:#222222;}.tabviewcont .tabviewtab {padding:5px;border:1px solid #EEEEEE; /* Border around the container */background:#fff; /* The background color of the gadget */}.tabviewcont .tabviewtab h2,.tabviewcont .tabviewtabhide {display:none;}.tabviewtab .widget-content ul{list-style:none;margin:0 0 10px 0;padding:0;}.tabviewtab .widget-content li {border-bottom:1px solid #ccc;margin:0 5px;padding:2px 0 5px 0;}

Adım 4:Şimdi </head> kodunu bulup hemen üstüne alttaki kodu yapıştırın:

<script type='text/javascript'>


<![CDATA[
document.write('<style type="text/css">.tabview{display:none;}<\/style>');function tabviewObj(argsObj){var arg;this.div=null;this.classMain="tabview";this.classMainLive="tabviewcont";this.classTab="tabviewtab";this.classTabDefault="tabviewtabdefault";this.classNav="tabviewnav";this.classTabHide="tabviewtabhide";this.classNavActive="tabviewactive";this.titleElements=['h2','h3','h4','h5','h6'];this.titleElementsStripHTML=true;this.removeTitle=true;this.addLinkId=false;this.linkIdFormat='<tabviewid>nav<tabnumberone>';for(arg in argsObj){this[arg]=argsObj[arg]}this.REclassMain=new RegExp('\\b'+this.classMain+'\\b','gi');this.REclassMainLive=new RegExp('\\b'+this.classMainLive+'\\b','gi');this.REclassTab=new RegExp('\\b'+this.classTab+'\\b','gi');this.REclassTabDefault=new RegExp('\\b'+this.classTabDefault+'\\b','gi');this.REclassTabHide=new RegExp('\\b'+this.classTabHide+'\\b','gi');this.tabs=new Array();if(this.div){this.init(this.div);this.div=null}}tabviewObj.prototype.init=function(e){var childNodes,i,i2,t,defaultTab=0,DOM_ul,DOM_li,DOM_a,aId,headingElement;if(!document.getElementsByTagName){return false}if(e.id){this.id=e.id}this.tabs.length=0;childNodes=e.childNodes;for(i=0;i<childNodes.length;i++){if(childNodes[i].className&&childNodes[i].className.match(this.REclassTab)){t=new Object();t.div=childNodes[i];this.tabs[this.tabs.length]=t;if(childNodes[i].className.match(this.REclassTabDefault)){defaultTab=this.tabs.length-1}}}DOM_ul=document.createElement("ul");DOM_ul.className=this.classNav;for(i=0;i<this.tabs.length;i++){t=this.tabs[i];t.headingText=t.div.title;if(this.removeTitle){t.div.title=''}if(!t.headingText){for(i2=0;i2<this.titleElements.length;i2++){headingElement=t.div.getElementsByTagName(this.titleElements[i2])[0];if(headingElement){t.headingText=headingElement.innerHTML;if(this.titleElementsStripHTML){t.headingText.replace(/<br>/gi," ");t.headingText=t.headingText.replace(/<[^>]+>/g,"")}break}}}if(!t.headingText){t.headingText=i+1}DOM_li=document.createElement("li");t.li=DOM_li;DOM_a=document.createElement("a");DOM_a.appendChild(document.createTextNode(t.headingText));DOM_a.href="javascript:void(null);";DOM_a.title=t.headingText;DOM_a.onclick=this.navClick;DOM_a.tabview=this;DOM_a.tabviewIndex=i;if(this.addLinkId&&this.linkIdFormat){aId=this.linkIdFormat;aId=aId.replace(/<tabviewid>/gi,this.id);aId=aId.replace(/<tabnumberzero>/gi,i);aId=aId.replace(/<tabnumberone>/gi,i+1);aId=aId.replace(/<tabtitle>/gi,t.headingText.replace(/[^a-zA-Z0-9\-]/gi,''));DOM_a.id=aId}DOM_li.appendChild(DOM_a);DOM_ul.appendChild(DOM_li)}e.insertBefore(DOM_ul,e.firstChild);e.className=e.className.replace(this.REclassMain,this.classMainLive);this.tabShow(defaultTab);if(typeof this.onLoad=='function'){this.onLoad({tabview:this})}return this};tabviewObj.prototype.navClick=function(event){var rVal,a,self,tabviewIndex,onClickArgs;a=this;if(!a.tabview){return false}self=a.tabview;tabviewIndex=a.tabviewIndex;a.blur();if(typeof self.onClick=='function'){onClickArgs={'tabview':self,'index':tabviewIndex,'event':event};if(!event){onClickArgs.event=window.event}rVal=self.onClick(onClickArgs);if(rVal===false){return false}}self.tabShow(tabviewIndex);return false};tabviewObj.prototype.tabHideAll=function(){var i;for(i=0;i<this.tabs.length;i++){this.tabHide(i)}};tabviewObj.prototype.tabHide=function(tabviewIndex){var div;if(!this.tabs[tabviewIndex]){return false}div=this.tabs[tabviewIndex].div;if(!div.className.match(this.REclassTabHide)){div.className+=' '+this.classTabHide}this.navClearActive(tabviewIndex);return this};tabviewObj.prototype.tabShow=function(tabviewIndex){var div;if(!this.tabs[tabviewIndex]){return false}this.tabHideAll();div=this.tabs[tabviewIndex].div;div.className=div.className.replace(this.REclassTabHide,'');this.navSetActive(tabviewIndex);if(typeof this.onTabDisplay=='function'){this.onTabDisplay({'tabview':this,'index':tabviewIndex})}return this};tabviewObj.prototype.navSetActive=function(tabviewIndex){this.tabs[tabviewIndex].li.className=this.classNavActive;return this};tabviewObj.prototype.navClearActive=function(tabviewIndex){this.tabs[tabviewIndex].li.className='';return this};function tabviewAutomatic(tabviewArgs){var tempObj,divs,i;if(!tabviewArgs){tabviewArgs={}}tempObj=new tabviewObj(tabviewArgs);divs=document.getElementsByTagName("div");for(i=0;i<divs.length;i++){if(divs[i].className&&divs[i].className.match(tempObj.REclassMain)){tabviewArgs.div=divs[i];divs[i].tabview=new tabviewObj(tabviewArgs)}}return this}function tabviewAutomaticOnLoad(tabviewArgs){var oldOnLoad;if(!tabviewArgs){tabviewArgs={}}oldOnLoad=window.onload;if(typeof window.onload!='function'){window.onload=function(){tabviewAutomatic(tabviewArgs)}}else{window.onload=function(){oldOnLoad();tabviewAutomatic(tabviewArgs)}}}if(typeof tabviewOptions=='undefined'){tabviewAutomaticOnLoad()}else{if(!tabviewOptions['manualStartup']){tabviewAutomaticOnLoad(tabviewOptions)}}//]]>
</script>

Adım 5:Son olarak alttaki kodu bulun:

<div class='column-right-inner'>

Adım 6:Adım 5'te bulduğunuz kodun hemen altına alttaki kodu ekleyin:

<div class='tabview'><b:section class='tabviewtab' id='Tab1' maxwidgets='1'/><b:section class='tabviewtab' id='Tab2' maxwidgets='1'/><b:section class='tabviewtab' id='Tab3' maxwidgets='1'/></div>

Şimdi Yerleşim bölümüne gidin alttaki resimde olduğu gibi gadgetler göreceksiniz,gadgeti üzerine tıklayıp istediğinizi ekleyebilirsiniz.




                          

Eğer tab sayısını artımak isterseniz alttaki satırı yukarıda adım 7 deki kodun </div> hemen üstüne ekleyebilirsiniz.Daha çok tab eklemek için tab4'ü tab5 olarak yazıp yeni bir satır daha ekleyin.

<b:section class='tabviewtab' id='Tab4' maxwidgets='1'/>

Eğer kenar çubuğunuz çok darsa çok tab veya menü eklemeyin.