›

Cara Membuat Menu Bar Keren Dengan CSS3 Pada Blog

Cara membuat bilah menu keren dengan CSS3 di blog - Assalamualaikum Teman anaksmanda, sebelumnya meminta maaf karena telah lama tidak aktif lagi , karena kehadiran di dunia nyata. Nah, kali ini, saya akan berbagi sedikit pengetahuan tentang cara membuat bilah menu keren dengan CSS3 di blog. Bilah menu sangat penting di Blogger. Karena itu membantu untuk menavigasi blog atau situs web Anda dengan mudah. Ini memungkinkan pengunjung blog Anda untuk dengan mudah menemukan apa yang mereka cari di blog Anda. Dalam tutorial ini saya akan menjelaskan bagaimana cara menambahkan bilah menu CSS3 ke blogger.

Jika Anda ingin menggunakan bilah menu ini di blog Anda, ikuti langkah-langkah ini:
  1. Masuk ke akun blog sobat.
  2. Pilih Template =>> Edit HTML.
  3. Kemudian cari kode ]]></b:skin> ( Untuk mempercepat pencarian gunakan Ctrl+F di kotak script Edit HTML).
  4. Copy kode dibawah ini, kemudian Paste tepat diatas kode ]]></b:skin>.
    @import url(http://fonts.googleapis.com/css?family=Open+Sans:600); /* Menu CSS */ #cssmenu, #cssmenu > ul{ background:#24459A; padding-bottom: 3px; font-family: 'Open Sans', sans-serif; font-weight: 600; } #cssmenu:before, #cssmenu:after, #cssmenu > ul:before, #cssmenu > ul:after { content: ''; display: table; } #cssmenu:after, #cssmenu > ul:after { clear: both; } #cssmenu { zoom:1; } #cssmenu > ul{ background:black; margin: 0; padding: 0; position: relative; } #cssmenu > ul li{ margin: 0; padding: 0; list-style: none; } #cssmenu > ul > li{ float: left; position: relative; } #cssmenu > ul > li > a{ padding: 23px 26px; display: block; color: white; font-size: 13px; text-decoration: none; text-transform: uppercase; text-shadow: 0 -1px 0 #0d0d0d; text-shadow: 0 -1px 0 rgba(0, 0, 0, .70); line-height: 18px; } #cssmenu > ul > li:hover > a{ background:#24459A; text-shadow: 0 -1px 0 #97321f; text-shadow: 0 -1px 0 rgba(122, 42, 26, .64); } #cssmenu > ul > li > a > span{ line-height: 18px; } #cssmenu > ul > li.active > a, #cssmenu > ul > li > a:active{ background: #24459A; } /* Childs */ #cssmenu > ul ul{ opacity: 0; visibility: hidden; position: absolute; top: 120px; background:black; margin: 0; padding: 0; z-index: -1; -webkit-transition: all .35s .2s ease-in-out; -moz-transition: all .35s .2s ease-in-out; -ms-transition: all .35s .2s ease-in-out; transition: all .35s .2s ease-in-out; } #cssmenu > ul li:hover ul{ opacity: 1; visibility: visible; margin: 0; color: #000; z-index: 2; top:64px; left: 0; } #cssmenu > ul ul:before{ content: ''; position: absolute; top: -10px; width: 100%; height: 20px; background: transparent; } #cssmenu > ul ul li{ list-style: none; padding: 0; margin: 0; width: 100%; } #cssmenu > ul ul li a{ padding: 18px 26px; display: block; color: white; font-size: 13px; text-decoration: none; text-transform: uppercase; width: 150px; border-left: 4px solid transparent; -webkit-transition: all .35s ease-in-out; -moz-transition: all .35s ease-in-out; -ms-transition: all .35s ease-in-out; transition: all .35s ease-in-out; } #cssmenu > ul ul li a:hover{ background:#24459A; } #cssmenu > ul ul li a:active{ background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijySrUpJq5zGijce03xY0psSEsx9sVd3LZxxs384NtTMQaxakRtrel17Tb3EcVj6cLv8R-sAJHjBzr8zyI1YBCxaaoL3DYF9LJyI8bZyF6rOBhQZ0VD4fg-GuTWbHtOsI_94Ceu3b3TAQ/s1600/menu-bg.png) repeat; }menu > ul > li > ul > li > ul{ left: 202px; top: 1px; width: 200px; } #cssmenu > ul > li > ul > li > ul > li{ float: none; }
  5. Simpan Template.
  6. Kemudian Pilih Tata Letak =>> Add Gedget / Tambahkan Gedget.
  7. Pilih HTML/Javascript.
  8. Kemudian Copy kode dibawah ini dan Paste di HTML/Javascript.
    <div id="cssmenu">
    <ul>
    <li class="active "><a href="#"><span>Home</span></a></li>
    <li class="has-sub "><a href="#"><span>Templates</span></a>
    <ul>
    <li><a href="#"><span>Blogger</span></a></li>
    <li><a href="#"><span>WordPress</span></a></li>
    </ul>
    </li>
    <li><a href="#"><span>Write For Us</span></a></li>
    <li><a href="#"><span>Sitemap</span></a></li>
    <li><a href="#"><span>Contact</span></a></li>
    <li><a href="#"><span>Privacy</span></a></li>
    <li><a rel="author" href="#"><span>About</span></a></li>
    </ul>
    </div>
  9. Ganti kode yang berwarna Biru dengan URL Link yang sobat inginkan. Kode yang berwarna Merah adalah judul / nama Navigasi sobat.
  10. Simpan HTML/Javascript.

Demikian artikel Cara Membuat Menu Bar Keren Dengan CSS3 Pada Blog. Jika sobat mengalami kesusahan / bingung dalam pemasangan, silahkan berkomentar di kolom komentar, nanti saya bantu untuk solusinya. Semoga artikel ini dapat bermanfaat untuk sobat blogger. Salam Blogger.