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.
Untuk demo bisa dilihat diatas grup ini atau => Rafi Orilya Portal
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'>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLYSmONY0JNil0bHW9J6BMUZGnEeXyFk9pg6FDIfBc14_vbdx-0xJGOY6wV_0Ed7XY8xS9Rvl4cWEiSPvJO5OXvEw6K0ZSpAWSXWWRG0SdTa9c-H4ERh65hIphSfzEAUwAUl3SENTxcloS/s1600/SI5.png
<div id='top-menuwrap'>
<div id='top-menu'>
<ul>
<li><a href='http://verygood-news.blogspot.com/'>Blog</a></li>
<li><a href='http://verygood-news.blogspot.com/'>Contact</a></li>
<li><a href='http://verygood-news.blogspot.coml'>Home</a></li>
</ul>
<div class='logo'>
<a href='/'><img alt='Go! Blog' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLYSmONY0JNil0bHW9J6BMUZGnEeXyFk9pg6FDIfBc14_vbdx-0xJGOY6wV_0Ed7XY8xS9Rvl4cWEiSPvJO5OXvEw6K0ZSpAWSXWWRG0SdTa9c-H4ERh65hIphSfzEAUwAUl3SENTxcloS/s1600/SI5.png'/></a>
</div>
</div>
</div>
</div>
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 Groups
by Rafi Aldiansyah Asikin