Membuat Second Menu Seperti Detikcom
Saat ini sejumlah website besar telah menggunakan tampilan yang memiliki second menu menarik contohnya seperti situs detikcom
 |
| Second menu |
Menu navigasi pada situs website maupun blog memang sangatlah penting. Keberadaan menu navigasi akan memudahkan pengunjung untuk berselancar di halaman situs kita. Apalagi dibuat semenarik mungkin maka, ini menjadi nilai plus pengunjung akan betah berlama lama di halaman website kita sehingga bounce rate web akan berkurang dan tentu kesehatan peforma situs kita akan semakin bertambah pula.
Saat ini sejumlah website besar telah menggunakan tampilan yang memiliki second menu menarik contohnya seperti situs detikcom. Kebaradaan second menu menarik pada detikcom membuat pembacanya mudah untuk menelusuri setiap berita yang dimuat di sana. Atau kamu bila langsung melihat pada blog ini dimana second menunya mirib dengan web detikcom.
Jika kamu berminat untuk memasang second menu seperti yang telah dibahas tadi maka pembahasan kali ini akan memberikan tutorial cara mudah memasang second menu navigasi pada blog. Silahkan ikuti sampai selesai untuk lebih jelasnya seperti apa second menu yang dimaksud silahkan lihat contoh gambar dibawah ini.
 |
| Second menu |
Cara memasangnya pada blog cukup mudah kita hanya melakukan dua langkah penempatan saja. Tak hanya itu second menu ini tidak memiliki javascript jadi tidak akan mempengaruhi loading blog kamu. Maka tunggu apalagi silahkan ikuti langkah-langkah berikut ini. Sebelum exekusi jangan lupa template kamu di backup dulu untuk antisipasi kemungkinan yang tidak diinginkan.
Langkah pertama yang harus kamu lakukan adalah login ke akun blogger kamu. Selanjutnya pilih tema kemudian pilih edit HTML. Lalu copy kode CSS berikut dan letakan sebelum kode penutup head.
/*--- nav-scroll ---*/
.second-menu{left:0;right:0;top:48px;display:none;max-width:100%;overflow:scroll;overflow-y:hidden;position:fixed;z-index:5;background:#fff;height:35px;line-height:12.5px;font-size:13.5px;font-weight:500;box-shadow:0 2px 6px 0 rgba(0,0,0,.1)}
.second-menu ul{width:max-content;margin:0 0 0 80px}
.second-menu ul li{float:left;font-size: 12px;padding:6px 8px;display:block;text-align:center;text-transform:uppercase}.second-menu ul li a:hover{color:#49ACE1;border-bottom:2px solid #49ACE1}
.second-menu ul li a{color:#444;padding: 8px 5px;}
.second-menu ul li.satu1 {padding: 0;position:fixed;left:-1px}
.second-menu ul li.satu1 span{background: #444;padding:11.5px 10.5px 10px;color:#fff;vertical-align: -6px;}
.second-menu ul li.satu1:after{content:'';display:inline-block;position:absolute;border-left:12px solid #444;border-top:8px solid transparent;border-bottom:8px solid transparent;right:-10px;top:4px}
@media screen and (max-width: 640px){
.second-menu{display:block}
Langkah selanjutnya copy kode berikut ini dan letakan di bawah kode header penutup template.
<div class='second-menu'>
<ul><li class='satu1'><span>KATALOG :</span></li>
<li><a href='#' title='BLOGGER'>BLOGGER</a></li>
<li><a href='#' title='UNIK'>UNIK</a></li>
<li><a href='#' title='BUDAYA'>BUDAYA</a></li>
<li><a href='#' title='PANTUN'>PANTUN</a></li>
<li><a href='#' title='REMAJA'>REMAJA</a></li>
<li><a href='#' title='SAINS'>SAINS</a></li>
<li><a href='#' title='SEJARAH'>SEJARAH</a></li>
<li><a href='#' title='SYAIR'>SYAIR</a></li>
</ul>
</div>
Selanjutnya ganti yang saya beri tanda tagar dengan url menu yang diinginkan lalu simpan dan lihat hasilnya. Jika posisinya kurang pas pada template yang kamu gunakan, kamu bisa mengaturnya pada bagian code CSS tadi. Selamat mencoba jika masih ragu selahkan tanya dikolom komentar.
Post a Comment