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(http://2.bp.blogspot.com/_tUdwiyEcqV4/TVAvFqOyxcI/AAAAAAAAAs8/ZE7Yc8WL1n4/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 !
Previous
Next Post »

64 komentar

Write komentar
June 23, 2013 at 8:44 PM delete

gan dari gambarnya kurang jelas, ada DEMOnya gak?

Reply
avatar
Henry Dwi.s
AUTHOR
June 25, 2013 at 7:36 PM delete

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

Reply
avatar
June 27, 2013 at 5:12 PM delete

oke gan udh ane liat keren, thanks gan infonya

Reply
avatar
August 23, 2013 at 4:05 PM delete

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

Reply
avatar
August 27, 2013 at 1:20 PM delete

gan kok code nya kga ada si

Reply
avatar
Henry Dwi.s
AUTHOR
August 27, 2013 at 10:32 PM delete

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

Reply
avatar
September 20, 2013 at 7:57 PM delete

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

Reply
avatar
Henry Dwi.s
AUTHOR
September 21, 2013 at 5:56 PM delete

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

Reply
avatar
Reddy Al Rich
AUTHOR
October 1, 2013 at 9:52 PM delete

selain dibawah kode ini ?
soalnya ga ada kode itu.

Reply
avatar
Joni i. Akbar
AUTHOR
October 2, 2013 at 2:05 PM delete

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

Reply
avatar
October 7, 2013 at 11:05 PM delete

Ga ketemu kode ini nya ]]> -__-

Reply
avatar
October 16, 2013 at 2:45 PM delete

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

Reply
avatar
Henry Dwi.s
AUTHOR
October 19, 2013 at 9:20 PM delete

ingat jangan di kasih spasi di sebelum kode ]]>

Reply
avatar
October 23, 2013 at 9:03 PM delete

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

Reply
avatar
sapto aji
AUTHOR
October 25, 2013 at 5:29 PM delete

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
Henry Dwi.s
AUTHOR
October 25, 2013 at 11:45 PM delete

ikutin aja bro caranya diatas...

Reply
avatar
ian dyaz
AUTHOR
October 26, 2013 at 7:56 PM delete

kunjungan blog www.handilnangka.blogspot.com

Reply
avatar
October 27, 2013 at 12:05 PM delete

bro kode nya no. berapa , gak ada

Reply
avatar
November 11, 2013 at 5:20 PM delete

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

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

Reply
avatar
Enam Ribu
AUTHOR
November 16, 2013 at 7:43 PM delete

mau yang seger2 ke superhotnaked.blogspot.com

Reply
avatar
November 24, 2013 at 12:03 AM delete

gan kok code yang gak ketemu yak...?

Reply
avatar
yuni dilvy
AUTHOR
November 27, 2013 at 12:06 PM delete

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

Reply
avatar
November 30, 2013 at 2:12 AM delete

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

Reply
avatar
Kevin Delvino
AUTHOR
December 20, 2013 at 11:22 AM delete

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

Reply
avatar
Dimas Alfikri
AUTHOR
December 25, 2013 at 8:41 AM delete

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

Reply
avatar
December 29, 2013 at 10:36 AM delete

ane kok yg header wrappernya kga ketemu?

Reply
avatar
December 29, 2013 at 10:36 AM delete

ane kok yg header wrapper nya kga ketemu

Reply
avatar
Henry Dwi.s
AUTHOR
December 31, 2013 at 2:26 PM delete

setiap template tidak memiliki kode yg sama gan

Reply
avatar
Haryati Aja
AUTHOR
January 13, 2014 at 11:30 PM delete

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

Reply
avatar
Heri Hayufa
AUTHOR
January 16, 2014 at 5:24 PM delete

makasih gan infonya sangat membantu

Reply
avatar
January 18, 2014 at 3:50 PM delete

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

Reply
avatar
Cimuth
AUTHOR
January 19, 2014 at 11:47 AM delete

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:26 PM delete

Gan kode gak ada ditemplate ane ...

Reply
avatar
January 19, 2014 at 2:28 PM delete

kode header wrapper nya gk ada di template ane

Reply
avatar
February 3, 2014 at 2:46 PM delete

Mantap gan.. :D

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

Reply
avatar
April 17, 2014 at 4:18 PM delete

Thanks gan.sangat bermanfaat sekali.

Reply
avatar
April 23, 2014 at 3:26 PM delete

gan ,kok pas saya mau cari ini ndak ada?

Reply
avatar
Lucky Pratama
AUTHOR
June 3, 2014 at 8:49 PM delete

Gk ketemu"uh gak berguna

Reply
avatar
Henry Dwi.s
AUTHOR
June 30, 2014 at 8:44 PM delete

tidak semua template memiliki kode yang sama gan

Reply
avatar
Prediksi Bola
AUTHOR
July 2, 2014 at 11:42 AM delete

Makasih mas, silakan kunjungi juga situs adik

http://www.prediksibola888.blogspot.com
http://www.kis33.net

Makasih

Reply
avatar
Hafiz Haetami
AUTHOR
August 3, 2014 at 12:07 AM delete

cara isi about me nya gmana ? -_-

Reply
avatar
Henry Dwi.s
AUTHOR
August 4, 2014 at 11:55 AM delete

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

Reply
avatar

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