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 .....!

Komentar

Posting Komentar

Silahkan isi kolom komentar

Postingan Populer

Ilmu bela diri tingkat tinggi

Gambar
  ceritaku untuk di baca Ilmu bela diri tingkat tinggi khusus jalur kebaikan. Sahabat pembaca kali ini saya akan bercerita tentang pertahan diri tapi ini untuk jalur kebaikan, Manusia itu adalah mahluk yang di dalam dirinya tercampur kajahatan dan kebaikan ,manusia tidak bisa menghilangkan kejahatan dalam dirinya,namun manusia yang terlatih akan di mampukan oleh yang maha kuasa untuk mengendalikan kejahatan dalam dirinya. Cara mengendalikan kehatan dalam diri manusia bukanlah perkara gampang,manusia memiliki kadar kebaikan dan kejahatan yang berbeda beda, Tentunya yang maha kuasa maha tau kenapa dalam diri manusia di tanamkan kejahatan dan kebaikan,untuk masalah ini mungkin dilain waktu akan saya ceritakan. Cara mengendalikan kejahatan tentunya berbagai macam cara menyesuaikan keilmuan yang di pelajari manusia. Kehatan dalam diri tidak dapat di hilangkan, Itulah alasan manusia tidak luput dari kesalahan,kejahatan dalam diri manusia di  kendalikan dengan mengimbanginya dengan k...
Read more »

Kisah pedagang yang jujur namun berakhir usaha dagangannya tutup selamanya.

Gambar
 Kisah pedagang yang jujur namun berakhir usaha dagangannya tutup selamanya. Sahabat pembaca pada kesempatan kali ini saya akan menceritakan seorang pedagang namun berakhir tutup usaha dagangannya. Dikota bandung ada seorang pedagang bernama jumadi,jumadi adalah pedagang sate,suatu hari jumadi melayani sorang pembeli bernama madini. Madini: "beli sate bang satu porsi" Jumadi: "iya siap" Madini: " sudah lama bang jualan sate" Jumadi: " iya sudah lama sekitar empat bulan" Madini: "laris terus ya bang jualannya" Jumadi: "puji dan syukur kadang ramai kadang sepi" Madini: "omsetnya berapa bang jika sepi?" Jumadi: "saat sepi biasanya omset 1 juta saat ramai omset diatas 3 juta" Madini: " sukses ya bang usahanya" Itulah sekilas percakapan seorang pedagang dan pembelinya. Sahabat pembaca perlu diketahui tidak semua informasi tentang keuangan perusahaan atau...
Read more »

3 Penyebab Anda SELALU MISKIN, Meskipun Sudah Bekerja Keras

Gambar
sahabat pembaca,penyebab kemiskinan itu apa saja? Kalau menurut saya banyak penyebabnya,tentunya penyebabnya di jadikan bahan renungan supaya hal yang tidak baik jangan terjadi kepada kita semua. Wahai sahabat pembaca, Kekayaan itu bebagai macam, Kaya harta,kaya ilmu,kaya waktu, Banyak teman teman juga adalah kekayaan. Namun yang terpenting adalah ilmu, semua ada ilmunya, Ilmu adalah pengetahuan tentang cara cara melakukan atau memperlakukan tujuan yang ingin di capai, Di dunia ini semua ada hasilnya apa yang kita lakukan, Di dunia ini semua ada dampaknya apa yang kita lakukan, Di dunia ini semua ada reaksi yang muncul setiap tindakan yang kita lakukan. Tidak ada yang tau apa yang akan terjadi di masa depan,namun tidak ada salahnya menebak apa yang akan terjadi dari perbuatan kita, Manusia boleh merencanakan namun yang maha berkuasalah yang memberi ijin.     itulah cerita saya di tulisan kali ini.
Read more »