Share Pengalaman - Membuat Menu di blog sangatlah penting untuk para pengunjung. Mengapa demikian? karena akan mempermudah untuk para pengunjung dalam mengakses artikel yang mereka inginkan.
Sebelum artikel ini tuntas share pengalaman telah memposting sebuah cara membuat menu navigasi keren dengan kode CSS di blog. Menu navigasi yang terposting sebelumnya sangat cocok untuk pendaftaran google adsense, katanya Google Adsense suka dengan menu navigasi tersebut, "kata para master lainnya.
Jadi untuk kali ini share pengalaman akan berbagi tutorial tentang cara membuat menu bar responsive keren. Membuat menu responisve dan keren dengan cara ini sangatlah mudah karena cara membuat menu bar responsive ini tidak menggunakan sistem edit html. Untuk cara membuat menu bar responsive keren silahkan simak di bawah ini.
Cara Memasang Menu Bar Responsive Keren Di Blog
1. Silahkan login ke akun blogger masing-masing.
2. Silahkan klik menu Tata Letak.
3. Silahkan klik Tambahkan Gadget.
4. Silahkan klik Html/Java Script.
5. Silahkan Pilih Tambahkan Gadget yang paling atas.
6. Silahkan copy dan pastekan script di bawah ini pada kotak konten. (Judul biarkan kosong).
<!-- CSS -->
<style type='text/css'>
#menunav *{text-decoration:none;list-style:none;margin:0;padding:0;outline:none}
#menunav .section{width:100%;max-width:1200px;margin:0 auto;display:table;position:relative}
#menunav{width:100%;display:table;background-color:#fde428;margin-bottom:50px}
#menunav #logo{float:left;font-size:24px;text-transform:uppercase;color:#002e5b;font-weight:600;padding:20px 0}
#menunav nav{width:auto;float:right}
#menunav nav ul{display:table;float:right}
#menunav nav ul li{float:left}
#menunav nav ul li:last-child{padding-right:0}
#menunav nav ul li a{color:#002e5b;font-size:18px;padding:25px 20px;display:inline-block;transition:all 0.5s ease 0s}
#menunav nav ul li a:hover{background-color:#002e5b;color:#fde428;transition:all 0.5s ease 0s}
#menunav nav ul li a:hover i{color:#fde428;transition:all 0.5s ease 0s}
#menunav nav ul li a i{padding-right:10px;color:#002e5b;transition:all 0.5s ease 0s}
#menunav .toggle-menu ul{display:table;width:25px}
#menunav .toggle-menu ul li{width:100%;height:3px;background-color:#002e5b;margin-bottom:4px}
#menunav .toggle-menu ul li:last-child{margin-bottom:0}
#menunav input[type=checkbox],label{display:none}
@media only screen and (max-width:1440px){#menunav .section{max-width:95%}}
@media only screen and (max-width:980px){#menunav{padding:20px 0}#menunav #logo{padding:0}#menunav input[type=checkbox]{position:absolute;top:-9999px;left:-9999px;background:none}#menunav input[type=checkbox]:fous{background:none}#menunav label{float:right;padding:8px 0;display:inline-block;cursor:pointer}#menunav input[type=checkbox]:checked ~ nav{display:block}#menunav nav{display:none;position:absolute;right:0;top:53px;background-color:#002e5b;padding:0;z-index:99}#menunav nav ul{width:auto}#menunav nav ul li{float:none;padding:0;width:100%;display:table}#menunav nav ul li a{color:#FFF;font-size:15px;padding:10px 20px;display:block;border-bottom:1px solid rgba(225,225,225,0.1)}#menunav nav ul li a i{color:#fde428;padding-right:13px}}
@media only screen and (max-width:480px){#menunav .section{max-width:90%}}
@media only screen and (max-width:360px){#menunav label{padding:5px 0}#menunav #logo{font-size:20px}#menunav nav{top:47px}}
</style>
<!-- HTML -->
<div id="menunav">
<div class="section">
<a href="http://www.komputerdia.com/" id="logo" target="_blank">Logo Kalian</a>
<label for="toggle-1" class="toggle-menu"/>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</label>
<input type="checkbox" id="toggle-1">
<nav>
<ul>
<li><a href="#logo"><i class="fa fa-home"></i>Home</a></li>
<li><a href="#about"><i class="fa fa-sitemap"></i>Networking</a></li>
<li><a href="#portfolio"><i class="fa fa-gavel"></i>Hardware</a></li>
<li><a href="#services"><i class="fa fa-gears"></i>Services</a></li>
<li><a href="#gallery"><i class="fa fa-picture-o"></i>Gallery</a></li>
<li><a href="#contact"><i class="fa fa-phone"></i>Contact</a></li>
</ul>
</nav>
</div>
</div><!-- CSS -->
<style type='text/css'>
#menunav *{text-decoration:none;list-style:none;margin:0;padding:0;outline:none}
#menunav .section{width:100%;max-width:1200px;margin:0 auto;display:table;position:relative}
#menunav{width:100%;display:table;background-color:#fde428;margin-bottom:50px}
#menunav #logo{float:left;font-size:24px;text-transform:uppercase;color:#002e5b;font-weight:600;padding:20px 0}
#menunav nav{width:auto;float:right}
#menunav nav ul{display:table;float:right}
#menunav nav ul li{float:left}
#menunav nav ul li:last-child{padding-right:0}
#menunav nav ul li a{color:#002e5b;font-size:18px;padding:25px 20px;display:inline-block;transition:all 0.5s ease 0s}
#menunav nav ul li a:hover{background-color:#002e5b;color:#fde428;transition:all 0.5s ease 0s}
#menunav nav ul li a:hover i{color:#fde428;transition:all 0.5s ease 0s}
#menunav nav ul li a i{padding-right:10px;color:#002e5b;transition:all 0.5s ease 0s}
#menunav .toggle-menu ul{display:table;width:25px}
#menunav .toggle-menu ul li{width:100%;height:3px;background-color:#002e5b;margin-bottom:4px}
#menunav .toggle-menu ul li:last-child{margin-bottom:0}
#menunav input[type=checkbox],label{display:none}
@media only screen and (max-width:1440px){#menunav .section{max-width:95%}}
@media only screen and (max-width:980px){#menunav{padding:20px 0}#menunav #logo{padding:0}#menunav input[type=checkbox]{position:absolute;top:-9999px;left:-9999px;background:none}#menunav input[type=checkbox]:fous{background:none}#menunav label{float:right;padding:8px 0;display:inline-block;cursor:pointer}#menunav input[type=checkbox]:checked ~ nav{display:block}#menunav nav{display:none;position:absolute;right:0;top:53px;background-color:#002e5b;padding:0;z-index:99}#menunav nav ul{width:auto}#menunav nav ul li{float:none;padding:0;width:100%;display:table}#menunav nav ul li a{color:#FFF;font-size:15px;padding:10px 20px;display:block;border-bottom:1px solid rgba(225,225,225,0.1)}#menunav nav ul li a i{color:#fde428;padding-right:13px}}
@media only screen and (max-width:480px){#menunav .section{max-width:90%}}
@media only screen and (max-width:360px){#menunav label{padding:5px 0}#menunav #logo{font-size:20px}#menunav nav{top:47px}}
</style>
<!-- HTML -->
<div id="menunav">
<div class="section">
<a href="http://www.komputerdia.com/" id="logo" target="_blank">Logo Kalian</a>
<label for="toggle-1" class="toggle-menu"/>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</label>
<input type="checkbox" id="toggle-1">
<nav>
<ul>
<li><a href="#logo"><i class="fa fa-home"></i>Home</a></li>
<li><a href="#about"><i class="fa fa-sitemap"></i>Networking</a></li>
<li><a href="#portfolio"><i class="fa fa-gavel"></i>Hardware</a></li>
<li><a href="#services"><i class="fa fa-gears"></i>Services</a></li>
<li><a href="#gallery"><i class="fa fa-picture-o"></i>Gallery</a></li>
<li><a href="#contact"><i class="fa fa-phone"></i>Contact</a></li>
</ul>
</nav>
</div>
</div>
Demikianlah artikel kali tentang cara membuat menu bar responsive keren semoga bermafaat dan semoga sukses. Baca Juga Cara Membuat menu Navigasi Keren Dengan Kode CSS Mudah.
Sumber: Mastamvan.blogspot.co.id
Silahkan tinggalkan pesan jika Anda punya saran, kritik, atau pertanyaan seputar topik pembahasan.
Catatan :
Komentar ini menggunakan moderasi, setiap komentar yang masuk akan diperiksa terlebih dahulu sebelum ditampilkan. Hanya komentar yang berkualitas dan relevan dengan topik di atas yang akan ditampilkan. Harap gunakan sebaik-baiknya dan sebijak mungkin form ini. Terima kasih untuk kerja samanya.