Cara Membuat Slide Navigasi di Blog - KodeRian

Halo sobat KodeRian pada kesempatan kali ini saya akan membagikan sebuah Tutorial untuk Blogger yaitu "Slide Navigation" untuk UX/UI sekarang kebanyakan sudah memakai tampilan Slide Navigasi tersebut karena tampilan keren dan fresh tidak menonton dengan yang lain tentu saja tampilan yang saya kasih ke kalian ini merupakan perubahan pada Slide Navigasi dulu yang di remark ke tampilan Igniel.com meskipun agak berbeda dari kode dasarkan tapi sama kalau segi penampilan.

Tidak itu saja yang ada pada Navigasi ini, saya menambahkan Fitur DarkMode juga supaya kalian biar bisa dikembangkan ke tampilan yang lebih fresh seperti tema LinkMagz ini buatan dari mas sugeng.

Slide Navigasi ini tidak memberatkan blog atau web kalian karena menggunakan sedikit "Javascript" jadi aman bagi kalian yang suka dengan kecepatan tapi ga lambatin blognya pasti wajib pakai ini supaya terlihat menarik dan kekinian.

Bagaimana tampilan nya ? mungkin itu yang ingin diketahui oleh kalian bukan ? daripada penasaran coba di cek dulu "Demo" untuk "Slide Navigation" tersebut dibawah :#

See the Pen
Slide Navigation Part 2 by Rian_kuno (@rian_kuno)
on CodePen.

Untuk versi yang lama nya ini

See the Pen
Side/Slide Navigation by Rian_kuno (@rian_kuno)
on CodePen.

Bagaimana tampilan nya ? menarik bukan dan berbeda dengan yang lain :3

Untuk menambahkan ke "Blogger" kalian tinggal ikuti langkah dibawah ini

Cara Membuat Slide Navigasi di Blog

1. Buka Blogger
2. Klik Tema > Klik "Edit HTML"
3. Tambahkan kode berikut tepat dibawah kode <style> atau <b:skin>

.darkshadow{visibility:hidden;opacity:0;position:fixed;top:48px;background:rgba(0,0,0,0.59);left:0;right:0;bottom:0;margin:0;z-index:5;transition:all 0.4s ease-in-out;}.darkshadow.open{visibility:visible;opacity:1;}#nav-wrapper{font-size:13px;width:265px;position:fixed;z-index:5;top:48px;overflow:hidden;left:0;background:#fff;-webkit-transition:0.3s;-o-transition:0.3s;transition:0.3s;bottom:0;padding-top:15px;-webkit-transform:translateX(-290px);-ms-transform:translateX(-290px);transform:translateX(-290px);transition:all 0.5s ease;}#nav-wrapper:hover{overflow-y:auto;}#nav-wrapper.open{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);}#nav-wrapper.close{display:none;}#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:#d0d0d0;border-radius:0 50px 50px 0;margin:0 20px 0 0;transition:all 0.5s ease;display:none;}#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:12px 0 13px 15px;color:#333333;font-size:13px;}#nav-wrapper li a.nav-submenu{padding:10px 15px;padding-bottom:12px;}#nav-wrapper li ul.nav-sub{display:none;}#nav-wrapper li li a{display:block;position:relative;padding-left:4em;line-height:40px;color:#657786;}#nav-wrapper a:hover{color:#6495ed;}#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:20px;width:20px;margin-right:15px;overflow:hidden;opacity:0.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.colormode > a > span{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-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;}@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:7px 10px;margin-top:0;background-color:#e1f5fe;color:#666;border-radius:20px;}#nav-wrapper .subs a:hover{background-color:#6495ed;}#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:none;}#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;}}#nav-wrapper .subs{display:flex;margin-left:15px;margin-top:10px;}#nav-wrapper .subs a{font-size:11px;margin-right:10px;width:auto;height:auto;padding:7px 10px;margin-top:0;background-color:#e1f5fe;color:#666;border-radius:20px;}#nav-wrapper .subs a:hover{background-color:#6495ed;color:#fff;}#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:none;}#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:15px;}#nav-wrapper .footer .social{display:flex;margin:7px 0;}#nav-wrapper .footer .credit{display:block;color:#657786;}#nav-wrapper .footer .developer{color:#657786;}.kotak9{fill:#fff;margin-top:-4px;display:block;}

5. Tambahkan kode berikut tepat dibawah kode <body>

<div class='darkshadow'></div>

5. Tambahkan kode berikut tepat dibawah kode </header>

