Membuat Navigasi Responsive keren untuk Blog

Cara Membuat Navigasi Responsive keren untuk Blog - untuk seorang blogger tentunya ingin blognya memiliki tampilan yang bagus dan menarik ataupun unik. Tentu saja saya juga ingin blog saya mempunyai sebuah tampilan yang menarik yang dapat memanjakan mata penguunjungnya hehehe

Gausah banyak basa - basi nya langsung simak langkah - langkahnya dibawah ini :

1. Tentuya kalian haruss Login ke www.blogger.com

2. Masuk ke menu Tema/Template -> Edit tema -> Cari kode </head> dengan CTRL+F

3. Lalu masukan kode CSS dibawah ini di atas tag head

/*--------------------------------------------------------------
5.0 Navigation
--------------------------------------------------------------*/
/*--------------------------------------------------------------
5.1 Links
--------------------------------------------------------------*/
a {
 color: #404040;
 text-decoration: none;
 -o-transition: all .7s ease-in-out;
 -moz-transition: all .7s ease-in-out;
 -webkit-transition: all .7s ease-in-out;
 transition: all .7s ease-in-out;
}

a:hover,
a:focus,
a:active {
 color: #2d72ff;
 -o-transition: all 0s ease-in-out;
 -moz-transition: all 0s ease-in-out;
 -webkit-transition: all 0s ease-in-out;
 transition: all 0s ease-in-out;
}

/*--------------------------------------------------------------
5.2 Menus
--------------------------------------------------------------*/
.main-navigationpbt {
 clear: both;
 display: block;
 float: left;
 width: 100%;
 background: #2d72ff;
 margin-bottom: 1em;
}

.main-navigationpbt ul {
 list-style: none;
 margin: 0;
 padding-left: 0;
}

.main-navigationpbt li {
 float: left;
 position: relative;
}

.main-navigationpbt li:last-child {
 border-right: 0;
}

.main-navigationpbt ul li .indicator {
 position: absolute;
 right: 7px;
 top: 28px;
 font-family: 'FontAwesome';
 font-size: 12px;
 line-height: 1;
 color: #ffffff;
}
.main-navigationpbt ul ul li .indicator {
 top: 22px;
}
.main-navigationpbt ul li .indicator:before {
 content: "\f0d7";
}
.main-navigationpbt ul ul li .indicator:before {
 content: "\f0da";
}

.main-navigationpbt a {
 display: block;
 text-decoration: none;
 padding: 2em;
 color: #ffffff;
 -o-transition: all .3s ease-in-out;
 -moz-transition: all .3s ease-in-out;
 -webkit-transition: all .3s ease-in-out;
 transition: all .3s ease-in-out;
}
.main-navigationpbt a:hover {
 color: #ffffff;
}

.main-navigationpbt ul ul {
 background: #2d72ff;
 float: left;
 position: absolute;
 top: 5.5em;
 left: auto;
 z-index: 99999;
 visibility:hidden;
 opacity:0;
 transition:visibility 0s linear 0.3s,opacity 0.3s linear;
}

.main-navigationpbt ul ul ul {
 left: 100%;
 top: 0;
 visibility:hidden;
 opacity:0;
 transition:visibility 0s linear 0.3s,opacity 0.3s linear;
}

.main-navigationpbt ul ul a {
 width: 200px;
 padding: 1.5em;
}

.main-navigationpbt ul ul li {

}

.main-navigationpbt li:hover > a {
}

.main-navigationpbt ul ul :hover > a {
}

.main-navigationpbt ul ul a:hover {
}

.main-navigationpbt ul li:hover > ul {
 visibility:visible;
 opacity:1;
 transition-delay:0s;
}

.main-navigationpbt ul ul li:hover > ul {
 visibility:visible;
 opacity:1;
 transition-delay:0s;
}

.main-navigationpbt .current_page_item a,
.main-navigationpbt .current-menu-item a {
}

.main-navigationpbt ul li:hover > a, .main-navigationpbt li.current-menu-item > a, .main-navigationpbt li.current-menu-parent > a, .main-navigationpbt li.current-page-ancestor > a, .main-navigationpbt .current_page_item > a {
 background: rgba(0,0,0,.03);
}

/* Small menu */
.menu-togglepbt {
 display: none;
}

