AdelinaSasa

Privacy Perihal kami Coba Template kami
×
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 Minggu ini:

TAHUKAH KAMU BEDANYA iPhone BEKAS JEPANG DENGAN SINGAPORE?

Pernah dengar Rumor iPhone rakitan Jepang dan Singapore?
Terutama anda yang domisili di batam yang masih sebagai "sorganya" elektronik, kali ini khusus seken. Dari hasil pantauan saya dilapangan peminat ponsel pintar bekas semakin meningkat terutama iPhone. Well, anda datang ketempat yang benar: BATAM.

Harga sebuah iPhone 5, 5c seken sekarang hanya berkisar 900 - satu jutaan disini. Kualitas tentu saja dijamin oleh toko penjual.

Mengapa batam? Karena Batam begitu dekat dengan singapore, hanya berjarak 45 menit (aktualnya hanya 25 menit, namun karena ada peraturan kecepatan di laut perbatasan dalam kecepatan tertentu maka dipatoklah 45 menit) perjalanan santai naik ferry laut, banyak celah dan peluang bisnis, salah satunya adalah bisnis ponsel bekas ini. Jangan anda remehkan ya, omsetnya bisa mencapai ratusan juta rupiah perbulan.  Kembali kepada topik: Perbedaan iPhone seken asal Jepang dan singapore.
Secara fisik, fitur dan kemampuan tidak ada perbedaan yang essensial. Nam…

APA BEDA SONY XPERIA ZR DOCOMO DENGAN GLOBAL?

Di Indonesia terutama di Batam sedang diserbu oleh produk hape bekas besutan sony keluarga xperia, saya juga tidak mengerti mengapa seken hape ini bisa sampai banjir di negara kita yang seluas ini, kalau mau dibilang produk hape ini sudah terbilang lawas di rilis dikisaran waktu 2013 - 2015, namun speknya masih terbilang bagus, dengan kamera beresolusi 13 - 20,7 Megapixel RAM 2GB, ruang simpan yang cukup lega dikisaran 8 - 32GB, tentu sangat menarik apalagi (kalau di Batam) harganya sangat murah berkisar antara RP. 550.000,- hingga RP.800ribuan, sangat terjangkau. Dan penjualnya memberikan garansi toko, bisa juga dibeli secara online, (kamu bisa mencari nama nama toko di Facebook seperti: Putra siregar seken singapore, atau bang Juju karena nama nama ini sudah terjamin kredibilitas bisnis mereka di Batam, Putra siregar bahkan telah memiliki beberapa cabang, Pekanbaru, Jakarta, Bali dll)

Satu hal yang kamu harus tahu: baik docomo maupun global keduanya sama sama asli besutan Sony, sama…

5 SIGNS WHY YOU ARE GENIUS

IF YOU CAN USE YOUR SMARTPHONE BY RIGHT when you confuse what shall be bought a laptop or a smartphone? Just consider the bugdet that you have for now, then I guess you will buying a phone, Am I right?  But why? Because with a smarthphone you can call your mom by dial her number, or you can texting your friends and send them some messages, so many fun in just one hand. Further more a phone does have networking capacity as laptop does have, so you can also chat with your friends through the internet.
Oh yes! I can't count how many times you can use it for get pictures with your friends and send them into social media like Facebook, IG, and GPlus? That are the ordinary people way to use their phones.

Why we call you are genius one is when you can use your smartphone more than a phone. You can use it for some productivity work such as: Blogging, support working, support learning, and for some excercises. When you so curious, here we go:

Signs 1. BLOGGING
You can use your smartphone fo…