Untuk kesempatan kali ini masih tentang membahas tentang menu drop-down, tetapi dengan beda style dan juga ditambahkan dengan adanya gambar preview atau thumbnail dari suatu postingan yang ada pada label tertentu.
Biasanya pada menu drop-down kebanyakan hanya teks saja tidak dengan gambar. Sekarang, dengan menggunakan widget menu navigasi AJAX, sobat bisa menampilkan gambar dari suatu postingan. Bahkan yang tidak mempunyai gambar dalam postingan pun telah disediakan gambar khusus.
Untuk lebih jelasnya silahkan sobat pasang saja, ataupun yang ingin melihat-lihat dulu silahkan klik LIVE DEMO dibawah ini....
Cara Membuat Menu Drop-Down Dengan Thumbnail/Gambar Di Blogger
1. Buka Dashboard -> Template -> Edit HTML
2. Cari kode ]]></b:skin> pada halaman kode template (lebih mudah gunakan CTRL+F)
Baca Juga:
- Membuat Menu Dropdown Responsive CSS3 Di Blogger
- Menambahkan Menu Dropdown Sederhana Menggunakan JQuery Di Blogger
3. Copy kode dibawah ini dan paste kode tersebut di atas kode ]]></b:skin>
.menudropdowndenganthumbnail *{margin:0;padding:0;font-family:'PT Sans Narrow'}ul.menudropdowndenganthumbnail{list-style:none;line-height:1;overflow:visible !important}ul.menudropdowndenganthumbnail:after{margin:0;padding:0;content:' ';display:block;height:0px;clear:both}ul.menudropdowndenganthumbnail li{float:left;display:inline;position:relative;text-transform:uppercase}ul.menudropdowndenganthumbnail 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.menudropdowndenganthumbnail 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.menudropdowndenganthumbnail li a:hover{background:#111111;color:#fff}ul.menudropdowndenganthumbnail ul{position:absolute;display:none;top:100%}ul.menudropdowndenganthumbnail li:hover > ul{display:block}ul.menudropdowndenganthumbnail ul li{z-index:72;min-width:149px;float:none;background:#000;text-shadow:none}ul.menudropdowndenganthumbnail ul li a{text-transform:none;font-weight:normal}ul.menudropdowndenganthumbnail ul li a:hover,ul.menudropdowndenganthumbnailid ul li a.hover{background:#E0E0E0;color:#444}ul.menudropdowndenganthumbnail ul ul{display:none;left:100%;top:0}ul.menudropdowndenganthumbnailid 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.menudropdowndenganthumbnailid 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.menudropdowndenganthumbnailid ul,ul.menudropdowndenganthumbnailid ul li{display:block !important;border:0 none !important;margin:0 !important;padding:0 !important}ul.menudropdowndenganthumbnailid ul li{background:none !important;float:left !important}ul.menudropdowndenganthumbnailid ul.leftmenulist{position:absolute;width:18%;left:0;top:0;bottom:0;background:#EEEEEE;border-right:1px dashed #e5e5e5 !important}ul.menudropdowndenganthumbnailid ul.leftmenulist a{border-left:none !important;color:#555}ul.menudropdowndenganthumbnailid ul.rightmenulist{position:relative;display:block;width:81%;float:right;margin:0px 0px 0px !important;background:none}ul.menudropdowndenganthumbnailid ul.rightmenulist li{display:block;overflow:hidden;position:relative;min-height:210px;padding:5px 17px 5px 0px !important}ul.menudropdowndenganthumbnailid ul.rightmenulist li .thumb-container{left:0;width:100%;height:100%;position:absolute;overflow:hidden;font-size:0;line-height:0}ul.menudropdowndenganthumbnailid ul.rightmenulist li .thumb-container img{position:relative;top:10px;padding:0;width:100%;height:100%;display:block}ul.menudropdowndenganthumbnailid 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.menudropdowndenganthumbnailid ul.rightmenulist li a:hover{color:#000;background:transparent}ul.menudropdowndenganthumbnailid .loading-icon{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir8EpndRLofr7L4aDP9pJKiI7DfNAnhMwOKYbgKnGof7SQZW5l2xomEw4qQ7r11Ynjq7dh_IPYN1g3SrC7PReH0vw3sh_0hTIPXTzg3tCIzLCYr2k8g7Namy3gUBWM7zM_WoGpLCYZEYc/s1600/wait.gif') no-repeat scroll 0 0 transparent;width:22px;height:22px;position:absolute;top:50%;margin-top:-11px;right:5px}ul.menudropdowndenganthumbnailid .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}#menudropdowndenganthumbnailid{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}#menudropdowndenganthumbnailid h5{font-size:16px;margin-top:70px;text-align:center}#menudropdowndenganthumbnailid 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}#menudropdowndenganthumbnailid 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/AVvXsEjxZPXA8hwfuADPkKoLhvlWUH8pc6hQmFMBzizgrUW7y4ORXEm4R8T2Uh41lXm5ACQfK0pkFwO9KCHsDkDqkyc7hGSsZrYro6tnAR36cnb5kbceGPP477ZshOf_Mp5mdk4A-Z7370YDB1w/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/AVvXsEithIgBlzs2w6OogQxc0lnqrqXh5znHmxqyIHt6mq5EouRDfdzOqVKccBiV87zEHng-jiQ3H6RD8LomhG4HRGQXGNLko2MvAZ2mkAm-p0Tr44T_RaTPb5XEdZPtrNuSA7Lh34FvCW7VXyA/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}4. Sekarang cari kode </head>
5. Copy kode JavaScript dibawah ini dan paste kode tersebut di atas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>Jika kode tersebut sudah ada, sobat tidak perlu memasangnya lagi.
6. Masih di kode </head> , copy kode dibawah ini dan paste kode tersebut di atas kode </head>
<script type='text/javascript'>
//<![CDATA[
(function(e){var t=function(e,t){this.elem=e;this.settings=t;this.menudropdowndenganthumbnailHtml();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>","Maaf Postingan Belum Tersedia.","</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")})},menudropdowndenganthumbnailHtml:function(){this.elem.find("ul ul").remove();this.elem.addClass("menudropdowndenganthumbnailid").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($) {
$('#menudropdowndenganthumbnailid').megaBloggerMenu({
postsNumber : 4,
noThumbnail : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMBZbMOyrp5t8kCpJUCogK3YLKoB50JtYqpFp8Y0WJLNSsLPbt5CmaP2jiC1TQb7T5RetvDePn8h-4RUybTQOl2bcIp14B0dFEg779NXuDyq9dKwZTm4a_fuJjXMyMkDjrJENRO8kfZzJB/s1600/no+image.jpg'
});
});
$(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>
- Ganti kode yang berwarna merah untuk mengurangi atau menambah preview yang ditambilkan di menu drop-down.
7. Terakhir cari kode <div class='main-outer'>
8. Copy kode dibawah ini dan paste kode tersebut di atas kode <div class='main-outer'>
<ul class='menudropdowndenganthumbnail' id='menudropdowndenganthumbnailid'>
<li><a href='/'>Home</a></li>
<li><a class='menu-target' href='#'>MENU 1</a>
<ul>
<li><a href='#'>SUB-MENU 1.1</a></li>
<li><a href='#'>SUB-MENU 1.2</a></li>
<li><a href='#'>SUB-MENU 1.3</a></li>
<li><a href='#'>SUB-MENU 1.4</a></li>
<li><a href='#'>SUB-MENU 1.5</a></li>
</ul>
</li>
<li><a class='menu-target' href='#'>MENU 2</a>
<ul>
<li><a href='#'>SUB-MENU 2.1</a></li>
<li><a href='#'>SUB-MENU 2.2</a></li>
</ul></li>
<li><a href='#'>MENU 3</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'>Search form is empty!</p>
</li>
</ul>
<div class='clear'/>
<div class='clear'/>- Ganti kode berwarna hijau dengan Link tujuan.
- Ganti kode berwarna merah nama menu sesuai keinginan sobat.
9. Klik Simpan template.
Silahkan cek blog anda, apakah menu drop-down dengan thumbnail tersebut terpasang dan berfungsi dengan baik atau tidak.
Apabila ada permasalahan, silahkan berkomentar dibawah.
Itu dia artikel tentang Membuat Menu Drop-Down Dengan Thumbnail/Gambar Di Blogger, apabila anda menyukainya jangan lupa Subscribe untuk tetap terhubung dan juga menerima artikel terbaru dari blog ini melalui email secara gratis.