Modifikasi Slide Menu AMP diSidebar Untuk Blog Non AMP

Setelah lama tidak updated Tutorial Blog modifikasi Script kode akhirnya saya sempatkan juga waktu luang untuk membahasnya, postingan kali ini akan membahas seputar pembuatan salah satu menu navigasi pada blog yang sangat diperlukan bagi blog dan pengunjungnya. 

Di postingan kali ini kita akan membahas Modifikasi Slide Menu AMP diSidebar Untuk Blog Non AMP yang baru sempat saya terbitkan dan sekaligus untuk menjawab pertanyaan dari pengunjung setia blog ini yaitu membuat menu slide di sidebar untuk blog non AMP.

Seperti yang kita ketahui bersama belakangan ini google sangat menyarankan untuk semua blog khususnya blogspot untuk beralih ke Blog AMP yang penjelasannya dapat sobat baca di google amp. Penggunaan Template AMP ini diharapkan agar pengunjung nyaman untuk mengunjungi berlama-lama di blog tersebut.

Di postingan kali ini akan kita buat menu slide pada sidebar yang lebih simple dan tentunya tidak memakan banyak waktu loadingnya yang akan tampil pada samping blog. DI script yang akan saya bagikan ini menggunakan javascript untuk menampilkan efek show hide.

Bagi sobat yang mau mencoba memasangnya mari kita simak pembahasan berikut ini Cara Membuat Slide Menu ala AMP Sidebar Untuk Blog Non AMP.

Langkah Pertama

Silahkan sobat salin kode CSS dibawah ini lalu letakkan 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 Ke Dua
Silahkan sobat salin kembali kode dibawah ini lalu letakkan 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'>
Dibalik Seo
</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>

DEMO

Silahkan Sobat sesuaikan url diatas pada menu-menu tersebut dan juga profile media sosialnya, perhatikan setiap langkah penerapannya, jika sudah selesai silahkan SAVE dan selesai. Semoga bermanfaat.