Kali Ini ! Bakalan-Tlogorejo-City --->> Akan berbagi Mengenai..>>
Cara mudah memasang Menu Blog di Bawah Header
Bagi rekan blogger yang menggunakan template yang belum difasilitasi dengan menu horisontal dibawah header pada blognya, berikut saya postkan bagaimana cara membuat menu tersebut. Fungsi dan kegunaan menu ini adalah agar memudahkan kita dalam menelusuri semua isi yang terkandung didalam blog tersebut Yuk kita mulai...Hal pertama yang harus 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>
<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' , kalau sudah klik simpan ya
Setelah yang pertama sudah disimpan, sekarang klik Page elements / Elemen Laman > Tambah Gadget > HTML/Javascript , copy kode dibawah ini,simpan dan letakan tepat dibawah header.
<a href="http://bakalan-tlogorejo-city.blogspot.com/ " class="navigation">HOME</a>
<a href="http://bakalan-tlogorejo-city.blogspot.com/ " class="navigation">CONTACT</a>
<a href="http://bakalan-tlogorejo-city.blogspot.com/ " class="navigation">BUKU TAMU</a>
<a href="http://bakalan-tlogorejo-city.blogspot.com/ " class="navigation">FACEBOOK</a>
<a href="http://bakalan-tlogorejo-city.blogspot.com/ " class="navigation">TWITER</a>
<a href="http://bakalan-tlogorejo-city.blogspot.com/ " class="navigation">DOWNLOAD</a>
<a href="http://bakalan-tlogorejo-city.blogspot.com/ " class="navigation">LAIN-LAIN</a>
<a href="http://bakalan-tlogorejo-city.blogspot.com/ " class="navigation">CHATTING</a>
Hal 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 hitam adalah jarak antara tombol satu dengan lainnya, silahkan Anda sesuaikan sesuai selera.
Selamat Mencoba...!!!
Selesai, semoga bermanfaat....
0 komentar:
Catat Ulasan
Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>
Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.
NB: Jangan menuliskan link aktif karena akan terhapus secara automatis.
Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (out of topic) dengan menekan tombol OOT di bawah