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://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='http://4.bp.blogspot.com/-COEdTfRLFPA/Urboyo8oxuI/AAAAAAAAClI/dMXhGwzYAuA/s1600/SI5.png'/></a>
</div>
</div>
</div>
</div>
http://4.bp.blogspot.com/-COEdTfRLFPA/Urboyo8oxuI/AAAAAAAAClI/dMXhGwzYAuA/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

14 komentar

  1. rasanya kenal ama nih template..
    ehh baru baca creditnya dari si aspalul (temen, guru, murid) wkwkwkw
    jadi, ini memang template dari asfarul yah om? xD

    BalasHapus
    Balasan
    1. iya om... hehe :D cuma saya modifikasi saja :)

      Hapus
  2. keren lagi gan


    Event top komentator good,,,,,

    BalasHapus
  3. Wah mantap nih.. keren-keren semua ya.. langsung praktekin ke blog baru biar kece

    BalasHapus
  4. min kalo sering jumpain kata selector itu yang mana sih? Website Gratis

    BalasHapus
    Balasan
    1. Maksudnya bagaimana gan? :) pertanyaannya saya belum paham

      Hapus

Komentar anda sangat dibutuhkan bagi kemajuan kami untuk terus berkarya.
Diharapkan :
* Berkomentarlah dengan bahasa yang baik
* Tidak ada unsur SARA, SPAM, PORNO
* Tidak merugikan orang lain
* Menunjukkan identitas yang jelas bukan Anonim

Diperkenankan :
* Komentar promosi link web anda
* Kritik & Saran

[Protected] by DMCA Protection Pro™
EmoticonEmoticon