Cara membuat menu bar di blog dengan mudah

Cara membuat menu bar di blog dengan mudah adalah sebuah cara jitu jika agan menginginkan tampilan semua halaman blog di lihat dengan mudah oleh pengunjung dan salah satu cara dari kian banyak cara jika agan 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.
menu bar di blogspot
Nah bagaimana tertarik bukan? Baiklah bagi agan-agan yang sudah tidak sabar lagi ingin membuat menu bar di blogspot silahkan perhatikan langkah-langkah dari tutorial cara membuat menu bar di blogspot dengan mudah dibawah ini.

Cara membuat menu bar di blogspot dengan mudah

1. Silahkan masuk ke akun Blogger agan.
2. Klik halaman "Template" download template lengkap untuk berjaga-jaga terjadi hal-hal yang tidak di inginkan.
3. Centang "Expand Template Widget". 
4. Terus silahkan cari kode ]]></b:skin> denan menggunakan Ctrl + F.
5. Simpan kode script di bawah ini tepat di atas kode ]]></b:skin>

#menubar{
border-bottom:4px solid #ff0000;
width:1025px;
height:32px;
background:#000000;
float:center;
margin-bottom:3px;
}
#menubar ul{
float:left;
margin:0;
padding:0;
}
#menubar li{
float:left;
list-style:none;
margin:0;
padding:0;
}
#menubar li a, #menubar li a:link{
float:left;
padding:8px 12px;
color:#fff;
text-decoration:none;
font-size:13px;
font-weight:bold;
}
#menubar li a:hover, #menubar li a:active, #menubar .current_page_item a  {
background: #ff0000;
color: #fff;
text-decoration:none;
}
#menubar li li a, #menubar li li a:link, #menubar li li a:visited{
font-size: 12px;
background: #ff0000;
color: #fff;
text-decoration:none;
width: 150px;
padding: 0px 10px;
line-height:30px;
}
#menubar li li a:hover, #menubar li li a:active {
background: #000000;
color: #ffffff;
}
#menubar li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin-top:32px;
border:1px solid ##ff0000;
}
#menubar li:hover ul, #menubar li li:hover ul, #menubar li li li:hover ul, #menubar li.sfhover ul, #menubar li li.sfhover ul, #menubar li li li.sfhover ul{
left:auto
}
#menubar li:hover, #menubar li.sfhover{
position:static
}       
6. Untuk seterusnya silahkan cari kode <div id="content-wrapper"> 
7. Simpan kode script di bawah ini tepat di atas kode <div id="content-wrapper">
<div id='menubar'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://beatdownx.blogspot.com/p/about.html'>About Me</a></li>
<li><a href='http://beatdownx.blogspot.com/p/email.html'>Contact Me</a>
<ul>
<li><a href='https://plus.google.com/b/107404934236027850004/107404934236027850004/posts'>Google +</a></li>
<li><ahref='http://www.facebook.com/pages/'>Facebook</a></li>
<li><a href='https://twitter.com/ErixBeatdown'>Twitter</a></li>
</ul></li>
</ul>
</div>
8. Simpan Template.
Note: 
  • Sesuaikan kode #ff0000 (border bawah menubar), 1025px (lebar menubar), #000000 (background menubar).
  • Silahkan nama menubar yang berwarna biru Home sesuai dengan keinginan agan.
  • Ganti link yang berwarna merah 'http://beatdownx.blogspot.com/p/about.html dengan link agan.
Itulah pembahasan mengenai tutorial tentang cara membuat menu bar di blog dengan mudah semoga dengan adanya pembahasan ini dapat membantu sobat blogger yang ingin membuat menu bar di blogspot, silahkan tinggalkan komentar jika mendapatkan kesulitan agar saya dapat segera membantu.

Share this

Related Posts

Previous
Next Post »

24 komentar

komentar
April 13, 2013 at 5:17 AM delete

kira apa ya masalahnya?
kalo buka ,tw mau edit HTML di tempelate suka loading dan gak pernah kebuka,,,!"

Reply
avatar
April 16, 2013 at 7:52 PM delete

ok trima ksih gan. visit back http://nasef-potret.blogspot.com/

Reply
avatar
April 16, 2013 at 7:53 PM delete

ok trima ksih gan. visit back http://nasef-potret.blogspot.com/

Reply
avatar
April 16, 2013 at 7:54 PM delete

wah keren. trima ksih. visit http://nasef-potret.blogspot.com/

Reply
avatar
April 29, 2013 at 9:28 PM delete

terimakasih telah berbagi ilmu.. saya akan coba pasang

Reply
avatar
May 11, 2013 at 3:03 AM delete

mantap.. tankyu... visit http://fasnetku.blogspot.com/

Reply
avatar
May 13, 2013 at 8:42 AM delete

thanks gan, segera di praktekkan

Reply
avatar
May 16, 2013 at 1:39 AM delete

ok thank gan ,visit http://gilamoney.blogspot.com/

Reply
avatar
May 16, 2013 at 1:41 AM delete

thank gan ,visit my blog http://gilamoney.blogspot.com/

Reply
avatar
May 17, 2013 at 8:59 AM delete

izin untuk mencoba gan....terima kasih info nya

Reply
avatar
May 24, 2013 at 1:43 AM delete

mau dunt blajar ilmu blog na..
bisa bantu ga?
bagus bnget tampilan blog na

Reply
avatar
June 26, 2013 at 1:57 AM delete

mantap...sob tambah infonya ya....

WWW.BLOGMNC.BLOGSPOT.COM

Reply
avatar
September 24, 2013 at 1:38 AM delete

terimakasih atas ilmunya
semoga akan mendapatkan kerkahan dalam membagi
salam hangat dari
http://sembakonet.blogspot.com/

Reply
avatar
November 28, 2013 at 11:11 PM delete

kalau backu html gmna caranya gan takut ga jalan scriptnya

Reply
avatar
November 28, 2013 at 11:12 PM delete

kalau backup html gmna gan takut gagal prakteknya,thanks

Reply
avatar