Sebenarnya saya ingin mengupas cara membuat berbagai menu navigasi keren dengan animasi yang dapat diterapkan ke dalam template blogger blogspot. Akan tetapi menyadari keterbatasan saya yang tidak suka menulis panjang lebar alias cepat bosan, maka saya memutuskan untuk memberikan contoh salah satu menu yang unik dan keren buat blog menggunakan CSS dan tentu saja kalian harus tahu juga fungsi dan peranan JQuerry dalam hal ini.
Mari kita mulai dari pengertian JQuerry:
jQuery adalah perpustakaan JavaScript ringan, mottonya:"tulis lebih sedikit, lakukan lebih banyak".
Tujuan jQuery adalah untuk mempermudah penggunaan JavaScript di situs web Anda. jQuery mengambil banyak tugas umum yang membutuhkan banyak baris kode kode JavaScript untuk diselesaikan, dan membungkusnya menjadi metode yang dapat kita panggil dengan satu baris kode.
Ho ho ho, artinya kita tidak perlu menulis cukup hanya dengan 'memanggil' dan perintah yang kita butuhkan meluncur dari ruang perpustakaan cloud mereka menuju ke situs kita. Menurut istilah saya sendiri sih, soalnya hanya segitu cara saya mengerti akan dia. Maklum dengan segala keterbatasan otodidak.
jQuery juga menyederhanakan banyak hal rumit dari JavaScript, seperti panggilan AJAX dan manipulasi DOM.
Perpustakaan jQuery berisi beberapa fitur berikut:
- Manipulasi HTML / DOM
- Manipulasi CSS
- Metode acara HTML
- Efek dan animasi
- AJAX
- Dll
Kelemahan: Karena ia mengharuskan kita memasang link jQuerry, ini dapat merugikan kecepatan loading halaman blog. Namun harganya sesuai dengan hasilnya, bukan?
1. Langkah pertama: pasang Link jQuerry ke dalam template blog.
Baik kita mulai dengan pemasangan link jQuerrynya, di dalam halaman editor HTML cari kode </head> dan letakan kode berikut tepat di atasnya:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
Anda bisa mengabaikannya jika di dalam template sebelumnya telah terpasang kode tersebut.
2. Langkah kedua: Tambahkan CSS
Masih di dalam halaman editor HTML blogger kembali temukan kode </head> dan tambahkan kode CSS berikut tepat di atasnya atau di bawah kode jQuerry tadi:
<style>ul { list-style: none; }
a { text-decoration: none; color: black;}
body {
font-family: 'Dosis', sans-serif;
background: pink;
}
#menu-wrapper {
overflow: hidden;
max-width: 100%;
cursor: pointer;
}
#menu-wrapper #hamburger-menu {
position: relative;
width: 25px;
height: 15px;
margin: 15px;
}
#menu-wrapper #hamburger-menu span {
opacity: 1;
left: 0;
display: block;
width: 100%;
height: 2px;
border-radius: 10px;
color: pink;
background-color: #555;
position: absolute;
transform: rotate(0deg);
transition: .4s ease-in-out;
}
#menu-wrapper #hamburger-menu span:nth-child(1) {
top: 0;
}
#menu-wrapper #hamburger-menu span:nth-child(2) {
top: 9px;
}
#menu-wrapper #hamburger-menu span:nth-child(3) {
top: 18px;
}
#menu-wrapper #hamburger-menu.open span:nth-child(1) {
transform: translateY(9px) rotate(135deg);
}
#menu-wrapper #hamburger-menu.open span:nth-child(2) {
opacity: 0;
transform: translateX(-60px);
}
#menu-wrapper #hamburger-menu.open span:nth-child(3) {
transform: translateY(-9px) rotate(-135deg);
}
#menu-container .menu-list .menu-submenu {
padding-top: 20px;
padding-bottom: 20px;
}
#menu-container .menu-list {
padding-left: 0;
display: block;
position: absolute;
width: 100%;
max-width: 450px;
background: white;
box-shadow: rgba(100,100,100,0.2) 6px 2px 10px;
z-index: 999;
overflow-y: auto;
overflow-x: hidden;
left: -100%;
}
#menu-container .menu-list li.accordion-toggle, #menu-container .menu-list .menu-login {
font-size: 16px;
padding: 20px;
text-transform: uppercase;
border-top: 1px solid #dbdcd2;
}
#menu-container .menu-list li:first-of-type {
border-top: 0;
}
.accordion-toggle, .accordion-content {
cursor: pointer;
font-size: 16px;
position: relative;
letter-spacing: 1px;
}
.accordion-content {
display: none;
}
.accordion-toggle a:before, .accordion-toggle a:after {
content: '';
display: block;
position: absolute;
top: 50%;
right: 30px;
width: 15px;
height: 2px;
margin-top: -1px;
background-color: #5a5858;
transform-origin: 50% 50%;
transition: all 0.3s ease-out;
}
.accordion-toggle a:before {
transform: rotate(-90deg);
opacity: 1;
z-index: 2;
}
.accordion-toggle.active-tab {
background: pink;
transition: all 0.3s ease;
}
.accordion-toggle a.active:before {
transform: rotate(0deg);
background: #fff !important;
}
.accordion-toggle a.active:after {
transform: rotate(180deg);
background: #fff !important;
opacity: 0;
}</style>
Pada bagian CSS ini saya menyarankan Anda menambahkan kode berikut dan meletakannya ke bagian atas kode ]]></b:skin>. karena kode ini saya buat untuk membentuk tampilan tombol dan form menu pencarian.
#searchbox{background:pink;border:1px solid #f0f0f0;border-radius:0px;padding:0;width:auto}
input:focus::-webkit-input-placeholder{color:transparent}
input:focus:-moz-placeholder{color:transparent}
input:focus::-moz-placeholder{color:transparent}
#searchbox input{outline:0}
#searchbox input[type="text"]{background:no-repeat 10px 6px #fff;border-width:1px;border-style:solid;border-color:#fff;Border-radius:0px;font:normal 16px Arial,Helvetica,Sans-serif;color:#fff;width:55%;padding:8px 15px 8px 30px}
#button-submit{background:pink;border-width:0;Border-radius:1px;padding:9px 0;width:23%;cursor:pointer;font:bold 16px Arial,Helvetica;color:#fff;text-shadow:0 1px 0 pink}
#button-submit:hover{background:pink}
#button-submit:active{background:pink;outline:0}
#button-submit::-moz-focus-inner{border:0}
Anda bisa saja mengabaikannya, tapi nanti bagian tombol pencarian jadi jelek, lho. Soalnya saya harus menambahkannya sesuai dengan banyak inbox: "Kalau buat menu navigasi (navbar) sekalian dilengkapi menu pencarian, dong".
Sekarang cari kode <body> dan letakan kode berikut tepat di bawahnya:
<div id='menu-container'>
<div id='menu-wrapper'>
<div id='hamburger-menu'><span/><span/><span/></div>
<!-- hamburger-menu -->
</div>
<!-- menu-wrapper -->
<ul class='menu-list accordion'>
<div class='Search'>
<form action='/search' id='searchbox' method='get'>
<input name='q' placeholder='Ketik disini...' size='14' type='text'/>
<input id='button-submit' type='submit' value='Cari'/>
</form>
</div>
<li class='toggle accordion-toggle' id='nav1'>
<span class='icon-plus'/>
<a class='menu-link' href='#'>Menu1</a>
</li>
<!-- accordion-toggle -->
<ul class='menu-submenu accordion-content'>
<li><a class='head' href='#'>Submenu1</a></li>
<li><a class='head' href='#'>Submenu2</a></li>
<li><a class='head' href='#'>Submenu3</a></li>
</ul>
<!-- menu-submenu accordon-content-->
<li class='toggle accordion-toggle' id='nav2'>
<span class='icon-plus'/>
<a class='menu-link' href='#'>Menu2</a>
</li>
<!-- accordion-toggle -->
<ul class='menu-submenu accordion-content'>
<li><a class='head' href='#'>Submenu1</a></li>
<li><a class='head' href='#'>Submenu2</a></li>
</ul>
<!-- menu-submenu accordon-content-->
<li class='toggle accordion-toggle' id='nav3'>
<span class='icon-plus'/>
<a class='menu-link' href='#'>Menu3</a>
</li>
<!-- accordion-toggle -->
<ul class='menu-submenu accordion-content'>
<li><a class='head' href='#'>Submenu1</a></li>
<li><a class='head' href='#'>Submenu2</a></li>
<li><a class='head' href='#'>Submenu3</a></li>
<li><a class='head' href='#'>Submenu4</a></li>
</ul>
<!-- menu-submenu accordon-content-->
</ul>
<!-- menu-list accordion-->
</div>
<!-- menu-container -->
4. Langkah ke empat: Tambahkan JavaScript.
Selanjutnya cari kode </body> di dalam halaman editor HTML template blogger dan letakan kode berikut tepat di atasnya:
<script>$(function() {
function slideMenu() {
var activeState = $("#menu-container .menu-list").hasClass("active");
$("#menu-container .menu-list").animate({left: activeState ? "0%" : "-100%"}, 400);
}
$("#menu-wrapper").click(function(event) {
event.stopPropagation();
$("#hamburger-menu").toggleClass("open");
$("#menu-container .menu-list").toggleClass("active");
slideMenu();
$("body").toggleClass("overflow-hidden");
});
$(".menu-list").find(".accordion-toggle").click(function() {
$(this).next().toggleClass("open").slideToggle("fast");
$(this).toggleClass("active-tab").find(".menu-link").toggleClass("active");
$(".menu-list .accordion-content").not($(this).next()).slideUp("fast").removeClass("open");
$(".menu-list .accordion-toggle").not(jQuery(this)).removeClass("active-tab").find(".menu-link").removeClass("active");
});
}); // jQuery load
</script>
Selesai dan Save Template. Lihat Demo dengan mengklik tombol di bawah ini:
Saya menerapkannya ke template terbaru blogger 'Essential" Silahkan memberikan komentar pada kolom komentar di bawah ini. Saya dengan senang hati akan membantu pemasangannya ke template blog Anda jika Anda membutuhkannya.