Slide navigation merupakan metode navigasi yang memanfaatkan slide atau geseran horizontal untuk mengubah halaman atau konten. Ini memberikan tampilan yang bersih, modern, dan seringkali lebih memikat dibandingkan dengan navigasi tradisional dengan tautan menu yang terlihat. Dengan menggunakan slide navigation, Anda dapat memberikan pengalaman yang lancar dan intuitif bagi pembaca, serta memungkinkan mereka menjelajahi konten dengan mudah.
Bagaimana cara mengimplementasikan slide navigation pada blog Anda? Berikut adalah beberapa langkah sederhana yang dapat Anda ikuti:
1. Pilih template atau tema yang mendukung slide navigation: Pertama, pastikan template atau tema yang Anda gunakan mendukung fitur slide navigation. Beberapa platform blogging populer seperti Blogger biasanya menyediakan opsi tema dengan dukungan slide navigation. Jika tema yang Anda pilih tidak memiliki fitur ini, Anda dapat mencari template kustom atau mengganti tema yang sesuai dengan kebutuhan Anda.
2. Buat daftar konten dengan thumbnail: Setelah Anda memiliki tema yang mendukung slide navigation, langkah berikutnya adalah membuat daftar konten yang akan ditampilkan dalam slide navigation. Pastikan untuk menyertakan thumbnail atau gambar kecil yang mewakili setiap konten. Thumbnail ini akan menjadi titik fokus dan membantu pembaca memahami konten apa yang akan mereka temui.
3. Atur tata letak slide navigation: Setelah daftar konten dibuat, atur tata letak slide navigation pada blog Anda. Tempatkan slide navigation di area yang terlihat dan mudah diakses oleh pembaca, seperti bagian header atau sidebar. Pastikan agar slide navigation terlihat menarik dan selaras dengan desain keseluruhan blog Anda.
4. Tambahkan efek animasi dan transisi: Untuk menambahkan sentuhan khusus pada slide navigation, Anda dapat menggunakan efek animasi dan transisi. Efek-efek ini akan membuat perpindahan antar halaman atau konten menjadi lebih halus dan menarik. Jaga agar efek animasi tidak terlalu berlebihan sehingga tidak mengganggu pengalaman pengguna.
5. Uji dan perbaiki: Setelah mengimplementasikan slide navigation, pastikan untuk menguji fungsionalitasnya pada berbagai perangkat dan browser. Perhatikan apakah slide navigation berjalan dengan baik dan responsif. Jika ada masalah atau bug yang ditemukan, segera perbaiki untuk memastikan pengalaman pengguna yang optimal.
Cara Membuat Slide Navigation Pada Blogger:
1. Buka blogger dan pilih edit tema.
2. Salin kode di bawah ini dan tempelkan di bawah kode </head>
Skip Results Iframe <div class='header'> <div class='header-left'> <div class='header-menu'><a arial-label='Menu' class='menu-toggle' href='javascript:;'><svg focusable='false' height='24' viewBox='0 0 24 24' width='24'> <path d='M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z' /></svg></a></div> </div> <div class='title'> <h1>Navigation</h1> </div> </div> <div class='darkshadow'></div> <nav class='' id='nav-wrapper' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'> <ul> <li class='first'> <a href='https://koderian.blogspot.com/'> <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='javascript:;' title='Bahasa Program'> <span> <svg height='24' viewBox='0 0 24 24' width='24'> <path d='M15 17V14H18V12L22 15.5L18 19V17H15M17 18V21H14V23L10 19.5L14 16V18H17M12 8C9.79 8 8 9.8 8 12C8 13.91 9.35 15.54 11.21 15.92L16 11.86C15.93 9.71 14.16 8 12 8M12 14C10.9 14 10 13.11 10 12S10.9 10 12 10 14 10.9 14 12 13.11 14 12 14M21.66 8.73L19.66 5.27C19.54 5.05 19.28 4.96 19.05 5.05L16.56 6.05C16.05 5.64 15.5 5.31 14.87 5.05L14.5 2.42C14.46 2.18 14.25 2 14 2H10C9.75 2 9.54 2.18 9.5 2.42L9.13 5.07C8.5 5.33 7.96 5.66 7.44 6.07L5 5.05C4.77 4.96 4.5 5.05 4.39 5.27L2.39 8.73C2.26 8.94 2.31 9.22 2.5 9.37L4.57 11L4.5 12L4.57 13L2.46 14.63C2.26 14.78 2.21 15.06 2.34 15.27L4.34 18.73C4.45 19 4.74 19.11 5 19L5 19L7.5 18C7.74 18.19 8 18.37 8.26 18.53L9.91 17.13C9.14 16.8 8.46 16.31 7.91 15.68L5.5 16.68L4.73 15.38L6.8 13.8C6.4 12.63 6.4 11.37 6.8 10.2L4.69 8.65L5.44 7.35L7.85 8.35C8.63 7.45 9.68 6.82 10.85 6.57L11.25 4H12.75L13.12 6.62C14.29 6.86 15.34 7.5 16.12 8.39L18.53 7.39L19.28 8.69L17.2 10.2C17.29 10.46 17.36 10.73 17.4 11H19.4L21.5 9.37C21.72 9.23 21.78 8.95 21.66 8.73M12 8C9.79 8 8 9.8 8 12C8 13.91 9.35 15.54 11.21 15.92L16 11.86C15.93 9.71 14.16 8 12 8M12 14C10.9 14 10 13.11 10 12S10.9 10 12 10 14 10.9 14 12 13.11 14 12 14M12 8C9.79 8 8 9.8 8 12C8 13.91 9.35 15.54 11.21 15.92L16 11.86C15.93 9.71 14.16 8 12 8M12 14C10.9 14 10 13.11 10 12S10.9 10 12 10 14 10.9 14 12 13.11 14 12 14ZZ'> </path> </svg>Tutorial Blogger<span class='new'> News</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='https://koderian.blogspot.com/' itemprop='url'> <span itemprop='name'> <svg class='muter2' style='width:20px;height:20px' viewBox='0 0 24 24'> <path d='M14,13H9.95A1,1 0 0,0 8.95,14A1,1 0 0,0 9.95,15H14A1,1 0 0,0 15,14A1,1 0 0,0 14,13M9.95,10H12.55A1,1 0 0,0 13.55,9A1,1 0 0,0 12.55,8H9.95A1,1 0 0,0 8.95,9A1,1 0 0,0 9.95,10M16,9V10A1,1 0 0,0 17,11A1,1 0 0,1 18,12V15A3,3 0 0,1 15,18H9A3,3 0 0,1 6,15V8A3,3 0 0,1 9,5H13A3,3 0 0,1 16,8M20,2H4C2.89,2 2,2.89 2,4V20A2,2 0 0,0 4,22H20A2,2 0 0,0 22,20V4C22,2.89 21.1,2 20,2Z' /> </svg>Blogger</span> </a> </li> <li> <a href='https://koderian.blogspot.com/' itemprop='url'> <span itemprop='name'> <svg class='muter2' style='width:20px;height:20px' viewBox='0 0 24 24'> <path d='M5,3L4.35,6.34H17.94L17.5,8.5H3.92L3.26,11.83H16.85L16.09,15.64L10.61,17.45L5.86,15.64L6.19,14H2.85L2.06,18L9.91,21L18.96,18L20.16,11.97L20.4,10.76L21.94,3H5Z' /> </svg>CSS</span> </a> </li> <li> <a href='https://koderian.blogspot.com/' itemprop='url'> <span itemprop='name'> <svg class='muter2' style='width:20px;height:20px' viewBox='0 0 24 24'> <path d='M3,3H21V21H3V3M7.73,18.04C8.13,18.89 8.92,19.59 10.27,19.59C11.77,19.59 12.8,18.79 12.8,17.04V11.26H11.1V17C11.1,17.86 10.75,18.08 10.2,18.08C9.62,18.08 9.38,17.68 9.11,17.21L7.73,18.04M13.71,17.86C14.21,18.84 15.22,19.59 16.8,19.59C18.4,19.59 19.6,18.76 19.6,17.23C19.6,15.82 18.79,15.19 17.35,14.57L16.93,14.39C16.2,14.08 15.89,13.87 15.89,13.37C15.89,12.96 16.2,12.64 16.7,12.64C17.18,12.64 17.5,12.85 17.79,13.37L19.1,12.5C18.55,11.54 17.77,11.17 16.7,11.17C15.19,11.17 14.22,12.13 14.22,13.4C14.22,14.78 15.03,15.43 16.25,15.95L16.67,16.13C17.45,16.47 17.91,16.68 17.91,17.26C17.91,17.74 17.46,18.09 16.76,18.09C15.93,18.09 15.45,17.66 15.09,17.06L13.71,17.86Z' /> </svg>Javascript</span> </a> </li> <li> <a href='https://koderian.blogspot.com/' itemprop='url'> <span itemprop='name'> <svg class='muter3' viewBox='0 0 24 24'> <path d='M14.19,14.19L6,18L9.81,9.81L18,6M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,10.9A1.1,1.1 0 0,0 10.9,12A1.1,1.1 0 0,0 12,13.1A1.1,1.1 0 0,0 13.1,12A1.1,1.1 0 0,0 12,10.9Z' /> </svg>Widget</span> </a> </li> <li> <a href='https://koderian.blogspot.com/' itemprop='url'> <span itemprop='name'> <svg class='muter3' viewBox='0 0 24 24'> <path d='M3.14,1A2.14,2.14 0 0,0 1,3.14V5H3V3H5V1H3.14M7,1V3H10V1H7M12,1V3H14V5H16V3.14C16,1.96 15.04,1 13.86,1H12M1,7V10H3V7H1M9,7C7.89,7 7,7.89 7,9C7,11.33 7,16 7,16C7,16 11.57,16 13.86,16A2.14,2.14 0 0,0 16,13.86C16,11.57 16,7 16,7C16,7 11.33,7 9,7M18,7V9H20V11H22V9C22,7.89 21.11,7 20,7H18M9,9H14V14H9V9M1,12V13.86C1,15.04 1.96,16 3.14,16H5V14H3V12H1M20,13V16H22V13H20M7,18V20C7,21.11 7.89,22 9,22H11V20H9V18H7M20,18V20H18V22H20C21.11,22 22,21.11 22,20V18H20M13,20V22H16V20H13Z' /> </svg>HTML</span> </a> </li> <li> <a href='https://koderian.blogspot.com/' itemprop='url'> <span itemprop='name'> <svg class='muter2' viewBox='0 0 24 24'> <path d='M17.45,15.18L22,7.31V19L22,21H2V3H4V15.54L9.5,6L16,9.78L20.24,2.45L21.97,3.45L16.74,12.5L10.23,8.75L4.31,19H6.57L10.96,11.44L17.45,15.18Z' /> </svg>SEO</span> </a> </li> </ul> </li> <li> <a href='https://koderian.blogspot.com/' itemprop='url'> <span itemprop='name'> <svg style='width:20x;height:24px' viewBox='0 0 512 512'> <g> <path d='M425.19,7.392C422.246,2.784,417.158,0,411.686,0h-160c-6.208,0-11.872,3.584-14.496,9.248l-224,480 c-2.304,4.96-1.952,10.752,0.992,15.36c2.944,4.608,8.032,7.392,13.504,7.392h160c6.208,0,11.872-3.584,14.496-9.216l224-480 C428.486,17.824,428.134,12,425.19,7.392z' /> </g> <g> <path d='M497.798,263.392c-2.912-4.608-8.032-7.392-13.472-7.392H352.678L233.222,512h146.464c6.208,0,11.872-3.584,14.496-9.216 l104.64-224C501.126,273.824,500.742,268,497.798,263.392z' /> </g> </svg>Adsense</span> </a> </li> <li> <a href='https://koderian.blogspot.com/' itemprop='url'> <span itemprop='name'> <svg style='width:24px;height:24px' viewBox='0 0 24 24'> <path d='M21,16V4H3V16H21M21,2A2,2 0 0,1 23,4V16A2,2 0 0,1 21,18H14V20H16V22H8V20H10V18H3C1.89,18 1,17.1 1,16V4C1,2.89 1.89,2 3,2H21M5,6H14V11H5V6M15,6H19V8H15V6M19,9V14H15V9H19M5,12H9V14H5V12M10,12H14V14H10V12ZZ' /> </svg>Template</span> </a> </li> <li> <a href='https://koderian.blogspot.com/' itemprop='url'> <span itemprop='name'> <svg style='width:24px;height:24px' 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>Guest Post</span> </a> </li> <li> <a href='https://koderian.blogspot.com/' itemprop='url'> <span itemprop='name'> <svg style='width:24px;height:24px' viewBox='0 0 24 24'> <path d='M11,15H13V17H11V15M11,7H13V13H11V7M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20Z' /> </svg>About</span> </a> </li> <li class="colormode"><a href="javascript:;"><svg class="drk" height="24" viewBox="0 0 24 24" width="24"> <path d="M12,18C11.11,18 10.26,17.8 9.5,17.45C11.56,16.5 13,14.42 13,12C13,9.58 11.56,7.5 9.5,6.55C10.26,6.2 11.11,6 12,6A6,6 0 0,1 18,12A6,6 0 0,1 12,18M20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31L23.31,12L20,8.69Z"> </path> </svg><svg class="lgt" height="24" viewBox="0 0 24 24" width="24"> <path d="M12,18V6A6,6 0 0,1 18,12A6,6 0 0,1 12,18M20,15.31L23.31,12L20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31Z"> </path> </svg><span class="drk">Mode Gelap</span><span class="lgt">Mode Terang</span></a></li> <li class='subs'> <a href='https://www.blogger.com/follow-blog.g?blogID=1730898404600797650' 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> <a href='https://www.blogger.com/' rel='nofollow noopener' target='_blank' title='Ikuti Blog'> <svg class='widget12' viewBox='0 0 24 24'> <path d='M16,17H7V10.5C7,8 9,6 11.5,6C14,6 16,8 16,10.5M18,16V10.5C18,7.43 15.86,4.86 13,4.18V3.5A1.5,1.5 0 0,0 11.5,2A1.5,1.5 0 0,0 10,3.5V4.18C7.13,4.86 5,7.43 5,10.5V16L3,18V19H20V18M11.5,22A2,2 0 0,0 13.5,20H9.5A2,2 0 0,0 11.5,22Z' /> </svg> <span>BERLANGGANAN</span> </a> </li> <li class='footer'> <a href='https://koderian.blogspot.com/' itemprop='url' title='Sitemap'> <span itemprop='name'>Sitemap</span> </a> - <a href='https://koderian.blogspot.com/' itemprop='url' title='Disclaimer'> <span itemprop='name'>Disclaimer</span> </a> - <a href='https://koderian.blogspot.com/' itemprop='url' title='Privacy Policy'> <span itemprop='name'> Privacy</span> </a> <span class='social'> <a class='facebook2' href='https://www.facebook.com/' 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='https://www.instagram.com/' 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 href='https://www.twitter.com/' rel='nofollow noopener' target='_blank' title='Twitter'> <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,3M17.71,9.33C18.19,8.93 18.75,8.45 19,7.92C18.59,8.13 18.1,8.26 17.56,8.33C18.06,7.97 18.47,7.5 18.68,6.86C18.16,7.14 17.63,7.38 16.97,7.5C15.42,5.63 11.71,7.15 12.37,9.95C9.76,9.79 8.17,8.61 6.85,7.16C6.1,8.38 6.75,10.23 7.64,10.74C7.18,10.71 6.83,10.57 6.5,10.41C6.54,11.95 7.39,12.69 8.58,13.09C8.22,13.16 7.82,13.18 7.44,13.12C7.81,14.19 8.58,14.86 9.9,15C9,15.76 7.34,16.29 6,16.08C7.15,16.81 8.46,17.39 10.28,17.31C14.69,17.11 17.64,13.95 17.71,9.33Z' /> </svg> </a> </span> <span class='credit'> Copyright © 2018 - 2020 </span> <span class='developer'>Created <cite><b>Pintarsaurus</b> </cite> </span> </li> </ul> </nav> <!-- End Navigation --> <div class='post-body' id='animated-thumbnail'> <h1>Cara Membuat Slide Navigation di Blogger</h1> <div class="post-content content_1"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus, tortor sit amet rhoncus lobortis, leo libero suscipit justo, ac tincidunt ligula eros sit amet sem. Sed lobortis nisl sed diam porttitor, quis lacinia felis lacinia. In urna nulla, consectetur nec nisi vitae, laoreet pellentesque augue. Donec feugiat, velit eu imperdiet semper, ante sem suscipit nulla, congue suscipit ipsum tellus commodo ipsum. Sed pharetra orci a volutpat faucibus. </br> </br> <div class="separator wk" style="clear: both; text-align: center;"> <a href="https://unsplash.com/photos/sya5fgN7uVo" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" class='lazy' data-src="https://images.unsplash.com/photo-1542838454-d4dce2a7cfde?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" width="640" height="367" data-original-width="1000" data-original-height="574" /></a></div> <div class="separator wk" style="clear: both; text-align: center;"> <a href="https://unsplash.com/photos/rk026C0YUK4" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" class='lazy' data-src="https://images.unsplash.com/photo-1549737926-4eedd67c4e9d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" width="640" height="454" data-original-width="1000" data-original-height="709" /></a></div> <div class="separator wk" style="clear: both; text-align: center;"> <a href="https://unsplash.com/photos/LuRFzqHGiA4" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" class='lazy' data-src="https://images.unsplash.com/photo-1549417229-aa67d3263c09?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjF9&auto=format&fit=crop&w=334&q=80" width="640" height="400" data-original-width="1600" data-original-height="1000" /></a></div> <div class="separator wk" style="clear: both; text-align: center;"> <a href="https://unsplash.com/photos/uCM5tNRf37E" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" class='lazy' data-src="https://images.unsplash.com/photo-1549417338-6f137ab2cd20?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" width="640" height="427" data-original-width="1600" data-original-height="1067" /></a></div> <div class="separator wk" style="clear: both; text-align: center;"> <a href="https://unsplash.com/photos/EgzpWU4aPo4" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img class='lazy' border="0" data-src="https://images.unsplash.com/photo-1549349436-8a35f484c278?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" width="640" height="427" data-original-width="1280" data-original-height="853" /></a></div> </div>
3. Salin kode di bawah ini dan tempelkan di atas kode ]]></b:skin>
Skip Results Iframe @import url("https://fonts.googleapis.com/css?family=Muli:400,700"); a, a:hover, a:link { transition: 0.2s ease; } img { background: #ecf0f1; width: 100%; max-width: 100%; height: auto; margin-bottom: 15px; transition: all 0.9s; } .post-body a.img, .post-body .separator a { margin-left: 0 !important; margin-right: 0 !important; } a { text-decoration: none; } body { background: #ecf0f1; background-size: 100%; background-repeat: no-repeat; font-family: "Muli", sans-serif; margin: 0; padding: 0; position: relative; line-height: normal; } body:before { content: ""; position: fixed; top: 0; bottom: 0; width: 100%; z-index: -1; } .post-body { max-width: 768px; margin: 4% auto; padding: 20px; background: #fff; color: #222; font-size: 16px; line-height: 1.6; box-shadow: 0 5px 5px 1px rgba(0, 0, 0, 0.15); } .post-body h1, .post-body h2 { display: block; margin: 40px auto; font-size: 1.7rem; font-weight: 700; color: #222; text-align: center; } .container h2 { margin-top: 30px; } /* Header */ .header { box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 0 10px 10px 10px; position: sticky; top: 0; z-index: 4; background: #ffffff; } .header-left { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; height: 48px; vertical-align: middle; white-space: nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -moz-user-select: -moz-none; } .title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-flex: 1; -ms-flex: 1 1 100%; flex: 1 1 100%; vertical-align: middle; white-space: nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; } .title h1 { font-size: 24px; font-weight: 500; line-height: 1.5; margin: 0; } /* Dark */ body.darkmode .colormode .drk, .colormode .lgt { display: none; } body.darkmode .colormode .lgt { display: block; } body.darkmode { background: rgba(32, 33, 36, 0.92); color: #ffffff; } /* Nav */ .darkshadow { visibility: hidden; opacity: 0; position: fixed; top: 48px; background: rgba(0, 0, 0, 0.59); left: 0; right: 0; bottom: 0; margin: 0; z-index: 5; transition: all 0.4s ease-in-out; } .darkshadow.open { visibility: visible; opacity: 1; } #nav-wrapper { font-size: 13px; width: 265px; position: fixed; z-index: 5; top: 48px; overflow: hidden; left: 0; background: #fff; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; bottom: 0; padding-top: 15px; -webkit-transform: translateX(-290px); -ms-transform: translateX(-290px); transform: translateX(-290px); transition: all 0.5s ease; } #nav-wrapper:hover { overflow-y: auto; } #nav-wrapper.open { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } #nav-wrapper.close { display: none; } #nav-wrapper ul { margin: 0; padding: 0; list-style: none; } #nav-wrapper li { display: block; list-style: none; position: relative; } #nav-wrapper li.first { background: #d0d0d0; border-radius: 0 50px 50px 0; margin: 0 20px 0 0; transition: all 0.5s ease; display: none; } #nav-wrapper > 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: 12px 0 13px 15px; color: #333333; font-size: 13px; } #nav-wrapper li a.nav-submenu { padding: 10px 15px; padding-bottom: 12px; } #nav-wrapper li ul.nav-sub { display: none; } #nav-wrapper li li a { display: block; position: relative; padding-left: 4em; line-height: 40px; color: #657786; } #nav-wrapper a:hover { color: #6495ed; } #nav-wrapper 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; } #nav-wrapper li.open svg.down { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } #nav-wrapper svg { height: 20px; width: 20px; margin-right: 15px; overflow: hidden; opacity: 0.7; fill: currentColor; } #nav-wrapper > 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; } #nav-wrapper > ul > li.colormode > a > span { -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-flex: 1; -ms-flex: 1 1; flex: 1 1; } #nav-wrapper > 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; } @media only screen and (max-width: 480px) { #nav-wrapper .profile img { width: 24px; height: 24px; margin-right: 15px; margin-left: 1px; border-radius: 20px; } } @media screen and (max-width: 600px) { #nav-wrapper .subs { display: flex; margin-left: 24px; margin-top: 10px; } #nav-wrapper .subs a { font-size: 11px; margin-right: 10px; width: auto; height: auto; padding: 7px 10px; margin-top: 0; background-color: #e1f5fe; color: #666; border-radius: 20px; } #nav-wrapper .subs a:hover { background-color: #6495ed; } #nav-wrapper .subs svg { width: 12px; height: 12px; margin-right: 3px; margin-top: -1px; } #nav-wrapper .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: none; } #nav-wrapper li.footer a { font-size: 11px; font-weight: 400; color: #657786; display: inline-block; padding: 0; } #nav-wrapper .footer { display: block; margin-top: 14px; margin-left: 24px; } #nav-wrapper .footer .social { display: flex; margin: 7px 0; } #nav-wrapper .footer .credit { display: block; color: #657786; } #nav-wrapper .footer .developer { color: #657786; } } #nav-wrapper .subs { display: flex; margin-left: 15px; margin-top: 10px; } #nav-wrapper .subs a { font-size: 11px; margin-right: 10px; width: auto; height: auto; padding: 7px 10px; margin-top: 0; background-color: #e1f5fe; color: #666; border-radius: 20px; } #nav-wrapper .subs a:hover { background-color: #6495ed; color: #fff; } #nav-wrapper .subs svg { width: 12px; height: 12px; margin-right: 3px; margin-top: -1px; } #nav-wrapper .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: none; } #nav-wrapper li.footer a { font-size: 11px; font-weight: 400; color: #657786; display: inline-block; padding: 0; } #nav-wrapper .footer { display: block; margin-top: 14px; margin-left: 15px; } #nav-wrapper .footer .social { display: flex; margin: 7px 0; } #nav-wrapper .footer .credit { display: block; color: #657786; } #nav-wrapper .footer .developer { color: #657786; } .kotak9 { fill: #fff; margin-top: -4px; display: block; } /* Lazy */ .wk { background: #eeeeee linear-gradient( to right, rgba(255, 255, 255, 0) 5%, rgba(255, 255, 255, 0.75) 20%, rgba(255, 255, 255, 0) 30% ); background-size: 100% 100%; animation: wk 3s linear infinite; -moz-animation: wk 3s linear infinite; -webkit-animation: wk 3s linear infinite; -o-animation: wk 3s linear infinite; } .wk img { opacity: 0; transition: 1s all; } @keyframes wk { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } @-webkit-keyframes wk { 0% { background-position: -50% 0; } 100% { background-position: 50% 0; } } @-moz-keyframes wk { 0% { background-position: -50% 0; } 100% { background-position: 50% 0; } }
4. Setelah itu salin kode di bawah ini dan tempelkan di atas kode </body>
Skip Results Iframe $(document).ready(function () { $(".menu-toggle").click(function () { $("#nav-wrapper, .darkshadow").toggleClass("open"); }); $(".darkshadow").click(function () { $("#nav-wrapper,.darkshadow").removeClass("open"); }); var d = function (a, b) { this.el = a || {}; this.multiple = b || false; var c = this.el.find(".nav-submenu"); c.on( "click", { el: this.el, multiple: this.multiple }, this.dropdown ); }; d.prototype.dropdown = function (a) { var b = a.data.el; ($this = $(this)), ($next = $this.next()); $next.slideToggle(); $this.parent().toggleClass("open"); if (!a.data.multiple) { b.find(".nav-sub").not($next).slideUp().parent().removeClass("open"); } }; var e = new d($("#nav-wrapper"), false); }); // Dark Mode $("body").toggleClass(localStorage.toggled); $(".colormode a").click(function () { // Mendeklaraasikan localStorage if (localStorage.toggled != "darkmode") { $("body").toggleClass("darkmode", true); localStorage.toggled = "darkmode"; } else { $("body").toggleClass("darkmode", false); localStorage.toggled = ""; } });
5. Simpan dan lihat hasilnya.
Demo:
https://codepen.io/koderian/embed/GRpWwgr?default-tab=html%2Cresult&theme-id=dark
Kesimpulan:
Slide navigation merupakan cara yang menarik dan unik untuk meningkatkan tampilan dan navigasi pada blog Anda. Dengan menggunakan slide navigation, Anda dapat memperkaya pengalaman pembaca dan membuat blog Anda menjadi lebih menarik.
