Cara Membuat Menu Navigasi di Blog

HTML dan CSS
Assalamu'alaikum wr.wb

Pada kali ini saya akan memberikan tutorial membuat menu navigasi di blog

Bahan - bahan :
1. Blog
2. Koneksi Internet

Cara membuatnya :
1. Buka blogger / blogspot
2. Pilih blog kalian
3. Klik Template
4. Klik Edit HTML
5. Cari kode </head> (aga lebih cepat tekan Ctrl + F , lalu tulis </head> )
6. Salin atau copy script di bawah ini
<style>
        #float li {
    background: linear-gradient(#687587, #404853);
    float: left;
    list-style: none;
    padding-bottom: 10px;
    padding-top: 10px;
}

#float li a {
    border-left: 1px solid rgba(0, 0, 0, 0.2);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    font-variant: small-caps;
    text-decoration: none;
    padding: 10px 15px;
}

#float li a:hover {
  background: #454d59;
  color: #d0d2d5;
}
</style>
7. Tempel atau paste script yang telah di salin atau copy tepat di atas kode </head>
8. Klik simpan template
9. Klik tata letak
10. Salin atau copy script di bawah ini
<ul id="float">
    <li><a href="#">Home</a></li>
    <li><a href="#">Menu1</a></li>
    <li><a href="#">Menu2</a></li>
    <li><a href="#">Menu3</a></li>
    <li><a href="#">Menu4</a></li>
    <li><a href="#">Menu5</a></li>
</ul>
11. Klik tambah gadget dan pilih HTML/Javascript
12. Tempel atau paste di kotak yang muncul
13. Klik Simpan
14. Geser kotak gadget tadi di atas kotak posting blog
15. Lihat hasilnya dengan melihat blog kalian

Sekian tutorial dari saya, semoga bermanfaat
Wassalamu'alaikum wr.wb

0 Response to "Cara Membuat Menu Navigasi di Blog"

Posting Komentar