√ Cara Menciptakan Navigasi Blog Responsive Keren Tanpa Edit Html

Konten [Tampil]

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

LIHAT HASIL

________________________________________________________

2.Yellow Drop Down Menu Responsive

#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>

<a href="http://www.komputerdia.com/" id="logo" target="_blank">Logo Kalian</a>

<ul>

</ul>

</label>

<nav>

<ul>

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

LIHAT HASIL

_____________________________________________

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;

}

width:100%;

display:block;

text-align:center;

font-size:200%

}

</style>

<label for="toggle" class="nav-bar__label"><b>Menu Keren Komputerdia</b></label>

</li>

</li>

</li>

</li>

</li>

</li>

</ul>

</li>

</li>

</ul>

</nav>

LIHAT HASIL

__________________________________________________

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;

}

width:100%;

display:block;

text-align:center;

font-size:200%

}

</style>

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

</label>

</nav>

LIHAT HASIL

1.Silahkan di modifikasi sendiri.
2. # : link tujuan.
3. warna hijau yaitu nama sajian yang akan di buat.

Sumber http://tiksatuweru.blogspot.com

berbagi jawaban 5

√ Cara Menciptakan Navigasi Blog Responsive Keren Tanpa Edit Html

Menu Halaman Statis