Thursday, June 20, 2013

Cara Buat Menu bar Keren Di Blogspot

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

 
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 !

Related Posts

Cara Buat Menu bar Keren Di Blogspot
4/ 5
Oleh

Subscribe via email

Like the post above? Please subscribe to the latest posts directly via email.

60 komentar

Tulis komentar
avatar
June 23, 2013 at 8:44 PM

gan dari gambarnya kurang jelas, ada DEMOnya gak?

Reply
avatar
June 25, 2013 at 7:36 PM

ada gan, liat aja di pes-tricks,blogspot,com dan jangan lupa comment ya gan

Reply
avatar
June 27, 2013 at 5:12 PM

oke gan udh ane liat keren, thanks gan infonya

Reply
avatar
August 23, 2013 at 4:05 PM

kok ga ketemu?
ane cari b:skin,... nya?

Reply
avatar
August 27, 2013 at 1:20 PM

gan kok code nya kga ada si

Reply
avatar
August 27, 2013 at 10:32 PM

Masa sih, ketik sekali lagi ]]> ingat jangan sampai ada space di kanan dan kiri kode!

Reply
avatar
September 20, 2013 at 7:57 PM

untuk kode langkah kedua ... nda di bisa d seach gan

Reply
avatar
September 21, 2013 at 5:56 PM

itu karena faktor template gan karena tidak semua template memiliki kode yang sama!

Reply
avatar
October 1, 2013 at 9:52 PM

selain dibawah kode ini ?
soalnya ga ada kode itu.

Reply
avatar
October 2, 2013 at 2:05 PM

Mantab's....!!-thnx a lot gan masukannya.....!! :-),

Reply
avatar
October 16, 2013 at 2:45 PM

Giamana cara masukin Widget ke menu tsb kak ? ane gak tau caranya , plis bantu ane

Reply
avatar
October 19, 2013 at 9:20 PM

ingat jangan di kasih spasi di sebelum kode ]]>

Reply
avatar
October 23, 2013 at 9:03 PM

gan dimana letaknya mencari Kode ]]> ?, maklum saya baru pemula gan..

Reply
avatar
October 25, 2013 at 5:29 PM

Gan blog tuh gak bsa search sndri ye ? mso pas saya ctrl+f trs pas saya copy kodenya kok dia gk nyari sndiri !

Reply
avatar
October 25, 2013 at 11:45 PM

ikutin aja bro caranya diatas...

Reply
avatar
October 26, 2013 at 7:56 PM

kunjungan blog www.handilnangka.blogspot.com

Reply
avatar
October 27, 2013 at 12:05 PM

bro kode nya no. berapa , gak ada

Reply
avatar
November 11, 2013 at 5:20 PM

Terimakasih infonya,,, :)
Membuat blog saya bisa tampil lebih keren (Y)

http://alhada-fisip11.web.unair.ac.id/

Reply
avatar
November 16, 2013 at 7:43 PM

mau yang seger2 ke superhotnaked.blogspot.com

Reply
avatar
November 24, 2013 at 12:03 AM

gan kok code yang gak ketemu yak...?

Reply
avatar
November 27, 2013 at 12:06 PM

kode yg kedua kog g bsa d cari ya....trs alterntifnya gmn?

Reply
avatar
November 30, 2013 at 2:12 AM

setau ane, klo kode nya gak ada, itu krn templete nya gak support Gan. coba pake templete yg lain

Reply
avatar
December 20, 2013 at 11:22 AM

Gan, sudah dicoba berhasil 100%.. trims yang sy bingung gimana menunya bisa jadi ada sub menunya? mhn pencerahan .....

Reply
avatar
December 25, 2013 at 8:41 AM

Banyak fakta unik seputar dunia musik, loe bisa liat disini
http://dimasalfikri.blogspot.com/

Reply
avatar
December 29, 2013 at 10:36 AM

ane kok yg header wrappernya kga ketemu?

Reply
avatar
December 29, 2013 at 10:36 AM

ane kok yg header wrapper nya kga ketemu

Reply
avatar
Anonymous
December 29, 2013 at 8:55 PM

keren gan
makasih gan

Reply
avatar
December 31, 2013 at 2:26 PM

setiap template tidak memiliki kode yg sama gan

Reply
avatar
January 13, 2014 at 11:30 PM

dibilah sebelah kiri kode --- ada tanda ujung panah berwarna hitam, klik aja tanda itu nanti muncul deh kode ]]> nya

Reply
avatar
January 16, 2014 at 5:24 PM

makasih gan infonya sangat membantu

Reply
avatar
January 18, 2014 at 3:50 PM

paya saya ga da kode b:skin nya bro..tlong bantuannya....newbie

Reply
avatar
January 19, 2014 at 11:47 AM

kode : ataupun body ga nemu bro, mohon bantuannya

ditunggu kunjungan baliknya di http://www.bisniscimuth.blogspot.com

terimakasih

Reply
avatar
January 19, 2014 at 2:28 PM

kode header wrapper nya gk ada di template ane

Reply
avatar
February 3, 2014 at 2:46 PM

Mantap gan.. :D

kunjungi juga blog saya ya www.bisnisonlineemudah.blogspot.com

Reply
avatar
April 17, 2014 at 4:18 PM

Thanks gan.sangat bermanfaat sekali.

Reply
avatar
April 23, 2014 at 3:26 PM

gan ,kok pas saya mau cari ini ndak ada?

Reply
avatar
June 30, 2014 at 8:44 PM

tidak semua template memiliki kode yang sama gan

Reply
avatar
August 3, 2014 at 12:07 AM

cara isi about me nya gmana ? -_-

Reply
avatar
August 4, 2014 at 11:55 AM

agan buat laman about me terlebih dahulu , lalu copy link about me tersebut kedalam link menu-nya

Reply
avatar
February 10, 2019 at 1:50 PM

Agen Togel Online Terbaik & Terlengkap!
Tersedia 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

Reply

=======================================================
• 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]
=======================================================