TRIK CSS MEMBUAT TOMBOL MENU NAVBAR BLOGGER YANG UNIK

hamburger menu blog unik dan menarik
Tombol Menu yang akan kami kemukakan ini bawaannya cukup smooth atau halus, di anyam menggunakan teknik CSS yang cocok untuk platform blogger, beberapa halaman mulai menggunakan desain dan antar muka yang berbeda dari waktu ke waktu. 

Ada halaman yang tampak menarik dengan desain tidak lazim, namun setelah di akses ternyata memberikan pengalaman yang berbeda bagi pengguna. 

 
Apa manfaatnya...?

Disni letak peranan teknik UX (user experience) dalam seni desain.

Bagi  kebanyakan orang umum, menu untuk membuka navigasi halaman adalah dalam bentuk hamburger, namun pada perkembangan zaman terkadang terdapat hal hal baru yang lebih menarik, yang lebih 'eye-catching' dan tampilan menu pada header ini dapat membuat seluruh tampilan halaman web menjadi beda. Pikirkan kembali siapa juga yang mau melhat 'keindahan sidebar, keindahan related post pada pandangan pertama?

Fokus pembaca akan tertuju pada bagian atas header. Karena disana ada judul, ada bar menu dan ada banyak hal hal yang menarik perhatian. Itu namnya keindahan pada pandangan pertama. Melalui header saya mengenali koran koran online seperti tribun, detik, strait times, Jakarta Post, BBC, CNN, Aljazera dll. Sedangkan halamannya nyaris mirip semua. 

Well kita berkunjung karena 'wajah cantik' di atas kepala itu. Itu pandangan yang saya katakan sebagai cinta pada pandangan pertama. Dan itu cukup worth. Setelah kita tahu itu cantik kita mendekatinya dan mulai membuka dirinya. Jika kelak ada hal yang kita tidak suka itu persoalan lain lagi.

Dan membuat halaman menjadi berbeda itu disarankan pada bagian headernya, lalu buatllah halaman menjadi sederhana agar mudah di ingat dan mudah di pikirkan oleh pengguna. Ini psikologis. Halaman cantik, penuh warna warni, penuh kelap kelip, secara umum akan menjauhkan pengunjung karena kesan mereka itu pasti ribet.

Sebaliknya halaman sederhana, rapi dan cepat akan membuat mereka betah dan menjadikan pilihan untuk tidak membuang waktu dengan loading. Jangan samakan web kecil dengan situs raksasa seperti kompas karena bagi Kompas yang memiliki basis pengguna besar, lingkungannya telah menjadi konsensus: Pengguna yang membutuhkan kompas. Sedangkan bagi halaman kecil dan pemula adalah sebaliknya: Halaman yang membutuhkan pengguna.

Cukup gambarannya. Sekarang mari kita membahas cara membuat navigasi menu klik dengan image dan seluruh menu yang ingin di tampilkan pun akan terbuka.

1. Terapkan ke template blogger varian terbaru.

Saya menerapkannya ke template Essential dan contempo, ya sukses. Lalu menerapkannya ke Notable, sukses juga. Tentu saja ia juga cocok untuk template template yang lebih tua hanya saja template template tersebut tidak responsif, jadi sudah waktunya kita meninggalkannya.

Masuk kepengaturan dasbor blogger blogspot
Pilih Tema
Pilih edit HTML

Di dalam halaman editor HTML blogger kalian hanya perlu mencari kode berikut: </head> karena kedua bundle kode (CSS dan HTML) akan di letakan di sana. CSS di atasnya sedangkan HTML ditempatkan di bawah kode </head> tersebut.

2. Tambahkan CSS.

Tambahkan CSS ke bagian atas kode </head>. Kodenya adalah:
<style> @import url(&#39;https://fonts.googleapis.com/css2?family=Roboto:wght@300&amp;display=swap&#39;);
body {
background:background-color: red; /* untuk browser yang tidak mendukung gradasi warna */
background-image: linear-gradient(white, #f1f1f1);
font-family: &#39;Roboto&#39;, sans-serif;
}
#menu__toggle {
opacity: 0;
}
#menu__toggle:checked ~ .menu__btn &gt; span {
transform: rotate(45deg);
}
#menu__toggle:checked ~ .menu__btn &gt; span::before {
top: 0;
transform: rotate(0);
}
#menu__toggle:checked ~ .menu__btn &gt; span::after {
top: 0;
transform: rotate(90deg);
}
#menu__toggle:checked ~ .menu__box {
visibility: visible;
left: 0;
}
.menu__btn {
display: flex;
align-items: center;
position: absolute;
top: 8px;
left: 90%;
width: 26px;
height: 26px;
cursor: pointer;
z-index: 1000;
}

