Iklan

Membuat Navigasi Menu Responsive Ala Contoh Blog

Navigasi merupakan point penting jikalau ingin menyebabkan blog Anda lebih bagus, maka dari itu gua membagikan tutorial membuat / modifikasi navigation menu responsive ala Contoh Blog. Seperti yang Anda ketahui, navigasi juga dapat menginformasikan tentang, label, maupun halaman / situs yang Anda taruh di navigasi tersebut.

Di setiap blog pasti mempunyi disain yang berbeda, dan ingin mempunyi ciri khas dari blog tersebut. Dengan itu disain dari navigasi pun menjadi berkembang, dan mempunyi daya tarik yang berbeda di setiap disain navigasi tersebut.

Membuat Menu Navigasi Responsive Ala Contoh Blog


Langkah pertama :

Login ke Blogger > Tema > Edit HTML. Lalu Anda cari aba-aba ]]></b:skin> atau </style>, dan pastekan aba-aba dibawah ini di atas aba-aba tersebut

/* Navigasi Menu */ #navigasimenu {width:100%;margin:0 auto;max-width:980px;background: #fff;} #menu {background:#333;color:#eee;height:40px;border-bottom:4px solid #ccc;width:100%;max-width:937px;margin:0 auto 0 20px} #menu ul,#menu li{margin:0 0;padding:0 0;list-style:none} #menu ul{height:40px} #menu li{float:left;display:inline;position:relative;font:bold 13px Arial;text-shadow: 0 -1px 0 #000;border-right: 1px solid #444;border-left: 1px solid #111;text-transform:uppercase} #menu li:first-child{border-left: none} #menu li:last-child{border-right: none} #menu a{display:block;line-height:35px;padding:0 11px;text-decoration:none;color:#eee;} #menu li:hover > a,#menu li a:hover{background:#c00} #menu input{display:none;margin:0 0;padding:0 0;width:80px;height:35px;opacity:0;cursor:pointer} #menu label{font:bold 30px Arial;display:none;width:35px;height:40px;line-height:40px;text-align:center} #menu label span{font-size:15px;position:fixed;left:60px;text-transform:uppercase} #menu ul.menus{height:auto;overflow:hidden;width:180px;background:#111;position:absolute;z-index:99;display:none;border:0;} #menu ul.menus li{display:block;width:100%;font:12px Arial;text-transform:none;} #menu li:hover ul.menus{display:block} #menu a.prett{padding:0 27px 0 14px} #menu a.prett::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:15px;right:9px} #menu ul.menus a:hover{background:#c00;}

Langkah kedua :

Silakan Anda cari aba-aba @media screen and (max-width:960px){, dan pastekan aba-aba dibawah ini di bawah aba-aba tersebut

#menu{position:relative} #menu ul{background:#111;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none} #menu ul.menus{width:100%;position:static;padding-left:20px} #menu li{display:block;float:none;width:auto} #menu input,#menu label{position:absolute;top:0;left:0;display:block} #menu input{z-index:4} #menu input:checked + label{color:white} #menu input:checked ~ ul{display:block}

Langkah ketiga :

Silakan Anda cari kembali aba-aba @media screen and (max-width:768px){, dan pastekan aba-aba dibawah ini ke bawah aba-aba tersebut

#menu {position:relative;width:92%} #menu ul{background:#111;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none} #menu ul.menus{width:100%;position:static;padding-left:20px} #menu li{display:block;float:none;width:auto} #menu input,#menu label{position:absolute;top:0;left:0;display:block} #menu input{z-index:4} #menu input:checked + label{color:white} #menu input:checked ~ ul{display:block}

Langkah ke-empat:

<div id='navigasimenu'> <nav id='menu' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'> <input type='checkbox'/> <label>&#8801;<span>Navigation</span></label> <ul> <li><a href='/'><i class='fa fa-home fa-2x fa-fw' style='padding:3px'></i></a></li> <li><a href='YOU URL HERE' itemprop='url' title='Tips SEO'><span itemprop='name'>Tips SEO</span></a></li> <li><a href='YOU URL HERE' itemprop='url' title='SEO Templates'><span itemprop='name'>Templates</span></a></li> <li><a href='YOU URL HERE' itemprop='url' title='Google Adsense'><span itemprop='name'>AdSense</span></a></li> <li><a href='YOU URL HERE' itemprop='url' title='Desain Blog'><span itemprop='name'><i class='fa fa-wrench'></i> Desain Blog</span><font size='2'> &#9660;</font></a> <ul class='menus'> <li><a href='YOU URL HERE' itemprop='url' title='Creat a Blog'><span itemprop='name'>Cara Membuat Blog</span></a></li> <li><a href='YOU URL HERE' itemprop='url' title='Ganti Template'><span itemprop='name'>Cara Ganti Template</span></a></li> <li><a href='YOU URL HERE' itemprop='url' title='HTML Color'><span itemprop='name'>Kode Warna HTML</span></a></li> <li><a href='YOU URL HERE' itemprop='url' title='Tag Kondisional'><span itemprop='name'>Tag Kondisional</span></a></li> <li><a href='YOU URL HERE' itemprop='url' title='Font Awesome'><span itemprop='name'>Font Awesome</span></a></li> <li><a href='YOU URL HERE' itemprop='url' target='_blank'><span itemprop='name'>HTML Parser</span></a></li> </ul> </li> <li><a href='YOU URL HERE' itemprop='url'><span itemprop='name'>Layanan Premium</span></a></li> <li><a href='YOU URL HERE' itemprop='url'><span itemprop='name'>Galeri Template</span></a></li> <li><a href='#' itemprop='url'><span itemprop='name'>LAINNYA</span><font size='2'> &#9660;</font></a> <ul class='menus'> <li><a href='YOU URL HERE' itemprop='url' target='_blank'><span itemprop='name'>CB Net</span></a></li> <li><a href='YOU URL HERE' itemprop='url' target='_blank' title='CB News'><span itemprop='name'>CB News</span></a></li> <li><a href='YOU URL HERE' itemprop='url' target='_blank'><span itemprop='name'>CB AMP</span></a></li> <li><a href='YOU URL HERE' itemprop='url' target='_blank' title='CB Bootstrap'><span itemprop='name'>CB Bootstrap</span></a></li> </ul> </li> </ul> </nav> <div class='clear'></div> </div>

Pemasangan navigasi pun selesai, silakan Anda Save template Anda. Dan silakan Anda lihat blog Anda, navigasi pun berubah.

Jika di template Anda sudah memiliki aba-aba navigasi, silakan Anda hapus dulu aba-aba tersebut, semoga aba-aba yang gua berikan tidak acak - acakan.

0 Response to "Membuat Navigasi Menu Responsive Ala Contoh Blog"

Posting Komentar