Cara Membuat Menu Navigasi Untuk Blog

Menu navigasi sendiri berperan penting dalam sebuah blog atau website, dengan adanya Menu Navigasi visitor yang berkunjung di blog lebih dengan mudah

TechPapuaID - Sudah sekitar hampir 8 bulan lamanya tidak memposting artikel di blog kesayangan ini, rasanya seperti admin kehilangan 50% jiwa dan raga admin sebagai penulis blog. Hobi sebagai penulis harus admin urungkan lantaran admin sendiri sibuk di dunia nyata karena adanya pekerjaan yang harus admin kerjakan.

Karena ada sedikit kelonggaran warga admin sempatkan untuk membuka blog dan membaca komen-komen yang sudah kalian berikan pada salah satu artikel blog ini. Dan ternyata ada banyak sekali yang merequest tutorial-tutorial blog, dan yang menjadi fokus admin adalah ada salah satu komentar yang ingin di buatkan bagaimana caranya membuat menu Navigasi pada sebuah blog. Admin tidak terlalu banyak mengetahui cara membuatnya maka dari itu admin mengambil beberapa code dari rekan-rekan sesama blogger dan ini di khususkan hanya untuk pengguna viomagz, untuk template di luar viomagz silahkan coba sendiri work apa tidaknya.

Sebelum kita melangkah ke tutorial cara membuatnya alangkah baiknya sobat mengetahui sedikit kegunaan dan manfaat menu navigasi pada blog atau website

Apa Sih Kegunaan Menu Navigasi?

Menu navigasi sendiri berperan penting dalam sebuah blog atau website, dengan adanya Menu Navigasi visitor yang berkunjung di blog lebih dengan mudah menjelajah isi dalam blog atau website sobat, dengan cara itu admin yakin visitor yang datang hari ini akan kembali lagi karena blog atau website sobat dapat di gunakan dengan gampang untuk mencari suatu kategori atau artikel yang visitor cari. Sebenarnya ada juga cara lain agar visior lebih mudah mencari artikel-artikel yang mereka butuhkan, salah satunya adalah sitemap dan jika sobat belum menemukan sitemap yang cocok untuk blog sobat, jangan sungkan untuk mampir di artikel admin mengenai sitemap responsive untuk blogger atau sitemap responsive ala arlina design disitu banyak code-code yang bisa sobat ambil untuk membuat sitemap sobat.

Oke kembali ke pembahasan pada artikel ini. Sekarang waktunya untuk menuju ke Cara Membuat Menu Navigasi Untuk Blog. Agar tidak terjadi eror pada penerapannya admin harap sobat membaca dan pahami betul step by step yang sudah admin buat pada artikel kali ini, admin akan menggunakan bahasa yang gampang di mengerti dan tidak berbelit-belit agar sobat lebih memahami apa yang admin maksud.

Langkah awal yang harus sobat lakukan adalan login terlebih dahulu ke dashboard blogger sobat masing-masing dan menuju ke Theme dan edit HTML. Untuk pengguna smartphone admin sarankan untuk mendownload terlebih dahulu aplikasi QuickEdit agar lebih memudahkan sobat untuk mengedit HTML nya silahkan sobat download di playstore atau appstore terlebih dahulu dan jangan lupa untuk backup dan download template untuk mengedit.

Next jika semua sudah silahkan sobat cari code <nav id='cssmenu'> s/d </nav> jika sudah dapat silahkan sobat hapus code tersebut beserta isinya dan ganti dengan code dibawah ini

<!-- Igniel Nav Mobile -->
<div class='darkshadow'/>
<nav class=';' id='nav-wrapper' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
<ul>
<li class='first'>
<a href='/'>
<span itemprop='name'>
<svg height='24' viewBox='0 0 24 24' width='24'>
<path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z' fill='#000'/>
</svg>Home</span></a></li>

