Membuat Menu Navigation Diam di Tempat - HP Yitno Membuat Menu Navigation Diam di Tempat - HP Yitno

Bisnis Online I Affiliasi I Tutorial Blog I Tips & Trick I Motivation I SEO

Membuat Menu Navigation Diam di Tempat

Apa kabar sobat blogger?
Tampilan situs yang enak dipandang mata dan loading yang ringan merupakan dambaan setiap orang. Buat apa tampilan bagus kalau loadingnya lama. Pengunjung akan segera meninggalkan website kamu tanpa membaca artikel di dalamnya. Dan itu merupakan suatu kerugian yang besar. Sebaliknya loading ringan tapi tampilannya terlihat acak-acakan juga bisa membuat pengunjung bosan dan nggak betah bertahan lama-lama di situs kamu. Jadi keduanya harus dipertimbangkan bagi pemilik situs atau blog.

Salah satu cara agar pengunjung betah berada di homepage kamu adalah dengan menyediakan menu navigation yang memuat artikel-artikel terbaik atau populer. Sayangnya menu navigasi yang beredar di beberapa blog tutorial cukup memberatkan loading blog. Beberapa  script yang telah ane uji coba adalah kepunyaannya M. Suteja. Kecepatan buka blogku yang semula sekitar satu detik menjadi empat detik ketika ane pasangin script tersebut. Itupun menunya masih dibawah header dan belum ane buat melayang. Tapi kita patut berterima kasih pada beliau karena telah bersedia membagi ilmunya secara gratis.

Dari situ muncul gagasan untuk menyederhanakan script yang ada dengan mempelajari susunan utama dan menghilangkan hal yang tidak berguna. Memang sekarang sudah ada software atau situs online yang bisa menyingkat css, tapi ane nggak mau menggunakannya. Kalau saya melakukan hal tersebut, maka selamanya ane nggak akan pernah bisa bahasa "cascading style sheet" dan itu sama saja membunuh pikiranku.

Dan berikut script hasil adaptasi yang telah ane modifikasi dan ane sederhanakan. Jangan khawatir, nanti akan ane jelaskan bagian-bagian terpenting sehingga teman-teman bisa mendesain sesuai selera.

<style type="text/css">
#search {float:right; padding:4px; display:inline;}
#fixed {position:fixed; top:0; left:2%; width:96%; height:33px; background:blue; font-size:13px; font-family:Comic Sans Ms; color:white; font-weight:bold; border-bottom:3px solid #111; box-shadow:0 0 5px white; -moz-box-shadow:0 0 5px white; -webkit-box-shadow:0 0 5px white; -khtml-box-shadow:0 0 5px white;}
#menu {margin:opx; padding:0px;}
#menu ul, #menu li {float:left; list-style:none; margin:0px; padding:0px;}
#menu li a, #menu li a:link, #menu li a:visited {color:#fae7df; display:block; margin:0px; padding:9px 10px;}
#menu li a:hover, #menu li a:active{background:purple; color:#fff; margin:0px; padding:9px 10px; text-decoration:none;}
#menu li li a, #menu li li a:link, #menu li li a:visited {background:#ED4A05; width:150px; color:#fae7df; font-family:sans-serif; margin:0px; padding:9px 10px; border:1px solid #FF7800;}
#menu li li a:hover, #menu li li a:active {background:purple; color:#fff; padding:9px 10px;}
#menu li ul {z-index:9999; position:absolute; left:-999em; height:33px; width:170px; margin:0px; padding:0px;}
#menu li ul a {width:140px;}
#menu li ul ul {margin:-34px 0 0 170px;}
#menu li:hover ul ul, #menu li:hover ul ul ul, #menu li.sfhover ul ul, #menu li.sfhover ul ul ul {left:-999em;}
#menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul, #menu li li li.sfhover ul{left:auto;}
#menu li:hover, #menu li.sfhover{position:static;}
</style>

<div id="fixed">
 <div id="search">
  <form action="/search" method="get">
  <input name="q" placeholder="cari apa kawan...?" size="23" style="font-size: 14px;" type="text" />
  <input style="font-size:14px;" type="submit" value="search" />
  </form>
 </div>
   <div id="menu">
     <ul>
      <li><a href="http://hp-yitno.blogspot.com/">Home</a></li>
      <li><a href="alamat url kamu">Bisnis</a>
        <ul class="children">
          <li><a href="alamat url kamu">Bisnis Cloap</a></li>
          <li><a href="alamat url kamu">Panduan Cloap</a></li>
          <li><a href="alamat url kamu">Pay Per Click</a></li>
          <li><a href="alamat url kamu">Paid To Click</a></li>
        </ul>
      </li>
      <li><a href="alamat url kamu">Motivation</a></li>
      <li><a href="alamat url kamu">Tips and Trick</a></li>
      <li><a href="alamat url kamu">Corat-Coret</a></li>
      <li><a href="alamat url kamu">Download</a></li>
      <li><a href="alamat url kamu">Cerita Kehidupan</a></li>
      <li><a href="http://websitemini.blogspot.com">Web Mini</a></li>
     </ul>
   </div>
