Cara Membuat Menu Horizontal Melayang Diatas Blog

Pemberitahuan!!

Mohon dengan sangat Untuk Tidak Melakukan Copy-Paste pada Artikel ini. Tindakan tersebut sangat dibenci oleh Blogger. Sehingga Jika Anda melakukan Co-Pas Artikel, kemungkinan besar Blog Anda akan TERHAPUS dari GOOGLE tanpa saya melapor kepada google DMCA. Sayangilah Blog Anda. Terima kasih.

Cara Membuat Menu Horizontal Melayang Diatas Blog

Cara membuat menu horizontal melayang diatas blog merupakan subuah tutorial mudah untuk lebih mempercantik dan memperindah blog anda. dan dengan blog Cara Baru Andie ini, saya akan berbagi dengan sobat semua.

dengan adanya menu tersebut, anda tidak memerlukan tombol “Back to top” sebab dengan menu ini setiap anda membaca dalam sebuah halaman, dan melihat di posisi terbawah, menu horizontal tetap berada diatas layar komputer anda

Cara Membuat Menu Horizontal Melayang Diatas Blog

Cara Membuat Menu Horizontal Melayang Diatas Blog:

1. Buka akun blogger anda
2. Masuk ke pengaturan templete dan klik Edit HTML
3. Cari kode ]]></b:skin>
Anda bisa menggunakan CTRL+F agar lebih cepat ketemu kodenya
4. Selanjutnya masukkan kode di bawah ini tepat di atas kode ]]></b:skin> tadi.
#navbar-iframe { height:0px; visibility: hidden; display: none; }
Keterangan: 



Fungsi langkah diatas adalah agar  navbar standar Blogger anda tersembunyi, namun jika anda sudah menyembunyikan navbar, lewati saja langkah ini


5. Sisipkan beberapa rangkaian kode CSS berikut ini tepat di atas ]]></b:skin> lagi.



.bilah-menu-atas {

width: 100%;


min-width: 960px;


position: fixed;


top: 0px;


left: 0px;


right: 0px;


height: 27px;


font-size: 13px;


z-index: 99;


white-space: nowrap;


background-color: #336699;


background-image: -moz-linear-gradient(center top , rgb(20, 132, 206) 0%, #336699 100%);


box-shadow: 0px 2px 0px rgb(14, 90, 140);


border-bottom: 1px solid rgba(255, 255, 255, 0.1);


}


.kolom-utama {


-moz-transition: all 0.2s linear 0s;


width: 960px;


height: auto;


margin: 0px auto;


}


.kolom-menu {


width: 521px;


height: auto;


margin: 0px 0px 0px -41px;


float: left;


display: inline;


}


.kolom-menu ul {


height: auto;


margin-top: 0px;


}


.kolom-menu ul li {


float: left;


position: relative;


list-style: none outside none;


}


.kolom-menu ul li:first-child {


border-left: 1px solid rgba(30, 30, 30, 0.125);


}


.kolom-menu ul li a {


color: #ffffff;


font-weight: bold;


text-shadow: -1px -1px rgba(0, 0, 0, 0.2);


text-decoration: none;


display: inline-block;


padding-top: 5px;


padding-right: 10px;


padding-bottom: 5px;


padding-left: 10px;


position: relative;


border-right: 1px solid rgba(30, 30, 30, 0.125);


box-shadow: 1px 0px 0px rgba(255, 255, 255, 0.1);


}


.kolom-menu ul li a:hover, .kolom-menu ul li a:focus {


background-color: rgba(255, 255, 255, 0.125);


}



Keterangan:


Warna dari kode CSS di atas adalah warna biru untuk background dan putih pada teks. Abda bisa menyesuaikan warna yang disukai dengan edit kode pada color:, background-color:, dan background-image:.


6. Cari kode <body Lalu tempatkan kode berikut dibawahnya.



<div class='bilah-menu-atas' id='bilahmenuatas'>

   <div class='kolom-utama'>


     <div class='kolom-menu'>


       <ul>


         <li><a href='http://cara-baru-andie.blogspot.com/'><img alt='L3' height='15px' src='https://lh6.googleusercontent.com/-GrWWmwsRww4/UFjcGGzlSYI/AAAAAAAAAn0/rP9UFz050sk/s800/Beranda.png' width='20px'/></a></li>


         <li><a href='URL'>Menu Kiri 1</a></li>


         <li><a href='URL'>Menu Kiri 2</a></li>


       </ul>


     </div>


     <div class='kolom-menu'>


       <ul style='float: right'>


         <li><a href='URL'>Menu Kanan 1</a></li>


         <li><a href='URL'>Menu Kanan 2</a></li>


       </ul>


     </div>

   </div>


</div>


Keterangan :

Ganti http://cara-baru-andie.blogspot.com dengan Alamat homepage Blog Anda


Ganti pula kata URL dengan link artikel / labels yang ingin anda tampilkan pada menu horizontal tersebut


Ganti kata Menu Kiri 1, Menu Kiri 2, Menu Kanan 1 dan Menu Kanan 2 sesuai judul link url dan sesuai dengan kemauan anda.


5. klik save template dan lihat perubahannya


Anda juga bisa menambahkan kolom lagi untuk menaruh menu tambahan. tinggal copy paste saja <li><a href='URL'>Judul</a></li> dibawah menu yang ada. karena pengaturan standar kode diatas hanya ada 1 alamat homepage, 2 menu dikiri dan 2 menu dikanan.


Mungkin sedikit rumit jika anda tidak mencobanya dan hanya membaca. cobalah secara langsung maka akan terlihat mudah dalam menerapkan cara diatas, sama halnya saat anda mencoba Download Video Youtube dengan Keepvid yang kemarin saya bahas.



Sekian dulu artikel saya yang berkaitan dengan Cara Membuat Menu Horizontal Melayang Diatas Blog. semoga membantu anda dalam membuat blog pribadi ataupun bisnis anda menjadi menarik dan lebih indah. Salam berbagi.
Share this article :

2 komentar:

  1. terimakasih banyaak atas ilmunya :)
    kalau menu dropdownnya gmna caranya ?

    ReplyDelete
    Replies
    1. Terimma kasih kembali sudah mampir, untuk menu drop down, saya belum posting, karena bingung memilih design yang bagus :)

      Delete

Terima Kasih sudah berkunjung,
Berkomentarlah sesuai dengan yang dibahas dan Jangan Memasukkan LINK yaaa..

Salam Berbagi..

 
Support : Google
Copyright © 2013. Cara Baru Andie - All Rights Reserved
Template Created by Creating Website Published by Kompi Ajaib
Proudly powered by Blogger