Mega menu sendiri sudah banyak di gunakan di template blogger gratisan, saya sering menemukannya di semplate Sora atau creator template lainnya.
Nah kali ini saya mau mencoba memberikan tutorial untuk Membuat Mega Menu Drop Down Dengan Thumbnails di Blogger, langsung saja simak langkah-langkahnya.
Langkah pertama, kamu harus login terlebih dahulu ke Blogger
Langkah kedua, masuk ke menu Tema lalu Edit HTML
Langkah ketika, salin kode tersebut dan simpan tepat di atas kode ]]></b:skin> atau </style>
/*Mega Menu Bar*/
.admenus *{margin:0;padding:0}ul.admenus{list-style:none;line-height:1;overflow:visible!important}ul.admenus:after{margin:0;padding:0;content:' ';display:block;height:0;clear:both}ul.admenus li{float:left;display:inline;position:relative;font-size:14px;font-weight:400;text-transform:uppercase}ul.admenus li a{display:block;line-height:50px;padding:0 20px;text-decoration:none;color:#2c2c2c;font-family:'Oswald';font-size:13px;font-weight:400;transition:all .3s ease-in-out}ul.admenus li a:hover,ul.admenus li a.hoverover{background:#f54325;color:#fff}ul.admenus ul{position:absolute;display:none;top:100%;border:1px solid #ccc}ul.admenus li:hover > ul{display:block}ul.admenus ul li{z-index:72;float:none;min-width:160px;background:#f5f5f5;text-shadow:none}ul.admenus ul li a{text-transform:none;font-weight:400;color:#aaa;font-family:'Arial'}ul.admenus ul li a:hover,ul.adajaxmenu ul li a.hover{background:#f54325}ul.admenus ul ul{display:none;left:100%;top:0}ul.adajaxmenu li div.submenu{position:absolute;width:600px;z-index:90;left:0;top:100%;overflow:hidden;min-height:150px;background:#f0f0f0;-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:#929292;box-shadow:0 10px 7px -7px rgba(0,0,0,0.1);transition:all .3s ease-in-out}ul.adajaxmenu li:hover div.submenu{visibility:visible;opacity:1;-moz-transform:translate(0,0);-webkit-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0)}ul.adajaxmenu ul,ul.adajaxmenu ul li{display:block!important;border:0 none!important;margin:0!important;padding:0!important}ul.adajaxmenu ul li{background:none!important;float:none!important}ul.adajaxmenu ul.verticlemenu{position:absolute;width:33%;left:0;top:0;bottom:0;background:#202020}ul.adajaxmenu ul.postslist{position:relative;display:block;width:65%;float:right;margin:0 0 15px!important;background:none}ul.adajaxmenu ul.postslist li{display:block;overflow:hidden;position:relative;min-height:60px;padding:15px 8px 15px 110px !important}ul.adajaxmenu ul.postslist li .imgCont{position:absolute;left:0;top:15px;width:100px;height:70px;overflow:hidden;font-size:0;line-height:0;border:1px solid #929292}ul.adajaxmenu ul.postslist li .imgCont img{position:relative;top:-20px;padding:0;width:100px;height:100px;display:block}ul.adajaxmenu ul.postslist li a{display:block;line-height:1.4;padding:0!important;color:#666;font-family:'Arial';font-size:12px;transition:all .3s ease-in-out}ul.adajaxmenu ul.postslist li a:hover{color:#f54325;background:transparent}ul.adajaxmenu .loader{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlHiXpk2Ym9josaLwFiZPWv_ABue03i6xQQf8ySbtMqoSuNS6YbxznS05J7d9kif0uAxTnFz61xRaXjwLcEieMAYboR2Y_yDCCeNHYvxdejmI4rfjV_FsdSBALBX3dks_MWnYUCDCEb0J0/s1600/loading+%25282%2529.gif) no-repeat scroll 0 0 transparent;width:22px;height:22px;position:absolute;top:50%;margin-top:-11px;right:5px}ul.adajaxmenu .menuArrow{border-bottom:4px solid transparent;border-top:4px solid transparent;border-left:4px solid #fff;display:block;height:0;margin-top:-4px;position:absolute;right:11px;top:50%;width:0}#adajaxmenu{background:#fff;height:50px;width:100%;position:relative;border:1px solid #e6e6e6;max-width:1100px;margin:0 auto;padding:0}li.search-form{float:right!important;line-height:50px;margin:0 20px 0 0}li.search-form .searchbar{border:none;padding:10px 5px;background:#f9f9f9;color:#fff;width:130px}li.search-form .searchbar:focus{border:none;outline:none;background:#fafafa;color:#666}li.search-form .searchsubmit{background:#f54325;border:none;color:#fff;cursor:pointer;padding:10px 5px;transition:all .3s ease-in-out}li.search-form .searchsubmit:hover{opacity:.9}.search-alert{color:#f9f9f9;padding:2px 15px 2px 40px;display:none;margin:5px;background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqFOZfRzO5LUTtTIJ81EXyaBrlFGwYE6RyHWslvec9hjjtbvf6Z0QLVRj9ad5tfdegEfIldTfJIMgfnIWeBNk3fgmBWVJQ6uQcbSS03HiqOXl3hQGKTyf8DYvebIvbr4uv7Bg5BRXVbiT-/s1600/Info.png) no-repeat;background-position:10px;border-radius:5px;text-transform:lowercase}
Langkah keempat, masukkan kode javascript berikut tepat diatas kode </body>
<script src='https://rawgit.com/mastamvan/backup/master/megamenu.js' type='text/javascript'></script>
<script type='text/javascript'>
jQuery(document).ready(function($) {
$('#adajaxmenu').ajaxBloggerMenu({
numPosts : 4, // Number of Posts to show
defaultImg : 'http://url-to-image.com/default-image.jpeg' // Default thumbnail Image
});
});
$(function(){
$('.searchblog').submit(function(e){
if($('.search-form .searchbar').val().length==0){
$('.search-form .search-alert').fadeIn().css('display','inline-block');
e.preventDefault();
}
});
});
</script>
Langkah terakhir adalah memasukkan kode HTML berikut tepat dibawah kode </head>
<ul id="adajaxmenu" class="admenus">
<li><a href='/'><i class='fa fa-home fa-lg'></i></a></li>
<li>
<a href="#">Webtools</a>
<ul>
<li><a href="/search/label/Blogger">Blogger</a></li>
<li><a href="/search/label/CSS">CSS</a></li>
<li><a href="/search/label/HTML">HTML</a></li>
<li><a href="/search/label/Tools">Tools</a></li>
<li><a href="/search/label/Widget">Widget</a></li>
</ul>
</li>
<li>
<a href="#">Widgets</a>
<ul>
<li><a href="/search/label/Widgets">Widgets</a></li>
<li><a href="/search/label/SEO">SEO</a></li>
<li><a href="/search/label/CSS">CSS</a></li>
</ul>
</li>
<li>
<a href="#">Tutorials</a>
<ul>
<li><a href="/search/label/Tutorials">Tutorials</a></li>
<li><a href="/search/label/Blogger">Blogger</a></li>
<li><a href="/search/label/WordPress<">WordPress</a></li>
<li><a href="/search/label/Earning">Earning</a></li>
<li><a href="/search/label/Domain Finder">Domain Finder</a></li>
</ul>
</li>
<li><a href="/search/label/Password Maker">Password Maker</a></li>
<li><a href="/search/label/">Contact</a></li>
<li><a href="/search/label/">Contact</a></li>
<li class='search-form'>
<form action='/search' class='searchblog' method='get'>
<input class='searchbar' name='q' placeholder='Search Here' size='30' type='text'/>
<input class='searchsubmit' type='submit' value='Search'/>
</form>
<p class='search-alert'>Search form is empty!</p>
</li>
</ul>
<div class='clear'/>
<div class='clear'/>
Ganti semua label dengan label yang kamu punya, simpan template dan lihat hasilnya.
Keterangan Tambahan: Jika mega menu tidak tampil, cek labelnya kalau menggunakan full domain seperti: https://gilangramadhan11.blogspot.com/search/label/Tips%20Blogger, usahakan cek lagi http nya yang agan pake, pake https atau http, kalau tidak sama biasanya tidak muncul.
Atau tambahkan kode berikut tepat di atas kode </head>
<script type='text/javascript'>
//<![CDATA[
if (typeof(jQuery) == 'undefined') {document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js\"></scr" + "ipt>");}
//]]>
</script>
Mungkin cukup sekian untuk tutorial Membuat Mega Menu Drop Down Dengan Thumbnails di Blogger, jika ada yang ingin kamu tanyakan silahkan berkomentar.
Comments
Post a Comment