Kembali membahas desain blogger, kali ini membuat menu bar pada Blogger yang disesuaikan dengan keinginan tidak menggunakan menu bar standard yang dikeluarkan gadget Blogger. Menu bar yang dibahas adalah membuat membuat menu bar drop down dimana desain ini pun dapat diterapkan di desain website.
Pada beberapa bulan yang lalu telah dibahas cara membuat menu bar atau menu tab yang standard, yaitu gadget menu bar keluaran blogger, postingan pada tanggal 06 Maret 2018, dengan judul "How To Create Menu Tabs, yang dapat dibaca lagi di sini. Sekarang akan dibahas menu bar cutomize dengan membuat fungsi drop dwonn. |
Membuat menu bar drop down, Anda harus membuat css agar menu bar drop dwon berfungsi. Dalam pembahasannya, dari mulai membuat kode css sampai cara memasangnya di template blogger atau tata letak blogger. Yang pertama cara kode css agar menu bar drop down bekerja dengan baik.
Untuk membuat kode css menu dropdown caranya sebagai berikut
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> .navbar { overflow: hidden; background-color: #32cd32; font-family: Arial, Helvetica, sans-serif; } .navbar a { float: left; font-size: 16px; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } .dropdown { float: left; overflow: hidden; } .dropdown .dropbtn { font-size: 16px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; } .navbar a:hover, .dropdown:hover .dropbtn { background-color: red; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover { background-color: #32cd32; color:red; } .dropdown:hover .dropdown-content { display: block; } </style> <div class="navbar"> <a href="#home">Home</a> <a href="#news">Profile</a> <div class="dropdown"> <button class="dropbtn">Articles <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="#">Aha Sarang Komputer</a> <a href="#">Aha Dua Permata</a> <a href="#">Bila</a> </div> </div> </div>
Pada variable layout label div Anda ubah sesuai apa yang Anda inginkan pada judulnya, seperti "home", "profile" dan lain - lain. Begitupun pada kode warna hexsadesimal, dapat diganti dengan warna lain atau pun dengan kode warna rgb. Kemudian kode tersebut simpan di ;
- Buka Blogger
- Klik "Tata Letak"
- Klik edit bar "crosscol"
- Kemudian akan terbuka halaman gadgets Blogger, pilih "html/javascript"
- Copy paste kode tersebut di sini
- selesai
Hasilnya akan seperti di bawah ini:
Kode tersebut juga dapat di simpat di template, dengan meng-copy kode di bawah <style> dan di atas </style> ke template di bawah skin style. Namun cara ini tidak praktis, jadi sebaiknya Anda yang masih pemula tidak menyimpan di template, karena jika ada kode di template yang tidak sengaja terhapus dengan tidak sengaja dan Anda tidak tahu mana yang terhapus, akan menjadi maslah pada tampilan bloggspot Anda. Jadi menyimpan di "Tata Letak" itu lebih praktis.
Untuk memasang menu bar drop down pada desain website, kode css, yaitu kode antara <style> dan di atas </style> di simpan di bawah </title> dan di atas </head>. Sedangkan kode layout di bawah <body>.
Demikian cara membuat membuat desain kostum atau customize menu bar dengan menggunakan menu bar drop down.
Semoga bermanfaat dan sukses.
Artikel Terkait:
- Tutorials Desain Blog di Smartphone
- Tutorials Desain Blog di Smartphone II
- Tutorials Desain Blog di Smartphone III
- Tutorials Desain Blog di Smartphone IV
- Tutorials - Cara Registrasi Blogger ke Adsense Google
- How To Create Menu Tabs
- Blogger - Cara Edit Hyperlink
- Blogger - Kode ID Pelacakan
- Tip Mengembalikan Postingan Blog Terhapus
- Cara Verifikasi Blog Ke Webmaster Tools
- Tips For Blog Validation Into Webmaster Tools
- Tips - Membuat Sitemaps Blog
- Tips To Create Sitemaps Blog
- Tips - Membuat Meta Tags SEO Friendly Blog Dan Website
- Tutorials - Create Mark Up Structured Data At Webmaster Tools
- Tips SEO - Cara Memperbaiki Kesalahan Data Terstruktur
- Tutorials SEO -Tentang Itemscope
- Tutorial - Highlighter Webmaster Tools
- Tutorials - Highlighter Webmaster Tools For Blog And Website
- Webmaster Tools - Fix Crawl Error
- Website - Tip Membuat Button Share Ke Sosial Media
- Cara Menghapus Image_Url, BlogId Dan PostId
- Tip Cara Memasang Lencana Profile Twitter di Blog
- Tips - Memasang Postingan Twitter Di Blog Dan Website
- Tips - Menambahkan Plugin Fanpage Facebook di Blog Dan Website
- Tips - Menambahkan Profile Google + Di Blog Dan WebPage
- Tips - Memasang Lencana Profile Linkedin Di Blog Dan Website
- Blogger - Cara Memasang Postingan Instagram
- Blogger - Cara Menambahkan News Feed
- Blogger - Cara Menambahkan Icon Favicon Ico Address Bar
- Blogger - Membuat Menu Bar Drop Drown
No comments:
Post a Comment