Sebelumnya kita sudah membahas beberapa Shortcode AMP Untuk Mempermudah Membuat Elemen Kali ini kita akan coba Modifikasi Slide Menu AMP Sidebar Untuk Blog Non AMP. Mungkin Anda sudah sering melihat slide sajian pada blog amp, alasannya yaitu kini memang sudah sangat banyak yang memakai template AMP. Slide sajian AMP sidebar yaitu sajian yang simple dengan pengaruh show hide yang akan muncul dari samping blog.
Selain tampilannya yang simple, AMP sidebar ini juga support untuk dipakai pada versi desktop dan mobile. Terus bagaimana kalau blog kita belum Menggunakan AMP?
Tentu saja ini tidak hanya dapat dipakai pada blog AMP saja, Namun kita dapat Membuat AMP sidebar ini semoga dapat kita dipakai pada template blog Non AMP dengan sedikit memakai javascript untuk menciptakan pengaruh show hide elemennya.
Untuk demonya pada tombol JSFiddle di bawah ini, silihkan klik pada ikon burger atau garis 3 ikon sajian di kanan atas.
Jika Anda ingin mencobanya di blog Anda, silahkan ikuti langkah-langkahnya berikut ini.
Silahkan copy CSS berikut ini dan simpan di template blog Anda di atas arahan
</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>
Kemudian silahkan simpan arahan berikut ini di atas arahan
</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'>See Other Article
<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'>
</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>
Silahkan sesuaikan URL pada link-link menunya dan sosial profilnya.
Selesai. Nah, itulah cara Modifikasi Slide Menu AMP Sidebar Untuk Blog Non AMP Selamat mencoba.
Source: https://xomlic.blogspot.com/search?q=membuat-slide-menu-ala-amp-sidebar
</svg>
<div class='logo_sidebar fontweight500 displayblock'>
</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>
Silahkan sesuaikan URL pada link-link menunya dan sosial profilnya.
Selesai. Nah, itulah cara Modifikasi Slide Menu AMP Sidebar Untuk Blog Non AMP Selamat mencoba.
Source: https://xomlic.blogspot.com/search?q=membuat-slide-menu-ala-amp-sidebar
Share this Article