<nav class='' id='nav-wrapper' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
  <ul>
    <li class='first'>
      <a href='https://koderian.blogspot.com/'>
        <span itemprop='name'>
          <svg height='24' viewBox='0 0 24 24' width='24'>
            <path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10ZZ' fill='#000' />
          </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='M15 17V14H18V12L22 15.5L18 19V17H15M17 18V21H14V23L10 19.5L14 16V18H17M12 8C9.79 8 8 9.8 8 12C8 13.91 9.35 15.54 11.21 15.92L16 11.86C15.93 9.71 14.16 8 12 8M12 14C10.9 14 10 13.11 10 12S10.9 10 12 10 14 10.9 14 12 13.11 14 12 14M21.66 8.73L19.66 5.27C19.54 5.05 19.28 4.96 19.05 5.05L16.56 6.05C16.05 5.64 15.5 5.31 14.87 5.05L14.5 2.42C14.46 2.18 14.25 2 14 2H10C9.75 2 9.54 2.18 9.5 2.42L9.13 5.07C8.5 5.33 7.96 5.66 7.44 6.07L5 5.05C4.77 4.96 4.5 5.05 4.39 5.27L2.39 8.73C2.26 8.94 2.31 9.22 2.5 9.37L4.57 11L4.5 12L4.57 13L2.46 14.63C2.26 14.78 2.21 15.06 2.34 15.27L4.34 18.73C4.45 19 4.74 19.11 5 19L5 19L7.5 18C7.74 18.19 8 18.37 8.26 18.53L9.91 17.13C9.14 16.8 8.46 16.31 7.91 15.68L5.5 16.68L4.73 15.38L6.8 13.8C6.4 12.63 6.4 11.37 6.8 10.2L4.69 8.65L5.44 7.35L7.85 8.35C8.63 7.45 9.68 6.82 10.85 6.57L11.25 4H12.75L13.12 6.62C14.29 6.86 15.34 7.5 16.12 8.39L18.53 7.39L19.28 8.69L17.2 10.2C17.29 10.46 17.36 10.73 17.4 11H19.4L21.5 9.37C21.72 9.23 21.78 8.95 21.66 8.73M12 8C9.79 8 8 9.8 8 12C8 13.91 9.35 15.54 11.21 15.92L16 11.86C15.93 9.71 14.16 8 12 8M12 14C10.9 14 10 13.11 10 12S10.9 10 12 10 14 10.9 14 12 13.11 14 12 14M12 8C9.79 8 8 9.8 8 12C8 13.91 9.35 15.54 11.21 15.92L16 11.86C15.93 9.71 14.16 8 12 8M12 14C10.9 14 10 13.11 10 12S10.9 10 12 10 14 10.9 14 12 13.11 14 12 14ZZ'>
            </path>
          </svg>Tutorial Blogger<span class='new'> News</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='https://koderian.blogspot.com/' itemprop='url'>
            <span itemprop='name'>
              <svg class='muter2' style='width:20px;height:20px' 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' />
              </svg>Blogger</span>
          </a>
        </li>

        <li>
          <a href='https://koderian.blogspot.com/' itemprop='url'>
            <span itemprop='name'>
              <svg class='muter2' style='width:20px;height:20px' viewBox='0 0 24 24'>
                <path d='M5,3L4.35,6.34H17.94L17.5,8.5H3.92L3.26,11.83H16.85L16.09,15.64L10.61,17.45L5.86,15.64L6.19,14H2.85L2.06,18L9.91,21L18.96,18L20.16,11.97L20.4,10.76L21.94,3H5Z' />
              </svg>CSS</span>
          </a>
        </li>

        <li>
          <a href='https://koderian.blogspot.com/' itemprop='url'>
            <span itemprop='name'>
              <svg class='muter2' style='width:20px;height:20px' viewBox='0 0 24 24'>
                <path d='M3,3H21V21H3V3M7.73,18.04C8.13,18.89 8.92,19.59 10.27,19.59C11.77,19.59 12.8,18.79 12.8,17.04V11.26H11.1V17C11.1,17.86 10.75,18.08 10.2,18.08C9.62,18.08 9.38,17.68 9.11,17.21L7.73,18.04M13.71,17.86C14.21,18.84 15.22,19.59 16.8,19.59C18.4,19.59 19.6,18.76 19.6,17.23C19.6,15.82 18.79,15.19 17.35,14.57L16.93,14.39C16.2,14.08 15.89,13.87 15.89,13.37C15.89,12.96 16.2,12.64 16.7,12.64C17.18,12.64 17.5,12.85 17.79,13.37L19.1,12.5C18.55,11.54 17.77,11.17 16.7,11.17C15.19,11.17 14.22,12.13 14.22,13.4C14.22,14.78 15.03,15.43 16.25,15.95L16.67,16.13C17.45,16.47 17.91,16.68 17.91,17.26C17.91,17.74 17.46,18.09 16.76,18.09C15.93,18.09 15.45,17.66 15.09,17.06L13.71,17.86Z' />
              </svg>Javascript</span>
          </a>
        </li>

        <li>
          <a href='https://koderian.blogspot.com/' itemprop='url'>
            <span itemprop='name'>
              <svg class='muter3' viewBox='0 0 24 24'>
                <path d='M14.19,14.19L6,18L9.81,9.81L18,6M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,10.9A1.1,1.1 0 0,0 10.9,12A1.1,1.1 0 0,0 12,13.1A1.1,1.1 0 0,0 13.1,12A1.1,1.1 0 0,0 12,10.9Z' />
              </svg>Widget</span>
          </a>
        </li>

        <li>
          <a href='https://koderian.blogspot.com/' itemprop='url'>
            <span itemprop='name'>
              <svg class='muter3' viewBox='0 0 24 24'>
                <path d='M3.14,1A2.14,2.14 0 0,0 1,3.14V5H3V3H5V1H3.14M7,1V3H10V1H7M12,1V3H14V5H16V3.14C16,1.96 15.04,1 13.86,1H12M1,7V10H3V7H1M9,7C7.89,7 7,7.89 7,9C7,11.33 7,16 7,16C7,16 11.57,16 13.86,16A2.14,2.14 0 0,0 16,13.86C16,11.57 16,7 16,7C16,7 11.33,7 9,7M18,7V9H20V11H22V9C22,7.89 21.11,7 20,7H18M9,9H14V14H9V9M1,12V13.86C1,15.04 1.96,16 3.14,16H5V14H3V12H1M20,13V16H22V13H20M7,18V20C7,21.11 7.89,22 9,22H11V20H9V18H7M20,18V20H18V22H20C21.11,22 22,21.11 22,20V18H20M13,20V22H16V20H13Z' />
              </svg>HTML</span>
          </a>
        </li>

        <li>
          <a href='https://koderian.blogspot.com/' itemprop='url'>
            <span itemprop='name'>
              <svg class='muter2' viewBox='0 0 24 24'>
                <path d='M17.45,15.18L22,7.31V19L22,21H2V3H4V15.54L9.5,6L16,9.78L20.24,2.45L21.97,3.45L16.74,12.5L10.23,8.75L4.31,19H6.57L10.96,11.44L17.45,15.18Z' />
              </svg>SEO</span>
          </a>
        </li>
      </ul>
    </li>

    <li>
      <a href='https://koderian.blogspot.com/' itemprop='url'>
        <span itemprop='name'>
          <svg style='width:20x;height:24px' viewBox='0 0 512 512'>
            <g>
              <path d='M425.19,7.392C422.246,2.784,417.158,0,411.686,0h-160c-6.208,0-11.872,3.584-14.496,9.248l-224,480    c-2.304,4.96-1.952,10.752,0.992,15.36c2.944,4.608,8.032,7.392,13.504,7.392h160c6.208,0,11.872-3.584,14.496-9.216l224-480    C428.486,17.824,428.134,12,425.19,7.392z' />
            </g>
            <g>
              <path d='M497.798,263.392c-2.912-4.608-8.032-7.392-13.472-7.392H352.678L233.222,512h146.464c6.208,0,11.872-3.584,14.496-9.216 l104.64-224C501.126,273.824,500.742,268,497.798,263.392z' />
            </g>
          </svg>Adsense</span>
      </a>
    </li>

    <li>
      <a href='https://koderian.blogspot.com/' itemprop='url'>
        <span itemprop='name'>
          <svg style='width:24px;height:24px' viewBox='0 0 24 24'>
            <path d='M21,16V4H3V16H21M21,2A2,2 0 0,1 23,4V16A2,2 0 0,1 21,18H14V20H16V22H8V20H10V18H3C1.89,18 1,17.1 1,16V4C1,2.89 1.89,2 3,2H21M5,6H14V11H5V6M15,6H19V8H15V6M19,9V14H15V9H19M5,12H9V14H5V12M10,12H14V14H10V12ZZ' />
          </svg>Template</span>
      </a>
    </li>
    <li>
      <a href='https://koderian.blogspot.com/' itemprop='url'>
        <span itemprop='name'>
          <svg style='width:24px;height:24px' 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>Guest Post</span>
      </a>
    </li>
    <li>
      <a href='https://koderian.blogspot.com/' itemprop='url'>
        <span itemprop='name'>
          <svg style='width:24px;height:24px' 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' />
          </svg>About</span>
      </a>
    </li>
    <li class="colormode"><a href="javascript:;"><svg class="drk" height="24" viewBox="0 0 24 24" width="24">
          <path d="M12,18C11.11,18 10.26,17.8 9.5,17.45C11.56,16.5 13,14.42 13,12C13,9.58 11.56,7.5 9.5,6.55C10.26,6.2 11.11,6 12,6A6,6 0 0,1 18,12A6,6 0 0,1 12,18M20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31L23.31,12L20,8.69Z">
          </path>
        </svg><svg class="lgt" height="24" viewBox="0 0 24 24" width="24">
          <path d="M12,18V6A6,6 0 0,1 18,12A6,6 0 0,1 12,18M20,15.31L23.31,12L20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31Z">
          </path>
        </svg><span class="drk">Mode Gelap</span><span class="lgt">Mode Terang</span></a></li>
    <li class='subs'>
      <a href='https://www.blogger.com/follow-blog.g?blogID=1730898404600797650' 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>
      <a href='https://www.blogger.com/' rel='nofollow noopener' target='_blank' title='Ikuti Blog'>
        <svg class='widget12' viewBox='0 0 24 24'>
          <path d='M16,17H7V10.5C7,8 9,6 11.5,6C14,6 16,8 16,10.5M18,16V10.5C18,7.43 15.86,4.86 13,4.18V3.5A1.5,1.5 0 0,0 11.5,2A1.5,1.5 0 0,0 10,3.5V4.18C7.13,4.86 5,7.43 5,10.5V16L3,18V19H20V18M11.5,22A2,2 0 0,0 13.5,20H9.5A2,2 0 0,0 11.5,22Z' />
        </svg>
        <span>BERLANGGANAN</span>
      </a>
    </li>
    <li class='footer'>
      <a href='https://koderian.blogspot.com/' itemprop='url' title='Sitemap'>
        <span itemprop='name'>Sitemap</span>
      </a>
      -
      <a href='https://koderian.blogspot.com/' itemprop='url' title='Disclaimer'>
        <span itemprop='name'>Disclaimer</span>
      </a>
      -
      <a href='https://koderian.blogspot.com/' itemprop='url' title='Privacy Policy'>
        <span itemprop='name'> Privacy</span>
      </a>
      <span class='social'>
        <a class='facebook2' href='https://www.facebook.com/' 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='https://www.instagram.com/' 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 href='https://www.twitter.com/' rel='nofollow noopener' target='_blank' title='Twitter'>
          <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,3M17.71,9.33C18.19,8.93 18.75,8.45 19,7.92C18.59,8.13 18.1,8.26 17.56,8.33C18.06,7.97 18.47,7.5 18.68,6.86C18.16,7.14 17.63,7.38 16.97,7.5C15.42,5.63 11.71,7.15 12.37,9.95C9.76,9.79 8.17,8.61 6.85,7.16C6.1,8.38 6.75,10.23 7.64,10.74C7.18,10.71 6.83,10.57 6.5,10.41C6.54,11.95 7.39,12.69 8.58,13.09C8.22,13.16 7.82,13.18 7.44,13.12C7.81,14.19 8.58,14.86 9.9,15C9,15.76 7.34,16.29 6,16.08C7.15,16.81 8.46,17.39 10.28,17.31C14.69,17.11 17.64,13.95 17.71,9.33Z' />
          </svg>
        </a>
      </span>
      <span class='credit'>
        Copyright &#169; 2018 - 2020
      </span>
      <span class='developer'>Created <cite><b>Pintarsaurus</b>
        </cite>
      </span>
    </li>
  </ul>
