Tutorial List!

Hey! Hola Hola!
Hoy les enseñare como tener la lista de tus tutoriales o freebies asi:

Si te gusto sigue los siguientes pasos para poder tenerlo.
Colocamos el siguiente codigo en donde ustedes quieran su lista, o en un gadget HTML.
<style>
a.yejuny{
background:url(http://media.tumblr.com/63ac3bd73106fb137241a615541a45e5/tumblr_inline_mjs1cjx50n1qdlkyg.gif);
background-repeat:no-repeat;
background-size:15px;
background-position:left;
padding-left:25px;
color:#444;
margin-bottom:2px;
font:12px arial;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
color:#999;
display:block;
line-height:18px;
}

a.yejuny:hover{
background:url(http://media.tumblr.com/tumblr_m46ltvcl341qdlkyg.gif);
background-repeat:no-repeat;
background-size:15px;
}
.tuto-title{
background:url(http://i.imgur.com/5OiU9JI.png);
text-align:right;
padding:5px;
padding-right:20px;
margin-bottom:10px;
color:#888;
width:250px;
text-transform:uppercase;
font:12px arial;
border:1px solid #eee;
}
</style>
<table style="width:550px;">
<tr><td valign="top">
<div class="tuto-title">
tutorial</div>
<a class="yejuny" href="LINK" >Tutorial :  </a>
<a class="yejuny" href="LINK" >Tutorial :  </a>
<a class="yejuny" href="LINK" >Tutorial :  </a>
<a class="yejuny" href="LINK" >Tutorial :  </a>
<a class="yejuny" href="LINK" >Tutorial :  </a>
</td>

<td valign="top">
<div class="tuto-title">
tutorial</div>
<a class="yejuny" href="LINK" >Tutorial :  </a>
<a class="yejuny" href="LINK" >Tutorial :  </a>
<a class="yejuny" href="LINK" >Tutorial :  </a>
<a class="yejuny" href="LINK" >Tutorial :  </a>
<a class="yejuny" href="LINK" >Tutorial :  </a>
</td>
</tr>
</table>
Eso es todo, luego lo editan, y ya. Pueden cambiar el gif que esta alado y tambien el fondito de la cajita del titulo.
Un beso >.< espero que les haya servido. Bye!!
Creditos a: Wanaseoby

Comentarios

Entradas populares