Cara Membuat Slide Menu ala AMP Sidebar Di Blogger




Cara Membuat Slide Menu ala AMP Sidebar Di Blogger
Cara Membuat Slide Menu ala AMP Sidebar Di Blogger: Pada malam ini saya akan share sedikit tentang cara membuat slide menu ala amp sidebar, Nah pada tampilan menu ala AMP sidebar ini cukup simple dengan efek show hide yang akan muncul dari samping sperti gambar di atas. Tampilan slide menu ala Amp sidebar ini sangat simple saja, dan mendukung untuk digunakan pada versi desktop maupun mobile.


Slide Menu ala AMP Sidebar ini tidak hanya bisa digunakan pada AMP saja, namun anda dapat memodifikasi AMP sidebar ini agar bisa kita gunakan pada template blog Non AMP. Agar cara tersebut bisa kita gunakan pada template blog Non AMP. Harus menggunakan javascript untuk efek show hide elemennya.

Nah Untuk demonya silahkan coba pada halaman mizipediacom ini,
Bagi anda  ingin mencobanya pada blog Anda, maka silahkan anda ikuti langkah-langkahnya  sebagai berikut ini. 

Menu ala AMP Sidebar Blogger

  1. Pertama , pastikan anda sudah masuk di dasbhor anda sendiri
  2. Kemudian anda masuk pada bagian editor template , caranya pilih Menu Template -> Edit HTML.
  3. Dan anda harus menemukan kode </head> (cara cepatnya tekan CTRL F) Jika sudah menemukan kode </head>, maka tempelkan di atas kode </head> tersebut.
    <style>
    @font-face{font-family:Roboto;font-style:normal;font-weight:500;src:local('Roboto Medium'),local('Roboto-Medium'),url(https://fonts.gstatic.com/s/roboto/v16/RxZJdnzeo3R5zSexge8UUVtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'),url(https://fonts.gstatic.com/s/roboto/v16/RxZJdnzeo3R5zSexge8UUT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff'),url(https://fonts.gstatic.com/s/roboto/v16/RxZJdnzeo3R5zSexge8UUSZ2oysoEQEeKwjgmXLRnTc.ttf) format('truetype')}
    .fontroboto{font-family:Roboto,sans-serif}
    .fontweight500{font-weight:500;}
    .btn-sidebaramp{background-image:url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 25 25' width='34' height='34' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%23333333' d='M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e");background-repeat:no-repeat;background-size:34px 34px;background-position:center center;background-color:transparent;width:48px;height:70px;line-height:70px;border:none;position:fixed;top:0;right:10px;z-index:1001;cursor:pointer}
    .ampsidebar{width:300px;background:#00626B}
    svg.amp-close-image{position:absolute;top:15px;left:16px;cursor:pointer}
    .ampsidebar nav ul{margin-top:30px}
    .ampsidebar nav li:first-child{padding-top:0}
    .ampsidebar nav li a{font-size:16px;padding:10px 20px;color:#efefef}
    .ampsidebar nav li a:hover,.ampsidebar nav li a:visited{color:#fff}
    .ampsidebar button{margin-left:20px}
    .social-follow,.follow_sidebar,.logo_sidebar{text-align:center}
    .logo_sidebar{height:auto;margin:40px auto 0;font-size:24px;color:#fff;letter-spacing:-1px;word-spacing:-5px;line-height:1}
    .follow_sidebar{line-height:normal;letter-spacing:normal;text-transform:uppercase;color:#fff;font-size:.94rem;padding-top:1.5rem}
    .social-follow{margin:.5rem 0 1rem;-webkit-box-pack:initial;-ms-flex-pack:initial;justify-content:initial;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;list-style:none;padding-left:0}
    .social-follow li{display:inline-block;margin-right:0;}
    .social-follow li .gp svg{vertical-align:4px}
    svg:not(:root){overflow:hidden}
    .ampstart-icon,.ampstart-sidebar .ampstart-icon{fill:#fff}
    .liststyle0{list-style:none}
    .p0{padding:0}
    .m0{margin:0}
    .p1{padding:.5rem}
    .inline-block{display:inline-block}
    .displayblock,.sidebar-mask.open{display:block}
    :active,:focus{outline:0}
    a{text-decoration:none}
    .ampsidebar.p0.mystyle{-webkit-transform:translateX(0);transform:translateX(0);-webkit-transition:-webkit-transform 233ms cubic-bezier(0,0,.21,1);transition:-webkit-transform 233ms cubic-bezier(0,0,.21,1);transition:transform 233ms cubic-bezier(0,0,.21,1);transition:transform 233ms cubic-bezier(0,0,.21,1),-webkit-transform 233ms cubic-bezier(0,0,.21,1)}
    .ampsidebar.p0{right:0;-webkit-transform:translateX(100%);transform:translateX(100%)}
    .ampsidebar{position:fixed;top:0;max-height:100vh;height:100vh;max-width:80vw;min-width:45px;outline:0;overflow-y:auto;z-index:2147483647;-webkit-overflow-scrolling:touch;will-change:transform}
    .sidebar-mask{position:fixed;top:0;left:0;width:100vw;height:100vh;opacity:.2;background-image:none;background-color:#000;z-index:2147483646}
    .flow{overflow:hidden;position:relative}
    </style>
  4. Selanjutnya silahkan anda simpan kode berikut ini di atas kode </body>
    <div class='ampsidebar fontroboto p0' id='side-bar'>
    <svg aria-label='Close Sidebar' class='amp-close-image' height='20' onclick="myFunction1()" role='button' tabindex='0' viewBox='0 0 24 24' width='20'>
    <path d='M19,3H16.3H7.7H5A2,2 0 0,0 3,5V7.7V16.4V19A2,2 0 0,0 5,21H7.7H16.4H19A2,2 0 0,0 21,19V16.3V7.7V5A2,2 0 0,0 19,3M15.6,17L12,13.4L8.4,17L7,15.6L10.6,12L7,8.4L8.4,7L12,10.6L15.6,7L17,8.4L13.4,12L17,15.6L15.6,17Z' fill='#fff'></path>
    </svg>
    <div class='logo_sidebar fontweight500 displayblock'>
    mizipediacom
    </div>
    <nav>
    <ul class='p0 liststyle0'>
    <li class='liststyle0 m0 p0'><a class='fontweight500 displayblock' href='http://www.mizipedia.com/search/label/Blogging' title='Blogging'>Blogging</a></li>
    <li class='liststyle0 m0 p0'><a class='fontweight500 displayblock' href='http://www.mizipedia.com/search/label/SEO' rel='nofollow noopener' title='SEO'>SEO</a></li>
    <li class='liststyle0 m0 p0'><a class='fontweight500 displayblock' href='http://www.mizipedia.com/search/label/Template%20Blogger' title='Template'>Template</a></li>
    <li class='liststyle0 m0 p0'><a class='fontweight500 displayblock' href='http://www.mizipedia.com/p/blog-page_18.html' rel='nofollow noopener' target='_blank' title='Sitemap'>Sitemap</a></li>
    <li class='liststyle0 m0 p0'><a class='fontweight500 displayblock' href='http://www.mizipedia.com/search/label/Bisnis%20Online' title='Bisnis Online'>Bisnis Online</a></li>
    <li class='liststyle0 m0 p0'><a class='fontweight500 displayblock' href='http://www.mizipedia.com/search/label/Domain%20murah' title='Review Domain'>Review Domain</a></li>
    </ul>
    </nav>
    <h3 class='follow_sidebar fontroboto fontweight500 displayblock'>follow us</h3>
    <ul class='social-follow m0 displayblock'>
    <li class='p0'>
    <a aria-label='Link to Facebook' class='inline-block p1' href='https://www.facebook.com/#' rel='nofollow noopener' target='_blank'><svg height='30' viewbox='0 0 56 55' width='30' xmlns='http://www.w3.org/2000/svg'><title>Facebook</title><path class='ampstart-icon ampstart-icon-fb' d='M47.5 43c0 1.2-.9 2.1-2.1 2.1h-10V30h5.1l.8-5.9h-5.9v-3.7c0-1.7.5-2.9 3-2.9h3.1v-5.3c-.6 0-2.4-.2-4.6-.2-4.5 0-7.5 2.7-7.5 7.8v4.3h-5.1V30h5.1v15.1H10.7c-1.2 0-2.2-.9-2.2-2.1V8.3c0-1.2 1-2.2 2.2-2.2h34.7c1.2 0 2.1 1 2.1 2.2V43'></path></svg></a>
    </li>
    <li class='p0'>
    <a aria-label='Link to Instagram' class='inline-block p1' href='https://www.instagram.com/#' rel='nofollow noopener' target='_blank'><svg height='30' viewbox='0 0 54 54' width='30' xmlns='http://www.w3.org/2000/svg'><title>instagram</title><path class='ampstart-icon ampstart-icon-instagram' d='M27.2 6.1c-5.1 0-5.8 0-7.8.1s-3.4.4-4.6.9c-1.2.5-2.3 1.1-3.3 2.2-1.1 1-1.7 2.1-2.2 3.3-.5 1.2-.8 2.6-.9 4.6-.1 2-.1 2.7-.1 7.8s0 5.8.1 7.8.4 3.4.9 4.6c.5 1.2 1.1 2.3 2.2 3.3 1 1.1 2.1 1.7 3.3 2.2 1.2.5 2.6.8 4.6.9 2 .1 2.7.1 7.8.1s5.8 0 7.8-.1 3.4-.4 4.6-.9c1.2-.5 2.3-1.1 3.3-2.2 1.1-1 1.7-2.1 2.2-3.3.5-1.2.8-2.6.9-4.6.1-2 .1-2.7.1-7.8s0-5.8-.1-7.8-.4-3.4-.9-4.6c-.5-1.2-1.1-2.3-2.2-3.3-1-1.1-2.1-1.7-3.3-2.2-1.2-.5-2.6-.8-4.6-.9-2-.1-2.7-.1-7.8-.1zm0 3.4c5 0 5.6 0 7.6.1 1.9.1 2.9.4 3.5.7.9.3 1.6.7 2.2 1.4.7.6 1.1 1.3 1.4 2.2.3.6.6 1.6.7 3.5.1 2 .1 2.6.1 7.6s0 5.6-.1 7.6c-.1 1.9-.4 2.9-.7 3.5-.3.9-.7 1.6-1.4 2.2-.7.7-1.3 1.1-2.2 1.4-.6.3-1.7.6-3.5.7-2 .1-2.6.1-7.6.1-5.1 0-5.7 0-7.7-.1-1.8-.1-2.9-.4-3.5-.7-.9-.3-1.5-.7-2.2-1.4-.7-.7-1.1-1.3-1.4-2.2-.3-.6-.6-1.7-.7-3.5 0-2-.1-2.6-.1-7.6 0-5.1.1-5.7.1-7.7.1-1.8.4-2.8.7-3.5.3-.9.7-1.5 1.4-2.2.7-.6 1.3-1.1 2.2-1.4.6-.3 1.6-.6 3.5-.7h7.7zm0 5.8c-5.4 0-9.7 4.3-9.7 9.7 0 5.4 4.3 9.7 9.7 9.7 5.4 0 9.7-4.3 9.7-9.7 0-5.4-4.3-9.7-9.7-9.7zm0 16c-3.5 0-6.3-2.8-6.3-6.3s2.8-6.3 6.3-6.3 6.3 2.8 6.3 6.3-2.8 6.3-6.3 6.3zm12.4-16.4c0 1.3-1.1 2.3-2.3 2.3-1.3 0-2.3-1-2.3-2.3 0-1.2 1-2.3 2.3-2.3 1.2 0 2.3 1.1 2.3 2.3z'></path></svg></a>
    </li>
    <li class='p0'>
    <a aria-label='Link to Twitter' class='inline-block p1' href='https://twitter.com/#' rel='nofollow noopener' target='_blank'><svg height='30' viewbox='0 0 53 49' width='30' xmlns='http://www.w3.org/2000/svg'><title>Twitter</title><path class='ampstart-icon ampstart-icon-twitter' d='M45 6.9c-1.6 1-3.3 1.6-5.2 2-1.5-1.6-3.6-2.6-5.9-2.6-4.5 0-8.2 3.7-8.2 8.3 0 .6.1 1.3.2 1.9-6.8-.4-12.8-3.7-16.8-8.7C8.4 9 8 10.5 8 12c0 2.8 1.4 5.4 3.6 6.9-1.3-.1-2.6-.5-3.7-1.1v.1c0 4 2.8 7.4 6.6 8.1-.7.2-1.5.3-2.2.3-.5 0-1 0-1.5-.1 1 3.3 4 5.7 7.6 5.7-2.8 2.2-6.3 3.6-10.2 3.6-.6 0-1.3-.1-1.9-.1 3.6 2.3 7.9 3.7 12.5 3.7 15.1 0 23.3-12.6 23.3-23.6 0-.3 0-.7-.1-1 1.6-1.2 3-2.7 4.1-4.3-1.4.6-3 1.1-4.7 1.3 1.7-1 3-2.7 3.6-4.6'></path></svg></a>
    </li>
    <li class='p0'>
    <a aria-label='Link to Google+' class='inline-block p1 gp' href='https://www.google.com/#' rel='nofollow noopener' target='_blank'><svg height='24' viewbox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><title>Google+</title><path class='ampstart-icon ampstart-icon-google' d='M20,2A2,2 0 0,1 22,4V20A2,2 0 0,1 20,22H4A2,2 0 0,1 2,20V4C2,2.89 2.9,2 4,2H20M20,12H18V10H17V12H15V13H17V15H18V13H20V12M9,11.29V13H11.86C11.71,13.71 11,15.14 9,15.14C7.29,15.14 5.93,13.71 5.93,12C5.93,10.29 7.29,8.86 9,8.86C10,8.86 10.64,9.29 11,9.64L12.36,8.36C11.5,7.5 10.36,7 9,7C6.21,7 4,9.21 4,12C4,14.79 6.21,17 9,17C11.86,17 13.79,15 13.79,12.14C13.79,11.79 13.79,11.57 13.71,11.29H9Z'></path></svg></a>
    </li>
    </ul>
    </div>
    
    <div aria-label='Open' class='btn-sidebaramp p0' onclick="myFunction1()" role='button' tabindex='0'></div>
    
    <div class="sidebar-mask" onclick="myFunction1()" hidden='' id='sidebar-mask'></div>
    <script>
    function myFunction1() {
       var element = document.getElementById("side-bar");
       element.classList.toggle("mystyle");
       var element = document.getElementById("sidebar-mask");
       element.classList.toggle("open");
      var body = document.body;
      body.classList.toggle("flow");
    }
    </script>
  5. Jika sudah jangan Lupa anda klik Save Template, dan lihat hasilnya.
Jangan lupa anda ganti link URL pada link menu navigasi dan Sosial Profilnya
Demikian penjelasan malam ini, selamat mencoba dan semoga berhasil. Jika anda mengalami kesulitan dalam penerapan kode tersebut pada blog anda, maka silahkan anda berkomentar di bawah ini, dan saya akan segera merespon komentar anda.

Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.



Comment Policy Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas. Show Emoticon. Klik ==>


Join on this site

with Google Friend Connect