Blogger Görselli Açılır Mega Menü (Alışılmışın Dışında)

Merhaba bgtemalari takipçileri, blogger için açılır görselli menü ile karşınızdayım. Menü ziyaretçilerin aradığını daha çabuk bulması için kullanılır. Bu menüyü biraz daha geliştirdiğimiz de ortaya alışılmışın dışında bir menü çıkıyor. Ziyaretçilerimizi alt başlıklarla yormak yerine son paylaşılan konuları görsel haline getirmek epey dikkat çekici olmalı, işte aşağıda da görüyorsunuz.

Demo

Açılır menü hoşunuza gittiyse yapımına geçelim. Aşağıdaki adımları uygulamaya başlayın.

1. HTML'yi Düzenle Kısmını Açınız.

Blogger panelimize giriş yapalım. Şablon kısmına tıklayalım ve HTML'yi düzenle butonuna basalım.

2. Şablonumuzda CTRL + F Tuşlarına Basarak Arama Kutumuzu Açalım.

Şablona girdik ve artık menümüzü oluşturmaya başlayalım.

CSS 

Aşağıda ki kodu şablonumuz da aratalım.

]]></b:skin>

Kodu bulduktan sonra bir satır üstüne aşağıdaki kodu ekleyiniz.

.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/AVvXsEgypsBYTUbYNcagUOU_07Ipnj5krTP4I-O-gbKqkfbqZ30O_0C5UucKWcG78jU9Dei8A1CVcFQqJfRReMA7ibrVYmy32Om3oy5RYkA0KdwbnGnvtGWM9fPlO75-nZ0fMOQam2ogmyjkaOE/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/AVvXsEiuBh8cdMWcCBxVRjybn0k1LRcTKjwiUHFfNJU1UAFO40rV0QcKUUB_kvPMyzIZl3D67xa0hkoKBuVSaY-P45OU3xNQLPtixHqLKuMPCYPdJFsm6rrY1m14PCmvt7lonno7edpSGC8n30A/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/AVvXsEg2fIkZaOYw4fPK3hD2sXJuLK5kilH8Bz6pV93VcHCsFaFMCHjSB1IsZuOUm3_H4EgzhPgSfU6eJ4lz3a3NafAVU5ehRkCOAonY8bagqiATUhFrqNqCKgd7CNT_rd65E9gLDDM58Svl8as/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}

JavaScript

