Bagaimana cara membuat menu navigasi responsive warna gradasi di template blogger contempo?

Keunggulan menu navigasi edisi kami adalah sebagai berikut:

1. Responsive baik untuk tampilan layar besar maupun layar kecil
2. Pada layar besar tampilan inline warna gradasi tampil cantik
3. Pada tampilan hape tombol akan tampil responsive dalam bentuk hamburger dan menampilkan warna gradasi tetap menawan.
4. Dibuat dengan material bersih kombinasi warna HEX, rgb dan ringan 
5. Didesain agar dapat sesuai dengan template Contempo
6. Dengan mudah dapat di modifikasi menjadi Menu navigasi dengan warna Infinite yang menawan.

CARA MENERAPKANNYA:

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

Cari kode </head> atau kalau Anda 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:45px;background:#0F466E;
background:-webkit-linear-gradient(right,#E6E6FA 0%,#5093C4 75%);
background:-moz-linear-gradient(right,#F0F8FF 0%,#DA70D6 75%);
background:-o-linear-gradient(right,#F0F8FF 0%,#5093C4 75%);
background:-ms-linear-gradient(right,#F0F8FF 0%,#DA70D6 75%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#5093C4&#39;,endColorstr=&#39;#0F466E&#39;,GradientType=1);__ESCAPED_SOURCE_END_CLEAN_CSS__
;;border-bottom:1px solid #F0F8FF;}
#menutop ul,#menutop li{margin:0;padding:0;list-style:none;}
#menutop ul{height:40px}
#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> <script type='text/javascript'>
//<![CDATA[
var cb=function(){var e=document.createElement('link');
e.rel='stylesheet',e.href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css';
var t=document.getElementsByTagName('head')[0];
t.parentNode.insertBefore(e,t)},raf=requestAnimationFrame||mozRequestAnimationFrame||webkitRequestAnimationFrame||msRequestAnimationFrame;raf?raf(cb):window.addEventListener('load',cb);
//]]></script>

Perhatikan kode warnanya ya, Anda bisa menggantinya dengan kode warna HEX yang dapat di copy paste dari internet untuk menghasilkan kombinasi warna gradasi yang sesuai dengan selera.

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='/' title='Beranda'><i aria-hidden='true' class='fa fa-windows' style='color:orange'/>Beranda</a>
</li>
<li>
<a class='dutt' href='#'><i class='fa fa-rss' style='color:orange'/>Blogging</a>
<ul class='menux'>
<li><a href='#'>Triks/Tips</a>
</li>
<li><a href='#'>English Posts</a>
</li>
<li><a href='#'>fakta</a>
</li>
<li><a href=#'>Pencarian</a>
</li>
<li><a href='#'>Navigasi</a>
</li>
<li><a href='#'>Spesial</a>
</li>
<li><a href='#'>widget</a>
</li>
</ul>
</li>
<li>
<a class='dutt' href='#'><i class='fa fa-download' style='color:orange'/>Download</a>
<ul class='menux'>
<li><a href='https://www.editblogtema.net/p/var-blogid-3332982328556887724var.html'>e-mail Form</a>
</li>
<li><a href='https://www.editblogtema.net/2018/10/moslem-theme-for-free.html'>Tema Islami</a>
</li>
<li><a href='https://www.editblogtema.net/p/blog-page_7.html'>EB-themes</a>
</li>
<li><a href='https://www.editblogtema.net/2018/12/apakah-template-contempo-hybrid-itu.html#'>Tentang Kami</a>
</li>
</ul>
</li>
<li>
<a href='#l'><i class='fa fa-cog fa-spin fa-fw' style='color:orange'/>Try this hybrid theme<span class='sr-only'/>
</a>
</li>
<li><a href='#'><i class='fa fa-sitemap' style='color:orange'> </i>Sitemap</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 Anda 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 Anda sendiri dan menghapus link yang disorot warna kuning dan menggantikannya dengan link Anda sendiri.

Save Template, perhatikan Menu pada tema ContempoHybrid yang memakai menu Navigasi ini.

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:

Jika Anda menginginkan bar menu navigasi berubah menjadi warna warni animasi INFINITE seperti layaknya buatan Arlina dan diterapkan ke template contempo, anda juga dapat melakukannya dengan mudah dengan mengedit bagian background nya dengan kode CSS yang telah kami siapkan semuanya dibuat dengan material warna yang bervariasi bagai pelangi.

PERHATIAN! jika terdapat error pada warna Navigasi saat di buka melalui jejaring sosial (terutama linkiden) tertentu atau pada saat dibuka melaui browser FIREFOX yakni menu bar navigasi blog menjadi berwarna pink dan lalu menu pencarian tidak berfungsi maka cari kode warna HEX #0F466E; harus segera diganti dengan kode warna berikut: #6495ED (Cornflower Blue) Penyebabnya adalah ketidak konsistenan kombinasi gradasi warna pada saat ditampilkan pada html. Terimakasih!