Menu Vertical Fandra Juani

Menu Vertical Fandra Juani. Menu vertical ini berisi goresan pena dengan warna yang berbeda disetiap hurufnya, ditambah dengan icon disamping kirinya. Icon yang dipasang dibentuk dengan bentuk bulat. Dan saat 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 instruksi 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=" Menu vertical ini berisi goresan pena dengan warna yang berbeda disetiap hurufnya Menu Vertical Fandra Juani" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGR3WWXdo9oqDs8yo5GrU7asxr5OYRJPsunQ8lb-lTXZi5PCArjlRPuVsGpyK0P1XasJcWr-ULWoCd7BTa8hzip9IbA7cWF2p6ua32ttncb1rZDLJ7OUrpAGaPBC30ejjg7WGUusFjCAT1/s128/fandra-juani.jpg' width='32' height='32' title="Menu Vertical Fandra Juani"/><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=" Menu vertical ini berisi goresan pena dengan warna yang berbeda disetiap hurufnya Menu Vertical Fandra Juani"src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfFG9eZV18aTznOl4jUwK1RAtSxpYc_CQpVDaAwQeFgS4TnaZi3fUWR66GQ0fXZfWg2P-pGD-RUlTfalFhflL5J-ofmPLrPv2HOknhdqa2QbNjRFal4Zay3hE-87D8AVvjI_OH9g81jBKR/s128/Fb.jpg' width='32' height='32' title="Menu Vertical 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=" Menu vertical ini berisi goresan pena dengan warna yang berbeda disetiap hurufnya Menu Vertical Fandra Juani" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvzRND24_zjyeBdzNSkolAo8llfXx0kodJF8boUkjvFZE_IsPzRnHU-OkDAvTwqwC4DD3V3MiWI7FGQ-giNh1ciuB3Kvuq910P0WEXhBXA020dUhsSLHrQ3uV2T3JwsLZTwDY5TcdPvszb/s128/Twitter.jpg' width='32' height='32' title="Menu Vertical 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=' ">Membuat sajian vertical sederhana.
Tulisan dengan warna yang berbeda. 
Membuat icon sendiri untuk website. 
Cara upload dan ambil URL Gambar.
Membuat gambar bentuk lingkaran diblog.
Membuat gambar berputar diblog.

Silakan berkreasi, dan agar dapat bermanfaat untuk anda.