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

Cara membuat menu navigasi Geser atau muncul dari samping Terbaru

Jika sobat IcloudZer ingin mempunyai tampilan Menu navigasi yang bisa muncul dari samping seperti Icloudice.com saya akan memberikan cara beserta informasinya untuk anda

Tapi sebelum menerapkan di situs blog sobat, saya akan menjelaskan sedikit tentang Cara membuat menu navigasi Geser dari Samping

Tampilan Mobile

Ketika anda menerapkan Cara membuat menu navigasi Geser dari samping ini pada situs 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 Lo

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
  2. Berdoa agar dipermudah sama tuhan
  3. Yang paling penting siapkan kopi sama cemilannya biar lebih rileks, benar gak tuh
  4. Bagi yang gak minum kopi, minum teh atau terserah deh

  5. 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
  2. Pergi ke Template dan pilih edit HTML
  3. Cari kode ]]></b:skin> atau kode </style> dan letakkan kode dibawah ini tepat diatasnya
  4. /* 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}}
  5. Kemudian Cari kode seperti dibawah ini, lalu hapus
  6. <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>
  9. Selanjutnya Cari kode CCS berikut,sudah ketemu lalu hapus
  10. .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;}
  11. Tahap terakhir tambahkan script kode berikut dan letakkan diatas kode </body>
  12. <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>
  13. 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

About the Author

Keindahanmu akan kuabadikan disetiap karyaku.

Post a Comment

Menghasilkan uang melalui survei berbayar
Best Viral Premium Blogger Templates from Icloudice


kami menawarkan berbagai template blogger dan produk istimewa untuk anda, support karya anak bangsa dengan membeli produk yang kami jual

Welcome to my store limited

  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Cookie Consent
    We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
    Oops!
    It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
    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.
    Site is Blocked
    Sorry! This site is not available in your country.