Cara Buat Menu bar Keren Di Blogspot - semua halaman
blog di lihat dengan mudah oleh pengunjung dan salah satu cara dari kian
banyak cara jika anda ingin blog agan tampil lebih menarik.
Kali ini saya akan mencoba berbagi tips tentang cara membuat menu bar di
blogspot dengan mudah yang hanya di butuhkan sedikit keahlian dalam
mengedit HTML. Sebelum kita melanjutkan tutorial tentang cara membuat
menu bar di blogspot, terlebih dahulu silahkan lihatlah gambar di bawah
ini yang menampilkan hasil akhir dari menu bar di blogspot. ini adalah screenshotnya:
berikut caranya:
1. Login ke akun Blogger sobat
5. Letakan kode di bawah tepat di atas kode ]]></b:skin>
berikut caranya:
1. Login ke akun Blogger sobat
2. Sekarang Klik Template
3. Klik EDIT HTML
4. Sekarang Cari Kode ]]></b:skin> agar mudah dalam pencarian tekan Ctrl+f
5. Letakan kode di bawah tepat di atas kode ]]></b:skin>
/* Menu Horisontal
---------------------------------------------*/
.menupic{width:100%;margin:0 auto;padding:0 auto;}
.menuhorisontal{background:#e9e9e9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXuYKAlE4Z9MiQkM1mQlxORar-EUPEFI05AHlaYzwjswaHrJ5nMXHyljuBmbebSuycNvLiXyfdgQnzUCMTlH58D_9VvOO5Eh_qIiQ7gbwyyuXzXLdfUrWnyZLTlGo8aGd6ckI0Hcq8bCI/s1600/bg_menu.gif) repeat-x bottom left;width:980px;height:30px;margin:0 auto; padding:0 auto;border-left:1px solid $bordercolor;border-right:1px solid $bordercolor;border-top:solid 1px $bordercolor;}
.menuhorisontal ul{margin: 0; padding-left: 0px;color:#357798;text-transform: capitalize;list-style-type: none;font:bold 12px Arial, Helvetica,Arial,Verdana,sans-serif;}
.menuhorisontal li{display: inline; margin: 0;}
.menuhorisontal li a{float: left;display: block;text-decoration:none;
padding:7px 7px 7px 7px;border-right:1px solid #dadcde;border-bottom:solid 1px #d2d4d6;color:#357798;}
.menuhorisontal li a:visited{color:#357798;}
.menuhorisontal li a:hover {background:#fff;color:#333;text-decoration:none;border-bottom:solid 1px #fff; /*Background Setelah Pointer Diarahkan */}
.menuhorisontal li.selected a {background:#fff;color:#333;border-bottom:solid 1px #fff;padding:7px 10px 7px 10px;}
6. Sekarang Cari Kode <!-- /header-wrapper --> lalu letakan kode di bawah tepat di bawahnya
<div class='menupic'> <div class='menuhorisontal'> <ul> <li><a href='http://henry-multimedia-informasi.blogspot.com/'>HOME</a></li> <li><a href='#'>About Us</a></li> <li><a href='#'>Contact Us</a></li> </ul> </div> </div>Perhatian!
Jika Kode <!-- /header-wrapper --> tidak ketemu carilah kode yang mirip atau memiliki kesamaan, <!-- /header-wrapper --> biasanya terletak di bawah tag <body>
Jika Sebelumnya Template anda telah memiliki kode menu, hapus saja lalu ganti dengan kode diatas
Langkah-langkah di atas sudah saya coba sendiri dan berhasil. Bila dalam prosesnya anda mengalami kegagalan, mungkin itu dikarenakan ada hal di atas yang anda lewatkan. Demikian update saya kali ini mengenai Cara Buat Menu bar Keren Di Blogspot. Semoga bermanfaat !
Cara Buat Menu bar Keren Di Blogspot
4/
5
Oleh
akuntest123
60 komentar
Tulis komentargan dari gambarnya kurang jelas, ada DEMOnya gak?
Replyada gan, liat aja di pes-tricks,blogspot,com dan jangan lupa comment ya gan
Replyoke gan udh ane liat keren, thanks gan infonya
Replykok ga ketemu?
Replyane cari b:skin,... nya?
gan kok code nya kga ada si
Replykode apa?
ReplyMasa sih, ketik sekali lagi ]]> ingat jangan sampai ada space di kanan dan kiri kode!
Replyuntuk kode langkah kedua ... nda di bisa d seach gan
Replyitu karena faktor template gan karena tidak semua template memiliki kode yang sama!
Replyselain dibawah kode ini ?
Replysoalnya ga ada kode itu.
Mantab's....!!-thnx a lot gan masukannya.....!! :-),
Replysama-sama
ReplyGa ketemu kode ini nya ]]> -__-
ReplyGiamana cara masukin Widget ke menu tsb kak ? ane gak tau caranya , plis bantu ane
Replyingat jangan di kasih spasi di sebelum kode ]]>
Replygan dimana letaknya mencari Kode ]]> ?, maklum saya baru pemula gan..
ReplyGan blog tuh gak bsa search sndri ye ? mso pas saya ctrl+f trs pas saya copy kodenya kok dia gk nyari sndiri !
Replyikutin aja bro caranya diatas...
Replygak bsa
Replykunjungan blog www.handilnangka.blogspot.com
Replybro kode nya no. berapa , gak ada
Replyga ketemu
ReplyTerimakasih infonya,,, :)
ReplyMembuat blog saya bisa tampil lebih keren (Y)
http://alhada-fisip11.web.unair.ac.id/
mau yang seger2 ke superhotnaked.blogspot.com
Replysama-sama bro
Replygan kok code yang gak ketemu yak...?
Replykode yang mana?
Replykode yang langkah ke 6
Replykode yg kedua kog g bsa d cari ya....trs alterntifnya gmn?
Replysetau ane, klo kode nya gak ada, itu krn templete nya gak support Gan. coba pake templete yg lain
Replymakasih infonya gan...
ReplyMebel Jepara
Trims gan infonya...
ReplyTrims infonya
ReplyTrims Infonya
ReplyGan, sudah dicoba berhasil 100%.. trims yang sy bingung gimana menunya bisa jadi ada sub menunya? mhn pencerahan .....
Replysip..
ReplyBanyak fakta unik seputar dunia musik, loe bisa liat disini
Replyhttp://dimasalfikri.blogspot.com/
ane kok yg header wrappernya kga ketemu?
Replyane kok yg header wrapper nya kga ketemu
Replykeren gan
Replymakasih gan
setiap template tidak memiliki kode yg sama gan
Replydibilah sebelah kiri kode --- ada tanda ujung panah berwarna hitam, klik aja tanda itu nanti muncul deh kode ]]> nya
Replymakasih gan infonya sangat membantu
Replypaya saya ga da kode b:skin nya bro..tlong bantuannya....newbie
Replykode : ataupun body ga nemu bro, mohon bantuannya
Replyditunggu kunjungan baliknya di http://www.bisniscimuth.blogspot.com
terimakasih
Gan kode gak ada ditemplate ane ...
Reply..
Replykode header wrapper nya gk ada di template ane
ReplyMantap gan.. :D
Replykunjungi juga blog saya ya www.bisnisonlineemudah.blogspot.com
sip gan
Replybermanfaat, trims
Replykarimunjawa jepara
Thanks gan.sangat bermanfaat sekali.
Replygan ,kok pas saya mau cari ini ndak ada?
ReplyGk ketemu"uh gak berguna
Replysama-sama gan
Replytidak semua template memiliki kode yang sama gan
Replysama-sama gan
Replycara isi about me nya gmana ? -_-
Replyagan buat laman about me terlebih dahulu , lalu copy link about me tersebut kedalam link menu-nya
ReplyAgen Togel Online Terbaik & Terlengkap!
ReplyTersedia Pasaran Hongkong - Sydney - Singapore
Potongan Diskon 2D = 30% | 3D = 59% | 4D = 66%
Dapatkan Keuntungan Dalam Menebak Angka Hingga Ratusan Juta Setiap Hari..
Yuk Gabung Bersama Bolavita Di Website www. bolavita .fun
Untuk Info, Bisa Hubungi Customer Service Kami ( SIAP MELAYANI 24 JAM ) :
BBM: BOLAVITA
WA: +628122222995
=======================================================
• Untuk menyisipkan kode, gunakan tag [code]... KODE ...[/code]
• Untuk menyisipkan kode panjang, gunakan tag [pre]... KODE ...[/pre]
• Untuk menyisipkan catatan, gunakan [quote]...CATATAN ...[/quote]
• Untuk menyisipkan gambar, gunakan [img]..URL GAMBAR..[/img]
• Untuk menyisipkan video, gunakan [youtube]..URL VIDEO..[youtube]
=======================================================