Setiap blog / situs web harus dan wajib memiliki menu horizontal / vertikal di atas blog yang membantu pembaca untuk dengan mudah menavigasi melalui blog Anda, juga membantu Anda untuk mengatur link penting Anda pada menu. Sekarang saya akan berbagi menu horisontal indah yang bekerja murni dengan CSS3 dan dirancang oleh dynamicdrive.

Ketika melayang setiap menu di atasnya akan muncul batu bata pada link yang meningkatkan keindahan menu ini, saya juga sangat suka :) Seperti yang saya sebutkan keuntungan terbesar dari menu ini adalah bekerja dengan hanya CSS3 , tidak ada gambar apapun tunggal digunakan dalam menu ini juga bata melayang-layang terbuat dengan CSS3. Bekerja dengan CSS3 hanya memiliki beberapa limitations. Jadi adalah satu gol dari titik menu ini bukan menu drop down itu adalah tunggal horisontal menu: ( Hal ini baik untuk blog kecil yang memiliki jumlah kurang dari links. Jadi tanpa menunggu lagi mari kita lansung bahas Horizontal Menu Horizontal Menu Hanya Menggunakan CSS3, sebelumnya lihat dulu demonya di bawah ini.

Live Menu Demo ▼



Cara Membuat Horizontal Menu Horizontal Menu Hanya Menggunakan CSS3


Berikut ini adalah Cara Membuat Horizontal Menu Horizontal Menu Hanya Menggunakan CSS3 yang sangat mudah dan simple. Silahkan ikuti petunjuk untuk mulai memasangnya pada blogger Anda.

1. Login ke Akun blogger Anda.

2. Pada Dabor klick Tata Letak ➨ Tambah Gadget ➨ Pilih elemen HTML/Java Script.

3. Penempatan Gadget tersebut seperti gambar berikut.


4. Sekarang copy kode berikut ini dan paste atau letakkan di elemen HTML/Java Script tadi.

tambah gadget
<style type="text/css">

/* Only CSS3 Horizontal Menu For Blogger By http://www.otowebsite.blogspot.com/ */

div.topbar {
 height: 16px;
 background: #e16031;
}

ul.claybricks {
 font-weight: bold;
 width: 100%;
 background: #e3e490;
 padding: 6px 0 6px 0;
 margin: 0;
 text-align: left;
        font-family: calibri;
}

ul.claybricks li {
 display: inline;
}

ul.claybricks li a {
 color: black;
 padding: 6px 8px 4px 8px;
 margin-right: 20px;
 text-decoration: none;
}

ul.claybricks li a:hover, ul.claybricks li a.selected {
 color: white;
 background: #5d4137;
 background: -moz-linear-gradient(top, #5d4137 0%, #41251b 12%, #2c0f05 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5d4137), color-stop(12%,#41251b), color-stop(100%,#2c0f05));
 background: -webkit-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
 background: -o-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
 background: -ms-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
 background: linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5d4137', endColorstr='#2c0f05',GradientType=0 );
 -moz-box-shadow: 0 0 5px #595959;
 -webkit-box-shadow: 0 0 5px #595959;
 box-shadow: 0 0 5px #595959;
 padding-top: 17px;
 padding-bottom: 6px;
}

/* Only CSS3 Horizontal Menu For Blogger By http://www.otowebsite.blogspot.com/ */

</style>



<div class="topbar">
</div>
<ul class="claybricks">
 <li><a href="http://www.otowebsite.blogspot.com/">Home</a></li>
 <li><a href="#">CSS Codes</a></li>
 <li><a href="#">Forums</a></li>
 <li><a href="#">JavaScript</a></li>
 <li><a href="#">Gallery</a></li>
 <li><a href="http://www.otowebsite.blogspot.com/">Blogger Widgets</a></li>
</ul>

5. Simpan.

Dari kode di atas ada yang beberapa kode yang harus Anda ganti.
  • Ganti teks yang di block merah dengan Url/Link Anda.
  • Ganti teks yang di block hijau dengan nama menu Anda.
Saya rasa cukup untuk kali ini silahkan tinggalakan tanggapan atau komentar Anda tentang tutorial di atas.

Poskan Komentar Blogger Disqus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.

Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Konversi Kode di Sini! Daftar Member Aktif

 
Top