Cara membuat menu drop down di blog , Menu Dropdown - perlu di ketahui bahwa sebuah website ataupun blog itu menurut saya sangat penting untuk membuat menu drop down, walau sebenarnya navigasi menu ini sudah ada atau sudah di siapapkan oleh penyedia jasa situs misalnya blogger atau wordpress tapi menu yang bawaan biasanya modelnya standar atau lurus-lurus saja jadi kalau dilihat dari segi keunikan tentunya kurang menarik menurut saya, oleh karena itu jika kita suka keindahan , keunikan tidak ada salahnya untuk merenovasi tampilan blog supaya lebih menjadi unik dan menarik.
untuk membuat menu dropdown pada blog sebenarnya sangat banyak cara nya panduan tentang cara membuat menu drop down, silahkan simak cara membuat menu dropdown di blog
untuk cara pembuatan menu drop down silahkan simak langkah-langkahnya di bawah ini :
1. buka blog anda lalu ke dashborad blog
2.pilih template lalu klik edit HTML
3.dan cari kode di dalam HTML kode ini ]]></b:skin>
4.lalu copy kode di bawah ini dan letakan / taruh tepat di atas kode ]]></b:skin>
nav {text-transform:uppercase;position:relative;font:bold 12px Arial,Sans-Serif;}nav * {margin:0 0 0 0;padding:0 0 0 0;list-style:none;}nav ul {overflow: hidden;float:left;background:#1BC7A5;margin: 5px 0;width: 100%;}nav li {float:left;display:inline;}nav li a {padding:3px 15px;line-height:40px;color:#fff !important;display:block;text-decoration:none;}nav li ul{margin:0px;display:block;width:170px;position:absolute;left:auto;z-index:10;visibility:hidden;opacity:0;height:auto;transition:all 0.26s ease-out 0.2s;}nav li li {display:block;float:none;width:100%;}nav li:hover > ul {visibility:visible;width:200px;opacity:1;}nav li li ul {left:200px;margin-top:-40px;}nav li.sub > a {position:relative;padding-right:30px;}nav li.sub > a:after {content:"";width:0px;height:0px;border-width:4px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:20px;right:10px;}nav li.sub li.sub > a:after {content:"";width:0px;height:0px;border-width:4px;border-style:solid;border-color:transparent transparent transparent #eee;position:absolute;top:16px;right:10px;}nav li li:hover{background:rgba(0, 0, 0, 0.16);}
5. cari lagi kode di HTML kode ini </head>
6. dan copy kode di bawah ini lalu letahkan / masukan tepat di bawah kode </head>
<nav>
<ul>
<li><a href='https://jatisronopule.blogspot.com/'>Home</a></li>
<li><a href='https://jatisronopule.blogspot.com/'>menu 2</a></li>
<li><a href='/'>menu 3</a></li>
<li class='sub'><a href='https://jatisronopule.blogspot.com/p/sitemap.html'>menu 4</a><ul>
<li><a href='/'>sub menu 1</a></li>
<li><a href='#'>sub menu 2</a></li>
<li><a href='#'>sub menu 3</a></li>
<li><a href='#'>sub menu 4</a></li>
</ul>
</li>
</ul>
</nav>
7. ganti tulisan di dalam kode di atas yang warna merah ganti dengan url blog anda yg ingin di tampilkan pada menu nya , lalu kode yang warna hijau ganti dengan judul menu yang ingin di tampilkan
8. lalu klik pratinjau dulu gunanya untuk mengecek apa sudah bener penempatan kodenya dan jika sudah bener / tidak eror silahkan simpan template nya
9. selesai
Dan untuk melihat hasil pembuatan menu drop down nya silahkan buka beranda blog anda
Sampai disini panduan Blogger Tentang cara membuat menu drop down semoga bermanfaat
untuk membuat menu dropdown pada blog sebenarnya sangat banyak cara nya panduan tentang cara membuat menu drop down, silahkan simak cara membuat menu dropdown di blog
Contoh dari menu drop down seperti gambar di bawah ini
untuk cara pembuatan menu drop down silahkan simak langkah-langkahnya di bawah ini :
1. buka blog anda lalu ke dashborad blog
2.pilih template lalu klik edit HTML
3.dan cari kode di dalam HTML kode ini ]]></b:skin>
4.lalu copy kode di bawah ini dan letakan / taruh tepat di atas kode ]]></b:skin>
nav {text-transform:uppercase;position:relative;font:bold 12px Arial,Sans-Serif;}nav * {margin:0 0 0 0;padding:0 0 0 0;list-style:none;}nav ul {overflow: hidden;float:left;background:#1BC7A5;margin: 5px 0;width: 100%;}nav li {float:left;display:inline;}nav li a {padding:3px 15px;line-height:40px;color:#fff !important;display:block;text-decoration:none;}nav li ul{margin:0px;display:block;width:170px;position:absolute;left:auto;z-index:10;visibility:hidden;opacity:0;height:auto;transition:all 0.26s ease-out 0.2s;}nav li li {display:block;float:none;width:100%;}nav li:hover > ul {visibility:visible;width:200px;opacity:1;}nav li li ul {left:200px;margin-top:-40px;}nav li.sub > a {position:relative;padding-right:30px;}nav li.sub > a:after {content:"";width:0px;height:0px;border-width:4px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:20px;right:10px;}nav li.sub li.sub > a:after {content:"";width:0px;height:0px;border-width:4px;border-style:solid;border-color:transparent transparent transparent #eee;position:absolute;top:16px;right:10px;}nav li li:hover{background:rgba(0, 0, 0, 0.16);}
5. cari lagi kode di HTML kode ini </head>
6. dan copy kode di bawah ini lalu letahkan / masukan tepat di bawah kode </head>
<nav>
<ul>
<li><a href='https://jatisronopule.blogspot.com/'>Home</a></li>
<li><a href='https://jatisronopule.blogspot.com/'>menu 2</a></li>
<li><a href='/'>menu 3</a></li>
<li class='sub'><a href='https://jatisronopule.blogspot.com/p/sitemap.html'>menu 4</a><ul>
<li><a href='/'>sub menu 1</a></li>
<li><a href='#'>sub menu 2</a></li>
<li><a href='#'>sub menu 3</a></li>
<li><a href='#'>sub menu 4</a></li>
</ul>
</li>
</ul>
</nav>
7. ganti tulisan di dalam kode di atas yang warna merah ganti dengan url blog anda yg ingin di tampilkan pada menu nya , lalu kode yang warna hijau ganti dengan judul menu yang ingin di tampilkan
8. lalu klik pratinjau dulu gunanya untuk mengecek apa sudah bener penempatan kodenya dan jika sudah bener / tidak eror silahkan simpan template nya
9. selesai
Dan untuk melihat hasil pembuatan menu drop down nya silahkan buka beranda blog anda
Sampai disini panduan Blogger Tentang cara membuat menu drop down semoga bermanfaat
Terimakasih dan salam blogger
No comments:
Post a Comment