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.
Kode dasar marquee:
<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.
Related Posts
- 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 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 ...
- 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 ...
- MEMPERBAIKI ADD NUMBERING DAN ADD BULLETS YANG TIDAK BISA TAMPIL PADA POSTINGAN BLOGTulisan ini di posting adalah karena beberapa problem muncul setelah template di buat dan postingan di cobakan atau di publish. Terutama karena hal i ...
- AUTODIDACT, WHY YOU FAIL TO PERFORM ITSelf-taught? Why not! How many teenegers are so lucky have a challenge going to school especially in the 3rd Countries, contemporary study is stated ...
- 5 SIGNS THOSE SHOWN THAT YOU ARE GENIUSIF YOU CAN USE YOUR SMARTPHONE BY RIGHTwhen you confuse what shall be bought a laptop or a smartphone? Just consider the bugdet that you have for now ...
Tidak ada komentar:
Posting Komentar
blog ini adalah blog demo dan dapat berubah bentuk, fungsi, pengalihan dll sewaktu waktu. Jika terdapat ketidaknyamanan kami mohon maaf