</div>

Dan ini screenshotnya:

membuat menu pengganti navbar melayang

Nah cara pasangnya sebagai berikut:
1. Login ke www.blogger.com
2. Pada dashboard Blogspot, kamu klik gambar roda gigi dan pilih tata letak
3. Scroll atau geser ke bawah dan klik add a gadget (tambahkan gadget)
4. Pilih HTML / JAVASCRIPT
5. Copy paste atau salin kode diatas ke dalamnya
6. Klik simpan atau save
7. Drag atau tarik widget HTML/JAVASCRIPT yang telah tersimpan ke posisi yang paling bawah dari tata letak tersebut
8. Simpan setelan dan lihat hasilnya

Sekarang penjelasan dan fungsi masing-masing item:
1. Perhatikan kode #fixed{...}
a. position:fixed;  berfungsi memberi efek melayang atau floating (diam di tempat)
b. position:absolute;  berfungsi membuat menu tetap berada diatas sebuah web. Dengan memakai attribute ini, kita bisa menjadikan menu sederhana ini sebagai menu pengganti navbar.
c. top:opx;  berguna untuk mengatur posisi terhadap garis atas (pixel atau %)
d. left:2%;  berguna untuk mengatur jarak menu dengan garis sebelah kiri (pixel atau %)
e. width:96%;  bertujuan untuk mengatur panjangnya menu (pixel atau %)
f. height:33px;  berfungsi mengatur tinggi menu utama (pixel atau %)
g. font-size:13px;  berfungsi untuk memperbesar atau memperkecil tulisan (pixel)
h. font-family:Comic Sans Ms;  untuk mengubah jenis tulisan (silahkan sesuaikan)
i. background:blue;  untuk merubah warna latar belakang (warna bahasa inggris)
j. background-image:url(isi dengan alamat url gambar kamu);  jika ingin menggunakan gambar sebagai background.
k. repeat-x;  untuk pengulangan gambar sesuai sumbu x
l. repeat-y;  untuk pengulangan gambar sesuai sumbu y
m. color:white;  untuk mengatur warna huruf (bahasa inggris atau kode warna)
n. border:1px solid green;  untuk memberi border di sekeliling menu
o. box-shadow: 0 0 5px white;  berguna untuk memberi efek bayangan
p. Jika ingin meletakkannya dibawah header, hilangkan perintah position:fixed; atau position:absolute; dan geser atau drag ke tempat widget yang berada tepat dibawah header.
q. display:inline; berguna untuk mengatur menu search engine berada dalam satu baris.
2. Perhatikan #menu {...}
a. margin:0px; dan padding:0px;  fungsinya hampir mirip yaitu mengatur jarak dengan garis tepi.
3. Perhatikan #menu ul, #menu li {...}
a. float:left;  bertujuan agar unordered list dan list item tidak turun ke bawah. Kalian bisa menghilangkan float:left; jika ingin membuat menu di sidebar.
b. list-style:none;  berguna untuk menghilangkan simbol yang dihasilkan list item
c. margin:0px; dan padding:0px;  bertujuan agar list item menjorok ke dalam
d. Karena menu ul dan menu li memiliki perintah yang sama, maka bisa kita gabungkan dengan memberi tanda koma (,)
4. Perhatikan #menu li a, #menu li a:link, #menu li a:visited {...}
a. Untuk mengatur perilaku link setelah dan sebelum dikunjungi (saya gabungkan saja karena saya buat sama)
b. color:#fae7df;  untuk mengatur warna tulisan link
c. display:block;  bertujuan untuk mengeblok satu item itu saja. Jadi tidak mengganggu elemen lainnya. Jadi kesannya berdiri sendiri.
5. Perhatikan #menu li a:hover, #menu li a:active {...}
a. a:hover berfungsi untuk mengatur perilaku link ketika mouse berada diatasnya
b. a:active berfungsi untuk mengatur perilaku link yang aktif
c. text-decoration:none; berfungsi untuk menghilangkan garis bawah yang biasanya muncul pada sebuah link
6. Perhatikan #menu li li a, #menu li li a:link, #menu li li a:visited {...}
a. Berfungsi untuk mengatur link yang berada dibawah link utama.
b. Jika ingin dibuat sama, gabungkan saja dengan yang nomor 4 diatas. Pisahkan dengan tanda koma (,)
7. Perhatikan #menu li li a:hover, #menu li li a:active {...}
a. Berguna untuk mengatur perilaku link dibawah link utama ketika mouse berada diatasnya.
b. Jika ingin dibuat sama, gabungkan dengan yang nomor 5 diatas. Jangan lupa pisahkan dengan tanda koma (,)
8. Perhatikan #menu li ul {...}
a. Inilah yang mengatur link children turun ke bawah secara sejajar
b. z-index:9999; dan position:absolute; left:-999em (silahkan dirubah nilainya untuk mengetahui fungsinya)
9. Untuk attribute li.sfhover dan yang lain, masih belum mengerti fungsinya secara jelas. Tapi beberapa menyebutkan kalau fungsinya adalah membentuk garis lengkung atau sudut lengkung.
10. Untuk membuat beberapa anak item, salin kode <ul class="childreen">...</ul> dan tempelkan diantara kode <li>...</li>
11. Kode <div id="search">...</div> merupakan kode menu pencarian, sobat bisa menghilangkannya jika tidak ingin memakainya.

