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:
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
<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:
Sebagai catatan marquee memiliki 3 sifat atau behaviour:
Contoh dapat dilihat dari menu navigasi blog ini.
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.
<marquee>Teks Berjalan</marquee>
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:
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:
<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>
Sebagai catatan marquee memiliki 3 sifat atau behaviour:
- Scroll : marquee menghilang ketika menabrak sisi kiri (kode default)
- Slide : marquee berhenti ketika menabrak sisi kiri
- aternate : marquee memantul ketika menabrak sisi
Contoh dapat dilihat dari menu navigasi blog ini.