- Masuk ke akun blogger sobat
- Sebelum masuk ke Editor Edit Html sobat lakukan dulu backup template untuk menghindari kegagalan pasang kode script dengan cara Unduh Template Lengkap.
- Kemudian masuk ke > Template > Lalu klik > Edit Html >
- Lalu carilah kode ]]></b:skin> dan untuk mempermudah pencarian gunakan Ctrl + F, setelah ketemu dengan kode tadi kemudian sisipkan kode di bawah ini tepat di atas kode ]]></b:skin>
#navbar-iframe { height:0px; visibility: hidden; display: none; }
Keterangan:
Kode tersebut berfungsi untuk
menyembunyikan navbar standar Blogger, sehingga apabila sebelumnya sobat
telah menyembunyikan navbar standar maka lewati langkah ini dan
lanjutkan pada langkah yang ketiga.
5.Terus sisipkan kode CSS di bawah ini tepat di atas ]]></b:skin>
5.Terus sisipkan kode CSS di bawah ini tepat di atas ]]></b:skin>
.bilah-menu-atas { width: 100%; min-width: 960px; position: fixed; top: 0px; left: 0px; right: 0px; height: 27px; font-size: 13px; z-index: 99; white-space: nowrap; background-color: #336699; background-image: -moz-linear-gradient(center top , rgb(20, 132, 206) 0%, #336699 100%); box-shadow: 0px 2px 0px rgb(14, 90, 140); border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .kolom-utama { -moz-transition: all 0.2s linear 0s; width: 960px; height: auto; margin: 0px auto; } .kolom-menu { width: 521px; height: auto; margin: 0px 0px 0px -41px; float: left; display: inline; } .kolom-menu ul { height: auto; margin-top: 0px; } .kolom-menu ul li { float: left; position: relative; list-style: none outside none; } .kolom-menu ul li:first-child { border-left: 1px solid rgba(30, 30, 30, 0.125); } .kolom-menu ul li a { color: #ffffff; font-weight: bold; text-shadow: -1px -1px rgba(0, 0, 0, 0.2); text-decoration: none; display: inline-block; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; position: relative; border-right: 1px solid rgba(30, 30, 30, 0.125); box-shadow: 1px 0px 0px rgba(255, 255, 255, 0.1); } .kolom-menu ul li a:hover, .kolom-menu ul li a:focus { background-color: rgba(255, 255, 255, 0.125); }
Keterangan:
Warna yang dihasilkan oleh rangkaian
kode CSS di atas adalah warna biru untuk background dan putih pada
teks. Sehingga apabila belum sesuai dengan desain tampilan halaman blog
sobat, maka sesuaikan warna yang digunakan dengan mengganti kode warna
yang dipakai pada bagian color:, background-color:, dan background-image:.
6.Selanjutnya cari kode <body dan lalu sisipkan kode berikut ini tepat di bawah kode <body
<div class='bilah-menu-atas' id='bilahmenuatas'> <div class='kolom-utama'> <div class='kolom-menu'> <ul> <li><a href='http://wayanfai-s.blogspot.com/'><img alt='L3' height='15px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPpD3sEwecTdDLW-vT7t0wNEcE1feGAbXOGy9TqQBP9T5J5umtOP9AYSBPbimk0_CnVxJ_717BGma1T0wtflUFIXn-00g3VmrhGhHy1j5ER1sy3tFozeVkInNyDstPX1qrBQk7kyhknM8/s800/Beranda.png' width='20px'/></a></li> <li><a href='URL'>Menu Kiri 1</a></li> <li><a href='URL'>Menu Kiri 2</a></li> </ul> </div> <div class='kolom-menu'> <ul style='float: right'> <li><a href='URL'>Menu Kanan 1</a></li> <li><a href='URL'>Menu Kanan 2</a></li> </ul> </div> </div> </div>
Keterangan:
Ganti http://wayanfai-s.blogspot.com/ dengan URL blog sobat dan ganti pula kata URL
dengan link artikel yang akan ditautkan. Dan kemudian ubah kata Menu
Kiri 1, Menu Kiri 2, Menu Kanan 1 dan Menu Kanan 2 sesuai dengan menu
tampilan yang dikehendaki.
7.Simpan Template Sobat.
Dan setelah template disimpan maka navbar standar
Blogger tidak akan tampak lagi di halaman blog dan muncul
dengan navbar baru seperti gambar screenshot di atas. Perlu diketahui oleh sobat bahwa contoh kode pada langkah yang keempat
akan menghasilkan 2 (dua) buah kolom menu. Kolom sebelah kiri berisikan
3 (tiga) buah menu yaitu Beranda (Home), Menu Kiri 1, dan Menu Kiri 2,
sedangkan kolom sebelah kanan berisikan 2 (dua) buah menu yaitu Menu
Kanan 1 dan Menu Kanan 2. Sehingga apabila belum sesuai dengan
keinginan, maka silakan dilakukan kustomisasi seperlunya dengan
menambahkan atau mengurangi kode <li><a href='URL'>Menu</a></li>
Sumber: http://eltelu.blogspot.com/2012/09/cara-membuat-tab-menu-horizontal.html
Posted by , Published at 22.28 and have
1 komentar
Μany thаnks for an еffectіve
BalasHapusρiece with referencе to Searсh еngіnes,
and then love sight depiсtion frοm the infographic from the itemѕ іs succeѕsful.
It seemѕ that houѕing becаme one for thіs most difficult merchants рartiсіpating in sociаl media
mаrketing аnd therefore text ѕales.
To their tips nοt to mentіοn forums, agеnts уοu cοuld trу гeally hard to exit
their ρrofesѕіonal sеrνicеs altеrnatively talk rеgaгdіng
work іt allows evеry persοn appeaгance negative.
Aсtuаllу that exρегts claіm site νiѕitors really want 100 perсеnt free, standard ԁata.
They want stuԁy sites, toωns, аny buyіng proсеss,
oг possіbly the ѕteps to creаtіng a
smart investmеnt. Το be sure the fact that the еasy realise sucсess is usually to οffer site
ѵisitοrs ωhat they reallу wаnt:
significantly more helping muсh lеss ρromo.
Revіew my web site; seo london