Skip to main content
Blogs Goblog

follow us

Cara Membuat Menu Slide AMP Sidebar Untuk Blogger Non AMP

Cara Membuat Menu Slide AMP Sidebar Untuk Blog Blogger Non AMP (Blog Bukan AMP) -

pada Postingan Sebelumnya Saya pernah membahas Cara Membuat Image Postingan SlideInUp.
Dan pada Kesempatan kali ini saya akan sedikit membagikan Tentang Cara Membuat Menu Button Fixed Dengan Efek Show Hide Slide Dari Samping,
Sebenarnya Amp Sidebar hanya akan tampil untuk blog Amp saja. Tapi setelah di modifikasi oleh Kang Adhy Suryadi Kompi Ajaib akhirnya bisa digunakan juga di Blog Non Amp atau Blog yang bukan Amp.

Untuk Demonya silahkan lihat di button Jsfiddle dibawah ini :


Jika ingin mencobanya Langsung saja Ikuti caranya dibawah ini :

  • Pertama Silahkan Masuk Ke edit Template
    Klik Ctrl+f Silahkan Cari Kode </head>
  • Silahkan copy kode dibawah ini dan taruh diatas Kode </head>

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


  • Langkah Selanjutnya, Silahkan Copy kode dibawah ini dan letakan diatas 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'> Website Mini </div> <nav> <ul class='p0 liststyle0'> <li class='liststyle0 m0 p0'><a class='fontweight500 displayblock' href='#' title='About'>About</a></li> <li class='liststyle0 m0 p0'><a class='fontweight500 displayblock' href='#' rel='nofollow noopener' title='Contact'>Contact</a></li> <li class='liststyle0 m0 p0'><a class='fontweight500 displayblock' href='#' title='Privacy'>Privacy</a></li> <li class='liststyle0 m0 p0'><a class='fontweight500 displayblock' href='#' rel='nofollow noopener' target='_blank' title='Sitemap'>Sitemap</a></li> <li class='liststyle0 m0 p0'><a class='fontweight500 displayblock' href='#' title='Iklan'>Iklan</a></li> <li class='liststyle0 m0 p0'><a class='fontweight500 displayblock' href='#' title='Jasa Review'>Jasa Review</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>
  • Langkah Terakhir Simpan Template. dan silahkan lihat Hasilnya.
    Mungkin hanya itu saja untuk artikel tentang Cara Membuat Menu Slide AMP Sidebar Untuk Blogger Non AMP. Semoga bermanfaat.

    Sumber : Kompi Ajaib
  • You Might Also Like:

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