Membuat Top Menu Template Blogspot ( Part 8)

Cara Membuat template sederhana Blogspot Part 8 ini membahas pembuatan TOP MENU. Sebenernya membuat top menu ini bisa kamu baca pada artikel Cara Membuat Top Menu di Blogger, tapi karena ini sederhana jadi aku tulis lagi deh top menu yang paling sederhana ok? Sekali lagi jangan lupa bagi yang ketinggalan artikel baca dulu artikel di bawah ini :

Cara Membuat Template Sederhana Blogspot :
Part 1, Part 2 , Part3, Part4, Part 5, Part 6, Part 7

Ayo kita kemon.... Pada artikel sebelumnya cara membuat template Sederhana Blogspot Part 7 sudah kita masukan kode untuk menampilakan judul dan diskripsi Blog. Dan sekarang kita akan menambah kode untuk top menu di template Blogspot, ikuti langkah-langkah di bawah ini :

1. Masuk Ke Account Blogspot kamu.
2. Pada Dasbor pilih rancangan pada blog kamu dan akan terlihat dasbor lalu klik Tata Letak>Edit HTML. jangan lupa beri tanda cek pada Expand Template Widget.Cari kode di bawah ini :
   
   #top-menu {
   ...........
   }
   
   Lalu tambahkan dibawahnya Kode CSS berikut :
   
   #top-menu a, #top-menu a:visited {
   color: #000000;
   font-size: 11px;
   text-decoration: none;
   text-transform: uppercase;
   padding: 0px 0px 0px 3px;
   font-weight:bold;
   }
   #top-menu a:hover {
   color: #000000;
   text-decoration: underline;
   padding: 0px 0px 0px 3px;
   }
   #topleft {
   width: 500px;
   float: left;
   margin: 5px 0 0 3px;
   padding: 0px;
   }


3. Langakah selanjutnya cari kode di bawah ini :
   
   <div id='top-menu'>
   Home |
   About Me |
   Contact Us
   </div>
   Tambahkan kode seperti di bawah ini :
   <div id='top-menu'>
   <div id='topleft'>
   <a href='http://tempfor.blogspot.com/'>Home</a> |
   <a href='http://tempfor.blogspot.com/'>About Me</a> |
   <a href='http://tempfor.blogspot.com/'>Contact Us</a>
   </div>
   </div>
   
   
   kemudian ganti tulisan yang berwarna merah dengan link yang kamu kehendaki.
   Misal :
   
   <a href='http://tempfor.blogspot.com/'>Home</a>
   ganti http://tempfor.blogspot.com dengan alamat blog kamu.
   
4. Setelah selesai klik simpan template. Uuntuk melihat hasilnya klik kanan mouse kamu pada tulisan Lihat Blog lalau pilih open new tab (kalau pake mozzila) bimsalabim jadi deh top menunya di bawah ini :
   Contoh jadinya silahkan kunjungi : http://tempfor.blogspot.com/
   
   Jika panah mouse berada pada tulisan home di top menu akan keluar garis bawah yang menandakan ada linknya :)

Tambahan : Merapikan bagian Navbar. Kenapa harus dirapikan ? ini sebabnya : kalau kamu lihat navbarnya masih ada jarak dengan browser untuk itu kita buat nempel ke browser aja... caranya ?
Ikuti langkah-langkah di bawah ini :

1. Masih pada posisi Edit HTML, cari kode CSS si bawah ini :
   
   body {
   padding:3px;
   background:#fff;
   font-family:Century gothic, Arial,Tahoma,sans-serif;
   color:#126A9B;
   font-size:13px;
   text-align: center;
   margin:2px;
   }
   
   Ubah padding dari 3px menjadi auto dan margin dari 2px ke auto. Kemudian klik simpan template. Setelah proses selesai silahkan lihat blog ada dannnnn sudah rapi deh... :)
   

Ok sampai disini dulu ya... terus kunjungi blog ini ya biar tuntas bikinnya.. jangan lupa komentar ya... thanku everybody....

Part 9 - Membuat Sidebar Template Blogspot

Share on Facebook Share on Twitter Share on Google Plus