Menu Slide Melayang Di Bagian Kiri Blog Dengan CSS

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:

Contoh Menu Slide Melayang Di Bagian Kiri Blog Dengan CSS

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!