<li><a class='nav-submenu' href='javascript:;' title='Navigasi'>
<span>
<svg height='24' viewBox='0 0 24 24' width='24'>
<path d='M5.41,21L6.12,17H2.12L2.47,15H6.47L7.53,9H3.53L3.88,7H7.88L8.59,3H10.59L9.88,7H15.88L16.59,3H18.59L17.88,7H21.88L21.53,9H17.53L16.47,15H20.47L20.12,17H16.12L15.41,21H13.41L14.12,17H8.12L7.41,21H5.41M9.53,9L8.47,15H14.47L15.53,9H9.53Z' fill='#000'/>
</svg>Menu<span class='new'>Hot</span>
</span>
<svg class='down' height='24' viewBox='0 0 24 24' width='24'>
<path d='M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4M12,10.5A1.5,1.5 0 0,1 13.5,12A1.5,1.5 0 0,1 12,13.5A1.5,1.5 0 0,1 10.5,12A1.5,1.5 0 0,1 12,10.5M7.5,10.5A1.5,1.5 0 0,1 9,12A1.5,1.5 0 0,1 7.5,13.5A1.5,1.5 0 0,1 6,12A1.5,1.5 0 0,1 7.5,10.5M16.5,10.5A1.5,1.5 0 0,1 18,12A1.5,1.5 0 0,1 16.5,13.5A1.5,1.5 0 0,1 15,12A1.5,1.5 0 0,1 16.5,10.5ZZ'/>
</svg>
</a>
<ul class='nav-sub'>
<li><a href='#' itemprop='url'>
<span itemprop='name'>
<svg class='tekn1' viewBox='0 0 24 24'><path d='M14,13H9.95A1,1 0 0,0 8.95,14A1,1 0 0,0 9.95,15H14A1,1 0 0,0 15,14A1,1 0 0,0 14,13M9.95,10H12.55A1,1 0 0,0 13.55,9A1,1 0 0,0 12.55,8H9.95A1,1 0 0,0 8.95,9A1,1 0 0,0 9.95,10M16,9V10A1,1 0 0,0 17,11A1,1 0 0,1 18,12V15A3,3 0 0,1 15,18H9A3,3 0 0,1 6,15V8A3,3 0 0,1 9,5H13A3,3 0 0,1 16,8M20,2H4C2.89,2 2,2.89 2,4V20A2,2 0 0,0 4,22H20A2,2 0 0,0 22,20V4C22,2.89 21.1,2 20,2Z' fill='#000'/>
</svg>Sub Menu</span></a></li>

<li><a href='#' itemprop='url'>
<span itemprop='name'>
<svg class='tekn1' viewBox='0 0 24 24'><path d='M11,15H13V17H11V15M11,7H13V13H11V7M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20Z' fill='#000'/></svg>Sub Menu</span></a></li>

<li><a href='#' itemprop='url'><span itemprop='name'>
<svg class='tekn1' viewBox='0 0 24 24'><path d='M21,16V14L13,9V3.5A1.5,1.5 0 0,0 11.5,2A1.5,1.5 0 0,0 10,3.5V9L2,14V16L10,13.5V19L8,20.5V22L11.5,21L15,22V20.5L13,19V13.5L21,16Z' fill='#000'/>
</svg>Sub Menu</span></a></li>
</ul>
</li>

<li><a href='#' itemprop='url'><span itemprop='name'>
<svg style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M13,13H11V7H13M13,17H11V15H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z' fill='#000'/>
</svg>Menu</span></a></li>

<li><a href='#' itemprop='url'><span itemprop='name'>
<svg style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M12,3L1,9L12,15L21,10.09V17H23V9M5,13.18V17.18L12,21L19,17.18V13.18L12,17L5,13.18Z' fill='#37474F'/>
</svg>Menu</span></a></li>

<li><a href='#' itemprop='url'><span itemprop='name'>
<svg height='24' viewBox='0 0 24 24' width='24'><path d='M21,16V14L13,9V3.5A1.5,1.5 0 0,0 11.5,2A1.5,1.5 0 0,0 10,3.5V9L2,14V16L10,13.5V19L8,20.5V22L11.5,21L15,22V20.5L13,19V13.5L21,16Z' fill='#000'/>
</svg>Menu</span></a></li>

<li class='subs'>
<a href='#' rel='nofollow noopener' target='_blank' title='Ikuti Blog'>
<svg viewBox='0 0 24 24'>
<path d='M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M13,7H11V11H7V13H11V17H13V13H17V11H13V7Z'/>
</svg>
<span>FOLLOW</span>
</a>
</li>
<li class='footer'>
<a href='#' itemprop='url' title='Sitemap'>
<span itemprop='name'> Sitemap</span>
</a>
      - 
      <a href='#' itemprop='url' title='Disclaimer'>
<span itemprop='name'>Disclaimer</span>
</a>
      - 
      <a href='#' itemprop='url' title='Privacy Policy'>
<span itemprop='name'>Privacy</span>
</a>
<span class='social'>
<a class='fb' href='#' rel='nofollow noopener' target='_blank' title='Facebook'>
<svg viewBox='0 0 24 24'>
<path d='M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M18,5H15.5A3.5,3.5 0 0,0 12,8.5V11H10V14H12V21H15V14H18V11H15V9A1,1 0 0,1 16,8H18V5Z'/>
</svg>
</a>
<a class='instagram' href='#' rel='nofollow noopener' target='_blank' title='Instagram'>
<svg viewBox='0 0 24 24'>
<path d='M7.8,2H16.2C19.4,2 22,4.6 22,7.8V16.2A5.8,5.8 0 0,1 16.2,22H7.8C4.6,22 2,19.4 2,16.2V7.8A5.8,5.8 0 0,1 7.8,2M7.6,4A3.6,3.6 0 0,0 4,7.6V16.4C4,18.39 5.61,20 7.6,20H16.4A3.6,3.6 0 0,0 20,16.4V7.6C20,5.61 18.39,4 16.4,4H7.6M17.25,5.5A1.25,1.25 0 0,1 18.5,6.75A1.25,1.25 0 0,1 17.25,8A1.25,1.25 0 0,1 16,6.75A1.25,1.25 0 0,1 17.25,5.5M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z'/>
</svg>
</a>
<a class='codepen' href='#' rel='nofollow noopener' target='_blank' title='Codepen'>
<svg viewBox='0 0 24 24'>
<path d='M15.09,12L12,14.08V14.09L8.91,12L12,9.92V9.92L15.09,12M12,2C11.84,2 11.68,2.06 11.53,2.15L2.5,8.11C2.27,8.22 2.09,8.43 2,8.67V14.92C2,15.33 2,15.33 2.15,15.53L11.53,21.86C11.67,21.96 11.84,22 12,22C12.16,22 12.33,21.95 12.47,21.85L21.85,15.5C22,15.33 22,15.33 22,14.92V8.67C21.91,8.42 21.73,8.22 21.5,8.1L12.47,2.15C12.32,2.05 12.16,2 12,2M16.58,13L19.59,15.04L12.83,19.6V15.53L16.58,13M19.69,8.9L16.58,11L12.83,8.47V4.38L19.69,8.9M20.33,10.47V13.53L18.07,12L20.33,10.47M7.42,13L11.17,15.54V19.6L4.41,15.04L7.42,13M4.31,8.9L11.17,4.39V8.5L7.42,11L4.31,8.9M3.67,10.5L5.93,12L3.67,13.54V10.5Z'/>
</svg>
</a><a class='ccontact' href='#' rel='nofollow noopener' target='_blank' title='Contact'>
<svg viewBox='0 0 24 24'>
<path d='M22 6C22 4.9 21.1 4 20 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6M20 6L12 11L4 6H20M20 18H4V8L12 13L20 8V18Z'/>
</svg>
</a>
</span>
<span class='credit'>Copyright &#169; 2018 - 2020</span>
<span class='developer'>Theme by <cite>
<b>Nama Anda</b>
</cite>
</span>
</li>
</ul>
</nav>
<!-- Igniel Nav Mobile End -->
<!-- Igniel Button -->
<div id='head-mobile'/>
<div class='button' id='menu-button'>
<a arial-label='Menu' class='menu-toggle' href='javascript:;'>
<svg class='teknbtn' viewBox='0 0 24 24'>
<path d='M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z'/>
</svg>
<span class='mline1'/>
<span class='mline2'/>
<span class='mline3'/>
</a>
</div>
<!-- Igniel Button End -->
<nav id='cssmenu' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
<!-- Igniel Nav Dekstop -->
<ul><li><a href='#'>
<svg style='width:24px;height:24px;margin-right:2px;vertical-align:middle;' viewBox='0 0 24 24'><path d='M21,16V14L13,9V3.5A1.5,1.5 0 0,0 11.5,2A1.5,1.5 0 0,0 10,3.5V9L2,14V16L10,13.5V19L8,20.5V22L11.5,21L15,22V20.5L13,19V13.5L21,16Z' fill='#FFF'/>
</svg> Menu </a></li>

<li><a href='#'>
<svg style='width:24px;height:24px;margin-right:2px;vertical-align:middle;' viewBox='0 0 24 24'><path d='M21,16V14L13,9V3.5A1.5,1.5 0 0,0 11.5,2A1.5,1.5 0 0,0 10,3.5V9L2,14V16L10,13.5V19L8,20.5V22L11.5,21L15,22V20.5L13,19V13.5L21,16Z' fill='#FFF'/>
</svg> Menu</a></li>

<li><a href='#'>
<svg style='width:24px;height:24px;margin-right:2px;vertical-align:middle;' viewBox='0 0 24 24'><path d='M21,16V14L13,9V3.5A1.5,1.5 0 0,0 11.5,2A1.5,1.5 0 0,0 10,3.5V9L2,14V16L10,13.5V19L8,20.5V22L11.5,21L15,22V20.5L13,19V13.5L21,16Z' fill='#FFF'/></svg> Menu</a></li>

<li><a href='#'>
<svg style='width:24px;height:24px;margin-right:2px;vertical-align:middle;' viewBox='0 0 24 24'><path d='M21,16V14L13,9V3.5A1.5,1.5 0 0,0 11.5,2A1.5,1.5 0 0,0 10,3.5V9L2,14V16L10,13.5V19L8,20.5V22L11.5,21L15,22V20.5L13,19V13.5L21,16Z' fill='#FFF'/></svg> Menu</a></li>

<li><a href='#'>
<svg style='width:24px;height:24px;margin-right:2px;vertical-align:middle;' viewBox='0 0 24 24'><path d='M21,16V14L13,9V3.5A1.5,1.5 0 0,0 11.5,2A1.5,1.5 0 0,0 10,3.5V9L2,14V16L10,13.5V19L8,20.5V22L11.5,21L15,22V20.5L13,19V13.5L21,16Z' fill='#FFF'/></svg> Menu</a></li>
</ul>
<!-- Igniel Nav Dekstop end -->
</nav>

jika sobat sudah menghapus dan menggantinya dengan code di atas, langkah selanjutnya menambahkan CSS agar tampilannya teratur dan bagus, silahkan sobat cari code ]]></b:skin> atau </style> jika sudah dapat sobat ambil code dibawah ini dan letakkan tepat di atas code yang sudah admin sebut diatas

/* Igniel Navigasi */
.darkshadow{visibility:hidden;opacity:0;position:fixed;top:0;background:rgba(0,0,0,.59);left:0;right:0;bottom:0;margin:0;z-index:5;transition:all .4s ease-in-out}.darkshadow.open{visibility:visible;opacity:1}#nav-wrapper{font-size:13px;width:265px;position:fixed;z-index:5;top:0;overflow:hidden;left:0;background:#fff;-webkit-transition:.3s;-o-transition:.3s;transition:.3s;bottom:0;padding-top:15px;-webkit-transform:translateX(-290px);-ms-transform:translateX(-290px);transform:translateX(-290px);transition:all .5s ease}
#nav-wrapper:hover{overflow-y:auto} #nav-wrapper.open{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}#nav-wrapper ul{margin:0;padding:0;list-style:none}#nav-wrapper li{display:block;list-style:none;position:relative} #nav-wrapper li.first{background:#e1f5fe;border-radius:0 50px 50px 0;margin:0 20px 0 0;transition: all .5s ease;} #nav-wrapper>ul>li>a{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:10px 0 10px 24px;color:#333333;font-size:13px}
#nav-wrapper li a.nav-submenu{padding:10px 24px}
#nav-wrapper li ul.nav-sub{display:none}#nav-wrapper li li a{display:block;position:relative;padding-left:5em;line-height:40px;color: #000;}#nav-wrapper a:hover{color:#00B8FF;}#nav-wrapper svg.down{margin-right:0;margin-left:15px;display:block;-webkit-transition:all 0.4s ease;-o-transition:all 0.4s ease;transition:all 0.4s ease}
#nav-wrapper li.open svg.down{
-webkit-transform:rotate(90deg);
-ms-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(90deg)
} #nav-wrapper svg{height:24px;width:24px;margin-right:15px;overflow:hidden;opacity:.7;fill:currentColor}#nav-wrapper>ul>li:not(.colormode)>a>span:not(.new){-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-flex:1;-ms-flex:1 1;flex:1 1}#nav-wrapper>ul>li>a>span>span.new{background:#e1f5fe;color:#004c88;line-height:normal;margin-left:10px;font-size:8px;padding:3px 10px;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px}
.tekn1{width:22px;height:22px;vertical-align:middle;margin-right:4px}@media only screen and (max-width:480px){#nav-wrapper .profile img{width:24px;height:24px;margin-right:15px;margin-left:1px;border-radius:20px}}@media screen and (max-width:600px){#nav-wrapper .subs{display:flex;margin-left:24px;margin-top:10px}#nav-wrapper .subs a{font-size:11px;margin-right:10px;width:auto;height:auto;padding:5px 10px;margin-top:0;background-color:#28afdc;color:#fff;border-radius:20px}#nav-wrapper .subs svg{width:12px;height:12px;margin-right:3px;margin-top:-1px}#nav-wrapper .subs button{flex-grow:1;margin-top:0;width:auto;height:auto;padding:7px 10px;display:flex;align-items:center;justify-content:center;background-color:#657786;border-radius:20px;border:none;margin-right:23px;color:#fff;outline:0}#nav-wrapper li.footer a{font-size:11px;font-weight:400;color:#657786;display:inline-block;padding:0}#nav-wrapper .footer{display:block;margin-top:14px;margin-left:24px}#nav-wrapper .footer .social{display:flex;margin:7px 0}#nav-wrapper .footer .credit{display:block;color:#657786}#nav-wrapper .footer .developer{color:#657786}}@media screen and (max-width:800px){#nav-wrapper .subs{display:flex;margin-left:24px;margin-top:10px}.Profile .widget-content{margin:0;max-width:100%}#nav-wrapper .subs a{font-size:11px;margin-right:10px;width:auto;height:auto;padding:7px 10px;margin-top:0;background-color:#a1362a;color:#fff;border-radius:20px}#nav-wrapper .subs svg{width:12px;height:12px;margin-right:3px;margin-top:-1px}#nav-wrapper .subs button{flex-grow:1;margin-top:0;width:auto;height:auto;padding:7px 10px;display:flex;align-items:center;justify-content:center;background-color:#657786;border-radius:20px;border:none;margin-right:23px;color:#fff;outline:0}#nav-wrapper li.footer a{font-size:11px;font-weight:400;color:#657786;display:inline-block;padding:0}#nav-wrapper .footer{display:block;margin-top:14px;margin-left:24px}#nav-wrapper .footer .social{display:flex;margin:7px 0}#nav-wrapper .footer .credit{display:block;color:#657786}#nav-wrapper .footer .developer{color:#657786}}.teknbtn{fill:#fff;margin-top:-4px;display:none}@media screen and (max-width:800px){.teknbtn{fill:#fff;margin-top:-4px;display:block}}

jika semua sudah beres dan sobat melakukannya dengan benar maka kita akan melanjutkannya ke langkah terakhir dengan memasukan code dibawah ini tepat di atas code </body>

<script>
//<![CDATA[
var _0x8991=["\x6F\x70\x65\x6E","\x74\x6F\x67\x67\x6C\x65\x43\x6C\x61\x73\x73","\x23\x6E\x61\x76\x2D\x77\x72\x61\x70\x70\x65\x72\x2C\x20\x2E\x64\x61\x72\x6B\x73\x68\x61\x64\x6F\x77","\x63\x6C\x69\x63\x6B","\x2E\x6D\x65\x6E\x75\x2D\x74\x6F\x67\x67\x6C\x65","\x72\x65\x6D\x6F\x76\x65\x43\x6C\x61\x73\x73","\x23\x6E\x61\x76\x2D\x77\x72\x61\x70\x70\x65\x72\x2C\x2E\x64\x61\x72\x6B\x73\x68\x61\x64\x6F\x77","\x2E\x64\x61\x72\x6B\x73\x68\x61\x64\x6F\x77","\x65\x6C","\x6D\x75\x6C\x74\x69\x70\x6C\x65","\x2E\x6E\x61\x76\x2D\x73\x75\x62\x6D\x65\x6E\x75","\x66\x69\x6E\x64","\x64\x72\x6F\x70\x64\x6F\x77\x6E","\x6F\x6E","\x70\x72\x6F\x74\x6F\x74\x79\x70\x65","\x64\x61\x74\x61","\x6E\x65\x78\x74","\x73\x6C\x69\x64\x65\x54\x6F\x67\x67\x6C\x65","\x70\x61\x72\x65\x6E\x74","\x73\x6C\x69\x64\x65\x55\x70","\x6E\x6F\x74","\x2E\x6E\x61\x76\x2D\x73\x75\x62","\x23\x6E\x61\x76\x2D\x77\x72\x61\x70\x70\x65\x72","\x72\x65\x61\x64\x79"];$(document)[_0x8991[23]](function(){$(_0x8991[4])[_0x8991[3]](function(){$(_0x8991[2])[_0x8991[1]](_0x8991[0])});$(_0x8991[7])[_0x8991[3]](function(){$(_0x8991[6])[_0x8991[5]](_0x8991[0])});var d=function(a,b){this[_0x8991[8]]=a||{};this[_0x8991[9]]=b||false;var c=this[_0x8991[8]][_0x8991[11]](_0x8991[10]);c[_0x8991[13]](_0x8991[3],{el:this[_0x8991[8]],multiple:this[_0x8991[9]]},this[_0x8991[12]])};d[_0x8991[14]][_0x8991[12]]=function(a){var b=a[_0x8991[15]][_0x8991[8]];$this=$(this),$next=$this[_0x8991[16]]();$next[_0x8991[17]]();$this[_0x8991[18]]()[_0x8991[1]](_0x8991[0]);if(!a[_0x8991[15]][_0x8991[9]]){b[_0x8991[11]](_0x8991[21])[_0x8991[20]]($next)[_0x8991[19]]()[_0x8991[18]]()[_0x8991[5]](_0x8991[0])}};var e=new d($(_0x8991[22]),false)})
//]]>
</script>

apakah step by step nya sudah beres ?

Tentu saja belum sobat harus menghapus beberapa code terlebih dahulu untuk melanjutkannya ke tahap save, silahkan sobat cari code dibawah ini lalu hapus semua codenya

.mline1, .mline2, .mline3 {
position: absolute;
left: 0;
display: block;
height: 3px;
width: 22px;
background: $(search.icon.color);
content:'';
border-radius: 5px;
transition: all 0.2s;}
.mline1 {
top: 0;}
.mline2 {
top: 7px;}
.mline3 {
top: 14px;}
.button.menu-opened .mline1 {
top: 8px;
border: 0;
height: 3px;
width: 22px;
background: $(navmenu.font.color);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg)}
.button.menu-opened .mline2 {
top: 8px;
background: $(navmenu.font.color);
width: 22px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg)}
.button.menu-opened .mline3 {
display: none;
height:0;
}

jika sudah dihapus, silahkan sobat save dan upload kembali jika sobat menggunakan smartphone dan lihat hasilnya. Jika step by step dilakukan dengan baik dan benar admin kira tidak ada masalah sama sekali, namun jika terjadi eror sobat bisa berkomentar di kolom komentar dibawah agar admin bisa membatu eror yang dialami sobat-sobat sekalian.

Demo Click here

Mungkin sampai disini saja perjumpaan kita sobat, jika ada yang mau di request jangan sungkan untuk berkomentar, dan jika ada masukan silahkan berikan masukan. Kami dari admin TechPapuaID mengucapkan banyak terimakasih

To insert a code use <i rel="pre">code_here</i>
To insert a quote use <b rel="quote">your_qoute</b>
To insert a picture use <i rel="image">url_image_here</i>

1. Berkomentarlah dengan sopan dan sesuai topik artikel.

2. Centang Notify Me / Beri Tahu Saya agar mendapatkan notifikasi via email bahwa komentar anda telah di balas.

3. Blog ini hanya menerima pengguna yang menggunakan akun gmail untuk berkomentar, silahkan login ke akun gmail anda dan gunakan fitur komentar yang telah di sediakan