Menambah menu navigasi horizontal untuk pengunjung pada blogspot

Membuat blog dengan akun gratis seperti blogspot pada blogger memang suatu kesempatan yang menyenangkan, disana kita berkreasi, berinovasi, mengekspresikan diri  kita kedalam komunitas online dengan identitas yang kita miliki.

Namun umumnya sebagian rekan-rekan termasuk saya dulunya memiliki kendala karena keterbatasan dari layanan theme gratis yang diberikan oleh pihak bloger. Apa dengan keterbatasan ini kita akan meninggalkannya? Sudah tentu tidak, layanan bloger gratis tanpa iklan sudah merupakan layanan yang luar biasa dan patut disyukuri.

Salah satu kelemahan theme blogspot adalah pada pembuatan menu navigasi horisontalnya, bukan tidak bisa! Dengan sedikit kreatifitas tentu semua permasalahan tersebut dapat kita atasi dengan cara :

Langkah utama yang harus anda dilakukan adalah 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>

Silahkan melakukan perubahan pada  kode showaddelement='no' menjadi  showaddelement='yes' , kalau sudah klik simpan pada widget blogspot anda.

usai yang pertama sudah disimpan, langkah selanjutnya yang harus dilakukan adalah sekarang klik Page elements / Elemen Laman > Tambah Gadget > HTML/Javascript , copy kode dibawah ini,simpan dan letakan tepat dibawah header.

<a href="http://ecomadv.blogspot.com " class="navigation">HOME</a>
<a href="http://ecomadv.blogspot.com " class="navigation">CONTACT</a>
<a href="http://ecomadv.blogspot.com " class="navigation">BUKU TAMU</a>
<a href="http://ecomadv.blogspot.com " class="navigation">FACEBOOK</a>
<a href="http://ecomadv.blogspot.com " class="navigation">TWITER</a>

*Silahkan buat atau tambahkan menu sesuai dengan keinginan anda.

*Alamat url diatas silahkan sesuaikan dengan blog Anda.


Setelah langkah kedua selesai dilakukan, sebagai langkah ketiga adalah supaya menu itu menimbulkan efek warna sehingga menjadi kelihatan menarik.

Klik Tata Letak > Edit HTML , cari kode </b:skin> , agar mudah gunakan tombol CTRL+F
Copy kode dibawah ini dan letakan tepat diatas kode  </b:skin> kemudian simpan.

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.

Jika prosesnya sudah kita lakukan semua, selanjutnya silahkan buka halaman blogspot anda, Tombol-tombol menu navigasi yang kita idam-idamkan sudah muncul. Silahkan melanjutkan kreatifitas anda untuk menjadikan blog yang lebih cantik dan bermutu.

Related Posts :