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

• 
  MAU MEMASANG IKON AWSOME DENGAN GRADASI WARNA DI BLOG? BEGINI CARANYA!Rekan rekan blogger! Kita bahas sedikit perihal kecenderungan kita sebagai seorang blogger yang terkadang memiliki sensasi sebagai desainer, dan tanp ...
• 
  MEROBAH GAYA DAN UKURAN FONT POSTINGAN BLOG DENGAN OPSI CSS PADA BLOGGERMungkin yang kami kemukan hanyalah masalah kecil bagi sebagian teman teman blogger. Akan tetapi baik gaya maupun ukuran font cukup berperan besar pad ...
• 
  CARA MENGHAPUS TOMBOL SHARE BAWAAN BLOGSPOT DAN MENGGANTIKANNYA DENGAN TOMBOL SHARE RESPONSIVEGambar tombol Share pengganti pada blogspotTombol bawaan blogspot atau blogger itu yang kami maksud bentuknya yang seperti ini:Terlihat kecil dan mon ...
• 
  7 LANGKAH MEMBUAT TEMPLATE SEDERHANA BAWAAN BLOGGER MENJADI RESPONSIVE DAN MOBILE FRIENDLY (LANJUTAN)Pada tulisan sebelumnya saya hanya memberikan contoh bagaimana mengubah tampilan template bawaan blogger "sederhana" menjadi :Menyembunyikan tampilan ...
• 
  HOW TO CREATE COOLEST LOGO IN YOUR BLOGFirst you must know how important any logos in a blog. It is like a kind of a short impression to representative your mission in a blog. People will ...
• 
  7 LANGKAH MENJADIKAN TEMA SEDERHANA BAWAAN BLOGGER MENJADI PREMIUM1. Menyembunyikan Navbar. Pertama masuk ke - Dasbor blog - Tataletak-lalu pilih navbar - buka konfigurasi lalu pilih opsi: OFF.2. Buang gambar obeng ...