MEMBUAT MENU NAVIGASI BERGERAK DENGAN MEMANFAATKAN KODE MARQUEE

Desain adalah kreativitas dan seorang desainer selayaknya harus bisa menemukan cara memanipulasi tampilan desainnya dengan hal baru dan agar supaya terlihat lain dari yang lain dengan memanfaatkan elemen elemen desain html.
Pernah melihat huruf dan untaian kata kata berjalan? Dalam dunia blogger itu dinamakan "MARQUEE" dan marquee ini dapat dengan mudah dibuat dengan menggunakan kode HTML.

Kode dasar marquee:

<marquee>Teks Berjalan</marquee>

Teks Berjalan

Dengan hanya memanfaatkan kata kata "teks berjalan" kedalam kode marquee maka teks terlihat berjalan. Kali ini kita akan memanipulasi kode marquee untuk membuat menu navigasi berjalan yang berisi link label pada setiap postingan blogger

MEMANFAATKAN LABEL

Masuk kepengaturan blog (atau dasbor blog) klik Tambahkan widget, lalu pilih label dan SAVE. Ketika label terlihat cari label postingan terbanyak maka kita akan dibawa kepada link postingan dengan label tersebut. Misal jika kita klik label "Blogger" maka yang akan tampil hanyalah postingan terkait blogger, jika klik label Teknologi, maka yang akan muncul hanyalah postingan terkait teknologi. Fungsi label seperti "memfilter" dan mengelompokan postingan yang terkait dan serupa.

Sekarang kita kembali ke kode marquee, kami melakukan sedikit manipulasi  script dengan memanfaatkan marquee agar menjadi menu navigasi yang berjalan dalam hal ini dapat diletakan dibawah header melalui  "lay out" di pengaturan blogger, kami menambahkan widget baru dan memililih menabahkan widget "HTML/javascript" seperti pada gambar:

Setelah muncul kotak dialog HTML/Javascript, kami memasukan kode yang telah kami buat untuk membuat menu navigasi melayang di bawah Judul blog seperti gambar dibawah:

Dengan memanfaatkan behavior="alternative" dan menambahkan kode fa fa awsome dan menambahkan link dari label yang telah di copy kita dapat membuat beberapa buah sub menu navigasi yang keren perhatikan kodenya:

<marquee behavior="alternate"> <i class="fa fa-heart-o" aria-hidden="true"></i>
<a href="https://editblogtema.blogspot.com/search/label/blogger"><i class="fa fa-rss fa-2x" aria-hidden="true">Blogger</i>
<span class="sr-only"></span><i class="fa fa-heart-o" aria-hidden="true"></i>
<a href="https://editblogtema.blogspot.com/search/label/template"><i class="fa fa-paint-brush fa-2x" aria-hidden="true">Template</i><i class="fa fa-heart-o" aria-hidden="true"></i>
<a href="https://editblogtema.blogspot.com/p/blog-page_30.html"><i class="fa fa-sitemap fa-2x" aria-hidden="true">SiteMap</i><i class="fa fa-heart-o" aria-hidden="true"></i>

<a href="https://editblogtema.blogspot.com/search/label/english"><i class="fa fa-language fa-2x" aria-hidden="true">English</i><i class="fa fa-heart-o" aria-hidden="true"></i></a></a></a></a></marquee>

Kita dapat merobah nama menu dan mengganti link yang disorot warna kuning dengan link kita sendiri. Dan juga merubah kode fa fa awsome sehingga ikonnya cocok dengan nama menu blog kita sendiri. Tetapi supaya font awsome dapat berjalan pada template blog bawaan kita harus menambahkan kode pemanggilnya dan meletakannya di atas kode </head> dengan cara masuk ke pengaturan blog dan langsung masuk ke "edit HTML" kodenya adalah:

<link href='https://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

Rumus kode marquee kami diatas adalah sebagai berikut:

<marquee behavior="alternate">Teks Berjalan memantul</marquee>

Teks Berjalan memantul

Sebagai catatan marquee memiliki 3 sifat atau behaviour:

1. Scroll : marquee menghilang ketika menabrak sisi kiri (kode default)
2. Slide : marquee berhenti ketika menabrak sisi kiri
3. aternate : marquee memantul ketika menabrak sisi

Marquee yang kami pergunakan adalah alternate, kita tentu saja bebas memilih, selain itu cara kerjanya adalah sama dengan html kita dapat menambah ukuran font, memberi warna dll. 

Contoh dapat dilihat dari menu navigasi blog ini.

Related Posts