.png "Wellcome"){kind=small}
.png "Wellcome"){kind=small}
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
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 > 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR18R0AvOV8BnppBiqr1TsnNZOWLsJsv8cws0DNdgJad0qhH8eZvN-B9sik7ZhleuKVUGc-lbm8nxTvBV6g-mZhu4XQtITlKDtwElgFAiHuagi5cL4mt9maQuC7-IKeEaM1dK4fs0to4g/h120/arrow.gif) no-repeat left center;}
.menu3Dflip ul.nav div ul li a:hover {color:red; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR18R0AvOV8BnppBiqr1TsnNZOWLsJsv8cws0DNdgJad0qhH8eZvN-B9sik7ZhleuKVUGc-lbm8nxTvBV6g-mZhu4XQtITlKDtwElgFAiHuagi5cL4mt9maQuC7-IKeEaM1dK4fs0to4g/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)}
****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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFeMvHo9o_1mourIy15rbr-EoxZu1o-3BLZAgt4pgMPOK-UVKZTP2humsoi6H7fhyphenhyphenABvKDuHOYrOKDi6s2cg-v1UBvzCnYenJUBMxxeHZIDKNH94pOtUkdyZ9Xh1bkFTw-N6aKUj01tmra/s1600/unduhan+(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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOPk5t-MP7biIh8ovNNJqrwMhyvYmvBrCddrMGxKCES2oEhZznRnbtyXuwvuFKQInDUf6DoE99_924bx3GFYDX28aQw1z86e-w5lZY2RXVKPms5-hC6NLwiU7e7CgDtqCmr4sNJixS8gUz/s1600/unduhan+(4).png' title='Wellcome' width='360'/></div>
</div>
</div>
<!-- navigation menu with social icon end -->
Silahkan pratijau/atau jika yakin langsung save gan
done :)
0 Komentar untuk "Cara Memasang Menu Melayang Keren Terbaru"