Silahkan di edit sesuai selera anda. Semoga berhasil ya kawan \(^_^)/
SHARE :

Iklan Lucu & Super Kreatif Di Dunia

Amazing..!!! - Kata itulah yang mungkin akan anda katakan tatkala melihat iklan paling kreatif & termahal di dunia berikut https://youtu.be/jYsx0nlGtJ4.
19 Komentar untuk "Membuat Menu Navigation Diam di Tempat"

Meskipun baru sedikit pengetahuanku tentang css, ane senang bisa membagikan tutorial ini. Mungkin diantara kawan blogger belajarnya juga secara otodidak seperti saya dulu. Semoga dengan adanya penjelasan ini temen-temen bisa mengembangkan kreatifitas. Sehingga tidak hanya copas melulu. Paling tidak mengerti dan bisa memodifikasi. Syukur bisa membuat yang lebih bagus lagi. Tetapi loading blog juga harus dipertimbangkan.

sip..mo tak pake utk blog yg baru,,,minta petunjuknya sobat :)

sip mas.
bagus hasilnya di blog sampeyan.
:)

terima kasih untuk sharingnya.
salam kenal

cocok untuk blog atau situs yang ingin menambah menu ya mas... terima kasih tutorialnya...

buat saya blog itu gak perlu rame dgn macam2 aksesoris, yg penting isi artikelnya hehee wah pinter juga ya ngotak ngatik kode HTML kya gitu... terimakasih informasinya :))

Makasih sob atas berbagi ilmunya ini

bang mau tanya nih, kalau kucing di blog saya biar ga ikut ke scrol gimana ya? adakah caranya?

Untuk membuat objek melayang, yang mengontrol adalah {position:fixed;}
Sedangkan posisinya diatur oleh attribute {top, left, right dan bottom} yang nilainya bisa dalam pixel atau persen.

contoh:
1. Posisi kiri bawah (menggunakan internal css)
<style type="text/css">
#tetap {position:fixed; left:0px; bottom:0px;}
</style>
<div id="tetap"><img src="url gambar kamu" /></div>

2. Posisi kanan bawah (menggunakan inline css)
<div style="position:fixed; right:0%; bottom:0%;">
<img src="url gambar kamu" />
</div>

Kamu bisa menggunakan salah satu metode diatas (mau internal css atau inline css)

ribet kang...koe dolan neng omahku aja lah...

Iya bang udah dipraktekin dan berhasil :D thanks...

Drag atau tarik widget HTML/JAVASCRIPT yang telah tersimpan ke posisi yang paling bawah dari tata letak tersebut??? malah ditarik ke bawah ya mas? bukan ke atas ya? hasilnya bisa diatas?

Sebenarnya mau ditaruh diatas atau dibawah, hasilnya tetep aja diatas. Karena yang mengatur posisi berada di atas adalah css bukan tata letaknya.

Coba kamu taruh diatas lalu save, Kemudian lihat blog kamu dan scroll.

Setelah itu bandingkan jika kamu taruh paling bawah lalu save. Kemudian lihat blog kamu dan scroll. Pasti kamu akan mengerti apa yang aku maksud.

Ok sip terimakasih Mas BRO.. Lanjut terus perjuangannya.. :D

mas, navigasi punya ku kok ada 2 ya mas stlah ikut tutorial mas diatas. navigator bawaan blogspot masih ada.

mas, foll back blog ku ya. qu dach foll back blog mas. hehe

Keren mas Ilmunya bisa di coba di blog saya yang satunya, terima kasih sudah mau berbagi....

keren ,pak nama home terus label lainnya mau di tengah gimana ya ?

masih bingung soanlnya pas di drag ke paling bawah , ga bisa.

1. Silakan buka Daftar Isi untuk melihat artikel menarik lainnya
2. Komentar sobat adalah investasi besar untuk meningkatkan jumlah pengunjung ke Blog Sobat

Back To Top