.menu__btn &gt; span,
.menu__btn &gt; span::before,
.menu__btn &gt; span::after {
display: block;
position: absolute;
width: 100%;
height: 3px;
background-color: #000;
transition-duration: .25s;
z-index: 1000;
}
.menu__btn &gt; span::before {
content: &#39;&#39;;
top: 10px;
z-index: 1000;
}
.menu__btn &gt; span::after {
content: &#39;&#39;;
top: 10px;
z-index: 1000;
}

.menu__box {
display: block;
position: fixed;
visibility: hidden;
top: 0;margin-top:-12px;
left: 100%;
width: 100%;
height: 100%;
margin: 0;
padding: 80px 0;
list-style: none;
background-color: transparent;
box-shadow: 1px 0px 6px rgba(0, 0, 0, .2);
transition-duration: .25s;
z-index:999;
}

.menu__item {
display: block;
padding: 8px 16px;
color: #000;
font-family: &#39;Roboto&#39;, sans-serif;
font-size: 20px;
font-weight: 600;
text-decoration: none;
transition-duration: .25s;
z-index:999;
}
.menu__item:hover {
background-color: #FFCCFF;
color: #111;
}
p {
text-align: center;
color: #fff;
font-size: 50px;
}
p span {
color: #333;
}
img:hover {
animation: shake 2s;
animation-iteration-count: infinite;
}
@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
</style>
Ya saya menuliskan setiap kode di codepen, menguji dan memperbaikinya terlebih dahulu sebelum di copy paste kan kemari.

3. Tambahkan HTML/XML

Masih di halaman editor HTML blogger, letakan kode berikut di bawah kode </head> tadi:
</head>
<div class='hamburger-menu'>
<input id='menu__toggle' type='checkbox'/>
<label class='menu__btn' for='menu__toggle'>
<span class='ig'> <font size='0px'><small><b><img height='auto' id='menu' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGIKQSphX7Ade-QISuyDC7U1Uf8aRn2NNrsQpi6H98IyNQpf9ukUGk1yqIi88VYhG1xqELv94c-j9Swk9DeidoVP4bbjvbbzG4Sh1hk3_p403BnxhVULy0GIeSJcS-kn7qVPxh01UvoGKj/s128/click-2402+%25282%2529.png' width='35'/></b></small></font></span>
<span/>
</label>

<ul class='menu__box'>
<li><a class='menu__item' href='#'><font color='#9900FF'><u>TUTORIAL</u></font></a></li>

<li><a class='menu__item' href='https://www.editblogtema.com/search/label/khusus'>cara custom template CSS</a></li>
<li><a class='menu__item' href='https://www.editblogtema.com/search/label/menu%20navigasi'>Membuat Menu Navigasi</a></li>
<li><a class='menu__item' href='https://www.editblogtema.com/search/max-results=8?q=profile+penulis+diatas+setiap+postingan'>Membuat Profile Penulis</a></li>
<li><a class='menu__item' href='https://www.editblogtema.com/2021/02/cara-membuat-blog-pager-nextprev.html'>Memasang Paginator </a></li>
SAVE template.
    
Perhatikan URL yang saya merahkan, tapi terlebih dahulu lihat tampilannya dengan mengklik 'result' pada codepen di bawah ini:

See the Pen mdRvOYQ by Sufyan Yaan (@sufyan-yaan) on CodePen.

URL di wara merah di atas adalah link gambar atau image png:

<div class='hamburger-menu'>
<input id='menu__toggle' type='checkbox'/>
<label class='menu__btn' for='menu__toggle'>
<span class='ig'> <font size='0px'><small><b><img height='auto' id='menu' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGIKQSphX7Ade-QISuyDC7U1Uf8aRn2NNrsQpi6H98IyNQpf9ukUGk1yqIi88VYhG1xqELv94c-j9Swk9DeidoVP4bbjvbbzG4Sh1hk3_p403BnxhVULy0GIeSJcS-kn7qVPxh01UvoGKj/s128/click-2402+%25282%2529.png' width='35'/></b></small></font></span>
<span/>
</label>

Ia memanggil gambar yang sebelumnya telah saya simpan di dalam blog ini di halaman statis 'Page' dengan judul image. Ukuran gambarnya kecil saja. Sementara dalam pengaturan HTML untuk di tampilkan saya menentukannya dengan : height='auto'; dan width='25'/>

Sehingga tampilan open dan close menu halaman ini jadi telihat unik dan menarik, bukan?

kuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini! Share:

Posting Komentar

Silahkan berkomentar sesuai dengan topik kita ya...

Lebih baru Lebih lama

Formulir Kontak