,
Headlines News :
Home » » Membuat Top Menu Template Blogspot

Membuat Top Menu Template Blogspot

Written By Nanda Journey on Kamis, 08 Desember 2011 | 20.36

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....
Anda sedang membaca artikel tentang Membuat Top Menu Template Blogspot dan anda bisa menemukan artikel Membuat Top Menu Template Blogspot ini dengan url http://hy-hack.blogspot.com/2011/12/membuat-top-menu-template-blogspot.html,Dilarang menduplikat artikel ini Membuat Top Menu Template Blogspot jika sangat bermanfaat hanya boleh sebagai artikel refrensi atau harus mengulas nya dengan bahasa / kalimat yang berbeda dan memberi link ini : Membuat Top Menu Template Blogspot


Artikel Terkait:

Share this post :

Poskan Komentar

Blog Dofolow , Tapi Tolong jangan nyepam dan ada kata kata yang tidak baik

 
Support : Abaut Us | Contact Us | Privacy Policy | Term of Use | Redaksi | Advertise | Lowongan Kerja | Forum | Tabloit | Mobile Version | Hy Hack Toolbar
Copyright © 2011. HY hack - All Rights Reserved Template Created by Heykhend
Published by Heykhend Corp. Developed by PT Heykhend Publik Media (HPM)