【Tutorial blogger】Menu flotante

¡Hola a todos y bienvenidos a una nueva entrada! Hoy os traigo un menú flotante súper bonito, espero que os guste un montón. ¡Empecemos! (Créditos aquí)

Añadir gadget > html

Y pegáis este código, pero antes, editadlo y poned los links.

<style> .raejun{ width:96px; padding:2px; margin-top:5px; box-shadow:2px 2px 4px #C0FFC7; background:#AEAEAE; font:8px tt; text-align:center; Text-decoration:none; color:#EED0FF; text-transform:uppercase; display:block; -webkit-transition:All 0.5s ease; -moz-transition:All 0.5s ease; -o-transition:All 0.5s ease; border-left:0px solid #EED0FF; } .raejun:hover{ width:66px; border-left:30px solid #EED0FF; } @font-face { font-family:tt !important; src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf') !important; } </style><div style="background:#eee;color:#fff; position:fixed; top:0px;left:35px;width:10px;height:100px; box-shadow:2px 2px 6px #ddd; text-align:center; font-size:12px; text-transform:uppercase;"></div><div style="background:#eee;color:#fff; position:fixed; top:0px;left:90px;width:10px;height:100px; box-shadow:2px 2px 6px #ddd; text-align:center; font-size:12px; text-transform:uppercase;"></div><div style="position:fixed; top:100px;left:20px;width:100px; color:#aaa;"><div style="background:#EED0FF;color:#fff;width:100px; box-shadow:2px 2px 4px #bbb;text-align:center; font-size:12px; text-transform:uppercase;">Menu!</div><img src="http://25.media.tumblr.com/tumblr_lxyrga8ApT1qh0onho1_500.jpg" style="width:80px;border:10px solid #eee;margin-top:5px;box-shadow:2px 2px 4px #ddd;" /><a class="raejun" href="LINK HERE">link 1</a><a class="raejun" href="LINK HERE">link 2</a><a class="raejun" href="LINK HERE">link 3</a><a class="raejun" href="LINK HERE">link 4</a></div>

Como veis es precioso, si tenéis cualquier duda dejad un comentario y yo lo contestare encantada. Nos vemos en la próxima entrada, ¡Adiós!