Cara Membuat Menu Mega Drop down di Blog

adscblog

Cara Membuat Menu Mega Dropdown di blog-Berbagai pariasi menu di setiap blog ternyata berbeda beda,berbagai tehnik dan trik yang di terapkan oleh setiap kepada menu yang ada di Blog nya sehingga blog nya tersebut tidak kelihatan Monoton akan tetapi terlihat menjadi keren dan juga Modern

Mulai dari warna bahkan sampai ke bagian Link yang di sisipkan di menu tersebut mempunyai Gaya tersendiri sehingga menarik para pengunjung dan betah berada di Blog tersebut,dan terus mencari artikel yang di butuh kan nya di blog tersebut

Mungkin Anda sudah biasa melihat tampilan menu Dropdown yang berada di setiap blog yang sobat kunjungi,tetapi bagaimana jika di menu tersebut ketika anda arahkan Mouse laptop/komputer anda ke menu tersebut dan terbuka lalu berderet berbagai postingan blog

Membuat Menu Mega Drop Down di Bagian Navigation Blog

Seperti Hal nya saya pernah membagikan trik cara menyimpan Recent Post dan Juga Komentar berada di bagian Menu Blog di artikel terdahulu,dan andapun bisa melihat nya di Link bagian bawah ini

Baca Juga : Menempatkan Recent Post atau Komentar di bagian Menu Navigasi di blog

Kali ini juga seperti nya masih sama dengan artikel tersebut,tetapi hanya beda menempatkan saja,kali di artikel terdahulu menempatkan Recent Post atau Juga Komentar,tetapi kali ini menempatkan Setiap Label yang kita ingin kan

Dengan Membuat Menu Mega Dropdown ini maka Blog anda selain akan terlihat keren tetapi juga akan terlihat Professional oleh para Pengujung dan juga Blog anda akan banyak di sukai oleh banyak pengujung blog tentu nya

Cara Menempatkan Label di bagian Menu Navigasi Blog

Untuk membuat Tampilan Menu Dropdown ini tidak lah sulit akan tetapi memerlukan ketelitian untuk menempatkan kode kode mega dropdown tersebut di bagian edit Html yang berada di bagian Template Blog kita akan tidak terjadi kesalahan yang patal

Dan utnuk Cara Pembuatan Nya adalah sebagai Berikut

• Silahkan Masuk ke bagian Dashbord Blogger sobat
• Kemudian Pilih Blog 
• Kemudian Klik Tema lalu Edit Html
• Setelah berada di bagian edit Html Silahkan sobat letakan kode CSS berikut

.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/AVvXsEgwxzppranpnD8gsePtHu5MA1BgH0ninDe5aECcDX2Y-Hxp43Mk3i-1AhCkt3Y9Z8bErHxc3uQ6zyz3lTf2Z1njxAisae4e_KCeJd98qcli7IKtvB3egsI6pIEOTpKqnmzunn9A_4EbLOk/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/AVvXsEi4Nc8WRpcl7A33WgnSKqIxy_JrKof-jYI1G1WBWPiYIsHwa_aBGXlsDs7ARc64VO-nZpcQPHr8isH05F-_BJKz_sbN9bZOGljcWKRrHM5ks8QSlQ8yS1R-Cz1O8uBm3BxT-SOSIUPOHrk/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/AVvXsEj2a4ZnzOQz4U4QeB3mHmyAHfurhVgv-8LqbTBMMdeZFd2Wy4dbWk5hyphenhyphenlz1_bF-LFE4qkEjQyWiEHDqL2TjwsvLHe8cCs_KoZpuEnZqURiRuq91Dd8bY0t-A5HoKix8PCPo8m8gPD9nNmY/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}

• Langkah selanjut nya silahkan Sobat Cari kode </head> lalu letakan kode berikut sebelum kode tersebut

<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.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($) {
 $(&#39;#menudropdowndenganthumbnailid&#39;).megaBloggerMenu({
  postsNumber : 4,
  noThumbnail : &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIv_ykujLJ84-00Uqj1LpfiEeiLTSKHm3f85RdDicRxvYOtVg035-eDB6Qm7aVpEMgEfBFnud6-W6fnlTuxQuNAJox3clOu55ABUsNFiZJYE_fJQtJDEnXW3cVefYxYQscnJ7JP9ZFM37d/s1600/no+image.jpg&#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>

Untuk yang berwarna merah adalah Jumlah Postingan yang akan di tampilkan,silahkan sobat atur sendiri berapa banyak yang akan di tampilkan

• Langkah selanjut nya silahkan sobat letakan kode HTML berikut silahkan sobat letakan dimana hal nya sobat menempatkan kode html Menu Navigation lain nya,baik itu di atas Header ataupun di bawah Header

<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'/>

• Kemudian silahkan sobat klik SImpan

Nah itulah cara membuat Menu dropdown di blog,semoga artikel ini bisa membantu sobat blogger semua
Karena dengan Berjalan nya Waktu,saya mohon maaf apabila suatu saat Kode kode tersebut tidak berjalan dengan Efektive mungkin karna kode tersebut sudah di hapus oleh para pembuat nya,mohon di maklum

adscblog

Recommendation Apps

ads1

Previous

Posting Lebih Baru

Next

Posting Lama

Posted by Dede Ubed, Published at 08 Oktober and have 0 komentar