Cara Memasang Menu Melayang Keren Terbaru

By : Naldo hatake 1 Comment

Cara Memasang Menu Melayang Keren Terbaru

Jumpa lagi diblog naldo hatake,Udah lama nggak posting nie turun drastis.
Kali ini saya akan membagi kode html yaitu cara pasang menu keren terbaru.Menu ini saya terapkan pada template saya yang sebelumnya,tapi bagi yang belum tau silahkan lihat gambar dibawah ini

Cara Memasang Menu Melayang Keren Terbaru 2015

Langsung aja tampa basa basi

Masuk keblog,
buka menu template
lalu klik EDIT HTML

Cari kode ]]></b:skin> dengan cara klik CTRL+F //
***Jika kalian pake template seo usahakan letak kode ini dibawah tulisan #header/.Header atau yang samalah,biasanya template seo meletakan kode cssnya di bawah kode ]]></b:skin>.***

Pastekan kode berikut diatas kode ]]></b:skin>
****Jika template seo usahakan dibawah pengaturan header

/*Menu-Menu*/
#menukeren {position:fixed;top:0;left:0;width:100%;height:40px;z-index:999}
.menu3Dflip {border-bottom:2px solid #cecece;margin:0 auto; text-align:center; position:relative;height:40px;z-index:999; background:#333; -moz-perspective: 100px; -webkit-perspective: 100px; -o-perspective: 100px; perspective: 100px}
.menu3Dflip ul.nav li {display:inline-block; display:inline}
.menu3Dflip ul.nav {padding:0; margin:0; list-style:none; display:inline-block;-moz-transform-style:preserve-3d;-webkit-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d}
.menu3Dflip ul.nav li {float:left; display:block; padding:0 4px}
.menu3Dflip ul.nav &gt; li {-moz-transform-style: preserve-3d;-webkit-transform-style: preserve-3d}
.menu3Dflip ul.nav li a.top-a {display:block; text-decoration:none; margin-top:4px; float:left; height:36px}
.menu3Dflip ul.nav li a.top-a b {display:block; padding:0 20px; font:bold 14px/30px arial, sans-serif; color:#fff}
.menu3Dflip ul.nav li:hover a.top-a {background:#006acc; border-radius:8px 8px 0 0; -moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4)}
.menu3Dflip ul.nav div {position:absolute; top:40px; left:4px; background:#006acc; padding:5px 0 10px 0; border-radius:0 0 15px 15px; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; -moz-transform-origin: 0px 0px; -moz-transform: rotateX(-90deg); -webkit-transform-origin: 0px 0px; -webkit-transform: rotateX(-90deg); -o-transform-origin: 0px 0px; -o-transform: rotateX(-90deg); transform-origin: 0px 0px; transform: rotateX(-90deg); -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; }
.menu3Dflip ul.nav div.left {left:auto; right:4px;} .menu3Dflip ul.nav div ul {padding:10px 0; list-style:none; width:300px; margin:10px 5px 0 5px; float:left; display:inline; text-align:left; background:#fff; border-radius:6px; -moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); }
.menu3Dflip ul.nav div ul.colLeft {margin-left:10px;}
.menu3Dflip ul.nav div ul.colRight {margin-right:10px;}
.menu3Dflip ul.nav div ul.colSingle {margin-left:10px; margin-right:10px;}
.menu3Dflip ul.nav div ul li {float:left; border-bottom:1px dotted #09c; margin:0 5px 0 5px; display:inline;}
.menu3Dflip ul.nav div ul li:last-child {border:0;}
.menu3Dflip ul.nav div ul li a {display:block; width:280px; text-decoration:none; font:12px/16px arial, sans-serif; color:#069; margin:0; padding:4px 0 4px 10px; background:transparent url(https://lh3.googleusercontent.com/-obvJZHCanbY/UkxkGd717_I/AAAAAAAAGQA/bjih8_q74Ws/h120/arrow.gif) no-repeat left center;}
.menu3Dflip ul.nav div ul li a:hover {color:red; background:transparent url(https://lh3.googleusercontent.com/-obvJZHCanbY/UkxkGd717_I/AAAAAAAAGQA/bjih8_q74Ws/h120/arrow.gif) no-repeat 1px center;}
.menu3Dflip ul.nav div.col1 {width:320px}
.menu3Dflip ul.nav div.col2 {width:630px}
.menu3Dflip ul.nav div.col3 {width:740px}
.menu3Dflip ul.nav li:hover div {-moz-transform: rotateX(7deg); -webkit-transform: rotateX(7deg); -o-transform: rotateX(7deg); transform: rotateX(7deg)}

lalu cari kode <header id='header-wrapper'>/<header id='header'>/<div id='header'>,pokoknya yang miriplah,biasanya kode ini terletak diatas nama judul blog,
****agar lebih mudah coba ketik nama blog kalian pada pencarian dengan cara CRTL+F,kalau ketemu cari kode yang mirip seperti diatas
Pastekan kode berikut diatasnya

<!-- navigation menu with social icon start -->
<div id='menukeren'>
<div class='menu3Dflip'>
<ul class='nav'>
<li><a class='top-a' href='http://naldohatake.blogspot.com/p/hello-nama-saya-m.html' target='_blank' title='Tentang Saya'><b>About Us</b></a>
</li>
<li><a class='top-a' href='http://naldohatake.blogspot.com/p/blog-page_5.html' target='_blank' title='Contact Us'><b>Contact Us</b></a>
<div class='col1'>
<ul class='colSingle'>
<li><a href='https://plus.google.com/118146333992118939992/' target='_blank' title='Google Plus(+)'>Google Plus(+)</a></li>
<li><a href='https://www.facebook.com/devhenjer' target='_blank' title='Facebook'>Facebook</a></li>
<li><a href='http://naldohatake.blogspot.com/p/blog-page_5.html' target='_blank' title='Nomor HP'>Nomor Handphone</a></li>
</ul>
</div>
</li>
<li><a class='top-a' href='http://naldohatake.blogspot.com/p/privacy-policy-for-naldohatake.html' target='_blank' title='Frivacy policy'><b>FRIVACY POLICY</b></a></li>
  <li><a class='top-a' href='naldohatake.blogspot.com/#' target='_blank' title='All Label'><b>Labels</b></a>
<div class='col2 left'>
<ul class='colLeft'>
<li><a href='http://naldohatake.blogspot.com/search/label/MELODI%20GITAR' target='_blank' title='Kumpulan Melodi Gitar'>Melodi Gitar</a></li>
<li><a href='http://naldohatake.blogspot.com/search/label/aksesoris%20bloganda' target='_blank' title='Aksesoris Untuk Blog'>Tutor Blog</a></li>
<li><a href='http://naldohatake.blogspot.com/search/label/Materi%20Listrik' target='_blank' title='Kelistrikan SMK/kuliah'>Materi Kelistrikan</a></li>
<li><a href='naldohatake.blogspot.com/#' target='_blank' title='Sub-menucoeg1'>Sub-menucoeg4</a></li>
<li><a href='naldohatake.blogspot.com/#' target='_blank' title='Sub-menucoeg2'>Sub-menucoeg5</a></li>
</ul>
<ul class='colRight'>
<li><a href='http://naldohatake.blogspot.com/search/label/Tips%20Trik%20Internet' target='_blank' title='Trik INternet'>Tips Trik Internet</a></li>
<li><a href='http://naldohatake.blogspot.com/search/label/Delphi' target='_blank' title='Trik Delphi7'>Tutor Delphi7</a></li>
<li><a href='http://naldohatake.blogspot.com/search/label/inject%20tsel' target='_blank' title='Inject Telkomsel'>Inject Tsel</a></li>
<li><a href='http://naldohatake.blogspot.com/search/label/SSH' target='_blank' title='Trik SSH'>Tentang SSH</a></li>
<li><a href='naldohatake.blogspot.com/#' target='_blank' title='Sub-menucoeg10'>Sub-menucoeg10</a></li>
</ul>
</div>
</li>
<li><a class='top-a' href='#' target='_blank' title='Alat Tempur SSH'><b>Alat SSH</b></a>
<div class='col2 left'>
<ul class='colLeft'>
<li><a href='http://naldohatake.blogspot.sg/2014/11/download-bitsive-ssh-client-full-version.html' target='_blank' title='Bitsive Client'>Bitsive SSH</a></li>
<li><a href='http://naldohatake.blogspot.sg/2014/11/download-proxifier-full-version-key.html' target='_blank' title='Proxifer Full'>Proxifier</a></li>
<li><a href='http://naldohatake.blogspot.sg/2014/11/download-mmd-x-untuk-ssh.html' target='_blank' title='MMD versi Final'>MMD X</a></li>
</ul>
<ul class='colRight'>
<li><a href='http://naldohatake.blogspot.sg/2014/11/download-mmsh-untuk-login-dua-akun-ssh.html' target='_blank' title='MMSH by RZ'>MMSH</a></li>
<li><a href='http://formationssh.blogspot.sg/2014/11/download-inject-telkomsel-tsel-simple.html' target='_blank' title='Jika Inject disini tidak work cari diblog lain'>Inject</a></li>
<li><a href='http://naldohatake.blogspot.sg/2015/02/hallo-kawan-sekalian.html' target='_blank' title='Tips Atasi Limit(khusus Telkomsel)'>Tips Atasi Limit</a></li>
</ul>
</div>
</li>
</ul>
<div style='text-align:left;position:absolute;position: fixed;top: 0;left: 5px;z-index: 999;overflow: hidden;'><img alt='Logo Blog' height='40' src='http://4.bp.blogspot.com/-cIwhfvJMUhk/VNYascXlVBI/AAAAAAAABzY/JeTv31Q0gaE/s1600/unduhan%2B(3).png' title='Wellcome' width='360'/></div>
<div style='text-align:right;position:absolute;position: fixed;top: 0;right: 5px;z-index: 999;overflow: hidden;'><img alt='Logo Blog' height='40' src='http://2.bp.blogspot.com/-C4zlX1Oqcgk/VNYcpkjwBVI/AAAAAAAABzk/k0L9GM8k1rE/s1600/unduhan%2B(4).png' title='Wellcome' width='360'/></div>
</div>
</div>
<!-- navigation menu with social icon end -->

Silahkan pratijau/atau jika yakin langsung save gan

done :)
Naldz Harry Hatake

Author :

Anda Baru Saja Membaca Artikel Tentang Cara Memasang Menu Melayang Keren Terbaru ,Anda Boleh Menyebarluaskan / Mengcopy Paste Artikel Cara Memasang Menu Melayang Keren Terbaru Ini Jika Bermanfaat Buat Anda , Namun Saya Mohon Untuk Mencantumkan Link Cara Memasang Menu Melayang Keren Terbaru Sebagai SumberNya Dan jangan Lupa Berikan Komentarnya. Terimakasih atas kunjungannya kalian baru saja membaca artikel berjudul Cara Memasang Menu Melayang Keren Terbaru
.
Share Artikel

Artikel Terkait

1 comments:

The information is very useful and useful, awaited your next article

Bandarq Online
Agen poker online
Agen poker terbaik

-----------GUNAKAN GOOGLE CROME UNTUK TAMPILAN MAKSIMAL BLOG INI-----------

Berikan Comentarnya ya Gan, :)
--Berkomentarlah yang Relevan
--Berkomentar dengan bahasa yang baik dan benar
--Dilarang membuat rusuh [-(
--Dilarang meletakan LINK aktif [-(
--Dilarang meletakan link porno/iklan [-(
--Boleh meletakan Link non aktif selama tidak menyalahi aturan :-)
--Jika ingin dikunjung/komentar balik(yang sebelumnya belum ada perjanjian) harap sertakan link non aktif

---Terimakasih Telah Berkunjung Dan Komentarnya

“Selamat Datang DiBlog Naldo Hatake”
Saya Naldz Harry Hatake selaku Admin disini mengucapkan TerimaKasih Kepada agan Yang telah berkunjung keblog Sederhana Ini, "Semoga Pada Artikel yang akan Agan baca dan simak bisa bermanfaat untuk agan", "Pastikan anda menggunakan GOOGLE CROME agar tampilan tidak kacau"
"Jangan lupa berikan comentarnya YA :)"

Lanjutkan →