20 September 2012
Ketika membuat blog dengan menggunakan platform Blogger atau Blogspot, maka secara default di atas header akan ditampilkan bilah mendatar berisikan beberapa menu yang biasa disebut dengan istilah ‘Navbar’ atau dapat pula disebut sebagai baris navigasi. Namun karena beberapa alasan (misalnya adalah untuk mempercantik tampilan halaman), maka tidak sedikit pengelola blog yang menyembunyikan bagian tersebut dengan cara menambahkan kode tertentu ke dalam template.
Apabila sekarang kita berbicara dan membahas mengenai navbar, maka perlu diketahui bahwasanya navbar tidak hanya dapat disembunyikan, namun dapat pula dilakukan kustomisasi untuk bagian tersebut yaitu dengan cara menambahkan navbar baru yang lebih ‘cantik’ bila dibandingkan dengan navbar standar Blogger. Dan untuk mempermudah pemahaman mengenai navbar baru yang dimaksud di sini, maka Anda dapat melihatnya pada gambar di tas, dalam hal ini adalah bagian yang ditunjukkan dengan tanda anak panah.
Oke, sekaligus menanggapi pertanyaan Sobat Blogger dalam artikel tanya jawab tentang bagaimana cara membuat menu navbar seperti yang tampak pada gambar di atas, maka sekarang kita langsung pada pokok pembahasan yaitu mengenai cara membuat bilah navigasi di atas header sebagai pengganti navbar. Dimana teknik yang perlu dilakukan untuk keperluan tersebut adalah dengan cara mengerjakan langkah-langkah berikut ini secara berurutan.
Pertama, buka editor template dengan cara mengeklik menu ‘Template’ > ‘Edit HTML’ > ‘Lanjutkan’.
Kedua, cari ]]></b:skin> dan kemudian sisipkan kode di bawah ini tepat di atasnya.
#navbar-iframe { height:0px; visibility: hidden; display: none; }
Keterangan:
Kode tersebut berfungsi untuk menyembunyikan navbar standar Blogger, sehingga apabila sebelumnya Anda telah menyembunyikan navbar standar maka lewati langkah ini dan lanjutkan pada langkah yang ketiga.
Ketiga, sisipkan rangkaian kode CSS berikut ini tepat di atas ]]></b:skin> .
/*-------------------------------------------------------------- Kustomisasi Bilah Menu Navigasi Di Atas Header Halaman Blog Oleh: Semar Bingung Blog: ELTELU -:[SEMAR BINGUNG'S WEBLOG]:- URL : http://eltelu.blogspot.com/ --------------------------------------------------------------*/ .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 Anda, maka sesuaikan warna yang digunakan dengan mengganti kode warna yang dipakai pada bagian color:, background-color:, dan background-image:.
Keempat, cari kode <body dan kemudian sisipkan rangkaian kode dengan format seperti contoh berikut ini tepat di bawahnya.
<div class='bilah-menu-atas' id='bilahmenuatas'> <div class='kolom-utama'> <div class='kolom-menu'> <ul> <li><a href='http://eltelu.blogspot.com/'><img alt='L3' height='15px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrKswxWWoTa5oGLo8k05LOvxwp4RjVqZbABcylbMs8c8p2-Ca5TEA8Xyt1wqXZsYl7JJd-LORsOVierpwHqzv7vF0tny6m88U2jnCGh3-uwYlQBJwhggaGg2bLukgmzPzc-_zK6zWDlbc/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://eltelu.blogspot.com/ dengan URL blog Anda 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.
Kelima, simpan template.
Setelah template disimpan maka navbar standar Blogger tidak lagi ditampilkan di halaman blog dan akan tergantikan dengan navbar baru seperti yang tampak pada gambar di atas. Kemudian perlu diketahui bahwa rangkaian 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>.
Semoga berguna dan bermanfaat.
Salam.
UPDATE pada Jumat, 02 Agustus 2013:
Perlu diketahui bahwasanya telah dilakukan pembaruan (update) terhadap teknik pembuatan tab menu horizontal seperti navbar yang diuraian pada artikel tersebut. Dalam hal ini pembaruan yang dimaksud dapat Anda lihat dengan cara membuka tautan di bawah ini.
Cara Membuat Menu Tab Keren Pada Blog Dengan Sub Menu Pull Down Dan Ujung Sudut Melengkung
Ragam Tumbuhan 
Unik & Langka 
Aneka Buah 
Produk Sederhana 
Karya Seni 
Tempat Wisata 
Ragam Kegiatan 
Aneka Bunga 
Hewan & Serangga
Terdapat 320 komentar pada artikel ini ▶
blog aku gak ada kkode <body
@mencintai dengan sederhanaSilakan Sobat cek lagi dengan cermat. Karena dalam stiap struktur template pasti terdapat bagian body template. :)
Lenkap banget penjelasan diatas mengenai mempercantik bilah menu navbar.
Salam sukses selamat berkarya.
Saya kagum ats semua karya karya agan dan mengucapkan terimaksih telah berkunjung ke blog "Coretan UMUM" satu kehormatan besar tentunya telah dikunjungi senior seperti agan.
manntap ni...
thx info nya gan
@Deden Q'cuyTerimakasih atas kunjungan baliknya Sobat. Dan terimakasih pula atas pujian yang Sobat berikan.
Namun sebenarnya saya sediri merasa masih newbie kok, karena karya yang saya terbitkan dapat dibilang belumlah seberapa.
Oh ya, tidak lupa saya sampaikan selamat berkarya pula untuk Sobat. :)
@androidkuSama-sama Sobat. Terimakasih atas kunjungan dan bernenannya mengeposkan komentar dalam artikel ini.
kode bodynya seperti ini bukan sob [body expr:class='"loading" + data:blog.mobileClass']
[=<
]=<
@GhiieellaaankYap...! betul sekali.
Dalam template standar Blogger, kurang lebih formatnya memang seperti itu.
Dan kalau dalam artikel ini hanya saya tulis bagian depannya saja, maksudnya adalah untuk mempermudah pencarian saja. Karena rangkaian kode yang terdapat di belakang [body ... bisa jadi tidak sama jika template yang digunakan berbeda. :)
ko ga bisa ya.. punyaku.. ga bisa nge link ke tulisan.. cara post nya gimana ya
@Asih Budi AriyantiSaya kurang paham dengan yang Sobat maksud "ga bisa nge link ke tulisan".
Tapi ketika tadi saya cek ke blog yang Sobat kelola, sepertinya bisa gitu kok.
oh.. iya.. mas.. sy utak atik lagi bisa... makasih ya..
oh iya.. sy juga lagi kelola yang blog ini labsainsdalazhar.blogspot.com.
yg ini sy coba.. beneran ga bisa... sy coba pake laman ga bisa dibuka juga..
yg kebuka cuma menu beranda
gimana ya mas solusinya
@Laboratorium SainsBisa jadi karena Sobat belum melakukan pengaturan pada setelan halaman yang akan ditampilkan pada tab menu.
Sehingga silakan klik di sini untuk membuka artikel yang menguraikan tentang tata cara pengaturan halaman atau tautan yang akan dimasukkan dalam tab menu (lihat langkah pertama dalam artikel tersebut).
Sekian dan semoga dapat membantu.
CMIIW
mas sudah sy coba tapi ada kode yg ga ada.. gimana ya
makasih gan atas infonya,
bermanfaat bgt..:)
maen dong gan ke blog ane.. "noeyrinandi.bolgspot.com"...hehehe
@Noey StonesLangsung meluncur ke TKP, Sob. :)
gan ane ini masih pemula dlm blog, bisa kasih tau ane ngga gmna caranya klo misalnya ane klik "home" trus keluarnya di blog ane juga dgn halaman yg beda, bukan d url org lain. pokonya kaya di blog agan agan dah..
@Noey StonesApabila yang Sobat maksud adalah apabila diklik ikon bergambar rumah yang menandakan halaman beranda, maka coba pahami kembali keterangan yang terdapat pada langkah keempat.
Dimana maksud dari keterangan tersebut adalah mengganti URL (link) untuk bagian tertentu (misalnya beranda) sesuai dengan URL (link) yang diinginkan, sehingga apabila bagian tersebut diklik maka akan membuka halaman beranda blog yang Sobat kelola. Dan demikian pula untuk bagian yang lainnya.
Jadi kesimpulannya adalah dengan cara memasukkan atau mengganti URL (link) sesuai dengan URL (link) halaman atau artikel yang akan ditautkan.
Sekian dan semoga dapat membantu.
CMIIW
Tambah ngilmu lagi Gan...
Terimakasih and Salam Sukses
@smartpulsa-88Sama-sama dan salam sukses balik.
mantap gan,,,ane sukses coba cek blog ane
http://bilogizma.blogspot.com/
@bilogizmaOke....
gan kok berandane ke blog laen
@SNEDA MAOSPATISepertinya ada 1 (satu) hal yang belum Sobat kerjakan. Dalam hal ini adalah mengganti URL dalam rangkaian kode tersebut sesuai dengan keterangan yang terdapat pada langkah keempat. :)
gan mau tanya nie, ane dah ngikutin cara 1 mpe 5, cma ane ada asalah gambar n nama blog ane jadi kena hidden gitu kayanya gmana ngasih muncul gambar n nama blognya, klo menu barnya ane sukses, mohon bantuannya.
@SMAN1 TANJUNG PALAS UTARASobat, setelah saya lakukan pengecekan pada blog yang Sobat kelola, ternyata penyebabnya sangatlah sepele. Namun walaupun disebabkan oleh hal yang terbilang sepele, akan tetapi akibatnya memang fatal.
Jadi begini, silakan Sobat lakukan edit template lagi (kerjakan langkah pertama), dan kemudian cari kode berikut ini:
bilah-menu-atas {
Nah, apabila kode tersebut sudah ketemu, maka perhatikan bahwa sebenarnya ada yang terlewatkan untuk bagian tersebut. Dalam hal ini adalah kurang tanda titik di depannya.
Jadi, solusinya adalah tambahkan tanda titik di depan bilah-menu-atas {, sehingga menjadi seperti berikut ini:
.bilah-menu-atas {
Dan selanjutnya setelah ditambahkan tanda titik (seperti kode di atas), maka silakan lakukan preview atau dapat pula langsung simpan template.
Sekian dan semoga dapat membantu. :)
sukses hanya untuk 1 level menu saja, kalo mau bikin sub menu dan sub sub menu kok ga berhasil ya gan?
@Ulum MahyuarsaSobat, perlu diketahui bahwa tutorial dalam artikel ini memang hanya digunakan untuk membuat bilah navbar dengan lis item di dalamnya.
Sehingga apabila Sobat ingin menambahkan sub menu pada list item yang ada, maka silakan buka dan terapkan tutorial dalam artikel berikut ini:
Cara Membuat Sub Menu Pull Down Bertingkat Pada Bilah Navigasi Pengganti Navbar
Sekian dan semoga dapat membantu. :)
Sobat, ane masih newbie nih. Ane dah coba n berhasil tampilannya bagus. Namun ane ingin kaya punya sobat, si tab menunya ada sub menu lagi (menu turun).
Mohon bimbingannya ya... :D
Trims
@M. Y. ChandraUntuk membuat sub menu, tutorialnya dapat Sobat lihat dalam artikel berikut ini:
Cara Membuat Sub Menu Pull Down Bertingkat Pada Bilah Navigasi Pengganti Navbar
Sekian dan semoga dapat membantu.:)
Thangkyu Gan atas membagi ngilmunya...
Salam Sukses.
@smartpulsa-88Terimakasih dan salam sukses balik, Sobat. :)
permisi om gan ^-^
gua udah ikuti tata cara nya dari awal tapi kenapa gak muncul ya tu menu nya??
mhon d jawab mas bro
@Maynanda AlphatianUntuk memasang menu drop down seperti yang Sobat maksud, silakan lihat uraiannya dengan cara membuka artikel berikut ini:
Cara Membuat Sub Menu Pull Down Bertingkat Pada Bilah Navigasi Pengganti Navbar
Atau silakan buka artikel dengan judul Cara Membuat Pull Down Menu Dengan Ujung Sudut Melengkung Atau Rounded Corners Tab, karena artikel ini merupakan update (pembaruan) atas teknik yang diuraikan dalam artikel ini.
Sekian dan semoga dapat membantu. :)
@yogi amirCoba Sobat kerjakan lagi langkah-langkah di atas secara urut dan runtut. Dan Pastikan pula bahwa semua script telah terpasang dengan benar.
Karena setelah saya coba terapkan pada blog yang Sobat kelola dengan memasukkan semua script di atas dengan benar, maka hasilnya pun sesuai dengan yang diharapkan. :)
Gan ko di template selular ikutan muncul juga?
Boleh tau gak gan agar di browser versi seluler ga ikut2an muncul juga?
Tolong pencerahannya Gan!
Kok aku ga bisa ya?
@Ikhwanul MusliminCoba Sobat kerjakan setiap langkah secara urut dan runtut. Dan pastikan pula tidak terdapat kekeliruan pada format atau kode yang disisipkan dalam template.
Apabila hal tersebut telah dikerjakan dengan benar, maka saya dapat memastikan bahwa hasilnya sesuai dengan yang diharapkan. :)
terimakasih mas, sudah saya coba dan berhasil hehe. terimakasih banyak, link mas sudah saya pasang dan saya follow diblog kecil saya. :))
gan, pas saya simpan muncul tulisan
"Kesalahan saat mengurai XML, baris 734, kolom 38: The entity name must immediately follow the '&' in the entity reference."
tuluung gan. . . hehe..
makasih
@Ahwazi SaputraSama-sama Sobat.
Link juga sudah saya pasang balik dan dapat Sobat cek pada kolom blog sahabat yang terdapat di halaman beranda.
@Bloge ZengholeAda kemungkinan terdapat kekeliruan ketika Sobat mengimplementasikan teknik yang diuraikan dalam artikel ini.
Tapi setelah saya cek ke blog yang Sobat kelola, sepertinya masalah sudah dapat teratasi gitu kok.
Jadi tidak perlu penjelasan lagi untuk mengatasi masalah ini kan...? :)
kalo bikin tombol share di navbar gimana bro? kasih tau yaaa
@Andes Junkies Secara prinsip tekniknya tidak beda jauh dengan cara yang digunakan untuk membuat list item (menu) dalam bilah navbar seperti di atas, Sob.
Yang perlu dilakukan hanyalah mengganti list item yang terdapat dalam tag ul dengan script tombol share yang dimaksud.
nice post sobat, dengan tips ini blog jadi lebih menarik.
mas.. mau tanya ya.. gimana caranyabuat navbar jadi bentuk yang sekarang.. tutorial yang sebelumnya sudah saya terapkan..
saya pengen coba navbar dari mas sekarang.. mohon bantuannya ya.. mas terima kasih.
Asih budi ariyanti 'asihnaim.blogspot.com'
@mariyanto widodo Terimakasih Sobat. :)
@Laboratorium Sains Sobat dapat menemukan jawabannya dengan cara membuka artikel berikut ini:
Cara Membuat Pull Down Menu Dengan Ujung Sudut Melengkung Atau Rounded Corners Tab
Semoga dapat membantu. :)
trimakasih ya, n saya kopy
@Rouf TracalSama-sama Sobat....
wakkkakakak...blog ane jadi aneh gan, salah dimananya yach, kok jadi vertikal......cape deh...
mohon pencerahanya.....
thx
@abdullahSudah saya lihat kok. Dan saya rasa Sobat tidak akan mengalami kendala dalam mengimplementasikan bila telah mengerjakannya dengan benar sesuai urutan langkah-langkah di atas. :)
mantab gan!dan terima kasih..
mohon di koreksi ya template blog saya,
@BARA MASSama-sama Sobat. Dan saya rasa Sobat telah mengimplementasikan teknik yang diuraikan dalam artikel ini secara tepat. :)
terimakasih ilmunya... smg mjd amal kebaikan krn berbagi ilmu yg bermanfaat ^^
@anita nataliaSama-sama dan terimakasih balik Sobat. :)
hehehe karena ini saya baru pertama utak atik blok, mau tanya bagaimana caranya mengisi menu yang sudah dibuat? jadi ketika misal menu artikel di klik bisa di baca informasinya terimakasih banyak atas bantuannya
hehe g jadi sudah sedikit faham.. terimakasih sy utak atik lagi
@anita nataliaSyukurlah bila demikian. :)
wah mantap..makasih nih gan
makasih udah tak coba and berhasil bos
@dudi-suswandi.blogspot.comTerimakasih balik Sobat.
@ResseXSama-sama Sobat. Terimakasih atas berkenannya mengeposkan komentar dalam artikel ini.
wah sangat bermanfaat sekali..
silakan kasih saran buat blog saya yaa sob..
terima kasih
Thank'z Gan!
Ane mzh Newbie..
Sangat Membantu.,..
Keren dan bagus banget gan. Terima kasih :)
visit back http://novaibnu.blogspot.com/
@andieshinigamiTerimakasih Balik Sobat. :)
@Alif Irfan AnshorySama-sama Sob. :)
@Ic CreemOke, terimakasih balik Sobat.
keren banget mas gan ... tp saya pengen nambahin kolom pencarian di samping kanan itu gimana caranya ya mas gan ,,,, mohon pencerahanya dong,,. makasi banyak,,.
mohon maaf kalo dropdown cara menambahkannya bagaimanan. terima kasih mas
keren... makasih om
@Yudha ArdiantoSobat dapat menemukan jawabannya dengan cara membuka artikel berikut ini:
Cara Menambahkan Sub Menu (Pull Down Menu) Pada Tab Menu Horizontal Standar Blogger
Semoga dapat membantu. :)
@Yudha ArdiantoBagaimana bila script dikirim via email saja?
Saya memang sengaja tidak menerbitkan artikelnya, dengan pertimbangan karena sebenarnya telah banyak yang mengulas mengenai pembuatan daftar isi seperti itu. :)
nice info gan.
best regards. don't forget to visit back.
www.galaxy-ilmu.com
Thank Gan atas ilmunya, pi gimana cara mengisi postingannya di menu itu gan . . . ???
@sigit KuncoroUntuk keperluan tersebut, Sobat tinggal memasukkan script Google Custom Search ke dalam salah satu list item yang terdapat paa bagian kanan.
Sebagai contoh misalnya dengan cara mengganti [a href='URL']Menu Kanan 1[/a] dengan script yang dimaksud.
Semoga dapat membantu. :)
Silahkan lihat dan kunjungi blog saya, saya masih pemula dalam membuat blog, jika anda mempunyai kritik dan saran bagaimana seharusnya blog saya supaya terlihat lebih professional saya akan sangat senang sekali. Terlebih lagi jika anda ingin mencari tahu tentang pantai indah kapuk.
saya mempunyai info semua tentang Pantai Indah Kapuk, Jakarta Utara.
Terima Kasih
@GusMaksum.ComSobat dapat menemukan caranya dalam artikel berikut ini:
Cara Membuat Sub Menu Pull Down Bertingkat Pada Bilah Navigasi Pengganti Navbar
Namun demikian saya lebih menyarankan agar Sobat menggunakan teknik yang diuraikan dalam artikel di bawah ini, karena artikel berikut merupakan update dari teknik yang diuraikan dalam artikel ini.
Cara Membuat Pull Down Menu Dengan Ujung Sudut Melengkung Atau Rounded Corners Tab.
Semoga dapat membantu. :)
@FerdiTerimakasih balik Sobat. :)
@dwi aulia rahman putraOke, terimakasih Sobat.
makasih banyak banget ya kak!!!
@Herie Bachtiar RifaiApabila yang Sobat maksud adalah mengisi tab menu yang dihasilkan oleh teknik tersebut, maka silakan Sobat lihat keterangan untuk langkah yang keempat. :)
@Pantai Indah KapukOke Sobat. :)
mksh infonya..
kunjungi jg
http://otobiazza.blogspot.com
@Qolbi AlfariziSama-sama Sobat.
Namun setelah saya cek pada blog yang Sobat kelola, sepertinya masih terdapat kekeliruan dalam menerapkan teknik tersebut sehingga hasilnya tidak sesuai dengan yang semestinya diharapkan. :)
@Oto BiazzaSama-sama.
@Adhen SatrianiCaranya tinggal mengganti ukuran lebar untuk kolom-utama sesuai dengan lebar yang diinginkan.
TOP BGT....!! Thanks ea infonx..:)
Waw artikel yang sangat bagus sob. Ditunggu kunjungan baliknya...
Klo mau nambahin Sub menu gmana ya?
@Linda LestariTerimakasih balik Sobat. :)
@hendry kinotakaraUntuk menambahkan sub menu, silakan Sobat klik di sini guna membuka artikelnya.
Namun saya lebih menyarankan agar Sobat menggunakan teknik yang diuraikan dalam artikel berikut ini, karena merupakan update dari teknik yang diuraikan dalam artikel ini.
Silakan klik di sini untuk membuka artikelnya.
Semoga dapat membantu. :)
@Aditya L PramanaOke, saya pasti akan berkunjung balik ke blog Sobat. :)
@Setyawan SkylineOke Sob...
pertama kan dikatakan edit html terus lanjutkan. maka muncul sebuah kode.
yang dilanjutkan itu apanya ????
makasih
http:/dianoohdian.blogspot.com
Bang KoK Ad tulisan Kayak Gini Maaf, laman yang Anda cari di blog ini tidak ada.
kog udah saya ikut langkah-langkahnya,tetep gak berhasil ya?ada saran?mohon bantuan :)
saya masih bingung cara meletakan kode cssnya gan saya udah letakan di atas kodenya tpi knpha tetep standart ya mohon bantuanya gan
gan kan ane da taro kode cssnya tpi koq blm berubah ya
@Dian TheresiaMaksdnya adalah klik tombol (menu) 'Lanjutkan' atau 'Continue'. :)
klau ingin membuat sub folder gmna ya? thx
mas,ngisi teks pada menu 1 dan menu 2 itu gmna??kan itu jika di klik masih kosong
@[S]parta-[F]rceKalau kasusnya seperti itu, maka coba Sobat cermati lagi keterangan untuk langkah yang keempat. :)
@AYAHE MELA blog saya kok gg berfungsi yaa kodenya
@juliano karesiSobat, sebelumna mohon maaf karena kebetulan tadi saya baru dapat melakukan pengecekan.
Dan berhubung tab menu sudah terpasang dengan benar, maka saya rasa tidak ada yang perlu saya bantu lagi tentang permasalahan yang Sobat tanyakan. :)
@Abdur rahmanSobat, coba dipahami dulu setiap langkah yang ada baru kemudian kerjakan secara berurutan.
Bila Sobat mengerjakan setiap langkah dengan benar, maka saya dapat memastikan hasil yang didapat sesuai dengan harapan. :)
@Irham SyarifApabila yang Sobat maksud adalah menambahkan sub menu, maka silakan klik di sini untuk membuka artikelnya.
Akan tetapi saya lebih menyarankan agar Sobat menggunakan teknik yang diuraikan dalam artikel berikut ini, karena artikel berikut ini merupakan update dari teknik yang diuraikan dalam artikel ini.
Silakan klik di sini untuk membuka artikelnya.
Semoga dapat membantu. :)
@agung zamzamiSobat dapat melakukannya dengan cara mengganti kata URL dengan link yang diinginkan.
Untuk lebih jelasnya silakan cermati ulang keterangan untuk langkah yang keempat.
Semoga dapat membantu. :)
@cakka oikBila Sobat telah mengerjakan setiap langkah secara benar dan berurutan, maka saya dapat memastikan bahwa teknik tersebut dapat diterapkan sehingga menghasilkan tab menu seperti yang diharapkan.
Jadi, silakan Sobat coba dulu sesuai dengan langkah-langkah yang ada dalam uraian di atas. :)
Om GiManA kalo Cranya NavBar Drop down..
Balas Yaa...
Keren Abiss ..
@Alfaputra soloCoba Sobat buka artikel berikut ini:
Cara Membuat Sub Menu Pull Down Bertingkat Pada Bilah Navigasi Pengganti Navbar
Atau bila Sobat ingin agar tampilan menu menjadi seperti yang saya gunakan di blog ini, maka silakan buka artikel berikut ini:
Cara Membuat Pull Down Menu Dengan Ujung Sudut Melengkung Atau Rounded Corners Tab
Semoga dapat membantu. :)
udah bisa semua bang,
tinggal gmn caranya masukin link URL artikelnya agar laman.nya bisa keluar semua pas diliat di blog.
#. cara keempat
saya bngung,
udah nyoba bolak balik
saya belum paham cara mengganti warnanya sob..
saya blm paham cara mengganti warnanya sob
thank's gan ilmunya...sukses selalu...!!
@doyokUntuk memasukkan URL, Sobat dapat melakukannya dengan cara sesuai keterangan yang saya berikan untuk langkah yang keempat.
Dalam hal ini maksudya adalah mengganti kata URL dengan link yang ingin Sobat pasang atau masukkan.
Semoga dapat membantu. :)
@Nurmansah azamUntuk mengganti warna latar, silakan Sobat ubah sesuaikan kode warna yang digunakan pada background-color dan atau background-image:
Sedangkan untuk mengganti warna tulisan, maka silakan Sobat ubah sesuaikan kode warna yang dipakai pada bagian color:
Semoga dapat membantu. :)
@Nana KusmanaSama-sama Sobat.
Terimakasih dan sukses balik untuk Sobat. :)
Goood Articles. I Like this news!
makasih gan infonya.
@Yuri ArakasfaSobat, caranya silakan lihat pada keterangan yang saya cantumkan untuk langkah yang keempat.
Semoga dapat membantu. :)
@Dzaky DewanThank you.
@faizcuplizSama-sama dan terimakasih balik Sobat.
bang kode buat ngeganti color sm background image jadi warna hitam sama coklat apa y bang?
bang saya bisa memasukkan artikel kedalam menu, tapi saya hanya mengerti untuk memasukkan satu artikel
saya bingung gimana cara untuk masukin artikel-artikel yang lain
mksh bang buat tutorannya
sobat,,,,,kenapa isi blog saya g' ad entri ny,,padahal saya udh mncoba nya...kok isi blog ny hilang
@Indah LestariTerkait dengan kode warna, agar lebih jelas silakan Sobat buka --> w3schools.com/tags/ref_colorpicker.asp
Semoga dapat membantu. :)
@Indah LestariSobat, bila ingin memasukkan tautan atau link artikel yang lain, maka caranya adalah seperti yang telah saya uraikan pada keterangan untuk langkah yang keempat.
@Hengky Ade PutraHwaduh, sayang sekali Sobat tidak mencantumkan alamat blog pada Google Plus profil sehingga akhirnya saya tidak dapat melakukan pengecekan secara langsung pada blog yang Sobat kelola untuk mengetahui penyebabnya.
Jadi mohon maaf bila saya belum dapat memberikan solusinya.
salam knl sebelumya..mas mau tnya nie knpa tempelate saya tdk ada kode <body nya ya...mohon bimbingan nya mas trims sbelum nya
@dhani dhafaSalam kenal balik Sobat.
Coba Sobat cek lagi secara lebih teliti, karena dalam setiap template pasti terdapat bagian tersebut.
Sedangkan untuk mempermudah pencarian gunakan kata <body saja, karena biasanya antara template yang satu dengan template yang lainnya memiliki rangkaian kode <body yang berbeda.
Semoga dapat membantu. :)
kenapa gak berubah navbar blog saya
pada hal saya sudah ikut cmua inrtuksinya...
kox gak mau berubah navbar blog saya
pada hal saya sudah ikut cemua perintah nya
alhamdulillah berhasil juga joba tengok blogQ. memank sih awalnya susah dapatkan < body bisa di bilang gk ada tp gunakan ctrl+ f untuk pencarian setelah ketemu silahkan tambahkan tanda > di blakang body seperti ini < body > seperti ini sebagai parsenya. nah silahkan lanjutkan dan sebelum di save lakukan terlebih dahulu pertinjauan.
gan, kalo mau kasih sub menu pada navbarnya gimana ya?
gan, ana masih belum ngerti caranya
tolong dibantu,
http://nurdaday.blogspot.com
@arifin skaSobat, bila ternyata hasilnya belum sesuai dengan yang diharapkan, maka saya sarankan agar Sobat menggunakan teknik dalam artikel berikut ini.
Klik di sini untuk membuka artikel yang saya maksud di atas
Perlu diketahui bahwa teknik yang saya uraikan dalam artikel tersebut merupakan update (pembaruan) dari teknik dalam artikel ini, karena ternyata dalam artikel ini sendiri masih terdapat adanya bug.
Semoga dapat membantu. :)
@andhy jubairkalau begitu syukurlah bila Sobat telah berhasil dalam mengimplementasikannya. :)
Tapi ngomong-ngomong, setelah tadi saya cek, bilah navigasi atas-nya kok sudah gak ada ya Sob?
@Aditya NusantaraSobat, silakan klik di sini untuk membuka artikel yang menguraikan tentang hal tersebut. :)
@nurhidayatSobat, bukankah caranya telah saya uraikan secara lengkap dalam uraian artikel di atas.
Jadi, bila Sobat bermaksud mengimplementasikan teknik yang diuraikan dalam artikel ini, maka silakan pelajari terlebih dulu uraian di atas sebelum menerapkannya pada blog yang Sobat kelola. :)
thank yea ngan udah mw nhe dblog ku
cara hapusnya gimana gan??
@arifin skaSama-sama Sobat. :)
@Jaya sevenfolddismCara menghapusnya, silakan Sobat edit template kemudian hapus seluruh kode yang telah disisipkan dengan menggunakan langkah-langkah di atas, dan kemudian simpan template. :)
untuk menambah sub menu, kodenya gimana Mas ..
Terima kasih !!!
untuk menambah sub menu, kodenya gimana Mas ..
Terima kasih !!!
SANGAT BERMANFAAT...MAKASIH...BANGET...JADI BISA BELAJAR...
TRIMAKASIH TELAH BERBAGI ILMU..
Met siang kak, bagus blognya, ringan lagi. Mau tanya nih kak (banyak).
1. Aku mau pasang menu horizontal di bawah header. 2. Aku mau ganti ganti warna b'ground laman posting & header. Aku mau ngotakin/membingkai semua laman posting, header dll.Gimana caranya ???
Thanks kak, (I need quick respons)
makasih bos tak pakai di blog aku.... tolong dong koreksi dan sarannya
terima kasih artikelnya....sangat bermanfaat..mohon bimbingannya buat menambah sub menu gan..^_^
@PERGURUAN TINGGI ASIA MALANGUntuk menambahkan sub menu, Sobat dapat menemukan uraiannya di sini. :)
@semestarayaserviceTerimakasih balik Sob.
@Yudi SutopoJawabannya cukup singkat Sob.
Sobat dapat menggunakan fasilitas laman dan menu ubahsesuaikan yang telah disediakan oleh Blogger. :)
@Kredit Wonosarisama-sama Sob. Silakan bila ingin memakainya.
@saiful arifinUntuk menambahkan sub menu, silakan Sobat buka artikel ini :)
yang hanya pake widget ada sob?
@AYAHE MELA
O iya kak, coba lihat templatku, kok headernya dikiri ya? udah cari kemana2 malah banyak ttorial untuk nengahin judul ma deskripsi headernya. gmana dong?
@RisalahatiMenurut sepengetahuan saya tidak ada Sob.
@Yudi SutopoSecara default, posisi header memang seperti itu, Sob.
Dan setelah saya cek sepertinya Sobat telah menambahkan 1 kolom header baru di sisi bagian kanan dengan menggunakan teknik ini
Makasih Sobat Aku terbantu sekalai dengan artikel ini.Cuman ada satu hal yg pengen aku rubah, klo pengen rubah ukuran panjang body nya gmana yg sesuai dengan standar blog,makasih atas pencerahannya....
@Roemah BerkahSobat dapat menyesuaikannya dengan cara mengubah ukuran 960px dan atau 521px sesuai dengan ukuran yang diinginkan.
Semoga dapat membantu.
trims gan info nya, tp ada pertanyaan neh gan klo ingin posisinya tidak permanen atau saat kita baca posting si navbarnya jg ikut ke atas tidak diam, gamana tu gan?trus ukurannya pengen sama dengan ukuran templet gmana?mohon pencerahannya ya...
Maaf neh sobat mo tanya lagi, sy udah coba ganti ukurannya jd 521px tp g ada perubahan,posisinya d sini kan (bilah-menu-atas {
width: 100%;
min-width: 521px;) tp g berubah,dmana ya yg salahnya?
Mau tanya mas, saya sudah bisa pasang menu dnegan mengarah ke page static. Tapi masalahnya setiap masuk page, url menu juga berubah ngikuti page yg sedang dibuka. Mohon pencerahan. Blog saya kasmamtafoundation.blogspot.com.
Trims
Terimakasih Gan atas info...ntar saya coba...kunjung balik gan
trim's infonya Mas..
sulit, kalo yang vertikal gimana ya ?? :/
Makasih Infonya, saya kira membuat sub menu biasah ternyanya, membuat menu yang selalu nampak, bagaikan navbar,, Mantap !!
http://www.asli.ws (free domain Asli Indonesia )
@AYAHE MELA
kakak yg baik hehehe...aku mo mnta tlong bangeeeeet. untuk newbie kayak aku, blog yg udah aku bikin udh lumayan lah desainnya. Tpi ada yg kurang hehe. gini, aku punya tabview disitu (kategori n populer), aku mau nambahin 1 tab lagi, yaitu achieve. tlong buatin scriptnya ya kak,,,kalo bisa kirim via email. yudisutopo@gmail.com
makasiiiih n maaf ngerepotin banget.
@Roemah BerkahAgar posisi navbar tidak permanen (seperti yang Sobat maksud) maka silakan edit template dan kemudian hapus kode position: fixed; yang terdapat dalam class .bilah-menu-atas {
Siip.. Mantap Gan. Saya sudah praktekan di blog http://lokamovie.blogspot.com dan 100% berhasil. Terimakasih gan :)
@Roemah BerkahJadi maksudnya gini Sob, yang perlu dilakukan adalah mengganti 960px sesuai dengan ukuran lebar halaman blog yang Sobat kelola.
Jika halaman blog yang Sobat kelola lebarnya adalah 800px, maka silakan ganti 960px menjadi 800px.
Sedangkan untuk yang 521px itu sebenarnya adalah digunakan untuk menentukan lebar menu kiri dan menu kanan. Sehingga untuk bagian ini sama artinya dengan ukuran sebelumnya dibagi 2.
Jadi, misalkan ukuran yang pertama menggunakan 800px, maka silakan ganti 521px menjadi 400px.
Namun demikian apabila Sobat masih mengalami kesulitan dalam menggunakan teknik ini, saya lebih menyarankan agar Sobat menggunakan teknik dalam artikel yang ini, karena artikel tersebut merupakan update atau pembaruan dari teknik yang diuraikan dalam artikel ini.
Semoga dapat membantu. :)
@abbazSobat, jujur saja saya agak kesulitan dalam memahami maksud dari pertanyaan yang Sobat ajukan.
Namun demikian setelah saya lakukan pengecekan pada blog yang Sobat kelola, saya mendapati bahwa sepertinya tidak ada masalah sama sekali kok. :)
kok gak bisa ya mas ?
kok saya ga bisa ya mas
@Budi AminOke Sobat. Terimakasih balik atas kunjungan dan berkenannya mengeposkan komentar dalam artikel ini. :)
@ari kuswantoSama-sama Sob.
@Aminudin AzisApabila Sobat mengalami kesulitan, maka langkah baiknya bila Sobat pelajari dan pahami terlebih dulu uraian di atas sebelum mengimplementasikannya.
Sedangkan untuk membuat menu vertikal, secara prinsip teknik yang digunakan adalah serupa dengan teknik yang diuraikan dalam artikel ini, namun bisa jadi lebih rumit dari yang Sobat bayangkan :)
@SHOLEH WEBTerimakasih balik Sobat.
@Yudi SutopoSobat, terkait dengan cara penambahan tab view seperti yang Sobat maksud, bisa jadi saya belum dapat memberikan uraian jawabannya secara seketika.
Hal ini disebabkan karena jujur saja juga masih ada beberapa pertanyaan Sobat Blogger lain yang sampai kini belum saya berikan uraian jawabannya (dalam bentuk artikel).
Sehingga terkait dengan keluhan tersebut, bagaimana bila untuk sementara saya tampng dulu dan kemudian bila telah ada waktu atau kesempatan, saya terbitkan artikelnya.
@Suwandi teaSama-sama Sobat.
Syukurlah bila Sobat telah berhasil menerapkan teknik tersebut. :)
TERIMAKASIH atas infonya Gan,,,
Saya bisa belajar edit blog pertama saya,,,
@AYAHE MELAOh iya satu lagi, kalau di bagian 'menu kanan 2' mau diganti/dipasang kode Translate kira-kira harus bagaimana penerapannya? terimakasih sebelumnya sobat.
@aditya dananjayaSobat, bila teknik tersebut di atas diimplementasikan secara benar sesuai dengan langkah-langkah yang semestinya, maka saya dapat memastikan bahwa hasil yang didpatkan adalah sesuai dengan yang diharapkan.
Sehingga bila ternyata Sobat belum berhasil dalam menerapkan teknik tersebut, maka saya sangat menyarankan agar Sobat pelajari dan pahami terlebih dulu setiap langkah yang ada, baru kemudian mengimplementasikannya.
Dan akan lebih baik lagi bila dicoba terlebih dulu pada sebuah blog uji coba sebelum Sobat memasangnya pada blog yang Sobat kelola. :)
@dede hermansyahSama-sama Sobat.
Semoga apa yang saya tuliskan dapat diambil guna dan manfaatnya. :)
@LokamovieUntuk keperluan tersebut, Sobat tinggal mengganti list item yang semestinya terpasang pada bagian sebelah kanan dengan script translate yang akan Sobat gunakan.
@AYAHE MELAKalau boleh minta tutorial nya saja sekalian ya gan cara pemasangan kodenya. Soalnya saya sudah mencoba dan hasilnya nihil. hee.. saya mau hasil translatenya seperti di blog http://www.suwanditea.com disana ada widget translate yg letaknya di sebelah kanan atas. maaf merepotkan :)
@LokamovieOwww, jadi maksudnya yang seperti itu ya Sob.
Jadi begini, kalau yang Sobat maksud adalah memasang perangkat penerjemah pada bilah menu yang terletak di bawah header, maka Sobat dapat menemukan uraiannya dalam artikel ini.
Semoga dapat membantu. :)
@AYAHE MELAAlhamdulillah sekarang sudah bisa gan setelah tadi coba2 lg. Kode nya jg saya dpt dr artikel yg agan beri :) . Tp msh ada yg hrs dperbaiki karena tulisan Menu dan image Home nya jd sprti menggantung disebelah atas. Kalau posisi/align nya mau jd ditengah2 (antara atas&bawah) kira2 bisa diakalin gk? untuk referensi mohon lihat blog yg saya maksudkan disini gan: http://lokamovie.blogspot.com/
maaf merpotkan :)
@LokamovieSepertinya ukuran yang Sobat gunakan untuk bilah menu terlalu tinggi. Jadi menurut saya sebaiknya dilakukan perubahan ukuran pada bagian CSS yang saya tandai dengan huruf tebal di bawah ini menjadi 30px.
.bilah-menu-atas {
width: 100%;
min-width: 960px;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
height: 40px;
font-size: 13px;
z-index: 99;
white-space: nowrap;
background-color: #017bf5;
background-image: -moz-linear-gradient(center top , rgb(20, 132, 206) 0%, #2a2a2a 100%);
box-shadow: 0px 2px 0px rgb(14, 90, 140);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
Dan kemudian agar bagian halaman tepi atas tidak ada yang tertutup oleh bilah menu, sebaiknya juga ditambahkan margin: 30px auto 0px; pada #outer-wrapper { sehingga akhirnya menjadi seperti berikut ini:
#outer-wrapper {
background: none repeat scroll 0% 0% rgb(255, 255, 255);
width: 970px;
text-align: left;
font: 12px Arial;
margin: 30px auto 0px;
padding: 10px;
box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.1);
}
Dan untuk sementara saran saya seperti itu, Sob. :)
terimakasih sob sudah berbagi tutorialnya..
@muhammad jumaniSama-sama Sobat. Terimakasih balik atas kunjungan dan komentar yang Sobat poskan. :)
Yup. Makasih udah mau liat blog sy. masalh lebar di navbar akhirnya sy putuskan yg d ganti bukan lebar navbarnya krn tidak berhasil terus, mungkin krn ketidak cakapan atau ke kurang jelian sy yg pd akhirnya yg di rubah isi templet nya di sesuaikan dengan navbar.hee... gmana we caranya biar selaras.makasih banyak sobat, smoga blognya sukses slalu....
@Roemah BerkahOke Sobat. Sama-sama dan sukses selalu untuk Sobat. :)
Mampir ke sini gan : http://justwatchnlearn.blogspot.com/
Mohon bantuannya :D
@Bryan NayoanSobat, setelah saya cek sepertinya tidak ada masalah dengan blog yang Sobat kelola, karena bilah menu juga sudah terpasang dengan benar.
mas saya bisa pasang kodenya tapi setelah saya pasang link2 milik saya ga bisa di klik mohon kasih penjelasan
@Arifin SaputraBisa jadi Sobat belum mengganti URL atau link yang ingin ditautkan dengan menu yang dibuat.
Jadi, Sobat masukkan dulu URL atau link yang ingin ditautkan dalam setiap menu yang dibuat, dalam hal ini adalah seperti yang telah saya uraikan dalam keterangan untuk langkah yang keempat. :)