Menu Vertical Fandra Juani

Menu Vertical Fandra Juani. Menu vertical ini berisi tulisan dengan warna yang berbeda disetiap hurufnya, ditambah dengan icon disamping kirinya. Icon yang dipasang dibuat dengan bentuk bulat. Dan ketika disentuh kursor mouse icon tersebut akan berputar.

• Fandra Juani
• Facebook
• Twitter
• Google +

Cara membuatnya ikuti langkah² dibawah ini.

1. Login ke blogger, dari halaman dasbor pilih pengaturan tata letak.
2. Selanjutnya, pilih tambahkan Gadget, dan pilih HTML/Javascript. Lalu masukan kode dibawah ini.
<style>
#tentang{background:transparent;height:150px}
#tentang ul{float:left}
#tentang ul li{width:200px;float:left;list-style:none}
#tentang 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}
d{font-size:180%;color:DarkCyan}
g{color:red}
h{color:blue}
i{color:#ee3e80}
j{color:pink}
k{color:black}
l{font-size:180%;color:violet}
m{color:DarkCyan}
n{color:blue}
o{color:pink}
r{color:red}
t{font-size:180%;color:yellow}
x{font-size:180%;color:#3af}
#tentang ul li span:hover{padding:0 0 0 20px}
#tentang 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}
#tentang 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='tentang'>
<ul>
<li><a href='http://fandrajuani.blogspot.com/p/blog-page_25.html' title='Fandra Juani'><img alt="Tentang Fandra Juani" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu7FuqBaZN5KpWnybXQvigJCU2Eq5dI6WMp0ik8HojoXkisWlKHz2CJ9PejDllnd42DjHzXdRwSFMKaVZGzkjXyBujkgWTmx3gZNzZ1X5CroRdTKq9uuyCLHtxVdBQ2RZcrVAkkfBTrXlL/s128/fandra-juani.jpg' width='32' height='32' title="About Me"/><span><d>F</d><g>a</g><h>n</h><i>d</i><j>r</j><k>a</k> <l>J</l><m>u</m><n>a</n><o>n</o><r>i</r></span></a></li>

<li><a href='https://www.facebook.com/fandra.juani'title='My Facebook'><img alt="fandra juani"src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdqGRTnQSxFRDV21V1JHZGoFTFLbrTZQoOS8Xz1yW7SBZqvjj710MsoqJ0i65OZqJyMatIoCNwa_qVJddTyCdhDyzDEYuk_ViyEHHKl-bRVpsVwqBasow7z0jYkWchZmzultwsVTeYRq3t/s128/Fb.jpg' width='32' height='32' title="Facebook Fandra Juani"/><span><t>F</t>a<h>c</h><g>e</g><j>b</j><m>o</m><r>o</r><h>k</h></span></a></li>

<li><a href='https://twitter.com/fandrajuani' title='My Twitter'><img alt="fandra juani" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvzjBrRqY1UVsmgrINbLuXdOyQkNs8m3KNk9nbiJF8EJrzudLP4XA0VtbgL20BGtQLQXW5zmyPMs1zF3wEwgCtXhfbAcdNBiAURMd8Yk5gJ6VeDMYGs_wTTp6fA8nySsRK7z54tfbLZjha/s128/Twitter.jpg' width='32' height='32' title="Twitter Fandra Juani"/><span><x>T</x><o>w</o><m>i</m>t<j>t</j><h>e</h><r>r</r></span></a></li>

<li><a href='https://plus.google.com/u/0/110277074823916598610/posts' title='My Google+'><img alt="fandra juani" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA102vNnyI_6ikIV0ShzN6EQnKKRtBQ2ANfMNqFWPVkUSUj-8PcPBKTJDno252jHnpD4cW_T5WFxRZyI1KDxETINxwBiNERUp3_uQhOcbtiDhG0MkTHXyoqVVOlMf337nC1A0zjJkREX6c/s32/G%252B.jpg' width='32' height='32' title="Google+ Fandra Juani"/><span><l>G</l><h>o</h><r>o</r><m>g</m><k>l</k><h>e</h> <g>+</g></span></a></li>
</ul>
</div>
3. Save Gadget, Selesai.

Keterangan Kode:  #tentang{background:transparent;height:150px}atur tinggi menu vertical sesuai dengan tinggi dari menu kalian.

Keterangan kode lainnya, bisa di pelajari pada daftar artikel dibawah ini.

1. Membuat menu vertical sederhana.
2. Tulisan dengan warna yang berbeda. 
3. Membuat icon sendiri untuk website. 
4. Cara upload dan ambil URL Gambar.
5. Membuat gambar bentuk bulat diblog.
6. Membuat gambar berputar diblog.

Silakan berkreasi, dan semoga bisa bermanfaat untuk anda.

Tweet