CARA MEMBUAT MENU NAVIGASI CONTEMPO HYBRID INFINITE STYLE

Perhatikan baik baik Menu Navigasi infinite diatas beberapa saat saja

Theme yang sedang kami kemukakan disini tidak lain adalah varian dari CONTEMPO HYBRID STANDARD adapun template Contempo Hybrid ini sebenarnya kami buat dalam empat varian:

1. Contempo Hybrid original
2. Contempo Hybrid Standard
3. Contempo Hybrid Gradient
4. Contempo Hybrid Infinite Style

Nah yang sedang kita bicarakan saat ini adalah varian ke-4 yakni Contempo Hybrid Infinite Style. Keempat Varian di bangun menggunakan material dan elemen yang sama. Boleh dikatakan yang membedakannya hanyalah pada material warna dan style menu navigasinya.

Navigasi ini memiliki kelebihan:

1. Indah pada tampilan laptop dan tampilan layar mobile atau ponsel
2. Pada laptop/PC tampilan inline dengan menu pencarian di ujung menubar, pada tampilan mobile menu akan berubah otomatis menjadi tampilan menu hamburger.
3. Dibuat berdasarkan material dan elemen yang standard dan mudah di mengerti sekalipun sobat memiliki pengetahuan minim perihal koding.
4. Stabil dan telah di uji validitasnya.
5. Dapat diterapkan pada template contempo bawaan (non-hybrid)
6. Kami akui masih dibutuhkan trik khusus agar style navigasi tidak mengorbankan kecepatan loading blog.

CARA MEMBUAT NAVIGASI BERGAYA INFINITE

Kami hanya ingin mengungkapkan cara membuat menu navigasi dengan style infinite ini:

1. Masuk kepengaturan blogger>>Pilih Tema>>Masuk ke opsi edit HTML

Cari kode </head> atau kalau sobat sudah memodifikasinya demi kecepatan loading biasanya menjadi: &lt;/head&gt;&lt;!--<head/>--&gt;

Setelah ketemu letakan kode dibawah ini tepat diatasnya:

<style>
#menutop{width:100%;margin:0 auto;height:65px;background: linear-gradient(-50deg, #6495ED, #ea3a7e, #6495ED, #23e0b3);background-size: 400% 400%;-webkit-animation: Gradient 15s ease infinite;-moz-animation: Gradient 15s ease infinite;animation: Gradient 10s ease infinite;} @-webkit-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@-moz-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}
;;border-bottom:1px solid #F0F8FF;}
#menutop ul,#menutop li{margin:0;padding:0;list-style:none;}
#menutop ul{height:38px}
#menutop li{float:left;display:inline;position:relative;font-family:&#39;trebuchet MS&#39;;font-size:16px;
font-weight:bold;}
#menutop a{display:block;line-height:40px;padding:0 14px;text-decoration:none;color:#F5F5F5;}
#menutop ul li:hover a{color:#666;}
#menutop input{display:none;margin:0 0;padding:0 0;width:100%;height:40px;opacity:0;cursor:pointer}
#menutop label{font-family:&#39;trebuchet MS&#39;;font-size:30px;font-weight:400;display:none;width:35px;height:40px;line-height:45px;text-align:center;}
#menutop label span{font-size:13px;position:absolute;left:35px}
#menutop ul li ul{height:auto;overflow:hidden;position:absolute;z-index:99;color:#919392}
#menutop ul li ul li a{color:#919392;height:40px;line-height:40px;background:#fff;width:100%;}
#menutop ul.menux{visibility:hidden;opacity:0;height:auto;overflow:hidden;background:#fff;position:absolute;z-index:99;color:#919392;box-shadow: 0px 2px 3px rgba(0,0,0,0.1);top:10px;transition:all 0.3s ease-in-out;}
#menutop li:hover &gt; ul.menux{visibility:visible;opacity:1;top:45px;}
#menutop a.dutt{padding:0 27px 0 14px}
#menutop a.dutt::after{content:&quot;\f0d7&quot;;font-family:FontAwesome;margin:0 auto;width:10px;height:10px;line-height:45px;position:absolute;top:0;right:10px;}
#menutop a.dutt:hover::after,#menutop ul li:hover a.dutt::after{content:&quot;\f0d7&quot;;font-family:FontAwesome;margin:0 auto;width:10px;height:10px;line-height:45px;position:absolute;top:0;right:10px;}
#menutop ul.menux li a{background:#fff;color:#919392;}
#menutop ul li ul li a:hover{background:#fcfcfc;color:#8493a0;}
#menutop li.facebook {padding:0 5px;}
@media screen and (max-width:960px) {
#menutop li:hover &gt; ul.menux{display:block;}
#menutop ul{border:none;border-bottom:4px solid #e9e9e9;}
#menutop{position:relative;border:none;border-bottom:4px solid #e9e9e9;}
#menutop ul{background:#5093C4;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none;}
#menutop ul.menux{width:100%;position:static;border:none}
#menutop li{display:block;float:none;width:auto;text-align:left}
#menutop li a{color:#fff}
#menutop li a:hover{background:#f1f1f1;color:#f9f9f9}
#menutop li:hover{background:#8493a0;color:#fff;}
#menutop a.dutt{font-weight: bold;}
#menutop li:hover &gt; a.dutt,#menutop a.dutt:hover{background:#b1b1b1;color:#fff;}
#menutop input,#menutop label{display:inline-block;position:absolute;right:0;top:0;}
#menutop input:after,#menutop label:after {content:&quot;\f0c9&quot;;font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:none;font-size:30px;color:#666;
display:inline-block;position:absolute;right:15px;top:25%;line-height:30px;}
#menutop input{z-index:4;}
#menutop input:checked + label{color:#666;font-weight:700}
#menutop input:checked ~ ul{display:block}
#menutop ul li ul li a{width:100%;color:#666;}
#menutop ul li ul li a:hover{background:#8493a0;color:#666;}
#menutop ul.menux a{background:#fff;color:#666;}
#menutop ul.menux a:hover{background:#8493a0;color:#666;}
#menutop ul.menux li{background:#fff;color:#666;}
#menutop ul.menux li:hover{background:#8493a0;color:#fff;}
#menutop ul.menux li a{background:#fff;color:#666;}
#menutop ul.menux li a:hover{background:#f1f1f1;color:#8493a0;}
</style>

 

