Membuat Menu di Bawah Header / Judul Blog

Jika menggunakan template yang belum difasilitasi dengan menu horisontal dibawah header pada blognya, mungkin disini saya bisa membagi cara untuk membuat menu dibawah header/judul Blog
 
Login ke blogger > Layout/Tata Letak > Edit Html .
Selanjutnya Anda cari kode dibawah ini, untuk mempermudah pencarian silahkan gunakan CTRL+F 

<div id='crosscol-wrapper' style='text-align:center'>

<b:section class='crosscol' id='crosscol' showaddelement='no'>

<b:widget id='HTML1' locked='false' title='' type='HTML'/>

</b:section>

</div>

Anda ubah kode showaddelement='no' menjadi showaddelement='yes'

disimpan, sekarang klik Page elements / Elemen Laman > Tambah Gadget > HTML/Javascript , copy kode dibawah ini,simpan dan letakan tepat dibawah header.

<a href="http://www.boyadoe.com " class="navigation">HOME</a>

<a href="http://www.boyadoe.com " class="navigation">CONTACT</a>

<a href="http://www.boyadoe.com " class="navigation">BUKU TAMU</a>

<a href="http://www.boyadoe.com " class="navigation">FACEBOOK</a>

<a href="http://www.boyadoe.com " class="navigation">TWITER</a>

<a href="http://www.boyadoe.com " class="navigation">DOWNLOAD</a>

<a href="http://www.boyadoe.com " class="navigation">LAIN-LAIN</a>

<a href="http://www.boyadoe.com " class="navigation">CHATTING</a>

*Alamat url diatas silahkan sesuaikan dengan blog Anda.


Hal ketiga adalah supaya menu itu menimbulkan efek warna sehingga menjadi kelihatan menarik.

Klik Tata Letak > Edit HTML , cari kode </b:skin> Copy kode dibawah ini dan letakan tepat diatas kode  </b:skin>

a.navigation {

background: #3333ff ;

color: #ffffff;

margin: 1px;

padding: 2px;

border-width: 0;

text-transform: uppercase;

text-decoration: none;

font-weight: bold;

}

a.navigation:hover {

background: #333333;

color: #ffffff;

text-decoration: none;

}

Perhatikan kode yang berwarna biru adalah warna tombol dan efek hover dan bisa dirubah sesuka hati Anda.Dan yang berwarna merah adalah jarak antara tombol satu dengan lainnya, silahkan Anda sesuaikan sesuai selera

Related Post

Tips Trik Blog

• How to View the Number of Backlinks / Website
• Membuat Read More Otomatis
• Memasang Artikel Terkait dibawah postingan
• cara membuat artikel terkait
• Menyisipkan Video Youtube di Postingan
• Memasang Fasilitas Chat di blog
• Cara Membuat Blockquote
• Cara Mengupload file di Hosting
• Cara Setting domain co.cc pada blogspot
• Cara Daftar Domain di co.cc dan Hosting Gartis
• Cara mengubah Lebar Template
• Cara membagi 2 kolom sidebar