Skip to main content

CARA MEMBUAT MENU NAVIGASI CONTEMPO HYBRID INFINITE STYLE

CARA MEMBUAT MENU NAVIGASI CONTEMPO HYBRID INFINITE STYLE: Trik mudah membuat menu navigasi tema contempo hybrid menjadi bergaya infinite

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.

Comments

Popular posts from this blog

INI DIA 9 SITUS TEMPAT BELAJAR KODING TERBAIK

Selagi kalian masih muda, dan kalian terbiasa mengoperasikan komputer: Laptop, Desktop, iPad, Tablet dan bahkan Smart-phone, maka sesungguhnya kalian memiliki kesempatan yang sangat besar untuk tetap bisa belajar layaknya sekolah formal namun melalui jalan online!
Belajar Online? Mengapa tidak? Tidak ada yang salah dengan belajar online. Kalau bisnis online terbukti sukses, belanja online juga bisa, mengapa harus tertutup kesempatan belajar online? Tidak banyak alasan untuk menolaknya, sekalipun masih ada orang berpikirnya begini: Tidak afdol kalau belajar online, harus melalui guru langsung.

Itu namanya paradigma lama, saya belajar secara online, tanpa guru dan walaupun belum terlalu menguasai pelajaran koding seperti yang telah saya targetkan, namun saya telah menguasai beberapa bahasa program web tanpa keluar uang sepeserpun selain hanya waktu dan quota internet. Saran saya jangan mempersulit diri kita sendiri dengan banyak alasan untuk tidak belajar. Hari segini bisnis saja tanpa at…

MENGAPA POWERED BY BLOGGER ITU PENTING BAGI GOOGLE?

Blogger menggunakan ikon, ikon yang dipergunakannya adalah tipe SVG, sebenarnya banyak jenis jenis ikon yang bisa kita pergunakan, misalnya yang paling populer adalah ikon font awsome, namun jika memilih menggunakan font awsome kita harus memasang script link eksternal ke dalam template blogger kita. Hal ini akan membebani loading atau kecepatan halaman blog saat dijalankan di internet.

Nah itulah sebabnya mengapa blogger secara default tidak menggunakan font awsome yang cantik dan memiliki banyak ikon tersebut. Blogger secara default menggunakan SVG yang jauh lebih ringan, dapat berjalan pada semua browser utama.

Ikon pada atribusi dan kredit blogger adalah "trademark" special platform blogger, jadi tidaklah bijaksana menghapus ikon tersebut (walaupun Google tidak secara jelas melarangnya atau memperbolehkannya, meskipun template anda buat dari NOL. Mengapa? Alasannya adalah:
Anda tidak akan membuat template blogger kalau platform blogger itu sendiri tidak ada. Platform Blogge…

QUORA: PEKERJAAN PALING ENAK DAN SANTAI NAMUN GAJINYA BESAR

Quora adalah sebuah situs tempat bertanya dan menjawab: Dari sekian ton pertanyaan dan jawaban saya menemukan jawaban menggelitik seputar profesi anggota DPR dan Pegawai negeri, panasaran? Simak saja:

1. ANGGOTA DPR
Jawaban terbaik untuk pertanyaan ini tentu saja adalah pekerjaan mulia yang digawangi oleh para wakil rakyat Indonesia di gedung DPR-RI. Pekerjaan sebagai anggota DPR. Saya (Anissa) tergoda untuk mencontek langsung tulisan yang bersumber dari quora ini:

Gaji dan tunjangan tetap Gaji Pokok = Rp 4.200.000 Tunjangan Istri (10% GP) = Rp 420.000 Tunjangan Anak (2 anak x 2% GP) = Rp 168.000 Uang sidang / Paket = Rp 2.000.000 Tunjangan Jabatan = Rp 9.700.000 Tunjangan Beras Rp 30.090 per jiwa per bulan Tunjangan PPH pasal 21= Rp 2.699.813 Penerimaan lain:
Penerimaan lain Tunjangan Kehormatan: Rp 5.580.000 Tunjangan Komunikasi Intensif = Rp. 15.554.000 Tunjangan Peningkatan Fungsi Pengawasan dan Anggaran = Rp 3.750.000 Bantuan Langganan Listrik dan Telepon = Rp 7.700.000 Asisten Anggo…