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
Terdapat 320 komentar pada artikel ini ▶
maaf mas saya datang kembali, saya ingin bertanya ko... bacground blog saya tidak bisa di ganti ya...jika berkenan silahkan hubungi saya di facebook saya lebih aktif di facebook kalau mas berkenan nanti saya bisa kasih emailnya sama paswod untuk masuk ke blog saya untuk mengatasi masalah ini karna blog saya sifatnya agamis banyak yang membutuhkan... intinya saya tidak ingin background warna putih eperti yang sekarang saya rasa tidak sesuai... http://arifinsaputra.blogspot.com wassalam
@Arifin SaputraSobat, kiranya saya tidak perlu login dengan menggunakan akun Sobat untuk memperbaikinya.
Jika ingin mengubah warna latar pada blog yang Sobat kelola, maka silakan edit template kemudian tambahkan CSS seperti contoh di bawah ini dalam area skin.
body{background: #006600;} atau dapat pula seperti ini body{background: green;}
Apabila warna belum sesuai, maka silakan ganti kode warna yang dipakai pada CSS di atas sesuai dengan kode warna yang Sobat inginkan.
Selengkapnya tentang kode warna, silakan buka http://www.w3schools.com/tags/ref_colorpicker.asp
Semoga dapat membantu. :)
gan.. slam kenal.. bisa nggak tuh menunya tidak melayang maksud.a tetap di posisi.a soal.a klo melayang ngikutin kursor.. tdk sesuai tuh dng template ane.. sya blum masang tpi sudah coba.. dan bagus.. tapi hanya preview.. sya mw menu nggak melayang..?
gameterpilih.blogspot.com
Thanks Sob..
Artikelnya sangat menarik..
Saya tunggu kunjungannya..
@muhammad zainul ikhlasCoba Sobat hapus bagian position: fixed; yang terdapat dalam .bilah-menu-atas { :)
@Resthoe JebOke, terimakasih balik Sobat.
Terimakasih banyak ilmunya sobat, semoga semakin imajinatif karya-karyanya.
Ditunggu kunjungannya di muplihin.blogspot.com
@MuplihinOke. Sama-sama dan terimakasih balik Sobat.
tq bos baru penjelasan dari ente yg bikin ane mudeng,
@song 4USama-sama Sobat. Terimakasih balik atas berkenannya mengeposkan komentar dalam artikel ini.
maaf mas saya datang lagi... saya menggunakan tmplate downloadan saya mau tanya bagaimana untuk edit di bagian yang sudah tertera agar bisa di ganti dengan link pos yang saya mau misalnya link mp3 ketika di klik akan tertuju ke mp3 karna sekarang masih bawaan jadi kalau di klik masuk ke beranada lagi mohon di jelaskan terima kasih
htt://arifinsaputra.blogspot.com
Izin untuk mencobanya ya mas.
Izin untuk mencobanya ya mas.
Izin untuk mencobanya ya mas.
@Arifin SaputraSobat tinggal mengganti URL (link) untuk bagian yang dimaksud sesuai dengan URL (link) yang ingin Sobat tautkan. Dalam hal ini adalah seperti yang telah saya uraikan dalam keterangan untuk langkah yang keempat.
Semoga dapat membantu. :)
@lulus utamiSilakan bila ingin mencoba menerapkannya, Sobat. :)
@lulus utamiSilakan. :)
kalau cara supaya pas mouse diarahkan ke artikel terkini trus muncul pilihan giamana caranya ??
butuh caranya
@fajarz HarfiantoSobat dapat menemukan uraiannya dalam artikel ini.
makasih duku udah tak praktekin dan berhasil, menambah wawasan
@dian A.Sama-sama Sobat. Syukurlah bila Sobat tidak mengalami kesulitan dalam menerapkan teknik tersebut. :)
Oh ya, btw maksudnya 'duku' itu apa ya Sob? @_@
berhasil sob,cuma kudul blog jd tertutup sm bilah itu.. solusiny?
oh iya bs minta tolong cara mengedit menu drop down gk?soalny mau sy tmbh menu drop down.
@KudhenSobat, karena kebetulan template yang Sobat gunakan adalah template dari pihak ketiga (custom template) yang sebelumnya telah didesain sedemikian rupa, maka untuk pemasangan tab menu silakan dilakukan dengan mengerjakan langkah-langkah di bawah ini.
------------------
Pertama, lakukan penyesuaian terhadap margin halaman.
Sebelumnya perlu diketahui bahwasanya margin halaman yang digunakan pada blog Sobat adalah 0 (nol) piksel dari tepi atas dan 0 (nol) piksel dari tepi bawah. Sehingga bila Sobat ingin memasang tab menu di atas header, maka secara otomatis juga harus dilakukan perubahan terhadap margin yang digunakan untuk bagian atas. Yang mana hal ini sama artinya dengan menggeser bidang halaman blog beberapa piksel ke bawah, sehingga akhirnya terdapat bidang kosong pada bagian atas yang nantinya dapat dipakai sebagai tempat bilah menu.
Terkait dengan hal tersebut maka sebelum Sobat melakukan pemasangan tab menu pada bagian atas, silakan edit template dan kemudian cari CSS berikut ini.
#wrapper { -moz-box-shadow:0px 0px 30px rgba(0,0,0,.2); -webkit-box-shadow:0px 0px 30px rgba(0,0,0,.2); box-shadow:0px 0px 30px rgba(0,0,0,.2); background:#fff; border-right:1px solid #ddd; border-left:1px solid #ddd; font-size:14px; margin:0 auto; width:970px; overflow:hidden;
Sobat perhatikan dulu bagian CSS yang tercetak tebal, dalam hal ini adalah margin:0 auto;. Perlu diketahui bahwasana bagian tersebut fungsinya adalah untuk mengatur posisi halaman blog yang Sobat kelola, dimana dengan setelan seperti itu artinya halaman blog akan diposisikan di tengah area browser secara mendatar dengan margin 0 (nol) piksel dari atas dan bawah.
Jadi agar terdapat bidang kosong di atas header yang nantinya dapat dipakai sebagai tempat navbar (tab menu), maka ubahsesuaikan terlebih dulu margin:0 auto; menjadi margin: 30px auto 0px;. Dengan catatan bila jarak yang dihasilkan terlalu lebar atau malah terlalu sempit, maka silakan ubah 30px dengan ukuran yang sesuai misalnya 28px atau 32px (sesuai dengan kebutuhan).
Kedua, pasang bilah navbar.
Setelah Sobat melakukan penyesuaian margin halaman, maka langkah berikutnya adalah memasang navbar (tab menu). Dan terkait dengan pemasangan navbar, saya sangat menyarankan agar Sobat menggunakan teknik yang saya uraikan dalam artikel ini --> Cara Membuat Menu Tab Keren Pada Blog Dengan Sub Menu Pull Down Dan Ujung Sudut Melengkung, karena teknik dalam artikel tersebut merupakan update (pembaruan) dari artikel ini. Dimana bila Sobat menggunakan teknik yang saya uraikan dalam artikel tersebut, maka nantinya Sobat tak kan lagi mengalami kesulitan ketika ingin menambahkan sub menu atau drop down pada menu utama yang terpasang.
Disamping itu dalam artikel tersebut juga telah saya sertakan keterangan untuk masing-masing bagian, sehingga akan mempermudah Sobat dalam melakukan pengerjaan.
------------------
Sekian, semoga dapat membantu, dan apabila nantinya Sobat masih mengalami kendala dalam penerapannya maka dengan senang hati saya akan membantu memberikan solusi sebatas dengan kemampuan yang saya miliki. :)
Berhasil.
Hanya dirubah sedikit warna. Djeng4X
Salam sukses.
Ditunggu update kreativnya
@D'han AiluaOke Sobat. Syukurlah bila tidak ada kendala dalam penerapannya. :)
bagaimana cara menambahkan isi pada menu tersebut...?
trimakasih.
bagaimana cara menambahkan isi pada menu tersebut?
trimakasih..
masih macet nih, gan....
Menu navbar tersebut bisa gak yah dibuat tersembunyi, kemudian ketika di scroll ke bawah melewati header baru muncul dia menu navbar nya... btw kode nya gimana ya yah>???
@Cagur SDUntuk menambahkan isi pada menu tersebut, maka Sobat dapat merjuk pada keterangan langkah yang keempat.
Dalam hal ini adalah mengganti 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.
@Fahmi PurwadyBila kasusnya demikian, maka saya sangat menyarankan agar Sobat coba mempraktikkannya pada sebuah blog uji coba terlebih dulu. Kemudian setelah tidak ada kendala, maka silakan diterapkan pada blog utama yang Sobat kelola. :)
@Joni Hariadi SSMenurut hemat saya, bisa. Namun jujur saja saya sendiri juga belum pernah mencobanya.
Sehingga bila Sobat juga menanyakan tentang kodenya bagaimana, maka secara jujur saja saya pun belum dapat memberikan uraian jawabannya secara lebih rinci.
mau tanya pak...
di blog sy sih berhasil tapi ada sedikit masalah, knp kalo mouse di geser (tanpa diklik) dari "menu kiri 1" ke "menu kiri 2" ada muncul garis hitam agak tebal di belakang "menu kiri 2" kalo kita geser mouse ke arah sebaliknya akan normal lagi...
mohon ptunjuk, maaf ngrepotin sblumnya ^^
gan,,coba cek bolg ane sehatseh.blogspot.com
kok tampilannya ky gitu ya,,
thks bro, artikelx...ssiip
udah di ganti sma yang #ffffff tp masih ada biru nya... mhon di fixed.. http://4videoshared.blogspot.com
ditunggu kujungannya
thanks
malam bozz...
mntebbb banged deh...
o ya bozz.... mau nanya,,kogh templet HTML saya lain bozz..bisa berubah begtu,jadi bingung mau masang kode script ...tuh knp ya..??
terima kasih
@Amaludin RezqaBisa jadi Sobat menggunakan custom template. Tapi walaupun demikian, menurut sepengetahuan saya teknik ini juga dapat diterapkan pada custom template kok.
@4videosharedSobat, perlu diingat bahwa tab menu tersebut memang mengkombinasikan dua buah warna yang berbeda. Sehingga bila Sobat ingin mengganti warnanya, maka lakukan perubahan pada semua kode warna yang digunakan pada tab menu tersebut. Semoga dapat membantu. :)
@uli IDSobat, sebelumnya mohon maaf atas keterlambatan saya dalam menjawab pertanyaan tersebut.
Dan kemudian terkait dengan pertanyaan yang Sobat ajukan, saya rasa tidak lagi perlu saya berikan solusi karena setelah saya lakukan pengecekan sepertinya telah teratasi. :)
@Kukuh WardhaniTampilan untuk bagian yang mana ya Sob? Karena setelah saya cek sepertinya tidak ada masalah kok.
Hanya saja untuk gambar menu paling kiri sepertinya Sobat hapus dan hanya mengisi bagian tersebut dengan sebuah link saja.
@Lab KomputerSama-sama dan terimakasih balik, Sob.
makasih ilmunya mas bro
lengkap bnget infonya
saya berhasil menerapkannya.
tapi ada 1 yang mengganjal, kalo untuk menggeser jarak supaya tab bisa agak ke tengah gmana caranya?
@saung hikmahUntuk menggeser jarak supaya tab bisa agak ke tengah, coba ubahsesuaikan ukuran lebar untuk bagian kolom-utama dan kolom-menu yang terdapat pada css di atas.
Semoga dapat membantu. :)
hehehehe saya sebenarnya nyari ini blog mas tp ga ktm2, e malah g sengaja ketemu dr yahoo answers..
di sini tepatnya "Kira-kira kalau desain home page-nya seperti ini kurang apa lagi friend?"
ijin bookmark pages ini mas, saya berniat membookmark pages2 sript yang saya gunakan di blog saya..
mampir ke sini mas kalo sempat buat liat menu horizontalnya psdink.blogspot.com
@PSDinkOke..., silakan bila Sobat bermaksud untuk mem-bookmark-nya.
Dan yang pasti saya pun akan melakukan kunjungan balik ke blog yang Sobat kelola. :)
gan bagaimana cra post, kgk mirip post blog yang kyak list tpi ngeklik menu baru keluar t post..
@Pilepiew MorgansKalau untuk cara postingnya sebenarnya sama seperti cara posting artikel seperti biasanya, Sob.
Lantas bila artikel sudah diterbitkan, langkah selanjutnya adalah memasang link artikel tersebut ke dalam sebuah list item tertentu(seperti yang terdapat pada langkah keempat uraian di atas).
makasih ya bro infonya ,mohon kritiknya di blog ane (baru belajar buat blog he...he...)biar tambah seru jos gandos kotos-kotos........
Thanks..
gk lama lagi saya guna in
Mantap bg. sukses saya buat. bisa di lihat di blog saya.
@dodik efendiSama-sama Sobat. Semoga saja uraian dalam artikel di atas benar dapat diambil guna manfaatnya. :)
@ShalahuddinSyukurlah bila Sobat tidak mengalami kendala apapun dalam menerapkan teknik yang saya uraikan dalam artikel tersebut.
artikel yang sangat berkualitas sob..thanks sudah berbagi ilmunya..
@masterz-seoSama-sama dan terimakasih balik Sobat.
sukses ... sudah bisa di pasang di blog ane, Makasih banyak mas sebelumnya...
@Fauzan MuntahalSama-sama Sobat. Syukurlah bila Sobat telah sukses memasang tab menu pada blog yang Sobat kelola.
Oh... Ini baru Good banget... Tetap berkarya ya Gan..
@tahujuga.blogspot.comOke, terimakasih, Sob.
Tutorail yang sangat bermanfaat gan,... sangat membantu saya dalam proses editing blog blog ane gan,. ternyata kalau mau memahami tidaklah sesulit seperti apa yang dikatan oleh orang2,. salam kenal dari http://jawacyber.blogspot.com
@ahmad mustaghfirinSalam kenal balik Sob.
Awalnya saya pun mengira sulit, tapi ternyata kalau ada niat dan kemauan kita untuk mempelajari, maka yang semula terasa sulit akan menjadi sangat mudah. :)
kenapa ya sob, ketika saya terapkan pada template standar menu tab nya muncul pada tampilan selular?
cara mengatasinya bagaimana?
@Denz AhmadCara mengatasinya gampang Sob. Coba deh Sobat buka dulu artikel tentang cara membuat dan mengubah blog menjadi seperti web profesional ini.
Nah, dalam artikel itu kan saya contohkan bahwa kita dapat membedakan prosedur untuk tampilan versi web dan tampilan versi seluler dengan memanfaatkan fungsi kondisional yang disediakan oleh Blogger.
Sehingga kita dapat memisahkan prosedur mana yang hanya akan dijalankan pada tampilan desktop dan prosedur mana yang yang hanya akan ditampilkan pada versi seluler.
Jadi kesimpulannya apabila rangkaian kode yang dibuat ditempatkan pada bagian yang saya beri keterangan PROSEDUR UNTUK HALAMAN VERSI SELULER maka secara otomatis rangkaian kode pada bagian tersebut hanya akan dimunculkan pada tampilan seluler saja.
Demikian pula sebaliknya apabila rangkaian kode yang kita buat ditempatkan pada bagian PROSEDUR UNTUK HALAMAN VERSI DESKTOP maka secara otomatis rangkaian kode pada bagian tersebut juga hanya akan dijalanan dan dimunculkan pada tampilan desktop saja.
Artinya apabila kita menginginkan agar menu tab-nya tidak dimunculkan pada tampilan versi seluler, maka tempatkan rangkaian kode yang digunakan untuk membuat menu tab tadi pada bagian yang saya beri keterangan PROSEDUR UNTUK HALAMAN VERSI DESKTOP.
mantap sob tutorialnya,.. ijin praktek sob untuk blog ane,... salam kenal dari ane,..
@softwarepcmaniaSalam kenal balik Sobat. Silakan bila Sobat ingin mencoba menerapkan teknik yang saya uraikan dalam artikel tersebut pada blog yang Sobat kelola. :)
softwikia : tempat komennya keren gan :D:D:D
@Aditya Wahyuterimakasih :)
Gan Kasih Gambar Tutorialnya Dong Biar Agak Jelas,Aku Kan Masih Newbie :D
bos mohon pencerahan,ane punya blog setiap kali saya akses judul artikelnya selalu ada tulisan maaf laman yang anda cari tidak ada,padahal postingan saya yang baru ada dibawah tulisan maaf tadi,singkat kata postingan saya gak bisa langsung diakses,harus melewati tulisan maaf tadi,mohon bantuan gan...makasih
@Danny WiradhikaSaya rasa uraian beserta keterangan yang saya sertakan pada masing-masing langkah di atas sudah sangat jelas Sob. Sehingga apabila Sobat tertarik dengan teknik di atas maka ada baiknya bila Sobat mencobanya terlebih dulu. :)
@bramantosSaya rasa tidak ada masalah Sob. Karena setelah saya cek dan saya buka postingan Sobat tentang "Cara Membuat Filter Air Bersih Sendiri", artikel tersebut dapat langsung terbuka dengan wajar tanpa harus melewati pesan seperti yang Sobat maksudkan tersebut kok.
Atau begini saja, kebetulan template yang Sobat pakai itu kan template standar dari Blogger. Nah, coba Sobat ubah saja terlebih dulu templatenya dengan template standar Blogger jenis yang lainnya sehingga dengan demikian maka akan menjadikan semua script dan rangkaian kode yang terdapat pada template menjadi standar (normal) kembali. Karena saya rasa cara tersebut merupakan cara yang paling tepat dan aman untuk mengatasi permasalahan yang sekarang sedang Sobat alami.
Semoga dapat membantu.
Ini sangat membantu saya, terimakasih sebelumnya
@Tati RachmawatiTerimakasih juga untuk pengeposan komentar dalam artikel ini Sob. :)
Gan ane mau nanya, caranya biar salah satu menu nya jadi dropdown itu gimana ya ?
mohon jawabannya
@Radyan Fahmi ASebagai contoh dari cara menambahkan menu dropdown seperti yang Sobat maksud, uraiannya dapat Sobat lihat dalam artikel ini.
klo ingin menambahkan jam digital di dalam (pojok) tab menu itu gimana yah,...
@Kabar CipayungJujur saja saya sendiri juga belum pernah mencobanya Sob. Sebab pada perangkat yang dipakai oleh pengguna kan pasti sudah ada jam-nya. Oleh sebab itulah saya rasa widget jam tidak perlu lagi dipasang pada bagian laman blog.
Akan tetapi bila Sobat ingin mencobanya, maka menurut hemat saya dapat dilakukan dengan cara memasukkan script yang dipakai untuk menampilkan jam digital dalam list item yang terdapat pada navbar.
saya coba sih bisa, tp kok g kaya' demo yg diatasya..., ada tulusannya segalamacem gituuu, mohon penjelasannya(secepatnya)
Kayak di bawah ini tuliasannya
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: 32px auto; } .kolom-menu { width: 521px; height: auto; margin: 30px 20px 20px -41px; float: left; display: inline; } .kolom-menu ul { height: auto; margin-top:20px; } .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 4px 6px 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); } Sumber: http://eltelu.blogspot.com/2012/09/cara-membuat-tab-menu-horizontal.html#ixzz2oYkV6sV7
MOHON penjelasannya
@fiky syafiqJangan lupa perhatikan keterangan untuk masing-masing bagian Sob. Dan perhatikan pula bahwasanya teknik yang saya uraikan dalam artikel ini juga telah diperbaharui dengan teknik yang lebih baru. Jadi perhatikan pula uraian yang saya sampaikan pada paragraf terakhir artikel tersebut.
Semoga dapat membantu.
nice info gan,, jadi nambah ilmu
Terima kasih untuk tutornya...
keren mas, makasih ya
@gaul shippuden Iya Sob. Semoga saja dapat diambil guna dan manfaatnya. :)
Mau saya coba, mudah mudahan berhasil
@Yaumil Akbar Firdaus Silakan Sob. Semoga saja tidak ada kesulitan dalam mengimplementasikannya. :)
mas mau tanya ya.. kalo masuk ke halaman blog saya kenapa ada tulisan A username and password are being requested by http://reader-download.googlecode.com. The site says: "Google Code Subversion Repository", kenapa ya mas... setiap mau buka pasti keluar .. untuk membenahinya, gimna caranya ya mas.
Tankinyu berbaginya,ane ijin ambil kodenya...
@Asih Budi Ariyanti Sobat, perlu diketahui bahwasanya sebagian blogger meletakkan beberapa bagian script yang mereka gunakan pada sebuah template pada situs tertentu dengan maksud dan tujuan tertentu. Dalam hal ini sebagai contoh misalnya adalah agar script tersebut tidak dapat disalin dan atau dimodifikasi oleh orang lain.
Demikian pula dengan kasus yang Sobat alami tersebut, sepertinya hal itu juga disebabkan karena sebagian script yang digunakan pada template sengaja dihosting (ditempatkan) pada situs tertentu, dalam hal ini situs yang dimaksud adalah googlecode.com
Sementara itu karena hak akses pada script tersebut dibatasi oleh pemiliknya, maka ketika script tersebut dijalankan akan selalu menanyakan username dan password untuk mengaksesnya.
Sehingga agar pesan tampilan yang menanyakan username dan password tersebut tidak lagi muncul ketika halaman blog dibuka maka tentu saja dalam template juga harus terpasang script tertentu yang dipakai untuk memberikan otorisasi terhadap script tersebut.
Saya rasa demikian dan semoga dapat membantu.
CMIIW.
@Om Mus Silakan dan semoga tidak mengalami kesulitan dalam mengimplementasikan teknik yang saya uraikan dalam artikel tersebut Sob. :)
ohh gitu yah boleh dicoba tuh
jadi solusi untuk dapt skripnya gimana bisakah mas membantu?
@aguz kurniawan Boleh kok, silakan apabila Sobat bermaksud untuk mencoba teknik yang saya uraikan pada artikel tersebut. :)
@Asih Budi Ariyanti Satu-satunya solusi adalah dengan menghubungi pembuat template tersebut Sob. Sehingga mohon maaf apabila saya tidak dapat memberikan bantuan lebih lanjut terkait dengan hal tersebut.
prosedurnya bagaimana ya mas.. kalo ga salah kemarin saya liahat tutorial tamplate dr punya mas.
@Asih Budi Ariyanti Kalau boleh tahu, prosedur yang Sobat maksud untuk bagian yang mana ya Sob? Karena saya rasa uraian dalam artikel ini sudah sangat jelas sehingga apabila diimplementasikan secara urut dan runtut maka Sobat tak akan mengalami kendala apapun.
Atau apabila sebelum ini Sobat pernah menemukan uraian tertentu dalam artikel saya, maka ada baiknya Sobat telusuri dalam daftar isi untuk menemukan artikel yang Sobat maksudkan.
udah bisa gan, tks yo.. tapi kalau misalnya gak mau ada di kanan gitu pengen di kiri semua gimana caranya? trus warna nya bisa di ganti gak? ini menu nya warna biru, aku pengen warna pink.. mohon arahannya. tks
mampir ya, catatanazenk.blogspot.com
@ajeng septiani Agar di kiri semua, Sobat hapus saja rangkaian kode berikut ini:
<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>
Sementara itu untuk mengubah warna dapat Sobat lakukan dengan cara mengganti kode warna yang terdapat pada CSS background-color dan background-image dengan kode warna sesuai dengan warna yang Sobat inginkan. Dan terkat dengan hal ini tidak ada salahnya bila Sobat lakukan eksperimen untuk mendapatkan kombinasi warna terbaik untuk blog yang Sobat kelola. :)
sepertinya saya nanti butuh tutorial ini,,
@Devi Eko Wibowo Kalau begitu tidak ada salahnya bila Sobat menyimpan halaman ini, agar jika sewaktu-waktu diperlukan dapat dibuka secara lebih cepat lagi. :)
Salam kenal gan,saya coba cara yang diberikan,dan hasilnya saya preview bisa tetapi saya save kok tidak bisa ya? mohon penjelasan serta bantuannya.
Terima Kasih.
@karya Salam kenal juga Sob.
Wahhh, kalau untuk kasus yang seperti itu saya sendiri malah belum pernah mengalami Sob. Sebab (menurut sepengetahuan saya) kalau misalnya tidak ada masalah saat dilakukan preview, maka secara otomatis juga tidak akan bermasalah saat dilakukan proses penyimpanan.
Atau begini saja, sebelum melakukan proses penyimpanan, pastikan bahwa langkah-langkah tersebut di atas telah dikerjakan secara benar, urut, dan runtut. Dan lakukan pemasangan pada blog / template uji coba terlebih dulu.
Thanks gan sudah bisa tersimpan,ada lagi pertanyaan ini gan,bagaimana cara mengisi link di navbar tetapi dalam satu blog.
Satu misal,saya punya artikel atau gambar,letak dari tulisan atau gambar itu berada pada tengah-tengah blog,lalu bagaimana agar orang mengklik link yang ada di navbar
langsung menuju ke artikel/gambar yang saya maksud,yang letaknya berada ditengah blog.
Terima Kasih atas Informasinya.
@karya Sobat, jujur saja saya kurang paham dengan maksud dari pertanyaan tersebut. Namun apabila yang Sobat maksud adalah seperti fungsi tautan "Ke Atas" seperti yang terdapat pada bagian paling bawah sisi kanan blog ini yang fungsinya apabila diklik dapat langsung menggeser laman pada bagian paling atas atau bagian tertentu, maka untuk membuatnya dapat dilakukan dengan cara memberikan penanda atau tag khusus pada bagian yang dimaksud kemudian memasukkan penanda tersebut pada sebua tautan.
Dalam hal ini sebagai contoh apabila sebuah gambar saya beri tanda dengan tag khusus id='gambar' maka saya dapat membuat sebuah tautan dalam bentuk <a href='#gambar'> Ke Gambar </a> yang mana apabila tautan tersebut diklik maka secara otomatis akan mengarah pada gambar yang sebelumnya telah ditandai.
Mantabs gan, bisa dipasang di blog saya .... :D
Miqbal20
@Muhammad Iqbal K Syukurlah kalau benar seperti itu Sob. Saya jadi turut gembira karenanya. :)
@mencintai dengan sederhana
coba tambahin "<" setelah
thanks,, kunjungi my blog yah http://shareef-it.blogspot.com/
Saya ada beberapa pertanyaan terkait dengan navbar ini, mohon dibantu ya mas..
1. Bagaimana membuat navbar tersebut ada shadow-nya?
2. Bagaimana membuat navbar yang sebelah kanan diganti dengan kotak pencarian?
3. Bagaimana membuat navbar tersebut transparan?
Semoga bisa dijawab dan menjadi ide untuk posting selanjutnya mas. Terima kasih atas jawabannya..
@Gatut Sukmono Sobat, sebelumnya mohon maaf atas keterlambatan saya dalam memberikan respon atau jawaban untuk pertanyaan tersebut.
Berikut penjelasannnya:
-----------------------
Q: Bagaimana membuat navbar tersebut ada shadow-nya?
A: Navbar yang terbentuk sebenarnya telah memiliki shadow (bayang-bayang) karena pada bagian bilah menu atas telah terdapat CSS >> box-shadow: 0px 2px 0px rgb(14, 90, 140);
Q: Bagaimana membuat navbar yang sebelah kanan diganti dengan kotak pencarian?
A: Masukkan kode yang digunakan untuk kotak pencarian pada divisi kolom menu bagian kanan (sebelumnya digunakan sebagai tempat list item untuk menu kanan) secara langsung.
Q: Bagaimana membuat navbar tersebut transparan?
A: Ganti CSS untuk background yang digunakan pada bagian bilah-menu-atas dengan >> background: transparent;
Sekian dan semoga dapat membantu.
Kereen Gilaaaa ni artikelnya,yang dicari cari selama ini semua ada disini ..TOP bro! thanks.
Keren bang tutornya di copas sana sini XD
www.aziuzui.xyz
@adam muiz Begitulah kira-kira Sob. Sepertinya memang cukup banyak yang menyalin (copas) artikel ini untuk kemudian diterbitkan pada blog yang dikelolanya.
Mantap gan tutorialnya... Ini artikel/tutorial dan blog yg bagus banget!
Saya sdh berhasil pasang di blog saya (lagi belajar bikin blog) >> http://lahanherbal.blogspot.co.id/
Mau tanya gan,
1. Gimana caranya mengganti font di menu Sebelah Kiri & Sebelah Kanan atas jadi lebih BESAR, dan disesuaikan dengan Tinggi & Lebar Menu Bar tersebut (Tinggi dan Lebar Menu Bar tsb
ikut mengikuti perubahan font yg menjadi lebih Besar)
2. Gimana caranya gan, memasang Widget Facebook & Google+ di Menu sebelah Kanannya
Makasih gan, salam dan sukses selalu...
@lahanherbal 1. Perhatikan CSS untuk bagian .bilah-menu-atas {. Mengganti ukuran font agar lebih besar dapat dilakukan dengan cara mengubah ukuran pada font-size: 13px; menjadi sesuai dengan yang diinginkan, misalnya yaitu font-size: 16px;. Sementara itu untuk mengubah tinggi dan lebar menu dapat dilakukan dengan cara mengubah ukuran yang terdapat pada width: 100%; dan height: 27px; sesuai dengan ukuran yang dikehendaki.
2. Guna memasang widget yang dimaksud saya rasa dapat dilakukan dengan cara menambahkan script-nya pada list item yang tersedia pada menu tersebut.
terimakasih gan...membantu banget
@Yosef k Yoi, sama-sama dan terimakasih balik, Sob.
terima kasih tutorialnya mas
@bimba cilegong Terimakasih pula atas berkenannya mengeposkan komentar dalam artikel ini Sob. Disamping itu tidak ada salahnya bila Sobat juga melihat beberapa artikel lain yang saya poskan di blog ini. :)
[yang ini gimana udah mantap kawan http://seunuddoncity.blogspot.co.id/
@sebuah kehidupan Yang dimaksud mantap apanya Sob? :-/ Mungkin bisa dijelaskan secara lebih spesifik. :)
makasih yah, kunjungi blog saya bigbosstipsandtrick.blogspot.com