Membuat menu navigasi di blog

cara membuat menu navigasi responsive di blogger.

Halo sahabat pembaca😊,kali ini saya akan bercerita melalui tulisan ini,cerita tentang cara membuat menu navigasi di blog

Baiklah langsung saja saya mulai ceritanya melalui tulisan ini.

letakkan kode brikut di atas

</style>  ]]></b:skin>
 

#menu {background:#393939;color:#eee;height: 40px;width:100%;max-width:960px;margin:0 auto;} #menu ul,#menu li{margin:0 0;padding:0 0;list-style:none} #menu ul{height:40px;border-bottom:4px solid #0098db} #menu li{float:left;display:inline;position:relative;font-family:'Oswald',Arial;font-weight:500;font-size:15px;text-shadow: 0 -1px 0 #000;border-right: 1px solid #444;text-transform:uppercase} #menu li:first-child{border-left: none} #menu a{display:block;line-height:40px;padding:0 14px;text-decoration:none;color:#eee;}#menu li:hover > a,#menu li a:hover{background:#0098db} #menu input{display:none;margin:0 0;padding:0 0;width:80px;height:40px;opacity:0;cursor:pointer} #menu label{font:bold 30px font-family:'Oswald',Arial;font-weight:500;display:none;width:35px;height:36px;line-height:36px;text-align:center} #menu label span{font-size:12px;position:absolute;left:40px} #menu ul.menus{height:auto;overflow:hidden;width:180px;background:#393939;position:absolute;z-index:99;display:none;border:0;} #menu ul.menus li{display:block;width:100%;font:12px font-family:'Oswald',Arial;font-weight:500;text-transform:none;} #menu li:hover ul.menus{display:block} #menu a.home {background-color:#0098db;} #menu a.prett{padding:0 27px 0 14px} #menu a.prett::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:15px;right:9px} #menu ul.menus a:hover{background:#0098db;} @media screen and (max-width: 768px){ #menu{background:#000;position:relative} #menu ul{background:#111;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;text-align:left;display:none} #menu ul.menus{width:100%;position:static;padding-left:20px} #menu li{display:block;float:none;width:auto} #menu input,#menu label{position:absolute;top:0;left:0;display:block} #menu input{z-index:4} #menu input:checked + label{color:white} #menu input:checked ~ ul{display:block}}

kemudian letakkan kode di bawah ini setelah </head>

Atau bisa juga di pasang tepat di atas .</body> 

 <nav id='menu'>

<input type='checkbox'/>
<label>
<svg style='width:30px;height:30px' viewbox='0 -3 24 24'>
<path d='M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z' fill='currentColor'/>
</svg>
<span style='margin-top:1px;font-size:17px'>Navigasi</span>
</label>
<ul>
<li><a class='home' href='https://ceritakuuntukdibaca.blogspot.com'>
<span style='margin:3px;'>Home</span></a>
</li>
<li><a href='https://ceritakuuntukdibaca.blogspot.com/' title='Menu1'>Menu1</a></li>
<li><a href='https://ceritakuuntukdibaca.blogspot.com/' title='Menu2'>Menu2</a></li>
<li><a href='https://ceritakuuntukdibaca.blogspot.com/' title='Menu3'>Menu3</a></li>
<li><a href='https://ceritakuuntukdibaca.blogspot.com/' title='Menu4'>Menu4</a></li>
<li><a class='prett' href='#'>Dropdown1</a> <ul class='menus'>
<li><a href='https://ceritakuuntukdibaca.blogspot.com/' title='Sub Menu1'>Sub Menu1</a></li>
<li><a href='https://ceritakuuntukdibaca.blogspot.com/' title='Sub Menu2'>Sub Menu2</a></li>
<li><a href='https://ceritakuuntukdibaca.blogspot.com/' title='Sub Menu3'>Sub Menu3</a></li>
<li><a href='https://ceritakuuntukdibaca.blogspot.com/' title='Sub Menu4'>Sub Menu4</a></li>
</ul>
<li><a class='prett' href='#'>Dropdown2</a> <ul class='menus'> <li><a href='https://ceritakuuntukdibaca.blogspot.com/' title='Sub Menu5'>Sub Menu5</a></li>
<li><a href='https://ceritakuuntukdibaca.blogspot.com/' title='Sub Menu6'>Sub Menu6</a></li>
<li><a href='https://ceritakuuntukdibaca.blogspot.com/' title='Sub Menu7'>Sub Menu7</a></li>
<li><a href='https://ceritakuuntukdibaca.blogspot.com/' title='Sub Menu8'>Sub Menu8</a></li>
</ul>
</li> <li><a href='https://ceritakuuntukdibaca.blogspot.com/' target='_blank' title='Menu5'>Menu5</a></li>
</li>
</ul>
</nav>

silahkan ganti url adresnya dan ubah nama menu yang di inginkan

KLIK

DONASI VIA PAYPAL Bantu berikan donasi jika dirasa blog ini bermanfaat. Donasi akan digunakan untuk membeli domain www.ceritakuuntukdibaca.com. Terima kasih :)

CERITAKU UNTUK DIBACA

Kategori: Scritp HTML untuk membuat tampilan blog lebih menarik,

Terima kasih telah membaca Membuat menu navigasi di blog. Silahkan berlangganan artikel ini atau silahkan share .....!