Oleh : Syafei
Indonesian Post
Sekedar
sharing jika Anda ingin membuat menu berjalan di
bawah judul blog (header) , tentu
saja bagi Anda yang masih pemula, kebetulan Anda jumpa postingan ini jangan
lewatkan dulu atau Anda akan kembali.
Memang tidak diharuskan menampilkan menu berjalan,
malah ada yang menilai menu berjalan tidak bagus merusak pandangan bagi
pengunjung blog, tidak apa tidak ada salahnya untuk mencoba dan berkreasi,
suatu saat Anda ingin menghapusnya itu mudah dilakukan.
Fungsi dari menu berjalan tersebut adalah
memperkecil ruang atau mengurangi tidak terlalu banyak bar menu header, jadi
menu berjalan cukup satu baris. Baiklah
kita langsung saja agar Anda tidak bosan dan penasaran.
Ikuti
langkah-langkah berikut ;
A. Terlebih
dahulu buat menu dibawah judul blog
- Login ke bloh Anda >klik Template > klik Edit HTML >
klik Expand Widget Template
- Cari kode yang mirip dengan HTML dibawah ini, gunakan tombol 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>
Kalau tidak jumpa, cari
kode showaddelement=’no’ saja
dan mirip dengan <b:section
class=’crosscol’ id=’crosscol’ showaddelement=’no’> , gunakan tombol Ctrl+F, mau diubah
Ubah showaddelement=’no’ menjadi showaddelement=’yes’
- Setelah diubah
lanjut ke langkah berikutnya cari
kode </b:skin> , gunakan tombol Ctrl+F
- Copy kode dibawah ini dan letakan
tepat diatas kode </b:skin> kemudian
simpan.
a.navigation {
background: #ADFF2F;
color: #000000;
margin: 1px;
padding: 3px;
border-width: 0;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
}
a.navigation:hover {
background: #008000;
color: #ffffff;
text-decoration: none;
}
Kode yang berwarna biru
adalah warna tombol dan efek hover, dan yang berwarna merah
adalah jarak antara tombol satu dengan lainnya, kedua warna tersebut boleh Anda
sesuaikan dengan keinginan Anda. Melihat kode warna HTML klik disini
Sudak cocok simpan Template.
B.
Lanjutkan ke langkah kedua
Sekarang kita lanjut lagi > klik Page elements
/ Elemen Laman > klik Tambah Gadget > klik HTML/Javascript
, ubah dulu yang diberi warna biru sesuai url blog Anda, dan warna merah
sesuai menu yang Anda inginkan.
<a href=”http://ubah.blogspot.com”
class=”navigation”>Home</a>
<a href=”http://ubah.blogspot.com” class=”navigation”>Blog News </a><li>
<a href=”http://facebook.com” class=”navigation”>Facebook</a>
<a href=”http://twitter.com”
class=”navigation”>Twitter</a>
<a href=”https://plus.google.com” class=”navigation”>Google+</a>
<a href=”http://ubah.blogspot.com” class=”navigation”>Download</a>
<a href=”http://ubah.blogspot.com/p/privacy-policy.html”
class=”navigation”>Privacy Policy</a>
<a href=”http://ubah.blogspot.com/p/contact.html”
class=”navigation”>Contact</a>
Selesai dicocokkan dengan menu yang Anda inginkan,
simpan Gadget dan geser letakkan tepat dibawah header atau judul blog.
Redaksinya panjang tetapi ini sangat mudah dilakukan
C. Lanjutkan ke langkah ketiga
Membuat menu berjalan > klik Page elements /
Elemen Laman > klik Gadget tempat menu diatas, lalu tambahkan..
- Teks berjalan dari kanan ke kiri
Copykan kode seperti dibawah, yang diberi warna kuning
<marquee
direction="left" scrollamount="4"
align="center"bahavior=alterne>
<a href="http://ubah.blogspot.com"
class="navigation">Home</a>
<a href="http://ubah.blogspot.com"
class="navigation">Blog News
</a><li>
<a href="http://facebook.com" class="navigation">Facebook</a>
<a href="http://twitter.com" class="navigation">Twitter</a>
<a href="https://plus.google.com" class="navigation">Google+</a>
<a href="http://ubah.blogspot.com"
class="navigation">Download</a>
<a href="http://ubah.blogspot.com/p/privacy-policy.html"
class="navigation">Privacy Policy</a>
<a href="http://ubah.blogspot.com/p/contact.html"
class="navigation">Contact</a>
</marquee>
- Teks berjalan dari kiri ke kananCopykan
kode seperti dibawah, yang diberi warna merah
<marquee
direction="right" scrollamount="4"
align="center">
<a href="http://ubah.blogspot.com"
class="navigation">Home</a>
<a href="http://ubah.blogspot.com"
class="navigation">Blog News
</a><li>
<a href="http://facebook.com" class="navigation">Facebook</a>
<a href="http://twitter.com" class="navigation">Twitter</a>
<a href="https://plus.google.com" class="navigation">Google+</a>
<a href="http://ubah.blogspot.com"
class="navigation">Download</a>
<a href="http://ubah.blogspot.com/p/privacy-policy.html"
class="navigation">Privacy Policy</a>
<a href="http://ubah.blogspot.com/p/contact.html"
class="navigation">Contact</a>
</marquee>
“4” adalah kecepatan, boleh dikurangi dari 4 akan
melambat, dan ditambah dari 4 akan lebih cepat.
Sekali lagi, ini sangat mudah dilakukan.
- Anda ingin menghapus kembali, lakukan dengan mudah. Klik Page elements / Elemen Laman > klik
Gadget tempat menu diatas tadi > klik "hapus"
Selesai, semoga Anda berhasil.
