Membuat Menu Navigasi Melayang Berlogo, Bertitle Keren Unik Terbaru
Rafi Orilya Groups,-Hello sob sudah lama blog ini tidak terupdate kira-kira hampir 2 bulanan lebih nih. Saya mohon maaf soalnya banyak tugas yang belum diselesein, nah sekarang mumpung liburan saya akan update terus ini blog biar para sahabat ROG tetep setia berkunjung dan berkomentar oke.
Baik sekarang saya akan bahas Navigasi Melayang, mungkin melalui Search Engine sobat sudah sering mencari atau menemukan jenis-jenisnya yang bermacam-macam, namun kali ini saya akan mencoba share menu Navigasi Melayang versi ROG, bagi yang berminat silahkan pasang di blog sobat.
Baik biar tidak terlalu lama mari kita ikuti langkah-langkahnya :
1. Login blogger
2. Dashboard
3. Template => Edit HTML
4. Kemudian copy dan masukkan kode dibawah ini diatas ]]></b:skin>
/* Top Menu
----------------------------------------------- */
#top-menuwrapper{background: white;height:60px;width:100%;position:fixed;top:0;left:0;z-index:999;overflow:hidden;border-bottom:3px solid #05BEFF}
#top-menuwrap, #top-menuwrap2{width:90%;margin:0 auto}
#top-menu{width:100%}
#top-menu ul{list-style: none;width:100%;}
#top-menu ul li{float:right}
#top-menu ul li a{line-height:20px;padding:5px 0;margin-left:25px;color:#999;font-size:14px;text-transform:uppercase;display:block;text-decoration:none;}
#top-menu ul li a:hover{color:#c94e5c;}
.logo{float:left;font-family:'Montserrat', Oswald;font-size:160%;text-transform:uppercase;font-weight:300;}
#top-menu ul li a.current{color:#c94e5c}
.logo a{color:#fff;text-decoration:none;margin-top:-5px}
.logo a:hover{color:#fff;text-decoration:none}
.logo img{margin-top:0px;}
5. Masukkan kode dibawah ini diatas
<body><div id='top-menuwrapper'>
<div id='top-menuwrap'>
<div id='top-menu'>
<ul>
<li><a href='http://rafi-orilya.blogspot.com/'>Blog</a></li>
<li><a href='http://rafi-orilya.blogspot.com/'>Contact</a></li>
<li><a href='http://rafi-orilya.blogspot.coml'>Home</a></li>
</ul>
<div class='logo'>
<a href='/'><img alt='Go! Blog' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDvoHXTZuQIzrHT4g7BBylbGMztGmFFEF5pF3RGi8T02O_QYLiT08lYoIHMtODCSA7Vt8RhRMPXexUXmPuBU5C84tmMyk6DJvD31t_6jEJUiptWfBVcODDQzDUXHMvDQs3D0kZSR7YZ6af/s1600/SI5.png'/></a>
</div>
</div>
</div>
</div>
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDvoHXTZuQIzrHT4g7BBylbGMztGmFFEF5pF3RGi8T02O_QYLiT08lYoIHMtODCSA7Vt8RhRMPXexUXmPuBU5C84tmMyk6DJvD31t_6jEJUiptWfBVcODDQzDUXHMvDQs3D0kZSR7YZ6af/s1600/SI5.png
Silahkan sobat ubah yang berwarna
hijau dan
kuning sesuai dengan keinginan sobat.
Baiklah selesai sudah perjalanan kita, haha..
Biar ngga panjang penjelasannya, jika ada error silahkan komentar saja yah sob.
Okey thanks
Terima Kasih
Rafi Orilya Groupsby Rafi Aldiansyah Asikin