Membuat Menu Navigasi Mirip Jalan Tikus

Seribu Ilmu June 29, 2018 BLOGSPOT

Hari ini saya ingin berbagi bagai mana cara membuat navigasi mirip dengan jalan tikus yang dapat kalian gunakan di blog kalian.

Pertama, buka terlebih dahulu Templat Blog > Edit Template. Letakan code berikut ini sebelum

<style>
/* Menu Jalan Tikus Created by www.idblanter.com */
body{backgorund:#f5f5f5}a:link{text-decoration:none!important}#headerblanter{height:65px;font-family:'Bitter',Roboto,Arial;width:100%;position:fixed;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);top:0;right:0;left:0;z-index:11;transition:all .5s ease-in-out;background:#ce0a46;background:-webkit-linear-gradient(left,#ce0a46,#e98125);background:-o-linear-gradient(right,#ce0a46,#e98125);background:-webkit-gradient(linear,left top,right top,from(#ce0a46),to(#e98125));background:-o-linear-gradient(left,#ce0a46,#e98125);background:linear-gradient(90deg,#ce0a46,#e98125)}.mega-wrapper{background:#fff;overflow:hidden;left:0;right:0;top:65px;position:absolute;padding:20px;-webkit-transition:.2s linear;-o-transition:.2s linear;transition:.2s linear;-webkit-box-shadow:0 12px 50px rgba(0,0,0,0.17);box-shadow:0 12px 50px rgba(0,0,0,0.17);transform:scaleY(0);-webkit-transform-origin:top;-ms-transform-origin:top;transform-origin:top;-webkit-transform:scaleY(0);-ms-transform:scaleY(0)}#navigation ul li:hover .mega-wrapper{transform:scaleY(1);-webkit-transform:scaleY(1);-ms-transform:scaleY(1)}#showkacatikus{color:#fff;position:fixed;top:12px;right:10px;display:none}#showjalantikus{color:#fff;position:fixed;top:12px;left:10px;display:none}#showkacatikus i,#showjalantikus i{font-size:35px}.megamenu{width:1100px;max-width:100%;margin:0 auto}.mega-wrapper li{width:205px;height:150px;margin-bottom:15px;margin-right:15px;border-radius:7px;overflow:hidden;position:relative}.mega-wrapper li:after{content:'';background:-webkit-linear-gradient(bottom,rgba(0,0,0,.5) 40%,hsla(0,0%,100%,0) 68%);background:-o-linear-gradient(top,rgba(0,0,0,.5) 40%,hsla(0,0%,100%,0) 68%);background:-webkit-gradient(linear,left bottom,left top,color-stop(40%,rgba(0,0,0,.5)),color-stop(68%,hsla(0,0%,100%,0)));background:-o-linear-gradient(bottom,rgba(0,0,0,.5) 40%,hsla(0,0%,100%,0) 68%);background:linear-gradient(0deg,rgba(0,0,0,.5) 40%,hsla(0,0%,100%,0) 68%);position:absolute;transition:all .3s ease-in-out;top:0;bottom:0;left:0;right:0}.mega-wrapper li:hover:after{opacity:.8}.mega-wrapper ul li a{font-size:13px!important;padding:0!important;z-index:9}.mega-wrapper ul li a:hover{background:transparent!important}.mega-wrapper ul li a:nth-child(2){position:absolute;width:195px;bottom:0;text-shadow:0 3px 6px #000;text-transform:none!important;padding:10px!important}.mega-wrapper li img{height:150px;width:220px}#search-blanter{position:fixed;background:#ffeddf;left:0;right:0;top:65px;padding:15px 15px 18px;text-align:center;transform:scaleY(0);transition:all .3s ease-in-out;-webkit-transform-origin:top;-ms-transform-origin:top;transform-origin:top;-webkit-transform:scaleY(0);-ms-transform:scaleY(0)}#search-blanter.aktif{transform:scaleY(1);-webkit-transform:scaleY(1);-ms-transform:scaleY(1)}#search-blanter:after{content:'';height:4px;background:linear-gradient(90deg,#ce0a46,#e98125);position:absolute;bottom:0;left:0;right:0}#bsearchbox{width:850px;max-width:100%;margin:0 auto;position:relative;overflow:hidden}#bsearchbox:before{content:'';background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPKD7975EC7BGC5J8dgzR5bGPSw5GVaMBXlaCQ-RbIlwqRJetmSYvcKfUmkl071mZm13r0-erM6x1poLf6CQ7RGZPHODn22t0p-4xGBPh-s8FUzEDOIFYd1X9tLv13xtyMXhQlw_yP6_k/s35/searchblanter.png)no-repeat;position:absolute;width:33px;height:35px;left:17px;top:13px}input#searchteks{font-size:18px;padding:20px 20px 20px 70px;border:1px solid #e69f65;border-radius:4px;width:100%;outline:none;color:#666}button.bsearchbtn{position:absolute;top:1px;background:linear-gradient(0deg,#e3642d,#f5743c 56px,#fff);font-weight:700;background:-webkit-linear-gradient(bottom,#e3642d,#f5743c 56px,#fff);font-family:'Roboto',Arial;text-transform:uppercase;color:#fff;border-radius:0 4px 4px 0;border:none;font-size:20px;width:150px;height:61px;right:0;outline:none;cursor:pointer}button.bsearchbtn:hover{opacity:.9}button.bsearchbtn:before{bottom:0;border-top:10px solid hsla(0,0%,100%,0)}button.bsearchbtn:after{top:1px;border-bottom:10px solid hsla(0,0%,100%,0)}button.bsearchbtn:after,button.bsearchbtn:before{position:absolute;height:30px;left:0;content:"";border-left:10px solid #fff;-webkit-box-sizing:border-box;box-sizing:border-box;z-index:9}#navigation ul li a.blanter-nav:hover:after{bottom:-1px;border-bottom:7px solid #fff}#navigation ul li a.blanter-nav:after{position:absolute;bottom:-7px;width:14px;left:50%;margin-left:-7px;content:"";-webkit-box-sizing:border-box;box-sizing:border-box;border-bottom:7px solid hsla(0,0%,100%,0);border-left:7px solid hsla(0,0%,100%,0);border-right:7px solid hsla(0,0%,100%,0);-webkit-transition:.2s;-o-transition:.2s;transition:.2s}#navigation ul li a:hover{background:rgba(255,255,255,.14)}#navigation ul li{float:left}#navigation ul li a.blanter-nav{position:relative}#navigation ul li a{color:#fff;font-size:15px;text-transform:uppercase;padding:23px;font-weight:600;display:block}#navigation ul{margin:0;padding:0;list-style:none}#header2{float:left;font-size:160%;text-transform:uppercase;font-weight:300;line-height:57px;margin-top:8px;margin-right:50px}#header2 img{margin:0;padding:0;max-width:240px;max-height:50px}.titlewrapper{margin:0;padding:0}.header h1.title,.header p.title{font-size:17px;font-weight:700;color:#fff;letter-spacing:-.4px;margin:5px 0}.header .description{display:none}.header a,.header a:hover{color:#fff}.logo{float:left;font-size:160%;text-transform:uppercase;font-weight:300;max-height:70px}.logo a{color:#fff;text-decoration:none;margin-top:-5px}.logo a:hover{color:#fff;text-decoration:none}.logo img{top:0;left:0!important}#jtheadermenu{font-family:'Bitter',Arial;visibility:hidden;position:absolute;background:#fff;text-transform:none!important;list-style:none;right:100px;top:45px;padding:10px 15px 5px;width:18px;height:1px;transition:all .3s ease-in-out;z-index:9;overflow:hidden;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);opacity:0;border-radius:4px;overflow:hidden}#jtheadermenu li{width:100%;border-bottom:1px solid #ddd}#jtheadermenu li a{padding:11px 0;display:block;color:#444;font-weight:700;font-size:14px!important}#jtheadermenu li a:hover{color:#e56f2a}#jtheadermenu.shows{visibility:visible;height:167px;opacity:1;width:180px}a.blanter#showmenu i.material-icons{line-height:.6;font-size:35px;margin-top:5px}#menu-kiri{margin-right:30px}a.blanter#showsearch i.material-icons{line-height:.6;font-size:40px;margin-top:5px}#showsearch.aktif{background:#ffeddf;color:#e87e25!important}a.blanter i.fa{margin-top:5px}a.blanter{font-size:22px;color:rgba(255,255,255,0.73)!important;padding:15px 8px;text-align:center;float:right;margin-right:5px}a.blanter:hover{color:#fff!important}
@media screen and (max-width:1024px){#menu-kiri{display:none}}
@media screen and (max-width:768px){#headerblanter li a{width:100%;text-align:left;color:#fff}#headerblanter li{width:100%}.nav-menu2{width:100%}#search-box .fa-arrow-left,.blanter-back{display:block}#header2{width:220px;height:60px;overflow:hidden;float:none;margin:8px auto}a#showsearch{visibility:hidden}.mega-wrapper li{width:47%!important;height:120px}#search-blanter{background:#fff;padding:0}#bsearchbox{width:auto}input#searchteks{width:75%;font-size:15px;border:none}#bsearchbox:before{background-size:25px}#menu-wrapper{width:100%;position:absolute;top:60px;transform:scaleY(0);-webkit-transform-origin:top;-ms-transform-origin:top;transform-origin:top;-webkit-transform:scaleY(0);-ms-transform:scaleY(0);-webkit-transition:.2s linear;-o-transition:.2s linear;transition:.2s linear;overflow:hidden}#menu-wrapper,.mega-wrapper{background:#ce0a46;background:-webkit-linear-gradient(left,#ce0a46,#e98125);background:-o-linear-gradient(right,#ce0a46,#e98125);background:-webkit-gradient(linear,left top,right top,from(#ce0a46),to(#e98125));background:-o-linear-gradient(left,#ce0a46,#e98125);background:linear-gradient(90deg,#ce0a46,#e98125)}#menu-wrapper.aktif{transform:scaleY(1);-webkit-transform:scaleY(1);-ms-transform:scaleY(1)}#showjalantikus,#showkacatikus,#menu-kiri{display:block}.mega-wrapper li:nth-child(2),.mega-wrapper li:nth-child(4),.mega-wrapper li:nth-child(6){margin-right:0}.mega-wrapper{z-index:1;top:0}a:link{text-decoration:none}#jtheadermenu{right:80px;top:initial;bottom:70px}#jtheadermenu li a{color:#555}.mega-wrapper li img{height:120px}li.clearfix:nth-child(n+7),button.bsearchbtn,#navigation ul li a.blanter-nav:after{display:none}}
</style>

Kemudian copy code berikut ini dan paste code tersebet sebelu code </head>

<script>
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
  loadCSS("https://fonts.googleapis.com/css?family=Roboto:400,400italic,700");loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css");loadCSS("https://fonts.googleapis.com/icon?family=Material+Icons");loadCSS("https://fonts.googleapis.com/css?family=Bitter");
$(document).ready(function(){$("#showsearch,#showkacatikus").click(function(){$("#showsearch,#search-blanter").toggleClass("aktif");});});
$(document).ready(function(){$("#showjalantikus").click(function(){$("#menu-wrapper").toggleClass("aktif");});});
$(document).ready(function(){$("#showmenu").click(function(){$("#jtheadermenu").toggleClass("shows");});});
</script>

Kemudia ganti navigasi kalian dengan mengganti code berikut ini. Carilah code berikut ini dan ganti div terebut dengan code di bawah ini <header> atau div header

<header id="headerblanter" itemscope="itemscope" itemtype="http://schema.org/WPHeader">
<a href="javascript:void" id="showjalantikus" title="Show Navigation"><i class="material-icons"></i></a>
<a href="javascript:void" id="showkacatikus" title="Show Search"><i class="material-icons"></i></a>
<div class="header2 section" id="header2"><div class="widget Header" data-version="1" id="Header1">
<div id="header-inner">
<h1 style="text-indent:-9999px;margin:0 0 0 0;padding:0 0 0 0;height:0px;">
(Editor) Anzrosone
</h1>
<a href="http://anzrosone.blogspot.co.id/" style="display: block">
<img alt="(Editor) Anzrosone" height="61px; " id="Header1_headerimg" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXqNFTmMewHU8pMUK2d52B_PRDTYokeiALXrzn3zOvkJSVRhh8xZ959AAUMtDww_duf8QT3f22sw764yYSfN2F1Rcef3H6Dg7wycPgOL56dEKpWZzrRSnvRBXuPTIHl8XiZK2u2Y5Y8cI/s1600/JalanTikus.png" style="display: block" width="298px; ">
</a>
</div>
</div></div>
<div id="menu-wrapper">
<div id="jtheadermenu">
<li><a href="#" itemprop="url" title="Pasang Iklan"><span itemprop="name">Pasang Iklan</span></a></li>
<li><a href="#" itemprop="url" title="Hubungi Kami"><span itemprop="name">Hubungi Kami</span></a></li>
<li><a href="#" itemprop="url" title="Tentang Kami"><span itemprop="name">Tentang Kami</span></a></li>
<li><a href="#" itemprop="url" title="Kerjasama"><span itemprop="name">Kerjasama</span></a></li>
</div>
<div id="navigation">
<ul>
<li><a class="blanter-nav" href="#" itemprop="url" title="Apps"><span itemprop="name">Apps</span></a>
<div class="mega-wrapper"><div class="megamenu">
<script src="https://www.idblanter.com/feeds/posts/default/-/Template?orderby=updated&amp;alt=json-in-script&amp;callback=jalanblanter" type="text/javascript"></script><ul class="taglabel"><li class="clearfix"><a href="https://www.idblanter.com/2017/06/masign-andromeda-responsive-blogger-template.html"><img alt="Masign Andromeda Responsive Material Design Blogger Template" title="Masign Andromeda Responsive Material Design Blogger Template" class="tagpost_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcqPbwDjzsu8bT33lK88TFNri9dLramzNUnXNrTUkbmdELNrZzAod24f2RoRqbGiV7gxfvI5GFMLmbIDsyKk8onSrEnDZ_xvXM5Rwhqy1D7UrY_5f2uFMgW3WmPYcCqV76ZFs0kUVyws8/w215-h150/Masign+Andromeda.png"></a><a href="https://www.idblanter.com/2017/06/masign-andromeda-responsive-blogger-template.html" title="Masign Andromeda Responsive Material Design Blogger Template">Masign Andromeda Responsive Material Design Blogger Template</a><br><br></li><li class="clearfix"><a href="https://www.idblanter.com/2017/08/blanter-octa-responsive-blogger-template.html"><img alt="Blanter Octa Responsive Blogger Template with Messenger Emoji" title="Blanter Octa Responsive Blogger Template with Messenger Emoji" class="tagpost_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7AQXIrtXSowWIXefaWIexxNpJ9kM12Fu44ZOnaoB-lMDkRl7P3m7CtXL-vktNrZZhX35s2ESoeFk2WLLvfGa8tyQnUL5ZRSxgrs_rOMvf6vGQlWkvGbTrWj7t9qKeEtFSXcSvfWYRSVQ/w215-h150/Blanter+Octa.png"></a><a href="https://www.idblanter.com/2017/08/blanter-octa-responsive-blogger-template.html" title="Blanter Octa Responsive Blogger Template with Messenger Emoji">Blanter Octa Responsive Blogger Template with Messenger Emoji</a><br><br></li><li class="clearfix"><a href="https://www.idblanter.com/2017/02/masign-magz-premium-responsive-blogger-template.html"><img alt="Masign Magz Premium Material Design Colored Blogger Template" title="Masign Magz Premium Material Design Colored Blogger Template" class="tagpost_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOkLkTi_4RO77_tRDxOPlJo1WhAoIG0hu649KH63G4200UJ3So9Jn5NomZuSplAs3-KdSDrSHz0Q6Z0HhT2SM52c9nZxvx3ZkGbJWa6WyuAD3TLLaU7ZajzaaI9vp-nCRWtYlzr8h2ajE/w215-h150/Masign+Magz.png"></a><a href="https://www.idblanter.com/2017/02/masign-magz-premium-responsive-blogger-template.html" title="Masign Magz Premium Material Design Colored Blogger Template">Masign Magz Premium Material Design Colored Blogger Template</a><br><br></li><li class="clearfix"><a href="https://www.idblanter.com/2018/02/blanter-swift-responsive-blogger-template.html"><img alt="Blanter Swift Responsive Fast Load Blogger Template" title="Blanter Swift Responsive Fast Load Blogger Template" class="tagpost_thumb" src="https://2.bp.blogspot.com/-g0fYA8eywXI/WofJW0ZkYzI/AAAAAAAAJdg/DvAZe49i_5wKn462PKj6VEUjCKAsvUkEwCLcBGAs/w215-h150/Blanter%2BSwift%2BBlogger%2BTheme.png"></a><a href="https://www.idblanter.com/2018/02/blanter-swift-responsive-blogger-template.html" title="Blanter Swift Responsive Fast Load Blogger Template">Blanter Swift Responsive Fast Load Blogger Template</a><br><br></li><li class="clearfix"><a href="https://www.idblanter.com/2018/02/masign-alpha-premium-blogger-template.html"><img alt="Masign Alpha Premium Special Material Design Blogger Template" title="Masign Alpha Premium Special Material Design Blogger Template" class="tagpost_thumb" src="https://1.bp.blogspot.com/-blXrVmBIqMc/WnZHs1cGaYI/AAAAAAAAJH0/iZO5alJMrb076hAE5t-SxkDZSwpSKFF3ACLcBGAs/w215-h150/Masign%2BAlpha%2BTheme.png"></a><a href="https://www.idblanter.com/2018/02/masign-alpha-premium-blogger-template.html" title="Masign Alpha Premium Special Material Design Blogger Template">Masign Alpha Premium Special Material Design Blogger Template</a><br><br></li><li class="clearfix"><a href="https://www.idblanter.com/2017/07/masign-clean-premium-responsive-blogger-template.html"><img alt="Masign Clean Premium Material Design Blogger Template" title="Masign Clean Premium Material Design Blogger Template" class="tagpost_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLXf-8Hp-A5ZSfcV6VlSBDS0d0PaubksTXtAgPaXFGHHi6TSJTXH_iz60y2xBs3EV31Ggg6-5x-TBcfX6T4r86afEXl5vAGT2O98Pl7A5oaJg1QtVBDh7RQT7R_0VgmSw7A51F3gkCk18/w215-h150/Masign+Clean+Blogger+Template.png"></a><a href="https://www.idblanter.com/2017/07/masign-clean-premium-responsive-blogger-template.html" title="Masign Clean Premium Material Design Blogger Template">Masign Clean Premium Material Design Blogger Template</a><br><br></li><li class="clearfix"><a href="https://www.idblanter.com/2017/11/blanter-nova-responsive-blogger-template.html"><img alt="Blanter Nova Responsive Blogger Template" title="Blanter Nova Responsive Blogger Template" class="tagpost_thumb" src="https://2.bp.blogspot.com/-I4WpFJmbSmQ/Who9ItsfqpI/AAAAAAAAH0c/DwfPkLQdnwobsvTvJSXuJx8d6Uf0SUCfQCLcBGAs/w215-h150/Blanter%2BNova%2BTemplates.png"></a><a href="https://www.idblanter.com/2017/11/blanter-nova-responsive-blogger-template.html" title="Blanter Nova Responsive Blogger Template">Blanter Nova Responsive Blogger Template</a><br><br></li><li class="clearfix"><a href="https://www.idblanter.com/2017/08/blanter-premium-safelink-blogger-template.html"><img alt="Blanter Premium Safelink Blogger Template With Material Design" title="Blanter Premium Safelink Blogger Template With Material Design" class="tagpost_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFhjhK0Hkf2_9yEVc03DLFKgHXEJgr2_QKp9zBAr2vugI-koBsLupg2ICaNzHCnMaftONp6XlZBmiwoFJ0aFd6uVp-CoxoyG6YQsgOqod-WiDr6I84JXUG9c8S9MC_BXmwnJQrmXJUcPM/w215-h150/BlanterSafelink.png"></a><a href="https://www.idblanter.com/2017/08/blanter-premium-safelink-blogger-template.html" title="Blanter Premium Safelink Blogger Template With Material Design">Blanter Premium Safelink Blogger Template With Material Design</a><br><br></li><li class="clearfix"><a href="https://www.idblanter.com/2015/04/membuat-safelink-sendiri-di-blog.html"><img alt="Cara Membuat Safelink Sendiri Menggunakan Blogger" title="Cara Membuat Safelink Sendiri Menggunakan Blogger" class="tagpost_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_z4E5C5MyWV5xZp2p3VcCeQIExGcok7JEHfq7UJ_gK2R0BxMl2vix7xrLddMVaT0jl67QgJj0I7kNi7xWv0esXAwL6w4mNFVg8VuKAHCjuAIEcOyofwcfro4tMHWO-z4s8O3daqylRhc/w215-h150/STRATEGI+Safelink.png"></a><a href="https://www.idblanter.com/2015/04/membuat-safelink-sendiri-di-blog.html" title="Cara Membuat Safelink Sendiri Menggunakan Blogger">Cara Membuat Safelink Sendiri Menggunakan Blogger</a><br><br></li><li class="clearfix"><a href="https://www.idblanter.com/2016/04/magna-one-premium-blogger-template.html"><img alt="Magna One Premium Responsive Blogger Template" title="Magna One Premium Responsive Blogger Template" class="tagpost_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh8HRcLacrVGAvrRHymz9ObqKh2lhZsZY2Z8RwgNPlkRqL4lCAMxeToJsbhEgHYtjZUluk7OoD4_ZA1CvLihgHBt5M93JdMGIgCj6hZGG5AY-UBsIZz8lT4gR4gBLE4U_bX9F64f2Xvk0/w215-h150/Magna+One+Premium.png"></a><a href="https://www.idblanter.com/2016/04/magna-one-premium-blogger-template.html" title="Magna One Premium Responsive Blogger Template">Magna One Premium Responsive Blogger Template</a><br><br></li></ul>
</div></div></li>
<li><a class="blanter-nav" href="#" itemprop="url" title="Games"><span itemprop="name">Games</span></a>
<div class="mega-wrapper"><div class="megamenu">
<script src="https://askblanter.blogspot.com/feeds/posts/default/-/Game?orderby=updated&amp;alt=json-in-script&amp;callback=jalanblanter" type="text/javascript"></script><ul class="taglabel"><li class="clearfix"><a href="https://askblanter.blogspot.com/2017/11/aov-arena-of-valor-blanter-nova.html"><img alt="AOV Arena Of Valor Blanter Nova" title="AOV Arena Of Valor Blanter Nova" class="tagpost_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghrrjr4NAuDANoXCKznBifbBcw1TBYU1ZDO4XWN6NTPWIohoWD6BZMP6Da0IQspKsNEVsuBGfiOR9Mc9UHOsY0ZSvMvQzBjP_skC-F-ATxgQKRzEl9glLLCqbf5oEFYq_FfseVC2g1tm4/w215-h150/AOV.jpg"></a><a href="https://askblanter.blogspot.com/2017/11/aov-arena-of-valor-blanter-nova.html" title="AOV Arena Of Valor Blanter Nova">AOV Arena Of Valor Blanter Nova</a><br><br></li><li class="clearfix"><a href="https://askblanter.blogspot.com/2017/11/mobile-legends-bang-bang-blanter-nova.html"><img alt="Mobile Legends Bang Bang Blanter Nova" title="Mobile Legends Bang Bang Blanter Nova" class="tagpost_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtVMEW1bMa6-wCRftvHjl72ihcOFKfZr0NfUbdVGmLR_kjLto9X-MQa4VKeyWDVVbms9ZHXmhdnkSsqQADzDniBClbB2MThIyVP8BAeDnelO7N-UazYvueDFWb7mWMCOKv_y1_ITqQYhU/w215-h150/MobileLegends.jpg"></a><a href="https://askblanter.blogspot.com/2017/11/mobile-legends-bang-bang-blanter-nova.html" title="Mobile Legends Bang Bang Blanter Nova">Mobile Legends Bang Bang Blanter Nova</a><br><br></li><li class="clearfix"><a href="https://askblanter.blogspot.com/2017/11/diao-chan-arena-of-valor.html"><img alt="Diao Chan Arena Of Valor" title="Diao Chan Arena Of Valor" class="tagpost_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-E2mYfNlzmbF_IRgvZ9AIsmg6YJI60lPQ0PFBFkL_qnjChQ0-34Bu8i8gzCl2ugPW82Kw7vuQcNM3mSXQsVjiQKJhJ-9AjopkvTgZxs217GWWaDJR6hmz_K4KcEhZaIJfs-f2ZnFueiSv/w215-h150/Diao+Chan.jpg"></a><a href="https://askblanter.blogspot.com/2017/11/diao-chan-arena-of-valor.html" title="Diao Chan Arena Of Valor">Diao Chan Arena Of Valor</a><br><br></li><li class="clearfix"><a href="https://askblanter.blogspot.com/2017/11/freya-mobile-legends-bang-bang.html"><img alt="Freya Mobile Legends Bang Bang" title="Freya Mobile Legends Bang Bang" class="tagpost_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQj5y7wFji_fKM-sQ4oqqOrXPZTRu3N8jtYmixwdxuWxtW1vfHr6zX_OI6ShjMWz1L-MDH_NIoFaSnkcYCkAbiywhpfG7VM20b0_Fa1s_J_CDSHkZqkybZfrBIm1Y9UVUJvXqrAhI6dL9v/w215-h150/Freya.jpg"></a><a href="https://askblanter.blogspot.com/2017/11/freya-mobile-legends-bang-bang.html" title="Freya Mobile Legends Bang Bang">Freya Mobile Legends Bang Bang</a><br><br></li><li class="clearfix"><a href="https://askblanter.blogspot.com/2017/11/diao-chan-crystal-of-lotus-arena-of.html"><img alt="Diao Chan The Crystal Of Lotus Arena Of Valor" title="Diao Chan The Crystal Of Lotus Arena Of Valor" class="tagpost_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgInuj0WYln1iKzqmAHMg_jhDpM0lvfIjC8yjIYoJcwyzWXr0eTn3NpOBDmQvNj-mUCb1u5qla6bT4dp1TJRtj974QzpvqSohXQfrrfx65tVfqdav2RZrOBZZFy7GR9xX0FBAQB4QpxJAfe/w215-h150/Diao+Chan+The+Crystal+Lotus.jpg"></a><a href="https://askblanter.blogspot.com/2017/11/diao-chan-crystal-of-lotus-arena-of.html" title="Diao Chan The Crystal Of Lotus Arena Of Valor">Diao Chan The Crystal Of Lotus Arena Of Valor</a><br><br></li><li class="clearfix"><a href="https://askblanter.blogspot.com/2017/11/rafaela-mobile-legends-bang-bang.html"><img alt="Rafaela Mobile Legends Bang Bang" title="Rafaela Mobile Legends Bang Bang" class="tagpost_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9ZUy9oI3UNA9NUhwkJQxal72UwmhS4qX94y2pkBMfyYdn4hToj7OeNwyU4hvBxmas5ZIph4565anluvVQV3Vi-jQkbd5UiNFS-5rJDCOsGPKB-CcKX7tKpLMvYdPHFBLHMiy_emWbxMC1/w215-h150/Rafaela.jpg"></a><a href="https://askblanter.blogspot.com/2017/11/rafaela-mobile-legends-bang-bang.html" title="Rafaela Mobile Legends Bang Bang">Rafaela Mobile Legends Bang Bang</a><br><br></li><li class="clearfix"><a href="https://askblanter.blogspot.com/2017/11/ilumia-arena-of-valor.html"><img alt="Ilumia Arena Of Valor" title="Ilumia Arena Of Valor" class="tagpost_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3AOT7kdukbUL8BBrlg2Pyu7V17cc0xwr-1DEtVPmANoeyNZqxoDxpSlWG5kZEPu4x6-mNWy_Z_H2gz3MYnCeMSxBhvpGGaKngYctQXnmqPi3sNivkGDTPej2NubqYDpz6_uceCaIUhI0n/w215-h150/Ilumia.jpg"></a><a href="https://askblanter.blogspot.com/2017/11/ilumia-arena-of-valor.html" title="Ilumia Arena Of Valor">Ilumia Arena Of Valor</a><br><br></li><li class="clearfix"><a href="https://askblanter.blogspot.com/2017/11/fanny-mobile-legends-bang-bang.html"><img alt="Fanny Mobile Legends Bang Bang" title="Fanny Mobile Legends Bang Bang" class="tagpost_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3vXIJWntdsXBfiCs-dH7upYxXChyphenhyphenblnxvct5aCDq7l8joXDOYV8aJ1iVtV1zIpNq4sbT_IsObhKIAg0dAXlHBa5P31rG3fCl6Fli69tiERr5grLhGTdzByU2xeBTlheeHrY5Im-x36NGw/w215-h150/Fanny.jpg"></a><a href="https://askblanter.blogspot.com/2017/11/fanny-mobile-legends-bang-bang.html" title="Fanny Mobile Legends Bang Bang">Fanny Mobile Legends Bang Bang</a><br><br></li><li class="clearfix"><a href="https://askblanter.blogspot.com/2017/11/kagura-cherry-witch-mobile-legends-with.html"><img alt="Kagura Cherry Witch Mobile Legends with Blanter Nova" title="Kagura Cherry Witch Mobile Legends with Blanter Nova" class="tagpost_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsS4lZ6AeoDgPlXa1HnXGRd5rIAPCKq6tqx0TkvRWtGAO9mt9o8ZDhSFaQ-NcAtwdV_jNebNCBNRgZ0T0b1KMO1Cb08CaO7Nx4ZZ7M-RFhMJQj6KV7KWnfhEHK5cvoWRaqvorankBkZYAE/w215-h150/Kagura+Cherry+Witch.jpg"></a><a href="https://askblanter.blogspot.com/2017/11/kagura-cherry-witch-mobile-legends-with.html" title="Kagura Cherry Witch Mobile Legends with Blanter Nova">Kagura Cherry Witch Mobile Legends with Blanter Nova</a><br><br></li>
</ul></div></div></li>
<li><a class="blanter-nav" href="#" itemprop="url" title="Tips &amp; Trik"><span itemprop="name">Tips &amp; Trik</span></a>
<div class="mega-wrapper"><div class="megamenu">
<script src="https://www.idblanter.com/feeds/posts/default/-/Tutorial?orderby=updated&amp;alt=json-in-script&amp;callback=jalanblanter" type="text/javascript"></script><ul class="taglabel"><li class="clearfix"><a href="https://www.idblanter.com/2018/04/membuat-menu-navigasi-ala-jalan-tikus.html"><img alt="Cara Membuat Menu Navigasi Ala Jalan Tikus di Blog" title="Cara Membuat Menu Navigasi Ala Jalan Tikus di Blog" class="tagpost_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjq51etSoENLgDAiBwLugE-_CM5qU560G1UskE6Qwk2AhJYmzWRSxVBMs8wgDBkM_4ii5bPWx_2hKx3vgXqyaFwxPkw5St9pRwxnjIkuUpSvYsidpK31fsNf7THQ2MzXkPvWPgIt7La5o/w215-h150/Menu+Ala+Jalan+Tikus.png"></a><a href="https://www.idblanter.com/2018/04/membuat-menu-navigasi-ala-jalan-tikus.html" title="Cara Membuat Menu Navigasi Ala Jalan Tikus di Blog">Cara Membuat Menu Navigasi Ala Jalan Tikus di Blog</a><br><br></li><li class="clearfix"><a href="https://www.idblanter.com/2017/12/membuat-pagination-di-postingan-blog.html"><img alt="Cara Membuat Pagination Dengan Fungsi Refresh di Postingan Blog" title="Cara Membuat Pagination Dengan Fungsi Refresh di Postingan Blog" class="tagpost_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBA7lIKZtZW-O_rxSNx8eBprB9VGWTquOaQ5kOLxJXPQVZNRFu2JDwSe0BCpTQilBxWLSpXs-3PB-5_SP0gbCjIuhY7OryFTOdCoOcLeaZreHlPiPqzaeTwOBT1fOPZQauQG0aCgzvLWg/w215-h150/Blogger+Pagenation+Post.png"></a><a href="https://www.idblanter.com/2017/12/membuat-pagination-di-postingan-blog.html" title="Cara Membuat Pagination Dengan Fungsi Refresh di Postingan Blog">Cara Membuat Pagination Dengan Fungsi Refresh di Postingan Blog</a><br><br></li><li class="clearfix"><a href="https://www.idblanter.com/2017/12/membuat-material-design-recent-post-by-label.html"><img alt="Membuat Material Design Recent Post Berdasarkan Label di Blog" title="Membuat Material Design Recent Post Berdasarkan Label di Blog" class="tagpost_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge02XbQIAd6Qq0MxTJ1ysmFuN2ylPsVZcPz5kSPuBErz9D1k3NTLLIF3pe3MprqNJLIWt_7-HGrxM1K1oyILVfyvAnYl1jj-rBYePW9Za9dODA7onWtc_XM3sUHQRRbTVRue7PlTrq0lY/w215-h150/Material+Design+Recent+Post.png"></a><a href="https://www.idblanter.com/2017/12/membuat-material-design-recent-post-by-label.html" title="Membuat Material Design Recent Post Berdasarkan Label di Blog">Membuat Material Design Recent Post Berdasarkan Label di Blog</a><br><br></li><li class="clearfix"><a href="https://www.idblanter.com/2017/10/memasang-widget-popular-post-di-bawah-post.html"><img alt="Cara Memasang Widget Popular Post di bawah Postingan" title="Cara Memasang Widget Popular Post di bawah Postingan" class="tagpost_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNMRhT97peAG0HQaegWjV38u64j4MDTE8v1o_qlJyJPohrocU6rC4U4VHOZWB9yfJZIOPuT-7XaMnQO5NBIhUg8TsWPiEQuCE0br1yIPfVoajcd6WvsjoHF9PwEoK8jglVH707UrCGSco/w215-h150/PopularPost+Special.png"></a><a href="https://www.idblanter.com/2017/10/memasang-widget-popular-post-di-bawah-post.html" title="Cara Memasang Widget Popular Post di bawah Postingan">Cara Memasang Widget Popular Post di bawah Postingan</a><br><br></li><li class="clearfix"><a href="https://www.idblanter.com/2017/01/membuat-autoload-page-navigation-on-scroll.html"><img alt="Membuat Autoload Page Navigation on Scroll di Blog" title="Membuat Autoload Page Navigation on Scroll di Blog" class="tagpost_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHIQhJyO7kV16GU9sWiUHeyJHBG1FSSlfF_x_ingcgVfsWLTzwIXXAwgmcc77G_hyphenhyphencVub7b-Vu5ioLwwQhn7E6BF7BWItMKz9DYmSZV3YY7U_qtI1s_enMqqqbLygm8eiXpywVSRS0pTM/w215-h150/Autoload+Post.png"></a><a href="https://www.idblanter.com/2017/01/membuat-autoload-page-navigation-on-scroll.html" title="Membuat Autoload Page Navigation on Scroll di Blog">Membuat Autoload Page Navigation on Scroll di Blog</a><br><br></li><li class="clearfix"><a href="https://www.idblanter.com/2017/08/membuat-material-design-dialog-box.html"><img alt="Membuat Material Design Dialog Box dengan jQuery di Blog" title="Membuat Material Design Dialog Box dengan jQuery di Blog" class="tagpost_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWr2rmZ-cGeWdcm61eyapRolagQduim3LFOvkJh0RsEeZe2RIwWFLZ_9y1RDG4r-fYQqHpuipeUsJ4vgoSygG8zru6Ftj9NJ-IX5ywwxfbYy_EVD47dvX9Kka3ni4v4YuilpoymlHOv1I/w215-h150/Material+Design+Dialog+Box.png"></a><a href="https://www.idblanter.com/2017/08/membuat-material-design-dialog-box.html" title="Membuat Material Design Dialog Box dengan jQuery di Blog">Membuat Material Design Dialog Box dengan jQuery di Blog</a><br><br></li><li class="clearfix"><a href="https://www.idblanter.com/2016/05/membuat-material-design-menu-navigation.html"><img alt="Membuat Material Design Menu Navigation di Blog" title="Membuat Material Design Menu Navigation di Blog" class="tagpost_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVp0TnWzoWDnW6q-qJS5jTL8MU0epAnO7q7z5MzuF041CugfP-ppe7DpXPLgyHZzn0W2ZpoJLg43kwHrt_ZBgiklnAHTqjojJnhyWmHg9CSrlxvuk6drwqjmCWqW07h_FVHotYP8O7CuA/w215-h150/Material+Design+Menu+Navigation.png"></a><a href="https://www.idblanter.com/2016/05/membuat-material-design-menu-navigation.html" title="Membuat Material Design Menu Navigation di Blog">Membuat Material Design Menu Navigation di Blog</a><br><br></li><li class="clearfix"><a href="https://www.idblanter.com/2017/06/membuat-quote-box-yang-berubah-warna.html"><img alt="Cara Membuat Quote Box Yang Berubah-ubah Warna di Blog" title="Cara Membuat Quote Box Yang Berubah-ubah Warna di Blog" class="tagpost_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7CpfmRFu0cmGx007x_XZHeBwnQFpHToBezRqaFEdQ6mq3J3XqzWex_4owk8sXoQkAhA8lkEhKh9_WOIxS1PvIZimUgqkCt_TRhlWxVwsYkqNhWR8Ie0vJ-_03Nuj9K3G20jIxRin9KEg/w215-h150/Quote+Box+Unik.png"></a><a href="https://www.idblanter.com/2017/06/membuat-quote-box-yang-berubah-warna.html" title="Cara Membuat Quote Box Yang Berubah-ubah Warna di Blog">Cara Membuat Quote Box Yang Berubah-ubah Warna di Blog</a><br><br></li><li class="clearfix"><a href="https://www.idblanter.com/2017/05/membuat-notifikasi-show-hide-dengan-animasi.html"><img alt="Membuat Notifikasi Show Hide Melayang dengan Animasi Keyframe" title="Membuat Notifikasi Show Hide Melayang dengan Animasi Keyframe" class="tagpost_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqq0Fi70C9PC9elves_su9pPzHp_MVmArVRyKTp-fABNTzjLNzkeKcRBlXX9rEIw0wCFMi6oqjNHHReGM8BLGFk8ltL75rSxUm1aiymV721bhQQOiovrQB6_SlLAtbLkBvjBwaRlJ5jb8/w215-h150/NotifikasiKeyframe.png"></a><a href="https://www.idblanter.com/2017/05/membuat-notifikasi-show-hide-dengan-animasi.html" title="Membuat Notifikasi Show Hide Melayang dengan Animasi Keyframe">Membuat Notifikasi Show Hide Melayang dengan Animasi Keyframe</a><br><br></li><li class="clearfix"><a href="https://www.idblanter.com/2017/03/membuat-related-post-material-design.html"><img alt="Cara Membuat Related Post Material Design di Blog" title="Cara Membuat Related Post Material Design di Blog" class="tagpost_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0-M03J48Wm_Ol9kjGw2o14xsTbUbjzS4GhIUKK8xZofmNtbSmZhIWD6lqgJFTPtj30YizrydLpoZfZc83SAqEdfHsuO07crZQ7W8MRK7Aw4x9-ZEodn4NVgPGONJiFschJcVL62Q13PE/w215-h150/RelatedPostMaterialDesign.png"></a><a href="https://www.idblanter.com/2017/03/membuat-related-post-material-design.html" title="Cara Membuat Related Post Material Design di Blog">Cara Membuat Related Post Material Design di Blog</a><br><br></li></ul>
</div></div></li>
<li><a class="blanter-nav" href="#" itemprop="url" title="Gadget"><span itemprop="name">Gadget</span></a></li>
<li><a class="blanter-nav" href="#" itemprop="url" title="Gokil"><span itemprop="name">Gokil</span></a></li>
<li><a class="blanter-nav" href="#" itemprop="url" title="Tech News"><span itemprop="name">Tech News</span></a></li>
</ul>
</div>
<div id="menu-kiri">
<a class="blanter" href="javascript:;" id="showsearch" target="_blank" title="Show Search"><i class="material-icons"></i></a>
<a class="blanter" href="javascript:;" id="showmenu" target="_blank" title="Show More"><i class="material-icons"></i></a>
<a class="blanter" href="https://plus.google.com/+RhinokageRio" itemprop="sameAs" target="_blank" title="Google Plus"><i aria-hidden="true" class="fa fa-google-plus"></i></a>
<a class="blanter" href="https://twitter.com/RhinokageRio" itemprop="sameAs" target="_blank" title="Twitter"><i aria-hidden="true" class="fa fa-twitter"></i></a>
<a class="blanter" href="https://www.facebook.com/DuniaBlanter" itemprop="sameAs" target="_blank" title="Facebook"><i aria-hidden="true" class="fa fa-facebook"></i></a>
</div>
</div>
<div id="search-blanter" itemprop="mainEntity" itemscope="itemscope" itemtype="http://schema.org/WebSite">
<meta content="http://anzrosone.blogspot.co.id/" itemprop="url">
<form action="/search" id="bsearchbox" itemprop="potentialAction" itemscope="itemscope" itemtype="http://schema.org/SearchAction" method="get">
<meta content="/search?q={q}" itemprop="target">
<input id="searchteks" itemprop="query-input" name="q" placeholder="Cari Tips, Apps dan Games..." required="required" type="text" value="">
<button class="bsearchbtn" type="submit">Cari</button>
</form></div>
</header>

Gantilah berapa url dengan url blog sobat, kalian dapat melihat contoh dibawah ini.

CH MIKO

6/29/18

Membuat Menu Navigasi Mirip Jalan Tikus

Statistics

Trending Posts

Labels

Partner

Recent Posts

Formulir Kontak

Featured

6/29/18

Membuat Menu Navigasi Mirip Jalan Tikus

Newsletter

Statistics

Trending Posts

Labels

Partner

Recent Posts

Formulir Kontak

Featured