</nav>

6. Tambahkan kode berikut tepat disebelah Nama Header Blog

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

7. Tambahkan kode berikut tepat dibawah kode </body>

<script>//<![CDATA[eval(function(p,a,c,k,e,r){e=function(c){return c.toString(a)};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}('$(n).o(1(){$(".p-q").8(1(){$("#2-9, .f").g("4")});$(".f").8(1(){$("#2-9,.f").h("4")});5 d=1(a,b){0.3=a||{};0.6=b||i;5 c=0.3.j(".2-r");c.s("8",{3:0.3,6:0.6},0.k)};d.t.k=1(a){5 b=a.l.3;($0=$(0)),($7=$0.7());$7.u();$0.m().g("4");v(!a.l.6){b.j(".2-w").x($7).y().m().h("4")}};5 e=z d($("#2-9"),i)});',36,36,'this|function|nav|el|open|var|multiple|next|click|wrapper||||||darkshadow|toggleClass|removeClass|false|find|dropdown|data|parent|document|ready|menu|toggle|submenu|on|prototype|slideToggle|if|sub|not|slideUp|new'.split('|'),0,{}))//]]></script>

8. Simpan Tema
9. Selesai

Bagaimana hasilnya ? sama bukan dengan yang tampilan "Demo" tampilan nya sederhana tapi menarik mata kalian :3

Sampai disini saja dulu dan artikel pada blog ini akan terus saya update Setiap Hari meskipun cuman Satu atau Dua saja tapi itu lebih baik daripada Tidak :#