Membuat Menu Navigasi Melayang Berlogo, Bertitle Keren Unik Terbaru

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'>
<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>
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLYSmONY0JNil0bHW9J6BMUZGnEeXyFk9pg6FDIfBc14_vbdx-0xJGOY6wV_0Ed7XY8xS9Rvl4cWEiSPvJO5OXvEw6K0ZSpAWSXWWRG0SdTa9c-H4ERh65hIphSfzEAUwAUl3SENTxcloS/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 Groups
by Rafi Aldiansyah Asikin
Share this article :
 
 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2016. I want to know - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger