Cara Membuat Side Navigation di Blogger

Pada kesempatan kali ini saya akan membuat Side Navigation untuk mempercantik tampilan dari situs sobat dan banyak Request minta tutorial ini jadi saya buatkan sekarang. Tampilan yang akan saya berikan simple saja ngak terlalu bagus tapi bisa kalian kembangkan lagi untuk kedepan nya.

Side navigation ini saya buat dengan bantuan javascript agar terlihat lebih bagus karena ada unsur interface nya tapi bisa juga sih pakai pure css tapi nanti banyak kode css yang harus dibuat beda dengan mengabungkan dari css dan javascript.

Bagi kalian yang sudah penasaran bagaimana cara untuk membuat side/slide navigasi tersebut bisa baca dibawah ini.

Cara Membuat Side Navigation di Blogger

Pertama buka Blog > klik Tema > klik Edit HTML

Langkah berikutnya tambahkan kode side/slide navigasi tepat dibawah kode </header>

<nav 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' />
                    </svg>Beranda</span></a></li>
        <li><a class='nav-submenu' href='javascript:;' title='Bahasa Program'><span><svg height='24' viewBox='0 0 24 24' width='24'>
                        <path d='M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z'>
                        </path>
                    </svg>Tentang Admin<span class='new'>News</span></span><svg class='down' height='24' viewBox='0 0 24 24' width='24'>
                    <path d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z' />
                </svg></a>
            <ul class='nav-sub'>
                <li><a href='/p/about.html' itemprop='url'><span itemprop='name'>Profil</span></a></li>
                <li><a href='/p/contact.html' itemprop='url'><span itemprop='name'>Pesan</span></a></li>
                <li><a href='/p/sitemap.html' itemprop='url'><span itemprop='name'>Daftar Isi</span></a></li>
                <li><a href='/p/disclaimer.html' itemprop='url'><span itemprop='name'>Disclaimer</span></a></li>
                <li><a href='/p/partner.html' itemprop='url'><span itemprop='name'>Partner</span></a></li>
                <li><a href='/p/privacy-policy.html' itemprop='url'><span itemprop='name'>Privacy Policy</span></a></li>
            </ul>
        </li>

        <li>
            <a class='nav-submenu' href='javascript:;' title='Bahasa Program'><span><svg height='24' viewBox='0 0 24 24' width='24'>
                        <path d='M11,6.5V9.33L8.33,12L11,14.67V17.5L5.5,12M13,6.43L18.57,12L13,17.57V14.74L15.74,12L13,9.26M5,3C3.89,3 3,3.9 3,5V19C3,20.1 3.9,21 5,21H19C20.1,21 21,20.1 21,19V5C21,3.9 20.1,3 19,3H5Z' /></svg>Bahasa Program</span>
                <svg class='down' height='24' viewBox='0 0 24 24' width='24'>
                    <path d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z' /></svg></a>
            <ul class='nav-sub'>
                <li><a href='/search/label/CSS' itemprop='url'><span itemprop='name'>CSS</span></a></li>
                <li><a href='/search/label/HTML' itemprop='url'><span itemprop='name'>HTML</span></a></li>
                <li><a href='/search/label/Javascript' itemprop='url'><span itemprop='name'>Javascript</span></a></li>
                <li><a href='/search/label/PHP' itemprop='url'><span itemprop='name'>PHP</span></a></li>
            </ul>
        </li>
        <li>
            <a class='nav-submenu' href='javascript:;' title='Blogger'><span><svg height='24' viewBox='0 0 24 24' width='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' /></svg>Blogger</span>
                <svg class='down' height='24' viewBox='0 0 24 24' width='24'>
                    <path d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z' /></svg></a>
            <ul class='nav-sub'>
                <li><a href='/search/label/Template' itemprop='url'><span itemprop='name'>Template</span></a></li>
                <li><a href='/search/label/Tips' itemprop='url'><span itemprop='name'>Tips</span></a></li>
            </ul>
        </li>
        <li>
            <a class='nav-submenu' href='javascript:;' title='Framework'><span><svg height='24' viewBox='0 0 24 24' width='24'>
                        <path d='M12 22C10.33 22 8.84 20.5 7.9 17.93C7.83 17.73 7.93 17.5 8.14 17.44C8.34 17.36 8.56 17.47 8.63 17.67C9.44 19.9 10.7 21.23 12 21.23C12.94 21.23 13.87 20.55 14.62 19.31C14.73 19.13 14.96 19.07 15.15 19.18C15.33 19.29 15.39 19.53 15.28 19.71C14.38 21.19 13.22 22 12 22M15.91 17.72C15.87 17.72 15.83 17.71 15.8 17.7C15.59 17.63 15.5 17.42 15.54 17.21C16 15.81 16.22 14.18 16.22 12.5C16.22 8.65 14.97 5.24 13.19 4.14C12.94 4.5 12.5 4.78 12 4.78C11.24 4.78 10.61 4.16 10.61 3.39C10.61 2.62 11.24 2 12 2C12.77 2 13.4 2.61 13.41 3.37C15.53 4.5 17 8.21 17 12.5C17 14.25 16.75 15.96 16.28 17.45C16.23 17.61 16.08 17.72 15.91 17.72M12 2.77C11.66 2.77 11.38 3.05 11.38 3.39C11.38 3.73 11.67 4 12 4C12.35 4 12.64 3.73 12.64 3.39C12.64 3.05 12.35 2.77 12 2.77M4.08 18.54C3.31 18.54 2.68 17.91 2.68 17.15C2.68 16.66 2.94 16.22 3.33 15.97C3.19 13.56 5.68 10.41 9.5 8.22C11.09 7.32 12.75 6.67 14.32 6.34C14.5 6.29 14.73 6.42 14.77 6.63C14.82 6.84 14.69 7.05 14.5 7.09C13 7.41 11.41 8.03 9.9 8.89C6.46 10.86 4.1 13.68 4.1 15.76C4.86 15.77 5.5 16.39 5.5 17.15C5.5 17.92 4.85 18.54 4.08 18.54M4.08 16.53C3.74 16.53 3.46 16.81 3.46 17.15C3.46 17.5 3.74 17.77 4.08 17.77S4.71 17.5 4.71 17.15C4.71 16.81 4.42 16.53 4.08 16.53M18.5 13.44C18.43 13.44 18.34 13.41 18.27 13.35C18.11 13.21 18.09 12.97 18.23 12.8C19.77 11 20.3 9.26 19.64 8.14C19.17 7.33 18.1 6.88 16.63 6.86C16.41 6.86 16.24 6.68 16.25 6.47C16.25 6.26 16.43 6.1 16.64 6.09C18.39 6.11 19.7 6.7 20.31 7.75C21.15 9.19 20.6 11.21 18.82 13.3C18.74 13.39 18.63 13.44 18.5 13.44M16.5 18.9C14.5 18.9 11.94 18.16 9.5 16.77C7.95 15.88 6.57 14.79 5.5 13.63C5.35 13.47 5.36 13.23 5.5 13.08C5.68 12.94 5.92 12.95 6.07 13.11C7.08 14.21 8.4 15.25 9.89 16.1C13.2 18 16.77 18.63 18.65 17.72C18.57 17.55 18.5 17.35 18.5 17.15C18.5 16.38 19.15 15.76 19.92 15.76C20.69 15.76 21.32 16.38 21.32 17.15C21.32 17.92 20.69 18.54 19.92 18.54C19.64 18.54 19.39 18.46 19.17 18.32C18.47 18.71 17.56 18.9 16.5 18.9M19.5 17.63C19.63 17.71 19.77 17.77 19.92 17.77C20.27 17.77 20.55 17.5 20.55 17.15C20.55 16.81 20.27 16.53 19.92 16.53S19.3 16.81 19.3 17.15C19.3 17.29 19.35 17.42 19.43 17.53C19.47 17.55 19.5 17.59 19.5 17.63M4.46 12C4.33 12 4.2 11.92 4.13 11.8C3.23 10.25 3.08 8.81 3.7 7.74C4.54 6.3 6.58 5.76 9.31 6.25C9.5 6.29 9.66 6.5 9.62 6.7C9.59 6.91 9.39 7.05 9.18 7C6.82 6.59 5 7 4.37 8.13C3.89 8.95 4.04 10.11 4.8 11.41C4.9 11.6 4.84 11.83 4.65 11.94C4.59 11.97 4.53 12 4.46 12M12.21 13.4C11.71 13.5 11.21 13.19 11.11 12.69C11 12.2 11.32 11.71 11.81 11.6C12.31 11.5 12.81 11.81 12.91 12.31C13 12.8 12.7 13.29 12.21 13.4Z' />
                    </svg>Framework</span>
                <svg class='down' height='24' viewBox='0 0 24 24' width='24'>
                    <path d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z' /></svg></a>
            <ul class='nav-sub'>
                <li><a href='/search/label/Material' itemprop='url'><span itemprop='name'>Google Material</span></a></li>
            </ul>
        </li>
        <li><a href='/search/label/Firebase' itemprop='url'><span itemprop='name'><svg height='24' viewBox='0 0 24 24' width='24'>
                        <path d='M20,18.69L12.7,22.74C12.2,23 11.7,23 11.2,22.74L4,18.69L17.05,5.54L17.4,5.44C17.7,5.44 17.87,5.57 17.9,5.84L20,18.69M9.35,5.74L4.8,13.29L6.7,1.34C6.73,1.07 6.9,0.94 7.2,0.94C7.4,0.94 7.53,1 7.6,1.19L9.75,5.14L9.35,5.74M13.85,7L4.3,16.59L11.55,4.29C11.65,4.09 11.8,4 12,4C12.2,4 12.33,4.09 12.4,4.29L13.85,7Z' /></svg>Firebase</span></a></li>
        <li><a href='/search/label/Game' itemprop='url'><span itemprop='name'><svg height='24' viewBox='0 0 24 24' width='24'>
                        <path d='M9,2V7.5L12,10.5L15,7.5V2H9M2,9V15H7.5L10.5,12L7.5,9H2M16.5,9L13.5,12L16.5,15H22V9H16.5M18,11H20V13H18V11M12,13.5L9,16.5V22H15V16.5L12,13.5Z' /></svg>Game</span></a></li>
        <li><a href='/search/label/Internet' itemprop='url'><span itemprop='name'><svg height='24' viewBox='0 0 24 24' width='24'>
                        <path d='M17.9,17.39C17.64,16.59 16.89,16 16,16H15V13C15,12.45 14.55,12 14,12H8V10H10C10.55,10 11,9.55 11,9V7H13C14.1,7 15,6.1 15,5V4.59C17.93,5.77 20,8.64 20,12C20,14.08 19.2,15.97 17.9,17.39M11,19.93C7.05,19.44 4,16.08 4,12C4,11.38 4.08,10.78 4.21,10.21L9,15V16C9,17.1 9.9,18 11,18M12,2C6.48,2 2,6.48 2,12C2,17.52 6.48,22 12,22C17.52,22 22,17.52 22,12C22,6.48 17.52,2 12,2Z' /></svg>Internet</span></a></li>
        <li><a href='/search/label/Kalender' itemprop='url'><span itemprop='name'><svg height='24' viewBox='0 0 24 24' width='24'>
                        <path d='M9,10H7V12H9V10M13,10H11V12H13V10M17,10H15V12H17V10M19,3H18V1H16V3H8V1H6V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M19,19H5V8H19V19Z' />
                    </svg>Kalender</span></a></li>
        <li><a href='/search/label/Youtube' itemprop='url'><span itemprop='name'><svg height='24' viewBox='0 0 24 24' width='24'>
                        <path d='M10,15L15.19,12L10,9V15M21.56,7.17C21.69,7.64 21.78,8.27 21.84,9.07C21.91,9.87 21.94,10.56 21.94,11.16L22,12C22,14.19 21.84,15.8 21.56,16.83C21.31,17.73 20.73,18.31 19.83,18.56C19.36,18.69 18.5,18.78 17.18,18.84C15.88,18.91 14.69,18.94 13.59,18.94L12,19C7.81,19 5.2,18.84 4.17,18.56C3.27,18.31 2.69,17.73 2.44,16.83C2.31,16.36 2.22,15.73 2.16,14.93C2.09,14.13 2.06,13.44 2.06,12.84L2,12C2,9.81 2.16,8.2 2.44,7.17C2.69,6.27 3.27,5.69 4.17,5.44C4.64,5.31 5.5,5.22 6.82,5.16C8.12,5.09 9.31,5.06 10.41,5.06L12,5C16.19,5 18.8,5.16 19.83,5.44C20.73,5.69 21.31,6.27 21.56,7.17Z' />
                    </svg>Youtube</span></a></li>
    </ul>
</nav>

Untuk memangil kode side/slide navigasi kalian tambahkan kode berikut

<a arial-label='Menu' class='menu-toggle' href='javascript:;'><svg focusable='false' height='24' viewBox='0 0 24 24' width='24'><path d='M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z'/></svg></a>

Kemudian paste kodenya seperti dibawah ini

<div class='header'>
<a arial-label='Menu' class='menu-toggle' href='javascript:;'><svg focusable='false' height='24' viewBox='0 0 24 24' width='24'><path d='M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z'/></svg></a>
<div class='title'>
  <h1>Navigation</h1>
  </div>
</div>

Agar tampilan ketikka dibuka ada shadow dilatar belakang tambahkan kode berikut

<div class='darkshadow'/>

Paste kodenya tepat dibawah kode <body>

Setelah itu tambahkan kode css dibawah ini tepat diatas kode </style> atau </b:skin>

.darkshadow{visibility:hidden;opacity:0;position:fixed;top:0;background:rgba(0,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:290px;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);}
#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:#f0f8ff;border-radius:0 50px 50px 0;margin:0 20px 0 0;}
#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:var(--color);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;}
#nav-wrapper a:hover{color:var(--color-hover);}
#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(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg);}
#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;}

Terakhir tambahkan kode javascriptnya tepat diatas kode </body>

eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('w f=["\\i\\l\\h\\j","\\q\\i\\s\\s\\n\\h\\F\\n\\g\\o\\o","\\C\\j\\g\\t\\u\\r\\k\\g\\l\\l\\h\\k\\G\\L\\v\\m\\g\\k\\A\\o\\D\\g\\m\\i\\r","\\H\\n\\x\\H\\A","\\v\\B\\h\\j\\y\\u\\q\\i\\s\\s\\n\\h","\\k\\h\\B\\i\\t\\h\\F\\n\\g\\o\\o","\\C\\j\\g\\t\\u\\r\\k\\g\\l\\l\\h\\k\\G\\v\\m\\g\\k\\A\\o\\D\\g\\m\\i\\r","\\v\\m\\g\\k\\A\\o\\D\\g\\m\\i\\r","\\h\\n","\\B\\y\\n\\q\\x\\l\\n\\h","\\v\\j\\g\\t\\u\\o\\y\\I\\B\\h\\j\\y","\\M\\x\\j\\m","\\m\\k\\i\\l\\m\\i\\r\\j","\\i\\j","\\l\\k\\i\\q\\i\\q\\J\\l\\h","\\m\\g\\q\\g","\\j\\h\\N\\q","\\o\\n\\x\\m\\h\\O\\i\\s\\s\\n\\h","\\l\\g\\k\\h\\j\\q","\\o\\n\\x\\m\\h\\P\\l","\\j\\i\\q","\\v\\j\\g\\t\\u\\o\\y\\I","\\C\\j\\g\\t\\u\\r\\k\\g\\l\\l\\h\\k","\\k\\h\\g\\m\\J"];$(Q)[f[R]](z(){$(f[4])[f[3]](z(){$(f[2])[f[1]](f[0])});$(f[7])[f[3]](z(){$(f[6])[f[5]](f[0])});w d=z(a,b){p[f[8]]=a||{};p[f[9]]=b||K;w c=p[f[8]][f[11]](f[10]);c[f[13]](f[3],{S:p[f[8]],T:p[f[9]]},p[f[12]])};d[f[14]][f[12]]=z(a){w b=a[f[15]][f[8]];$p=$(p),$E=$p[f[16]]();$E[f[17]]();$p[f[18]]()[f[1]](f[0]);U(!a[f[15]][f[9]]){b[f[11]](f[V])[f[W]]($E)[f[X]]()[f[18]]()[f[5]](f[0])}};w e=Y d($(f[Z]),K)})',62,71,'|||||||||||||||_0x8991|x61|x65|x6F|x6E|x72|x70|x64|x6C|x73|this|x74|x77|x67|x76|x2D|x2E|var|x69|x75|function|x6B|x6D|x23|x68|next|x43|x2C|x63|x62|x79|false|x20|x66|x78|x54|x55|document|23|el|multiple|if|21|20|19|new|22|||||||||'.split('|'),0,{}))

Sekarang tinggal simpan tema dan lihat hasilnya

Bagi yang ingin melihat tampilan side/slide navigation seperti apa bisa klik tombol dibawah ini

Demo

Bagi kalian yang ingin memposting ulang artikel ini silahkan cantumkan sumber aslinya