Bagi kalian yang tidak mau ribet dalam melaksanakan pembuatan sajian navigasi pada blog, dalam artikel ini aku akan memperlihatkan cara yang gampang untuk menciptakan sajian navigasi di blog tanpa harus mengedit html.
ikuti trik berikut :
- masuk dasbor blogger.
- pilih TATA LETAK.
- lalu tambahkan Gadget di bab Navigation-box.
- pilih HTML/JAVASCRIPT
- judul biarkan kosong
- isi kotak konten dengan instruksi di bawah ini.
silahkan dipilih.....
1.Blue Drop Down Responsive
<style>
#materialmenu *{margin:0;padding:0;box-sizing:border-box}
#materialmenu{width:100%;height:50px;background-color:#3498DB;box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23)}
#materialmenu a{text-decoration:none}
#materialmenu > nav#menunav > div{float:left;width:16.6666%;height:100%;position:relative}
#materialmenu > nav#menunav > div > a{text-align:center;width:100%;height:100%;display:block;line-height:50px;color:#fbfbfb;transition:background-color 0.2s ease;text-transform:uppercase}
#materialmenu > nav#menunav > div:hover > a{background-color:rgba(0,0,0,0.1);cursor:pointer}
#materialmenu > nav#menunav > div > div{display:none;overflow:hidden;background-color:white;min-width:200%;position:absolute;box-shadow:0 10px 20px rgba(0,0,0,0.19),0 6px 6px rgba(0,0,0,0.23);padding:10px}
#materialmenu > nav#menunav > div:not(:first-of-type):not(:last-of-type) > div{left:-50%;border-radius:0 0 3px 3px}
#materialmenu > nav#menunav > div:first-of-type > div{left:0;border-radius:0 0 3px 0}
#materialmenu > nav#menunav > div:last-of-type > div{right:0;border-radius:0 0 0 3px}
#materialmenu > nav#menunav > div:hover > div{display:block}
#materialmenu > nav#menunav > div > div > a{display:block;float:left;padding:8px 10px;width:46%;margin:2%;text-align:center;background-color:#3498DB;color:#fbfbfb;border-radius:2px;transition:background-color 0.2s ease}
#materialmenu > nav#menunav > div > div > a:hover{background-color:#212121;cursor:pointer}
h1{margin-top:150px;font-weight:300}
@media (max-width:600px){#materialmenu > nav#menunav > div > div > a{margin:5px 0;width:100%}#materialmenu > nav#menunav > div > a > span{display:none}}
p{
width:100%;
display:block;
text-align:center;
font-size:200%
}
</style>
<div id="materialmenu">
<nav id="menunav">
<div> <a href="#"><span>Menu </span>1</a>
<div> <a href="#">Submenu 1</a> <a href="#">Submenu 2</a> <a href="#">Submenu 3</a> <a href="#">Submenu 4</a> <a href="#">Submenu 5</a> <a href="#">Submenu 6</a> </div>
</div>
<div> <a href="#"><span>Menu </span>2</a>
<div> <a href="#">Submenu 1</a> <a href="#">Submenu 2</a> <a href="#">Submenu 3</a> <a href="#">Submenu 4</a> <a href="#">Submenu 5</a> <a href="#">Submenu 6</a> </div>
</div>
<div> <a href="#"><span>Menu </span>3</a>
<div> <a href="#">Submenu 1</a> <a href="#">Submenu 2</a> <a href="#">Submenu 3</a> <a href="#">Submenu 4</a> <a href="#">Submenu 5</a> <a href="#">Submenu 6</a> </div>
</div>
<div> <a href="#"><span>Menu </span>4</a>
<div> <a href="#">Submenu 1</a> <a href="#">Submenu 2</a> <a href="#">Submenu 3</a> <a href="#">Submenu 4</a> <a href="#">Submenu 5</a> <a href="#">Submenu 6</a> </div>
</div>
<div> <a href="#"><span>Menu </span>5</a>
<div> <a href="#">Submenu 1</a> <a href="#">Submenu 2</a> <a href="#">Submenu 3</a> <a href="#">Submenu 4</a> <a href="#">Submenu 5</a> <a href="#">Submenu 6</a> </div>
</div>
<div> <a href="#"><span>Menu </span>6</a>
<div> <a href="#">Submenu 1</a> <a href="#">Submenu 2</a> <a href="#">Submenu 3</a> <a href="#">Submenu 4</a> <a href="#">Submenu 5</a> <a href="#">Submenu 6</a> </div>
</div>
</nav>
</div>
________________________________________________________
2.Yellow Drop Down Menu Responsive
<!-- 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="#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>
_____________________________________________
3.Black Drop Down responsive
<style>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
font-family: 'Open Sans', sans-serif;
margin: 0;
padding: 0;
position: relative;
line-height: normal;
}
.nav-bar {
background: #000;
width: 100%;
}
.nav-bar__label {
color: #fff;
display: block;
padding: 10px 0;
text-align: center;
text-transform: uppercase;
width: inherit;
}
.nav-bar__label::after,
.nav-bar__sub-label::after {
content: " +";
}
.nav-bar__label,
.nav-bar__sub-label {
cursor: pointer;
}
.nav-bar__list {
background: #000;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.nav-bar__list,
[id^="toggle"] {
display: none;
}
[id^="toggle"]:checked + .nav-bar__list {
display: block;
}
.menu_navigation {
display: block;
}
.nav-bar__link,
.nav-bar__sub-label {
color: #fff;
display: block;
padding: 10px 20px;
text-decoration: none;
word-wrap: break-word;
}
.menu_navigation .menu_navigation .nav-bar__link,
.menu_navigation .menu_navigation .nav-bar__sub-label {
padding: 10px 10px 10px 30px;
}
.nav-bar__link:hover,
.nav-bar__link:active,
.nav-bar__sub-label:hover {
background: #666;
}
@media all and (min-width : 992px) {
.nav-bar > .nav-bar__label {
display: none;
}
.nav-bar > .nav-bar__list {
display: block;
}
.nav-bar > .nav-bar__list > .menu_navigation {
display: inline-block;
position: relative;
}
.menu_navigation .nav-bar__list {
position: absolute;
}
.menu_navigation .menu_navigation .nav-bar__link,
.menu_navigation .menu_navigation .nav-bar__sub-label {
padding: 10px 20px;
}
}
p{
width:100%;
display:block;
text-align:center;
font-size:200%
}
</style>
<nav class="nav-bar">
<label for="toggle" class="nav-bar__label"><b>Menu Keren Komputerdia</b></label>
<input type="checkbox" id="toggle" class="nav-bar__toggle"/>
<ul class="nav-bar__list">
<li class="menu_navigation">
<a href="ACIKNADZIRAH.BLOGSPOT.COM/search?q=cara-membuat-menu-bar-keren-dan-responsive-di-blog" class="nav-bar__link">Menu Item 1</a>
</li>
<li class="menu_navigation">
<a href="#" class="nav-bar__link">Menu Item 2</a>
</li>
<li class="menu_navigation">
<a href="#" class="nav-bar__link">Menu Item 3</a>
</li>
<li class="menu_navigation">
<label for="toggle-sub-1" class="nav-bar__sub-label">Sub Menu</label>
<input type="checkbox" id="toggle-sub-1" class="nav-bar__toggle"/>
<ul class="nav-bar__list">
<li class="menu_navigation">
<a href="#" class="nav-bar__link">Sub Menu 1</a>
</li>
<li class="menu_navigation">
<a href="#" class="nav-bar__link">Sub Menu 2</a>
</li>
<li class="menu_navigation">
<a href="#" class="nav-bar__link">Sub Menu 3</a>
</li>
</ul>
</li>
<li class="menu_navigation">
<a href="#" class="nav-bar__link">Menu Item 4</a>
</li>
</ul>
</nav>
<br><br><br><br><br><br><br><br><br><br>
<p><a href="http://hellwin6661.blogspot.com" target='_blank'>HOME</a></p>
__________________________________________________
4.Simple Grey Navbar Responsive
<style>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
font-family: 'Open Sans', sans-serif;
margin: 0;
padding: 0;
position: relative;
line-height: normal;
}
nav#menunav {
margin: 0 auto;
max-width: 700px;
width: 95%;
}
nav#menunav #checkbox1,
nav#menunav .toggle {
display: none;
}
nav#menunav .menu {
padding: 0;
margin: 0;
max-width: 700px;
height: 50px;
border-radius: 5px;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
list-style-type: none;
}
nav#menunav .menu li a {
text-decoration: none;
align-self: center;
border-radius: 5px;
font-size: 14px;
padding: 10px 15px;
transition: background .2s linear;
}
@media screen and (max-width: 600px) {
nav#menunav .menu li a {
font-size: 13px;
}
}
@media screen and (max-width: 550px) {
nav#menunav .toggle {
clear: both;
display: block;
text-align: center;
font-size: 14px;
line-height: 40px;
cursor: pointer;
width: 100%;
height: 40px;
font-size: 18px;
color: #595959;
background: #dbdbdb;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
transition: all .1s linear;
}
nav#menunav .toggle:hover {
background: #cecece;
}
nav#menunav #checkbox1:checked + label .demo li {
opacity: 1;
visibility: visible;
transition: all .7s linear;
}
nav#menunav #checkbox1:checked + label .demo {
height: 200px;
}
nav#menunav .menu {
border-radius: 0px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
height: 0px;
transition: height .3s linear;
}
nav#menunav .menu li {
display: flex;
/* magic */
align-self: center;
width: 95%;
opacity: 0;
visibility: hidden;
}
nav#menunav .menu li a {
width: 95%;
text-align: center;
align-self: center;
align-content: center;
}
}
nav#menunav .demo {
background: #625b60;
}
nav#menunav .demo li a {
color: #fff;
}
nav#menunav .demo li a:hover {
background: #6d6268;
}
p{
width:100%;
display:block;
text-align:center;
font-size:200%
}
</style>
<nav id="menunav">
<input type="checkbox" id="checkbox1" />
<label for="checkbox1">
<ul class="menu demo">
<li><a href="#"><b>HOME</b></a></li>
<li><a href="#"><b>NETWORK</b></a></li>
<li><a href="#"><b>HARDWARE</b></a></li>
<li><a href="#"><b>SOFTWARE</b></a></li>
</ul>
<span class="toggle">☰</span>
</label>
</nav>
1.Silahkan di modifikasi sendiri.
2. # : link tujuan.
3. warna hijau yaitu nama sajian yang akan di buat.
Sumber http://tiksatuweru.blogspot.com
Mari berteman dengan saya
Follow my Instagram _yudha58
0 Response to "√ Cara Menciptakan Navigasi Blog Responsive Keren Tanpa Edit Html"
Posting Komentar