Pertemuan kali ini kita akan membahas bersama-sama tentang bagaimana caranya kita membuat sebuah menu navigasi atau juga elemen menu page yang awamnya kita ketahui pada weblog atau website yang biasanya kita ketahui pada setiap website dan yang pernah di posting kan pada session sebelum yaitu Cara membuat menu page atau laman pada blog pasti ada yang namanya sebuah page atau scroll berupa horisontal yang mana memudahkan para pencari informasi untuk mencari informasi lewat scroll navigasi tersebut lebih mudah dan cepat sehingga para pencari informasi akan terus berkunjung ke website kita dan selama kita juga aktif dalam menampilkan postingan yang baik dan bermanfaat. Dan perlu Ada dua sifat CSS yaitu internal dan eksternal.Jika internal yang dipilih, maka skrip itu dimasukkan secara langsung ke halaman website yang akan didesain. Kalau halaman web yang lain akan didesain dengan model yang sama, maka skrip CSS itu harus dimasukkan lagi ke dalam halaman web yang lain itu.Sifat yang kedua adalah eksternal di mana skrip CSS dipisahkan dan diletakkan dalam berkas khusus. Nanti, cukup gunakan semacam tautan menuju berkas CSS itu jika halaman web yang didesain akan dibuat seperti model yang ada di skrip tersebut.
Untuk membuat dasar CSS Navigation Bar button pada element HTML sebagai contoh pembuatan seperti dibawah ini yaitu :- Pertama kita baca basmalla dulu lalu login dulu ke akun kita yaitu http://blogger.com
- Kedua, cari ]]></b:skin> dan kemudian copi kode dibawah ini lalu sisipkan kode di bawah ini tepat di atasnya.
height:0px; visibility: hidden; display: none;
}
- Ketiga, sisipkan rangkaian kode CSS berikut ini tepat di atas ]]></b:skin> .
Customisasi Bilah Menu Navigasi Di Atas Header Halaman Blog
Oleh: antelu
Blog: antelu -:[semar diam weblog]:-
URL : http://antelu.blogspot.com/
--------------------------------------------------------------*/
.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);
}
- Keempat, cari kode <body dan kemudian sisipkan rangkaian kode dengan format seperti contoh berikut ini tepat di bawahnya.
<div class='kolom-utama'>
<div class='kolom-menu'>
<ul>
<li><a href='http://antelu.blogspot.com/'><img alt='home' height='15px' src='https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQAM4Cza1-Mf9f56z0L9Wq20A463uOt5_Rv_sstLwEbUQLKjXI_LA' width='20px'/></a></li>
<li><a href='http://antelu.blogspot.com/p/site-map.html'>Privacy</a></li>
<li><a href='http://antelu.blogspot.com/p/tanya-jawab.html'>Tanya Jawab</a></li>
</ul>
</div>
<div class='kolom-menu'>
<ul style='float: right'>
<li><a href='https://plus.google.com/108762507176753769262/posts'>About me</a></li>
<li><a href='http://antelu.blogspot.com/p/contact-us.html'>contact Us</a></li>
</ul>
</div>
</div>
</div>
Untuk warna biru kita ganti tautan atau link kita masing dan untuk warna merah kita ganti dengan nama dari nama menu kita yang sesuai keinginan kita juga.
*Semoga bermanfaat
1 comments:
thanks postingannya ini min...
solder infrared
EmoticonEmoticon