@media screen and (max-width: 768px) {
 .menu-togglepbt,
 .main-navigationpbt.toggled .nav-menu {
  display: block;
 }

.main-navigationpbt ul {
  display: none;
 }
 
 .menu-togglepbt, .main-navigationpbt.toggled .nav-menu {
  display: block;
  width: 100%;
  border-radius: 2px;
  text-align: left;
  float: left;
  padding: 1.5em;
 }
 
 .main-navigationpbt.toggled .nav-menu {
  padding: 0 1.5em 1.5em;
 }
 
 .main-navigationpbt.toggled .nav-menu ul {
  display: block;
  left: auto;
  position: relative;
  top: 0;
  border-bottom: 0px;
  padding-left: 5%;
  width: 100%;
  opacity: 1;
  visibility: visible;
 }
 
 .main-navigationpbt.toggled ul ul a {
  font-size: 100%;
  width: 100%;
 }
 
 .menu-togglepbt:hover {
  color: #ffffff;
 }
 
 .menu-togglepbt i {
  float:right;
 }
 
 .main-navigationpbt li {
  width: 100%;
 }
 
 .main-navigationpbt a {
  border-bottom: 1px solid rgba(0,0,0,.05);
  padding: 1.5em;
 }
}

</style>

4. Lalu cari kode <body> dan letakan dibawahnya

<nav class="main-navigationpbt smallpartpbt" id="site-navigationpbt" role="navigation">
<button class="menu-togglepbt">Menu<i class="fa fa-align-justify"></i></button>
<div class="menu-testing-menu-container">
<ul class="menupbt nav-menu">
<li><a href="https://info-kokoro.blogspot.com/">Home</a></li>
<li><a href="#">Info</a>
<ul class="sub-menu">
<li><a href="https://info-kokoro.blogspot.com/search/label/Ekonnomi">Ekonomi</a></li>
<li><a href="https://info-kokoro.blogspot.com/search/label/Kesehatan">Kesehatan</a></li>
<li><a href="https://info-kokoro.blogspot.com/search/label/Psikolog">Psikologi</a></li>
</ul>
<span class="indicator"></span></li>
<li><a href="#">FILM</a>
<ul class="sub-menu">
<li><a href="https://info-kokoro.blogspot.com/search/label/download%20movie">Download Film</a></li>
<li><a href="#">Info Film</a>
<ul class="sub-menu">
<li><a href="https://info-kokoro.blogspot.com/search/label/sinopsis">Sinopsis</a></li>
<li><a href="https://info-kokoro.blogspot.com/search/label/Recomended%20film">Rekomendasi</a></li>
</ul>
<span class="indicator"></span></li>
</ul>
<span class="indicator"></span></li>
<li><a href="#">Anime/Manga</a>
<ul class="sub-menu">
<li><a href="#">Season</a>
<ul class="sub-menu">
<li><a href="#">Winter 2017</a></li>
</ul>
<span class="indicator"></span></li>
<li><a href="#">Genre</a>
<ul class="sub-menu">
<li><a href="https://info-kokoro.blogspot.com/search/label/Action">Action</a></li>
<li><a href="https://info-kokoro.blogspot.com/search/label/Comedy">Comedy</a></li>
<li><a href="https://info-kokoro.blogspot.com/search/label/Idol">idol</a></li>
<li><a href="https://info-kokoro.blogspot.com/search/label/Romance">Romance</a></li>
</ul>
<span class="indicator"></span></li>
<li><a href="https://info-kokoro.blogspot.com/search/label/INFO">Info Anime</a></li>
</ul>
<span class="indicator"></span></li>
<li><a href="https://info-kokoro.blogspot.com/search/label/Tutorial">Tutorial</a></li>
<li><a href="#">Game</a>
<ul class="sub-menu">
<li><a href="https://info-kokoro.blogspot.com/search/label/PC">PC</a></li>
<li><a href="https://info-kokoro.blogspot.com/search/label/Android">Android</a></li>
</ul>
<span class="indicator"></span></li>
<li><a href="#">About</a></li>
<li><a href="https://info-kokoro.blogspot.com/p/contact-us.html">Contact</a></li>
<li><a href="https://info-kokoro.blogspot.com/p/privacy-policy.html">Privacy Policy</a></li>
<li><a href="https://info-kokoro.blogspot.com/p/blog-page.html">Sitemap</a></li>
</ul>
</div>
</nav>

Membuat Navigasi Responsive keren untuk Blog

0 Response to "Membuat Navigasi Responsive keren untuk Blog"

Post a Comment

Membuat Navigasi Responsive keren untuk Blog

Related Posts:

0 Response to "Membuat Navigasi Responsive keren untuk Blog"

Post a Comment