Cara termudah membuat menu navigasi blog yang responsive

Apa itu menu navigasi? Menu navigasi adalah sejumlah halaman atau link pilihan yang terdapat diblog yang bertujuan untuk mempermudah pengunjung dalam mengakses dan mencari infornasi yang dibutuhkan didalam blog anda. Seperti home, home merupakan halaman utama (beranda) blog sangat disarankan untuk dipasang dimenu navigasi blog yang bertujuan mempermudah pengunjung untuk kembali kehalaman beranda blog ketika sudah berada dihalaman terakhir blog (urutan jauh) dan fungsi lainnya juga membuat tampilan blog menjadi lebih menarik. Ataukah ingin menambahkan label blog dimenu navigasi itu terserah dengan anda. Oke, langsung aja kita mulai untuk membahas topik utamanya.

Berikut cara memasang menu navigasi di blog

Pergi kemenu tata letak blog > klik tambahkan gadget pada bagian cross-column 2 > pilih halaman yang ingin dimunculkan pada menu navigasi blog > klik simpan.


Jika memakai template bawaan blog, bisa pergi kemu tema > sesuaikan > lanjutan > latar tab. Untuk apa ini min? Untuk menambahkan warna background / latar belakang pada menu navigasi blog.

#cara kedua
  • Pergi kemenu tema blogger > edit html.
  • Tekan ctrl+f > cari kode </style> atau ]]></b:skin> lalu tambahkan kode berikut tepat diatas kode tersebut.
@media only screen and (max-width:768px){ .menunav li{float:none;}
.menunav li a{background:none}
.menunav ul{text-align:center;width:100%}
.menusearch{float:none;padding:5px 0 10px} }
/* Menu Navigasi */ .menunav{max-width:auto;background:#1a7db7; color:#fff;display:inline-block;width:100%;border-bottom: 3px solid #dfdfdf;} .menunav ul{width:100%;padding:0;margin:0 auto} .menunav li:first-child a{padding:7px 10px 3px} .menunav li{list-style:none;display:inline-block;float:left} .menunav li a{;color:#fff;display:block;font:bold 13px Arial;position:relative;text-decoration:none;padding:10px} .menunav li a:hover{background:#2374a3; color:#fff} .menunav li a .sf-sub-indicator{overflow:hidden;position:absolute;text-indent:-9999px} .menunav li li a,.menunav li li a:link,.menunav li li a:visited{background:#2c8fc9;border-right:none;color:#fff;font:12px Arial;position:relative;text-transform:none;width:138px;padding:10px 10px;text-shadow: none;opacity:0.8} .menunav li li a:hover,.menunav li li a:active{background:#2374a3} .menunav li ul{height:auto;left:-9999px;position:absolute;width:160px;z-index:9999;margin:0} .menunav li ul a{width:140px} .menunav li ul ul{margin:-33px 0 0 157px} .menunav li:hover>ul,.menunav li.sfHover ul{left:auto} .menusearch{width: 210px;;float:right;margin:0 auto;padding: 13px 0 0;} .searchform {margin-top:0px;display: inline-block;*display: inline;padding:0;background:#fff;width:200px;height:23px; overflow:hidden;border-radius:3px;border:1px solid #5c820d;} .searchform input {font:italic 12px Arial;color:#222;line-height:23px;height:23px;padding:0;margin:0;} .searchform .searchfield {background:transparent;padding:0 0 0 6px;margin:0;width: 160px;height:23px;border:0px;outline: none;line-height:23px;} .searchform .searchbutton{border:none;font-size:12px;height:23px;width:23px;margin:0;padding:0} none;line-height:23px;} .searchform .searchbutton{border:none;font-size:12px;height:23px;width:23px;margin:0;padding:0}
  • Cari kode </header> tempatkan kode berikut tepat diatasnya.
<div class='menunav'>
<ul class='sf-menu'>
<li><a href='https://www.infomenarik.id/'>Home</a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Sub Menu 1</a>
<ul>
<li><a href='#'>Sub 1</a></li> <li><a href='#'>Sub 2</a></li>
<li><a href='#'>Sub 3</a></li>
</ul>
</li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'>Menu 3</a></li>
<li><a href='#'>Menu 4</a></li>
<li><a href='#'>Menu 5</a></li> </ul>
<div class='menusearch'>
<form action='/search' class='searchform' method='get'>
</form>
</div>
</div>
  • Sesuaikan link dan teks anchornya > klik simpan perubahan.

No comments:

Post a Comment

Berikan komentar terbaik anda mengenai kepuasan anda dalam membaca artikel ini :)