Membuat Menu Bar di Blogger/Blogspot
Posted on Kamis, 04 November 2010
|
No Comments
Biasanya sebuah template telah memiliki menubar sendiri. Tapi jika ingin menambahkannya dibagian paling atas seperti punya saya caranya gampang:
1. Login blogger
2. Tata Letak (sekarang design/rancangan)
3. Edit HTML
4. Centang Expand Template Widget
5. Cari kode ]]>
6. Kopi kode berwarna biru di bawah ini di atas kode ]]>
Kalau sudah lanjutkan ke langkah berikut:
7. Cari kode <body>
8. Tambahkan script di bawah ini, di bawah
Untuk Pengeditan perhatikan kode berikut yang saya ambil dari kode diatas:
Tip dan Trik
http://www.masdoyok.co.cc/ bisa diganti dengan URl yang anda inginkan
dan Tip dan Trik adalah labelnya. Bisa Anda ganti juga.
-Jika sudah selesai klik simpan template
Selamat mencoba.
1. Login blogger
2. Tata Letak (sekarang design/rancangan)
3. Edit HTML
4. Centang Expand Template Widget
5. Cari kode ]]>
6. Kopi kode berwarna biru di bawah ini di atas kode ]]>
/*The top Menu*/
#top{
margin:auto;
padding: 0;
width: 100%;
background:#171615;
border-bottom:1px solid #393837;
}
#top-wrap{
margin:auto;
padding: 0;
width: 960px;
background:#080705;
}
#navwrap {margin:auto; width:560px; float:left;}
.topnav ul {list-style:none;margin:0;padding:0px; float:left;}
.topnav li {float:left;margin:0;text-align:center;}
.topnav li a {font-family: georgia; font-weight:normal; font-size:10px; text-transform:uppercase; display:block;padding:10px;color:#a4a5a1;text-decoration:none;}
.topnav li a {background:none; }
.topnav li a:hover, li a:focus, li a:active {text-decoration:none; background:#393837; color:#fff;}
#navwrapright {margin: 0px auto; width:400px; float:right; text-align:right;}
.topnavright ul {list-style:none;margin:0;padding:0px; float:right;}
.topnavright li {float:left;margin:0;text-align:center;}
.topnavright li a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJPxVu1hbOdIwtjK3XwoElLyUgfO7ZyE4txBOqIFeW4c0cVV-AwNSUxbgpTHZXtqMvVIMY4nEgLyxeMg2qrzJTl8yEK902mZ08h7JFjSddYcYSyrgTbsNUPUZgWEjuef45NncRlU3nQxBw/s1600/rss.png) no-repeat left center; font-family: georgia; font-weight:normal; font-size:10px; text-transform:uppercase; display:block;padding:10px 10px 10px 20px;color:#a4a5a1;text-decoration:none;}
.topnav li a:hover, li a:focus, li a:active {text-decoration:none; background:#393837; color:#fff;}
Kalau sudah lanjutkan ke langkah berikut:
7. Cari kode <body>
8. Tambahkan script di bawah ini, di bawah
Untuk Pengeditan perhatikan kode berikut yang saya ambil dari kode diatas:
Tip dan Trik
http://www.masdoyok.co.cc/ bisa diganti dengan URl yang anda inginkan
dan Tip dan Trik adalah labelnya. Bisa Anda ganti juga.
-Jika sudah selesai klik simpan template
Selamat mencoba.
Selengkapnya di www.MasDoyok.co.cc Membuat Menu Bar di Blogger/Blogspot