Sıra kodumuzun iş kısmında, </head> (CTRL+F) kodunu şablonumuz da aratalım. Kodun bir satır üstüne aşağıdaki kodu ekleyelim.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
(function(e){var t=function(e,t){this.elem=e;this.settings=t;this.megaMenuHtml();this.ajaxcall=null;this.menulist=this.elem.find(".leftmenulist li a");this.menuHelper(this.elem);this.addEvents()};t.prototype={regex:{islabel:new RegExp("/search/label/","g"),issearch:new RegExp("[?&]q=","g"),labelsearch:new RegExp("(http://[^/]+)/search/label/([^/?&]+).*[?&]q=([^$&]+)(?:[^$]+)?","g"),label:new RegExp("(http://[^/]+)/search/label/([^/?&$]+)","g"),search:new RegExp("(http://[^/]+)/search/?[?&]q=(.*)","g")},addEvents:function(){var t=this;this.menulist.hover(function(){if(e(this).data("menuloaded")!=="true"){t.li=e(this);t.url=t.li.attr("href");t.container=t.li.closest("ul").siblings("ul");t.hoverOver()}},function(){t.hoverOut()})},hoverOver:function(){var t=this;this.getAJAXUrl();if(!this.ajaxUrl)return;this.ajaxcall=e.ajax({type:"GET",url:t.ajaxUrl,dataType:"jsonp",data:t.ajaxData,beforeSend:function(){t.showLoader()},success:function(e){t.hideLoader();t.addArrow();t.showPosts(e)},error:function(e){t.showError(e)}})},hoverOut:function(){this.ajaxcall.abort();this.hideLoader()},getAJAXUrl:function(){if(this.url){var e=this;this.ajaxData={alt:"json","max-results":this.settings.postsNumber};this.url.search(this.regex.islabel)!==-1&&this.url.search(this.regex.issearch)!==-1?this.ajaxUrl=this.url.replace(this.regex.labelsearch,function(t,n,r,i){e.ajaxData.q=i;return[n,"/feeds/posts/default/-/",r,"/"].join("")}):this.url.search(this.regex.islabel)!==-1&&this.url.search(this.regex.issearch)===-1?this.ajaxUrl=this.url.replace(this.regex.label,function(t,n,r){delete e.ajaxData.q;return[n,"/feeds/posts/default/-/",r,"/"].join("")}):this.url.search(this.regex.islabel)===-1&&this.url.search(this.regex.issearch)!==-1?this.ajaxUrl=this.url.replace(this.regex.search,function(t,n,r){e.ajaxData.q=r;return[n,"/feeds/posts/default"].join("")}):this.ajaxUrl=!1}else this.ajaxUrl=!1},showLoader:function(){e("<span></span>",{"class":"loading-icon"}).appendTo(this.li.closest("li"))},hideLoader:function(){this.li.closest("li").find("span.loading-icon").remove()},showPosts:function(t){var n=this,r=[],i,s,o;t.feed.openSearch$totalResults.$t>0?e.each(t.feed.entry,function(t,u){i=u.title.$t;e.each(u.link,function(e,t){t.rel==="alternate"?s=t.href:s="#"});o=u.media$thumbnail?u.media$thumbnail.url.replace(/\/s72\-c\//,"/s200-c/"):n.settings.noThumbnail;r.push('<li><span class="thumb-container"><a title="',i,'" href="',s,'"><img alt="',i,'" src="',o,'"/><br />',i,"</a></span></li>")}):r.push("<h5>","No posts available.","</h5>");this.container.html(r.join(""));this.menulist.removeData("menuloaded");this.li.data("menuloaded","true")},showError:function(e){if(e.statusText==="error"){this.hideLoader();this.addArrow();this.container.html("<h5>Oops... Could not fetch the blog posts.</h5>")}},addArrow:function(){this.menulist.closest("li").find("span").remove();this.menulist.removeClass("hover-menu");this.li.addClass("hover-menu");e("<span></span>",{"class":"menu-icon"}).appendTo(this.li.closest("li"))},menuHelper:function(t){var n=this;t.find(">li").hover(function(){var t=e(this);t.find("a:first").addClass("hover-menu");var r=e(this).find("ul.leftmenulist li").height()*e(this).find("ul.leftmenulist li").length;t.find("ul.rightmenulist").css({"min-height":r+"px"});n.requestFirstAjax(t)},function(){e(this).find("a:first").removeClass("hover-menu")})},megaMenuHtml:function(){this.elem.find("ul ul").remove();this.elem.addClass("megamenuid").find(">li").find("ul:first").addClass("leftmenulist").wrap(e("<div></div>",{"class":this.settings.divClass}));e("ul.leftmenulist").after(e("<ul></ul>",{"class":"rightmenulist"}))},requestFirstAjax:function(e){e=e.find(".leftmenulist li:first-child a");this.url=e.attr("href");this.container=e.closest("ul").siblings("ul");this.li=e;this.hoverOver()}};e.fn.megaBloggerMenu=function(n){var r={postsNumber:4,divClass:"megasubmenu",postsClass:"rightmenulist",noThumbnail:"/default.png"},i=e.extend({},r,n);return this.each(function(){var n=new t(e(this),i)})}})(jQuery);
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($) {
 $(&#39;#megamenuid&#39;).megaBloggerMenu({
  postsNumber : 4,
  noThumbnail : &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG13Oy4gXe_BNQLKpiEKRRyh7ZmgqfNk6Auq5EOx2r7XszTfS0iTyWilbFviybOrm38ed5h-T8jXulhaMDrkmccYEpCANG8CS7ulqZCo8aFXMEzwhS0GYuoblvl6RdZ1sHv-KuTL_ePiI/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

 postsNumber : Bu kod menümüz de kaç tane görsel sıralamak istediğimizi belirtir.

 noThumbnail : &#39; Bu satırdaki kod görseli bulunmayan konuların nasıl görüneceğini belirler.

HTML Kodumuzu Ekleyelim Son Aşama

Kodumuzun son aşamasına geldik arkadaşlar, bu aşamada menümüzü düzenleyeceğiz.

Öncelikle Aşağıdaki kodu aratalım.

<div class='main-outer'>

Kodumuzu bulduktan sonra bir üst satırına aşağıdaki kodu ekleyelim.

<ul class='megamenu' id='megamenuid'>
<li><a href='/'>Ana Sayfa</a></li>
<li><a class='menu-target' href='#'>Menü Başlığı</a>
<ul>
<li><a href='http://blogadresiniz.com/search/label/konuetiketiniz'>Alt Başlık</a></li>
<li><a href='http://blogadresiniz.com/search/label/konuetiketiniz'>Alt Başlık</a></li>
<li><a href='http://blogadresiniz.com/search/label/konuetiketiniz'>Alt Başlık</a></li>
</ul>
</li>
<li><a class='menu-target' href='#'>Menü Başlığ</a>
<ul>
<li><a href='http://blogadresiniz.com/search/label/konuetiketiniz'>Alt Başlık</a></li>
<li><a href='http://blogadresiniz.com/search/label/konuetiketiniz'>Alt Başlık</a></li>
<li><a href='http://blogadresiniz.com/search/label/konuetiketiniz'>Alt Başlık</a></li>
</ul></li>
<li><a href='http://blogadresiniz.com'>Normal Link</a></li>
<li class='search-box'>
<form action='/search' class='search-here' method='get'>
<input class='search-field' name='q' placeholder='Arama Yap..' size='30' type='text'/>
<input class='search-button' type='submit' value=' '/>
</form>
<p class='search-alert'>Arama Yap!!</p>
</li>
</ul>
<div class='clear'/> 
<div class='clear'/>

Konu etiketiniz yazan kısıma , makalelerinizi hangi etikette topladığınızı yazacaksınız. Aşağıda ki görselde görebilirsiniz.

İşlemleriniz bittiğinde Şablonu Kaydet butonuna basıp çıkabilirsiniz.

Son Söz: Kullanışlı olduğunu düşündüğüm açılır menüyü sizlerle paylaştım arkadaşlar, umarım sizler için yararlı bir makale olmuştur. Eklenti ile ilgili soru veya sorunuz olursa lütfen yorumda belirtiniz. Elimden geldiğince size yardımcı olmaya çalışırım.