Cara Membuat Menu Bar Menggunakan Kode HTML

Ada beberapa cara yang bisa dilakukan oleh blogger pemula untuk membuat menu yang menunjukkan halam-halaman. Diantaranya dengan menggunakan label atau bisa juga menggunakan Pages. Kali ini, saya akan membuat menu halaman blogger menggunakan kode html.

Yang harus sobat lakukan adalah:

Pertama,

>> Masuk ke akun blogger sobat

>> Pada dashboard blogger, pilih ‘Layout’ >> ‘Add Gadget.’

>> Sampai sini, akan muncul kotak dialog gadget, scroll ke bawah sampai sobat menemukan gadget ‘html/javascript.’

Klik gadget ‘html/javascript’ tersebut. Akan muncul kotak dialog.

>> Pada title, ketikkan nama judul menu yang akan dibuat

>> Pada bagian yang lain, buat sebuah daftar menu yang akan muncul pada menu bar. Contoh yang saya buat adalah sebagai berikut:

Saya beri nama judul halaman saya ‘newnavbar’ dengan kode newnavbar:

<div id='newnavbar'>

            <ul id='menus'>

                        <li><a href='#’>Home</a></li>

                        <li><a href='#'>Photoshop</a></li>

                        <li><a href='#'>Coreldraw</a></li>

                        <li><a href='#'>Blog</a></li>

                        <li><a href='#'>Graphic</a></li>

                        <li><a href='#'>Games</a></li>

                        <li><a href='#'>Utility</a></li>

                        <li><a href='#'>Tools</a></li>

            </ul>

</div>

*tanda #: silahkan isikan dengan url blog sobat. Untuk melihat url blog sobat, kembali ke dashboard, pilih ‘Setting’ >> ‘basic’.

 

Jadi, kode html yang akan menjadi menu saya akan menjadi seperti berikut:

<div id='newnavbar'>

            <ul id='menus'>

                        <li><a href='http://asheerun.blogspot.com’>Home</a></li>

                        <li><a href=''http://asheerun.blogspot.com’'>Photoshop</a></li>

                        <li><a href=''http://asheerun.blogspot.com’'>Coreldraw</a></li>

                        <li><a href=''http://asheerun.blogspot.com’'>Blog</a></li>

                        <li><a href=''http://asheerun.blogspot.com’'>Graphic</a></li>

                        <li><a href=''http://asheerun.blogspot.com’'>Games</a></li>

                        <li><a href=''http://asheerun.blogspot.com’'>Utility</a></li>

                        <li><a href=''http://asheerun.blogspot.com’'>Tools</a></li>

            </ul>

</div>

Jika sudah selesai, klil ‘Save.’

Selamat mencoba . . .

* Cara membuat Pages/Laman menggunakan Label, klik disini.
* Cara membuat Pages/Laman menggunakan Tabs, klik disini.