Membuat Menu Header Kompi Ajaib

Membuat Menu Header Kompi Ajaib

Bola Hero Gawai

Membuat Menu Header Kompi Ajaib

Menu Header Kompi Ajaib
Karena ada beberapa sahabat Kompi Ajaib yang menanyakan cara membuat menu header yang dipakai Kompi Ajaib, akhirnya kali ini saya share juga. Menu header ini terinspirasi dari menu Google yang background hitam itu.

Sebenarnya ini adalah menu bawaan template yang sedikit saya modif agar sesuai keinginan saya. Jika ada sahabat Kompi Ajaib yang tertarik untuk menggunakannya, silahkan gunakan dan modif warnanya agar sesuai dengan tema template blog Anda sehingga menu ini dapat menambah keindahan blog dan mempermudah pengunjung untuk mengakses postingan lainnya.


Silahkan copy kode di bawah ini dan simpan atau gantikan kode menu blog Anda sebelumnya.

#top-menu{background:#ddd;width:100%;border-top:5px solid #b0130d;margin-bottom:15px;padding:0;box-shadow:0 5px 10px #999}
.topbar-wrapper{position:relative;max-width:970px;margin:0 auto}
#topbar{width:100%;margin-left:5px}
.clearit{clear:both;height:0;line-height:0.0;font-size:0;margin:0;padding:0}
#top{width:100%}
#top,#top ul{list-style:none;font:Arial;margin:0;padding:0}
#top a{background:none;display:block;text-decoration:none;font: 13px Arial;font-weight:700;text-transform:none;color:#333;margin-right:20px;padding:6px 0 7px;border-bottom:3px solid #ddd;transition:all .3s ease-in-out;}
#top a.trigger:before{content:"";display:block;width:0;height:0;border-style:solid;border-color:#333 transparent transparent transparent;float:right;border-width:8px 5px 0 5px;margin:5px 0 0 5px;transition:all .3s ease-in-out;}
#top a.trigger:hover:before{content:"";display:block;width:0;height:0;border-style:solid;border-color:#b0130d transparent transparent transparent;float:right;border-width:8px 5px 0 5px;margin:5px 0 0 5px;}
#top li{float:left;position:static;width:auto}
#top li ul,#top ul li{width:150px;background:#ddd;box-shadow:1px 1px 3px #999;padding-left:5px}
#top ul li a{text-align:left;color:#333;text-transform:none;font:bold 13px Arial;border:none;padding:5px 0;}
#top li ul{z-index:100;position:absolute;display:none;background:none;padding:0;margin:0}
#top a:hover {color:#b0130d;border-bottom:3px solid #b0130d;}
#top li:hover ul,#top li.hvr ul{display:block}
#top ul li a:hover{color:#b0130d;border-bottom:none;padding-left:10px}
#top a.trigger:hover{border-bottom:3px solid #ddd}
#search input[type=text]:hover,#search input[type=text]:focus{width:200px;border:1px solid #b0130d;padding-left:25px}
#search input[type=text]{background:#fff url(http://3.bp.blogspot.com/-4l8y1Ui2vIY/UgB9_laN9JI/AAAAAAAAZpM/mwVYMnr-Eg0/s1600/search.png)no-repeat center left 3px;width:0;font-size:13px;color:#222;transition:all .5s ease-in-out;z-index:9;position:absolute;border:1px solid #b0130d;right:0;margin-top:2px;padding:5px 14px 5px 15px}

Kode css di atas saya gabungkan dengan kode css untuk search box-nya (kode yang berwarna biru). Jika Anda ingin memodifikasinya, perhatikan kode warna yang berwarna merah harus sama. Untuk kode warna lainnya silahkan sesuaikan dengan tema blog Anda.

Kemudian copy kode pemanggilnya di bawah ini dan simpan di bawah kode <body>

<div id='top-menu'>
<div class='topbar-wrapper'>
<div id='topbar'>
<ul id='top'>
<li><a href='/' target='_blank' title='Menu1'>Menu1</a></li>
<li><a href='/' target='_blank' title='Menu2'>Menu2</a></li>
<li><a href='/' target='_blank' title='Menu3'>Menu3</a></li>
<li><a href='/' target='_blank' title='Menu4'>Menu4</a></li>
<li><a href='/' target='_blank' title='Menu5'>Menu5</a></li>
<li><a href='/' target='_blank' title='Menu6'>Menu6</a></li>
<li><a href='/' target='_blank' title='Menu7'>Menu7</a></li>
<li><a class='trigger' href='/' title='More Menu8'>More Menu8</a>
<ul>
<li><a href='/' target='_blank' title='Sub1 More Menu8'>Sub1 More Menu8</a></li>
<li><a href='/' target='_blank' title='Sub2 More Menu8'>Sub2 More Menu8</a></li>
<li><a href='/' target='_blank' title='Sub3 More Menu8'>Sub3 More Menu8</a></li>
<li><a href='/' target='_blank' title='Sub4 More Menu8'>Sub4 More Menu8</a></li>
<li><a href='/' target='_blank' title='Sub5 More Menu8'>Sub5 More Menu8</a></li>
<li><a href='/' target='_blank' title='Sub6 More Menu8'>Sub6 More Menu8</a></li>
<li><a href='/' target='_blank' title='Sub7 More Menu8'>Sub7 More Menu8</a></li>
<li><a href='/' target='_blank' title='Sub8 More Menu8'>Sub8 More Menu8</a></li>
</ul></li>
</ul>
<form action='http://www.kompiajaib.com/p/kompi-ajaib-search-result.html' id='search' target='_blank'>
<input name='cx' type='hidden' value='partner-pub-006106396690849460662:zxyadz2g7gi'/>
<input name='cof' type='hidden' value='FORID:10'/>
<input name='ie' type='hidden' value='ISO-8859-1'/>
<input id='q' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' type='text' value='Type and enter here ....'/>
</form>

