Sebelumnya saya ucapkan selamat datang di blog Oto Website ke pada para teman-teman semuanya!
Di dalam kesempatan yang biasa-biasa ini dan hari yang biasa ini, hehehe... blog O.W alias Oto Website akan update postingan atau share kepada teman-teman O.W semua tentang Menu Slide Melayang Di Bagian Kiri Blog Dengan CSS.
Menu navigasi ini akan melayang dan berada di bagian kiri blogger sobat. Untuk contoh dan lebih jelasnya lagi sobat bisa lihat gambar berikut:


Nah sudah jelaskan? oke kalo begitu sekarang kita akan membahas cara memasangnya di blog sobat, untuk cara memasangnya sendiri sangatlah mudah, sobat bisa ikuti petunjuk berikut ini:

1. Masuk ke akun blogger sobat.

2. Pada menu klick Rancangan ➨ Tambah gadget(saya sarankan di bagian paling bawah dan jangan di beri judul)

3. Lalu pilih elemen HTML/Java Script.

4. Selanjutnya sobat copy kode Css berikut dan paste atau letakkan ke dalam elemen HTML/Java Script tadi.

<style>#facebook-teja,#twitter-teja,#salingsapa-teja,#plurk-teja{text-align:center;-o-transition: all 0.4s ease-in;-moz-transition: all 0.4s ease-in;-webkit-transition: all 0.4s ease-in;z-index: 1000;font-family:arial;width:150px;position: fixed;left:0;margin-left:-120px;border:1px solid #ffffff;background-position:top right no-repeat;padding:5px;font:15px Arial;color:#eee;border-top-right-radius:8px;border-bottom-right-radius:8px;-moz-border-radius-topright:8px;-moz-border-radius-bottomright:8px;-webkit-border-top-right-radius:8px;-webkit-border-bottom-right-radius:8px;}#facebook-teja {background:-moz-linear-gradient(top,#001C5A,#001551);background: -webkit-gradient(linear, left top, left bottom, from(#001C5A), to(#001551));top:350px;}#facebook-teja:hover,#twitter-teja:hover,#salingsapa-teja:hover,#plurk-teja:hover{width:150px;opacity:1.0;margin-left:0;cursor:hand}#facebook-teja a:hover,#facebook-teja a:visited,#twitter-teja a:hover,#twitter-teja a:visited,#salingsapa-teja a:hover,#salingsapa-teja a:visited,#plurk-teja a:visited,#plurk-teja a:hover{text-shadow:none;color:#ffffff}#twitter-teja {background:-moz-linear-gradient(top,#67C9E9,#029BC5);background: -webkit-gradient(linear, left top, left bottom, from(#67C9E9), to(#029BC5));top:382px;}#salingsapa-teja{background: #51A104 -moz-linear-gradient(top,#51A104,#000);background: -webkit-gradient(linear, left top, left bottom, from(#51A104), to(#000));top:414px;}#plurk-teja,#changetejahtc ul li{background: -moz-linear-gradient(top,  #AF0000,  #6B0000);background: -webkit-gradient(linear, left top, left bottom, from(#AF0000), to(#6B0000));}#plurk-teja {top:446px;}</style>
<div id='plurk-teja'><a href='#'target='_blank'>Menu 4</a></div>
<div id='salingsapa-teja'><a href='#'target='_blank'>Menu 3</a></div>
<div id='facebook-teja'><a href='#'target='_blank'>Menu 1</a></div>
<div id='twitter-teja'><a href='#'target='_blank'>Menu 2</a></div>

5. Simpan.

Sekarang sobat bisa lihat hasilnya!

Keterangan:
  • Ganti tanda # dengan Url tujuan
  • Ganti teks Menu dengan nama tujuan url.
Saya rasa cukup untuk kali ini, silahkan tinggalkan tanggapan atau komentar sobat tentang postingan atau articles di atas!

Posting Komentar Blogger Disqus

  1. mas saya pingin pasang widget ini tapi gimana caranya agar menu melayang ini berada disebelah kiri atas blog mohonpetunjuknya

    BalasHapus
  2. @I Wayan SukantaSilahkan gunakan kode berikut

    <style>#facebook-teja,#twitter-teja,#salingsapa-teja,#plurk-teja{text-align:center;-o-transition: all 0.4s ease-in;-moz-transition: all 0.4s ease-in;-webkit-transition: all 0.4s ease-in;z-index: 1000;font-family:arial;width:150px;position: top;left:0;margin-left:-120px;border:1px solid #ffffff;background-position:top right no-repeat;padding:5px;font:15px Arial;color:#eee;border-top-right-radius:8px;border-bottom-right-radius:8px;-moz-border-radius-topright:8px;-moz-border-radius-bottomright:8px;-webkit-border-top-right-radius:8px;-webkit-border-bottom-right-radius:8px;}#facebook-teja {background:-moz-linear-gradient(top,#001C5A,#001551);background: -webkit-gradient(linear, left top, left bottom, from(#001C5A), to(#001551));top:350px;}#facebook-teja:hover,#twitter-teja:hover,#salingsapa-teja:hover,#plurk-teja:hover{width:150px;opacity:1.0;margin-left:0;cursor:hand}#facebook-teja a:hover,#facebook-teja a:visited,#twitter-teja a:hover,#twitter-teja a:visited,#salingsapa-teja a:hover,#salingsapa-teja a:visited,#plurk-teja a:visited,#plurk-teja a:hover{text-shadow:none;color:#ffffff}#twitter-teja {background:-moz-linear-gradient(top,#67C9E9,#029BC5);background: -webkit-gradient(linear, left top, left bottom, from(#67C9E9), to(#029BC5));top:382px;}#salingsapa-teja{background: #51A104 -moz-linear-gradient(top,#51A104,#000);background: -webkit-gradient(linear, left top, left bottom, from(#51A104), to(#000));top:414px;}#plurk-teja,#changetejahtc ul li{background: -moz-linear-gradient(top, #AF0000, #6B0000);background: -webkit-gradient(linear, left top, left bottom, from(#AF0000), to(#6B0000));}#plurk-teja {top:446px;}</style>
    <div id='plurk-teja'><a href='#'target='_blank'>Menu 4</a></div>
    <div id='salingsapa-teja'><a href='#'target='_blank'>Menu 3</a></div>
    <div id='facebook-teja'><a href='#'target='_blank'>Menu 1</a></div>
    <div id='twitter-teja'><a href='#'target='_blank'>Menu 2</a></div>​

    BalasHapus
  3. Mantap Bro Menu di samping kiri blog

    BalasHapus
  4. mas kalo mau nambahin menu lagi byar jadi 6 gmana yha

    BalasHapus
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