Membuat Vertikal Menu Di blog dengan HTML/Javascript

Anak Indonesia, Teman - teman jumpa lagi kita di postingan terbaru saya nih . kali ini saya mau ngebahas tentang cara ngebuat Vertical menu di blogger menggunakan metode HTML/Javascript. mungkin ada yang mau blog nya keliahatan lebih menarik sehingga ingin menambahkan widget vertical menu .

Nah vertical menu yang akan saya berikan bentuk contohnya seperti gambar di bawah.

contoh vertical menu

Gambar di atas adalah contoh vertical menu yang akan jadi ketika kita memasukkan kode HTML/Javascript.

Kita langsung aja ke langkah - langkah nya

1. log in ke blogger
2. buka dashbor blogger dan pilih tata letak
3. setelah pilih tata letak klik tambah widget dan pilih HTML/Javascript
4. setelah terbuka masukkan coding di bawah ini

<style>

#vertical{background:transparent;height:150px}

#vertical ul{float:left}

#vertical ul li{width:200px;float:left;list-style:none}

#vertical ul li span{float:left;font-family:Trebuchet;text-transform:uppercase;font-size:14px;padding:0 0 0 10px;text-shadow:2px 2px 5px #1780dd;font-weight:bold}

r{color:red}

b{color:blue}

p{color:pink}

c{color:black}

l{font-size:180%;color:violet}

d{color:DarkCyan}

y{color:yellow}

x{font-size:180%;color:#3af}

#vertical ul li span:hover{padding:0 0 0 20px}

#vertical ul li img{padding:0;border-radius:100px;-moz-border-radius:100px;-webkit-border-radius:100px;float:left;position:relative;-moz-transition:all .8s ease-in-out;-ms-transition:all .8s ease-in-out;-o-transition:all .8s ease-in-out;-webkit-transition:all .1s ease-in-out;transition:all .8s ease-in-out}

#vertical ul li img:hover{-o-transform:scale(1) rotate(360deg);-moz-transform:scale(1) rotate(360deg);-webkit-transform:scale(1) rotate(360deg)}</style>

<div id='vertical'>

<ul>

<li><a href='link tujuan' title='judulnya'><img alt="judul ketika cursor di arahkan ke menu" src='URL  gambar yg mau di jadiin icon di vertical menu' width='32' height='32' title=""/><span><y>Judul Yang Ingin Di tampilkan</y></span></a></li>

</ul>

</div>

 

  5.  Setelah itu save dan atur letaknya dimana kemudian simpan setelan

Nah, penjelasan buat yang warna merah itu kalian ganti sesuai dengan kata - katanya . untuk yang berwarna biru itu adalah warna yang akan di pakai untuk mewarnai tulisan . di dapat dari variabel warna yang udah di buat di atas dengan huruf r, p, b, c dan lain - lain . untuk variabel warna bisa kalian tambahkan sendiri.

Selamat Mencoba teman - teman , kalau ada yang bingung atau scriptnya tidak bisa di gunakan silahkan komentar di bawah . tapi ingat jangan SARA atau Negatif.

Salam dari Anak Indonesia