Perhatikan kode warna yang saya sorot merah jambu, sobat bisa menggantinya dengan kode warna HEX yang berbeda beda (jangan sama agar animasi warna berubah rubah) yang dapat di copy paste dari internet untuk menghasilkan kombinasi warna gradasi yang sesuai dengan selera. Sobat juga dapat merobah kecepatan animasi dengan mengganti angka yang saya sorot warna hijau terang pada kode diatas, misalnya dari 15s menjadi 10s agar lebih cepat.

Sedangkan untuk mengatur tinggi Menu Bar infinite sobat perhatikan angka yang saya sorot warna kuning terang (65px) sobat bisa menggantinya menjadi 70px dst.

2. Langkah berikutnya cari kode </header> jika sudah ketemu copy kode HTML dibawah ini dan pastekan diatasnya:

<nav id='menutop'><input type='checkbox'/>
<label/>
<ul>
<li><a href='your-link'>About</a></li>
<li><a href='your-link'>Contact</a></li>
<li><a href='your-link'>Sitemap</a></li>
<li class='sorting-01 facebook'><a href='your-link'><i class='fa fa-facebook fa-lg'/><span class='inv'/></a></li>
<li class='sorting-02 twitter'><a href='your-link'><i class='fa fa-twitter fa-lg'/><span class='inv'/></a></li>
<li class='sorting-03 googleplus'><a href='your-link'><i class='fa fa-google-plus fa-lg'/><span class='inv'/></a></li>
<li class='sorting-06 rss-square'><a href='your-link'><i class='fa fa-rss-square fa-lg'/><span class='inv'/></a></li>
<li class='sorting-04 youtube'><a href='your-link'><i class='fa fa-youtube fa-lg'/><span class='inv'/></a></li>
</ul>
</nav>
  

3. Langkah ke selanjutnya untuk memperbaiki lay out ContempoHybrid akibat pemasangan kode diatas adalah sbb: copy kode berikut dibawah ini:

body#layout .outer-wrapper {width:970px}
body#layout .content-wrapper {width:970px}
body#layout #header {width:450px;float:left;margin-top:30px}
body#layout #header2 {width:450px;float:right}
body#layout .main-wrapper {width:750px}
body#layout .sidebar-wrapper,.sidebar1-wrapper {width:330px;float:right}
body#layout #footer {width:800px}
.footer {width:215px;float:left}
body#layout ul {display: none}

Lalu cari kode <b:skin><![CDATA[ pada Contempo Hybrid letaknya persis dibawah kode ]]></b:skin> jika sobat bertemu dengan dua kurung siku sperti ini: >...< dengan tiga buah titik ditengahnya, double klik saja tepat pada titik tersebut sampai kode [CDATA[ muncul, dan pastekan kode diatas tepat dibawahnya.
Kode yang saya modifikasi diatas dapat menghilangkan error dan memvalidasi tampilan tema contempo hybrid secara keseluruhan.

Silahkan mengganti tanda pagar ('#') dengan link menu navigasi sobat sendiri dan menghapus link yang disorot warna kuning dan menggantikannya dengan link sobat sendiri.
Save Template, perhatikan Menu pada tema ContempoHybrid yang memakai menu Navigasi ini.

LIHAT DEMO

Sebagai catatan kami sangat memperhatikan tampilan dan kegunaan seluler pada template buatan kami, dan semua project terkait pembuatan tema ini selalu kami pastikan telah di validasi:

Demikianlah triknya jika sobat menginginkan bar menu navigasi berubah menjadi warna warni animasi INFINITE seperti layaknya buatan Arlina dan diterapkan ke template contempo, elemennya telah kami siapkan semuanya dibuat dengan material warna yang bervariasi bagai pelangi.