For world peace, liberate Al-Aqsa, eliminate Israel and anyone who is with Israel, they are the real terrorists
Bacakan
Beranda
Blogger

Cara membuat menu navigasi geser atau muncul dari samping

Hello sobat ICloudZer kali ini admin bakalan menjabarkan mengenai cara membuat menu navigasi muncul dari samping di blogger

Info: Jika kamu sudah penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama

Tampilan Mobile

Ketika anda menerapkan Cara membuat menu navigasi geser dari samping ini pada blog sobat maka tampilannya hanya bekerja pada perangkat mobile, jika menggunakan perangkat atau gaya desktop maka tampilan nya hanya akan menu datar saja, seperti gambar dibawah ini

Info: Gambar di atas adalah contoh tampilan dari mode desktop

Keamanan

Eiitsss.. tunggu sebentar sebelum sebelum menerapkan pada sitsu blog yang pertama yang harus diperhatikan adalah

  1. Back up Template dulu
  3. Berdoa agar dipermudah sama tuhan
  5. Yang paling penting siapkan kopi sama cemilannya biar lebih rileks, benar gak tuh

    6. Bagi yang gak minum kopi, minum teh atau terserah deh

  6. Jika semua sudah, kita lanjutkan

Cara Penerapan

Jika sobat tertarik dan ingin menerapkan nya pada situs blog, simak baik baik caranya sebagi berikut

  1. login keakun Blogger kamu
  3. Pergi ke Template dan pilih edit HTML
  5. Cari kode ]]></b:skin> atau kode </style> dan letakkan kode dibawah ini tepat diatasnya
    6. /* Menu Navigasi Geser Samping by Icloudice.com */.rahnav{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}.rahnav.open{visibility:visible;opacity:1}#rahnav-inner{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}#rahnav-inner:hover{overflow-y:auto} #rahnav-inner.open{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}#rahnav-inner ul{margin:0;padding:0;list-style:none}#rahnav-inner li{display:block;list-style:none;position:relative} #rahnav-inner li.first{background:#e1f5fe;border-radius:0 50px 50px 0;margin:0 20px 0 0;transition: all .5s ease;} #rahnav-inner>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}#rahnav-inner li a.nav-submenu{padding:10px 24px}#rahnav-inner li ul.nav-sub{display:none}#rahnav-inner li li a{display:block;position:relative;padding-left:5em;line-height:40px;color: #000;}#rahnav-inner a:hover{color:#00B8FF;}#rahnav-inner 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}#rahnav-inner li.open svg.down{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg)} #rahnav-inner svg{height:24px;width:24px;margin-right:15px;overflow:hidden;opacity:.7;fill:currentColor}#rahnav-inner>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}#rahnav-inner>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){#rahnav-inner .profile img{width:24px;height:24px;margin-right:15px;margin-left:1px;border-radius:20px}}@media screen and (max-width:600px){#rahnav-inner .subs{display:flex;margin-left:24px;margin-top:10px}#rahnav-inner .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}#rahnav-inner .subs svg{width:12px;height:12px;margin-right:3px;margin-top:-1px}#rahnav-inner .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}#rahnav-inner li.footer a{font-size:11px;font-weight:400;color:#657786;display:inline-block;padding:0}#rahnav-inner .footer{display:block;margin-top:14px;margin-left:24px}#rahnav-inner .footer .social{display:flex;margin:7px 0}#rahnav-inner .footer .credit{display:block;color:#657786}#rahnav-inner .footer .developer{color:#657786}}@media screen and (max-width:800px){#rahnav-inner .subs{display:flex;margin-left:24px;margin-top:10px}.Profile .widget-content{margin:0;max-width:100%}#rahnav-inner .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}#rahnav-inner .subs svg{width:12px;height:12px;margin-right:3px;margin-top:-1px}#rahnav-inner .subs button{flex-grow:1;margin-top:0;width:auto;height:auto;padding:7px10px;display:flex;align-items:center;justify-content:center;background-color:#657786;border-radius:20px;border:none;margin-right:23px;color:#fff;outline:0}#rahnav-inner li.footera{font-size:11px;font-weight:400;color:#657786;display:inline-block;padding:0}#rahnav-inner .footer{display:block;margin-top:14px;margin-left:24px}#rahnav-inner .footer .social{display:flex;margin:7px 0}#rahnav-inner .footer .credit{display:block;color:#657786}#rahnav-inner .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}}
  6. Kemudian Cari kode seperti dibawah ini, lalu hapus
    7. <nav id='cssmenu'><div id='head-mobile'/><div class='button' id='menu-button'><span class='mline1'/><span class='mline2'/><span class='mline3'/></div>  <!-- menu navigasi header start --><ul>  <li><a href='#'>Menu 1</a></li>  <li><a href='#'>Menu 2</a></li>  <li><a href='#'>Menu 3</a>  <ul> <li><a href='#'>SubMenu 1</a></li> <li><a href='#'>SubMenu 2</a></li>  </ul>  </li></ul><!-- menu navigasi header end --></nav>
  7. Ganti semua kode tersebut dengan kode dibawah ini
    8. <!-- Icloudice.com Nav Mobile --><div class='rahnav'/><nav class=';' id='rahnav-inner' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'><ul><li class='first'><a expr:href='data:blog.homepageUrl'><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='www.icloudice.com' title='Navigasi Icloudice.com'><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'>Dropdown Menu</span></a></li><li><a href='#' itemprop='url'><span itemprop='name'>Dropdown Menu</span></a></li><li><a href='#' itemprop='url'><span itemprop='name'>Dropdown Menu</span></a></li><li><a href='#' itemprop='url'><span itemprop='name'>Dropdown Menu</span></a></li><li><a href='#' itemprop='url'><span itemprop='name'>Dropdown Menu</span></a></li></ul></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,212,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='contact' 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>Icloudice.com</b></cite></span></li></ul></nav><!-- Icloudice.com Nav Mobile End --><!-- Icloudice.com 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><!-- icloudice.com Button End --><nav id='cssmenu' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'><!-- Icloudice.com 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><!-- Icloudice.com Nav Dekstop end --></nav>
  8. Selanjutnya Cari kode CCS berikut,sudah ketemu lalu hapus
    9. .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;}
  9. Tahap terakhir tambahkan script kode berikut dan letakkan diatas kode </body>
    10. <script>//<![CDATA[var _0x8991=["x6Fx70x65x6E","x74x6Fx67x67x6Cx65x43x6Cx61x73x73","x23x6Ex61x76x2Dx77x72x61x70x70x65x72x2Cx20x2Ex64x61x72x6Bx73x68x61x64x6Fx77","x63x6Cx69x63x6B","x2Ex6Dx65x6Ex75x2Dx74x6Fx67x67x6Cx65","x72x65x6Dx6Fx76x65x43x6Cx61x73x73","x23x6Ex61x76x2Dx77x72x61x70x70x65x72x2Cx2Ex64x61x72x6Bx73x68x61x64x6Fx77","x2Ex64x61x72x6Bx73x68x61x64x6Fx77","x65x6C","x6Dx75x6Cx74x69x70x6Cx65","x2Ex6Ex61x76x2Dx73x75x62x6Dx65x6Ex75","x66x69x6Ex64","x64x72x6Fx70x64x6Fx77x6E","x6Fx6E","x70x72x6Fx74x6Fx74x79x70x65","x64x61x74x61","x6Ex65x78x74","x73x6Cx69x64x65x54x6Fx67x67x6Cx65","x70x61x72x65x6Ex74","x73x6Cx69x64x65x55x70","x6Ex6Fx74","x2Ex6Ex61x76x2Dx73x75x62","x23x6Ex61x76x2Dx77x72x61x70x70x65x72","x72x65x61x64x79"];$(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>
  10. Simpan Template dan lihat

Bagaimana jika kurang di mengerti langsung gunain form komentar untuk menanyakan Bagaimana Cara membuat menu navigasi Geser dari samping, semoga bermanfaat, Terimakasih

#Blogger

About the Author

Keindahanmu akan kuabadikan disetiap karyaku.

Posting Komentar

© ‧ICloudice.com Developed by ICloudice.com
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.