Cara membuat menu berjalan di bawah judul blog (header)

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

1. Login ke bloh Anda >klik Template > klik Edit HTML > klik Expand Widget Template
2. 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’

3. Setelah diubah lanjut ke langkah berikutnya  cari kode </b:skin> , gunakan tombol  Ctrl+F
4. 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..

1. 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>

2. 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"

• Bagaimana dengan kode yang sudah dicopykan kedalam Template tadi? Boleh Anda masuk kembali ke Edit HTML dan cari kode yang sudah dicopykan diatas dan hapus, atau biarkan saja karena suatu saat Anda akan kembali.

• Bagaimana menghapus kembali kode menu berjalan?  Klik Page elements / Elemen Laman > klik Gadget tempat menu diatas tadi > hapus kode yang sesuai dengan kode warna kuning atau warna merah diatas, klik simpan

Selesai, semoga Anda berhasil.