Ini trik yang cantik! membuat halaman blog menjadi minimalis namun eyecatching, dan terasa intuitif karena ia akan menjadi tampak lebih 'hidup' dengan efek animasi. Karena tidak melibatkan javascript menu ini juga ringan, simpel dan baiklah kita dapat menyimpulkannya:
- Masuk ke dasbor pengaturan blogger
- Cari kode Tema
- Pilih edit HTML
1. CSS
Tentu saja kode CSSnya panjang karena harus membentuk sedikit efek animasi terutama buat menu hamburgernya. Jadi copy seluruh kode CSS berikut di bawah ini.
Di halaman editor HTML template blogger cari kode </head> dan letakan kode CSS berikut di atasnya:
<style>.main p {font-size: 24px;text-align: center;margin: 50px;z-index:999;}#container {position: relative;display: block;width: 100%;height: 100%;z-index:999;}.nav-menu-button {display: block;position: fixed;top: 0;left: 0;height: 0px;width: 0px;padding: 40px 20px 0px 20px;background: rgba(255, 255, 255, 0.75);float: left;margin-left:10px;margin-top: 40px;text-indent: -330px;overflow: hidden;-webkit-transition:background 0.25s ease-in-out 0.5s,width 0.25s ease-in-out 0.25s,height 0.25s ease-in-out 0.25s,text-indent 0.25s ease-in-out 0.25s,padding-top 0.25s ease-in-out 0s;-moz-transition:background 0.25s ease-in-out 0.5s,width 0.25s ease-in-out 0.25s,height 0.25s ease-in-out 0.25s,text-indent 0.25s ease-in-out 0.25s,padding-top 0.25s ease-in-out 0s;transition:background 0.25s ease-in-out 0.5s,width 0.25s ease-in-out 0.25s,height 0.25s ease-in-out 0.25s,text-indent 0.25s ease-in-out 0.25s,padding-top 0.25s ease-in-out 0s;cursor: pointer;z-index:999;}.nav-menu-button:hover,.nav-menu-button:focus {background: rgba(255, 255, 255, 0.85);width: 60%;height: 230px;text-indent: 20px;-webkit-transition:background 0.25s ease-in-out 0s,width 0.25s ease-in-out 0.25s,height 0.25s ease-in-out 0.25s,text-indent 0.25s ease-in-out 0s,padding-top 0.25s ease-in-out 0.5s;-moz-transition:background 0.25s ease-in-out 0s,width 0.25s ease-in-out 0.25s,height 0.25s ease-in-out 0.25s,text-indent 0.25s ease-in-out 0s,padding-top 0.25s ease-in-out 0.5s;transition:background 0.25s ease-in-out 0s,width 0.25s ease-in-out 0.25s,height 0.25s ease-in-out 0.25s,text-indent 0.25s ease-in-out 0s,padding-top 0.25s ease-in-out 0.5s;z-index:999;}.nav-menu-button:hover a,.nav-menu-button:focus a{cursor: pointer;-webkit-transition:all 0.25s ease-in-out 0.25s,background 0.25s ease-in-out 0s;-moz-transition:all 0.25s ease-in-out 0.25s,background 0.25s ease-in-out 0s;transition:all 0.25s ease-in-out 0.25s,background 0.25s ease-in-out 0s;z-index:999;}.nav-menu-button a {color: #888;background: rgba(0, 0, 0, 0.0);text-decoration: none;width: 60%;display: block;padding-top: 10px;padding-bottom: 10px;margin-left: -25px;-webkit-transition: all 0.2s ease-out 0s;-moz-transition: all 0.2s ease-out 0s;transition: all 0.2s ease-out 0s;z-index:999;}.nav-menu-button a:hover,.nav-menu-button a:focus {color: #333;text-indent: 25px;width: 120%;background: rgba(0, 0, 0, 0.15);-webkit-transition: all 0.25s ease-in 0s;-moz-transition: all 0.25s ease-in 0s;transition: all 0.25s ease-in 0s;z-index:999;}.nav-menu-button a.active {color: #333;width: 120%;text-indent: 20px;background: rgba(0, 0, 0, 0.05);-webkit-transition: all 0.25s ease-out 0.25s;-moz-transition: all 0.25s ease-out 0.25s;transition: all 0.25s ease-out 0.25s;z-index:999;}.nav-menu-button:hover .icon,.nav-menu-button:hover .icon:before,.nav-menu-button:hover .icon:after{background: #888;-webkit-transition: all 0.25s ease-out 0.5s;-moz-transition: all 0.25s ease-out 0.5s;transition: all 0.25s ease-out 0.5s;z-index:999;}.nav-menu-button .icon,.nav-menu-button .icon:before,.nav-menu-button .icon:after {background: #000;width: 22px;height: 4px;position: absolute;display: block;content: "";cursor: pointer;right: 0;top: 20px;margin-top: -2px;margin-left: -11px;-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;-webkit-perspective: 1000;-webkit-transform: translateZ(0);-webkit-backface-visibility: hidden;-webkit-transition: all 0.25s ease-out 0.5s;-moz-transition: all 0.25s ease-out 0.5s;transition: all 0.25s ease-out 0.5s;-webkit-transform-style: preserve-3d;transform-style: preserve-3d;z-index:999;}.nav-menu-button .icon {right: 10px;z-index:999;}.nav-menu-button .icon:before {top: -6px;margin-top: 0;z-index:999;}.nav-menu-button .icon:after {top: 6px;margin-top: 0;z-index:999;}.nav-menu-button:hover .icon {width: 0;z-index:999;}.nav-menu-button:hover .icon:before {/*top: -9px;*/top: -3px;width: 16px;right: 6px;-ms-transform: rotate(-28deg);-webkit-transform: rotate(-28deg);transform: rotate(-28deg);z-index:999;}.nav-menu-button:hover .icon:after {/*top: 9px;*/top: 3px;width: 16px;right: 6px;-ms-transform: rotate(28deg);-webkit-transform: rotate(28deg);transform: rotate(28deg);z-index:999;}</style>
2. HTML
Masih di halaman editor HTML template blogger cari kode <body> lalu letakan kode berikut di bawahnya:
<div id='container'><div class='nav-menu-button' id='menu-button'><span class='icon'/><a href='#'>MENU Link 1</a><a href='#'>MENU Link 2</a><a href='#'>MENU Link 3</a><a href='#'>MENU Link 4</a></div></div>
Save template. Selesai.