<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div>
</div>

Kode yang berwarna merah adalah kode HTML untuk search box dengan fungsi pencarian Google atau Google Custom Search. Untuk tutorial cara menambahkan fungsi Google Custom Search pada Search box blog silahkan baca postingannya di link di bawah ini.
Semoga dapat dimengerti dan bermanfaat....

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

47 Comments Add Comment

Ajib dah Kang Kompi Ajaib....
Kalau mau dijadiin menu float atau apalah istilahnya, yg melayang gt kang. Kayak Menu G+

Balas

Tinggal tambahkan kode statis aja, ada menu statis di Kang Ismet nah gunakan kode statisnya. jadi menunya tidak ikut geser...

Balas

kehabisan referensi nih, theme sendiri dijadiin postingan...xixixi

Balas

hehe ada2 aja mas kompi ini, keren deh, oh ya mas kompi di sidebar yang mas kompi pasang Google+ Followers itu mengapa tidak mas kompi pasang dari trik kemarin yang mas kompi share itu, kan lebih ringan loadingnya

Balas

oke kang, terima kasih banyak

Balas

Wah,,,,, keren amat nih Kang. ijin simpan link nya dulu biar nanti saya pelajari lagi. Maklum kang haus ilmu. He,,,,,, he,,,,he,,,,

Trims atas tutorialnya.

Salam
Ejawantah's Blog

Balas

Keren keren, lebih elegan tampilannya :D

Balas

ikut ngomen ah... kode atas tinggal tambah position:fixed;top:0;z-index:999; beres deh melayang :)

Balas

Google+ author dan Badge sepertinya nggak support Firefox...

Balas

Ada yang nanyain wae kang heehehe :D

Balas

Biar ga terlalu banyak photo saya dipajang hehehehe

Balas

Silahkan mas Indra :D

Balas

Heheheehe hanya menu sederhana mas :D

Balas

Saya sudah terapkan, gaya Header-Menu KompiAjaib yang menurut saya paling ca'em. Boleh Check kalau nggak percaya.,he..he.
Kalau cakepan punya blogger lain, saya nggak gunakan dunk gaya Pro dan Elegan kreasi Mas Adhi ini. (Maaf ngejiplak saya). Tapi saya puas akan Header-Menu karya Mas Adhi ini, Profesional Look!!, Keren habis,.TOB BGT.

(Saatnya saya bilang: "Ini Ajaib!!")
Terimakasih Mas Adhi

Balas

hahaha.. kan tambah jreen :)

Balas

baik banget si +Kang Ismet, ;)

Balas

kamari padahalmah tos di coba,hampura ah di intip jeroanna..hehehe
eh tos aya ning penjelasna :D

Balas

memang semua dari mas kompi memang ajaib mas

Balas

Terima kasih sharenya... salam kenal juga yaa :)

Balas

ya betul sekali mas andi kalau banyak yang nanyain mending lansung di share mas agarpenjelasannya lebih lengkap :-d

Balas

simple elegan.. *smile

Balas

Hehehehe...untung ngangge kolor :D

Balas

Sama-sama...salam kenal juga :D

Balas

Iya mas heheehe...pegel juga kalau jawab satu-satu :D

Balas

Iya ini cukup sederhana dan simple sob :D

Balas

haha betul sekali mas andi siapa tau banyak yang berminat mas :)

Balas

Wah, permintaannya dikabulkan, THX mas Kompi.

Balas

bere weh menu nasi goreng...hieoheihoehoieoehei

Balas

Hehehehe kesenengan kan Beben atuh eta mah :D

Balas

ini mah lebih keren daripada punya saya :-d

Balas

Ohhh, itu toh fungsinya ya kang, soalnya, selama saya ngutak-ngatik CSS, saya sering menemui kode ini, tapi gak tau fungsinya :D

Balas

keren nih mas kompi.... ane coba dulu deh

Balas

simple dan full title sepertinya ya :) sepertinya ada yg berubah dg form komen :D nggak cm itu, foto authornya jg berubah -_-

Balas

klo form komen ini posting donk

Balas

Bingung kang, kok ngga bisa masuk di atas header.

Balas

Simpan kode html-nya / pemanggilnya persis di bawah kode <body>

Balas

Silahkan, modif lagi css-nya biar lebih keren

Balas

Hehehehe...authornya ngikut update :D

Balas

Sepertinya sama aja dg yang lain mas, paling beda warna aja...coba ubek-ubek blog kang Ismet, cukup komplit untuk jenis komentar.

Balas

Udah kang, tapi hasilnya kurang memuaskan karena menu header itu menindih Judul blog.

Balas

Sudah terpecahkan kang, tadi saya ubah padding untuk headernya. Tolong ditinjau kang, trus cara ngilangin efek blur di bawahnya gmana kang ?

Balas

Hapus kode box-shadow:0 5px 10px #999 pada kode css paling atas.

Balas

Atau kalau ma dikecilin angka-angkanya misalnya 0 1px 3px jadi bayangannya masih ada tapi kecil

Balas

Terima kasih penjelasannya kang....pokoknya sukses selalu dah KompiAjaib..

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×