Membuat Top Menu Navigasi Responsive Untuk Blogspot Ala Arlina Design

Membuat Top Menu Navigasi Responsive Untuk Blogspot Ala Arlina Design
Membuat top menu navigasi untuk blog bagi saya adalah hal yang rumit, karena saya sendiri tidak menguasai coding HTML maupun CSS. namun kali ini saya belajar mengambil kode menu navigasi dari template-nya Arlina Design yang terlihat cukup enak dilihat.
Hal ini saya lakukan hanya sebatas sarana belajar saja, dengan mengumpulkan Elemen CSS-nya, HTML-nya serta yang lain.
Hasil dari oprek kali ini sudah saya terapkan di blog ini, hasilnya berjalan.. namun masih ada sayang-nya.. bila diakses dari mobile, menu PULL untuk melihat isi menu navigasinya tidak bisa terbuka, entah letak kesalahannya ada dibagian mana, saya sendiri masih bingung mencari-cari.

Tapi bagi yang ingin mencoba menerapkan elemen ini ke template yang kamu miliki. maka syah-syah saja untuk dicoba.
hitung-hitung mungkin ada dari salah satu kalian yang ngerti untuk memperbaiki kekurangannya.
Elemen-elemen-nya ada dibawah ini :

1. Kode CSS
Kode CSS dibawah ini ditaruh diatas tag ]]</b:skin> dibawah ini kode CSS-nya:

/* CSS Outer Wrapper */
body#layout #outer-wrapper, body#layout .post-inner, body#layout .sidebar, body#layout .sidebar-two {padding:0 0 0 0;}
#outer-wrapper{background:#fefefe;max-width:970px;margin:0 auto;padding:0 20px;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,0.05);}
/* CSS Top Menu Wrapper */
.arlinatop-wrapper{width:100%;max-width:930px;background:rgba(255,255,255,.99);z-index:99;position:fixed;overflow:hidden;margin:auto;border-bottom:1px solid #ddd;-webkit-transform:translateZ(0);transform:translateZ(0)}
.adtop-wrapper {padding:0;position:static;max-width:970px;margin:0 auto;}
.header-wrapper2 {margin:0 auto;padding:0}
.top-menunavi {display:block;margin:0 auto;float:left;padding:0;width:100%;background:transparent;border:none;}
.top-menunavi ul {width:100%;padding:0;margin:0;text-align:left;}
.top-menunavi li {display:block;list-style-type:none;float:left;padding:0;margin:0;}
.top-menunavi li a{position:relative;font-weight:400;background-color:transparent;color:#333;display:inline-block;margin:0;padding:20px 15px;transition:color .3s}
.top-menunavi ul li a:active, .top-menunavi ul li.highlight a {line-height:100%;}
.top-menunavi ul li a:hover {color:#888;}
.top-menunavi a#pull {display:none;}
.top-menunavi li.nomore,.top-menunavi li.nomore2{text-align:center;color:#333;float:right;}
.top-menunavi li.nomore:hover,.top-menunavi li.nomore2:hover{color:#888;}
.top-menunavi li i{font-weight:normal;color:#333;transition:color .3s;}
.top-menunavi ul li:hover i{color:#888;}
.top-menunavi li.nomore2{position:relative;transition:all .3s;}
li.nomore2:after{position:absolute;content:'1';right:3px;top:10px;background:#4db2ec;color:#fff;padding:0;width:15px;height:15px;line-height:15px;border:2px solid #fff;border-radius:4px;font-size:75%;transform:scale(1.0);transition:all .3s ease}
.top-menunavi ul li.nomore2:hover:after{transform:scale(0.9)}
.top-menunavi li.infoarlina{border:0;}
.top-menunavi li.infoarlina a{background:rgba(0,0,0,0.01);color:#1176c3;display:block;margin:16px 0;padding:3px 8px;border-radius:3px;font-size:94%;transition:all .3s ease;box-shadow:inset 0 0 0 1px #138be6;font-weight:400}
.top-menunavi li.infoarlina a:hover{background:#138be6;color:#fff;}
.header-wrapper2 {position:relative;z-index:999;}
.adtop-wrapper {padding:0 20px;position:relative;max-width:970px;margin:0 auto;}
.header-wrapper2,.adtop-wrapper {padding:0}
.arlinatop-wrapper {position:relative;overflow:hidden;margin:0;z-index:1;}
@media screen and (max-width:1066px) {
#outer-wrapper {margin:0 auto;}
.header-right {float:right;padding:0;overflow:hidden;margin:0;}
.header-right img {display:block;}}
@media screen and (max-width:960px) {
#outer-wrapper {margin:0 auto;border:none;box-shadow:none;}
header-wrapper2,.adtop-wrapper {padding:0}
@media only screen and (max-width:768px){
.arlinatop-wrapper {margin:20px auto 0 auto;border:0;}
.adtop-wrapper {margin:0;}
.top-menunavi{background:#3cc091;position:relative;display:block;padding:0;float:none;width:auto;}
.top-menunavi ul {text-align:center;}
.top-menunavi ul,.nav li ul:before{display:none;height:auto;overflow:hidden;border-bottom:1px solid rgba(0,0,0,0.1)}
.top-menunavi a#pull{color:#fff;display:inline-block;padding:12px;margin:0;border-right:1px solid rgba(0,0,0,0.1);position:relative}
.top-menunavi a#pull:before{content:'\f03a';font-family:FontAwesome;font-style:normal;font-weight:400;display:inline-block;margin:0 5px 0 0}
.top-menunavi li {display:block;width:100%;text-align:left;border-right:none;}
.top-menunavi li a{background:#f5f5f5;color:#222;padding:10px 20px;display:block}
.top-menunavi li a:hover, nav a:active {background:#f0f0f0;border:none;color:#222;}
.top-menunavi ul li a:hover {background:#f0f0f0;color:#333;}
.top-menunavi li.nomore,.top-menunavi li.nomore2{display:none}
.top-menunavi li.infoarlina {display:none;}}
@media only screen and (max-width:480px){
.arlinatop-wrapper{margin:10px auto 0 auto}
#outer-wrapper{margin:0 auto;padding:0 10px}

2. Kode HTML
Taruh kode HTML dibawah ini setelah kode <div class='outer-wrapper'> atau diatas kode <div class='header-wrapper'>, atau sesuaikan saja dengan template masing-masing.

<div id='outer-wrapper'>
<div class='arlinatop-wrapper'>
<header class='header-wrapper2'>
<div class='adtop-wrapper'>
<nav class='top-menunavi'>
<ul>
<li class='infoarlina'><a class='popup-link' href='#popup'>Info</a></li>
<li><a href='#' title='About Us'>About</a></li>
<li><a href='#' title='Disclaimer'>Disclaimer</a></li>
<li><a href='#' title='Privacy policy'>Privacy</a></li>
<li><a href='#' title='Pasang Iklan'>Iklan</a></li>
<li><a href='#' title='Terms of Service'>TOS</a></li>
<li class='nomore2'>
<a href='#' target='_blank' title='Pesan template N Light'><i class='fa fa-bell'></i><span class='inv'></span></a>
</li>
<li class='nomore'>
<a href='#' target='_blank' title='Member'><i class='fa fa-user'></i><span class='inv'></span></a>
</li>
<li class='nomore'>
<a href='https://www.blogger.com/follow-blog.g?blogID=xxxxxxxxxx' rel='nofollow' target='_blank' title='Join this site'><i class='fa fa-sign-in'></i><span class='inv'></span></a>
</li>
<li class='nomore'>
<a href='#' target='_blank' title='Off Topic'><i class='fa fa-coffee'></i><span class='inv'></span></a>
</li>
<li class='nomore'>
<a href='#' target='_blank' title='Contact us'><i class='fa fa-envelope-o'></i><span class='inv'></span></a>
</li>
<li class='nomore'>
<a href='#' target='_blank' title='Our Sitemap'><i class='fa fa-list-alt'></i><span class='inv'></span></a>
</li>
</ul>
<a href='#' id='pull'>MENU</a>
</nav>
</div>
</header>
</div>
</div>

3. Javascript (Belum Berfungsi, tidak dipasang juga tidak apa-apa)
Kode javascript dibawah ini adalah kode yang bertujuan untuk membuka menu top navigasi ketika dalam kondisi dibuka oleh mobile phone, karena bila diakses oleh mobile phone, tampilan navigasi-nya akan ikut mengecil menyesuaikan layar, tapi sayang... dengan memasang script ini, fungsi untuk membuka menu navigasi tersebut masih belum bisa terbuka. posisi pemasangannya seperti pada umumnya, dipasang diatas tag </body>. tapi ingat, pemasangan script ini tidak menghasilkan efek sama sekali. saya sendiri masih mencari letak kesalahan-nya.

<script type='text/javascript'>
//<![CDATA[
// Menu Top
$(document).ready(function(){var str=location.href.toLowerCase();$('.top-menunavi ul li a').each(function(){if(str.indexOf(this.href.toLowerCase())>-1){$("li.highlight").removeClass("highlight");$(this).parent().addClass("highlight")}})})
$(function(){var pull=$('#pull');menu=$('.top-menunavi ul');menuHeight=menu.height();$(pull).on('click',function(e){e.preventDefault();menu.slideToggle()});$(window).resize(function(){var w=$(window).width();if(w>320&amp;&amp;menu.is(':hidden')){menu.removeAttr('style')}})});
//]]>
</script>

Setelah komplit melakukan langkah-langkah diatas, jangan lupa save. dan lihat hasilnya.. kalian akan mempunyai blog yang mempunyai top menu navigasi ala template yang dipakai oleh Arlina Design.

Membuat Top Menu Navigasi Responsive Untuk Blogspot Ala Arlina Design
Contoh Top Menu Navigasinya
Oh ya... pada pembuatan top menu ini tidak akan membuatnya menjadi sticky ketika kita men-scroll halaman sampai kebawah, nanti jika ada waktu akan saya perbaiki lagi dan saya update disini.

0 comments