¿Cómo poner links para tus redes?

Para ayudar a otras chikis a personalizar sus blogs he querido añadir esta pequeña sección donde explicaré cómo he personalizado mi blog. Como primer tutorial quiero explicar como poner los links que deriven a las redes:

Esto es realmente fácil. Os voy a dejar un código para que copiéis y peguéis fácil de editar a vuestro gusto:

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */

/*URL: http://www.dynamicdrive.com/style/ */

.sidebarmenu ul{

width:00;

text align:center;

list-style-type: none;

font: normal 0px Century gothic;

}

.sidebarmenu ul li{

position: relative;

}

/* Top level menu links style */

.sidebarmenu ul li a{

display: block;

overflow: auto; /*force hasLayout in IE7 */

color: white;

text-align:center;

text-decoration: none;

padding: 0px;

}

.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{

background-color: #00000; /*background of tabs (default state)*/}

.sidebarmenu ul li a:visited{

color: white;}

.sidebarmenu ul li a:hover{

background-color: #00000;}

/* Holly Hack for IE \*/

* html .sidebarmenu ul li { float: left; height: 1%; }

* html .sidebarmenu ul li a { height: 1%; }

/* End */

</style>

<script type="text/javascript">

//Nested Side Bar Menu (Mar 20th, 09)

//By Dynamic Drive: http://www.dynamicdrive.com/style/

var menuids=["sidebarmenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas

function initsidebarmenu(){

for (var i=0; i<menuids.length; i++){

var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")

for (var t=0; t<ultags.length; t++){

ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle"

if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu

ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item

else //else if this is a sub level submenu (ul)

ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it

ultags[t].parentNode.onmouseover=function(){

this.getElementsByTagName("ul")[0].style.display="block"

}

ultags[t].parentNode.onmouseout=function(){

this.getElementsByTagName("ul")[0].style.display="none"

}

}

for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars

ultags[t].style.visibility="visible"

ultags[t].style.display="none"

}

}

}

if (window.addEventListener)

window.addEventListener("load", initsidebarmenu, false)

else if (window.attachEvent)

window.attachEvent("onload", initsidebarmenu)

</script>

<div class="sidebarmenu">

<ul id="sidebarmenu1">

<li><a href="URL_DE_TU_RED">Nombre de la red</a></li>

<li><a href="URL_DE_TU_RED">Nombre de la red</a></li>

</ul>

</div>

Vamos a ir paso a paso: primero deberás copiar y pegar este código en las notas para saber bien cómo y qué cambiar: todo lo que esté en un rosa más oscuro es la parte customizable.

Al principio de todo pone "width:00;" esto es el tamaño a lo ancho del gadget por lo que deben ponerlo más pequeño de lo que ocupa tu siderbar.

Después pone "font: normal 0px Century gothic;" esto es el tamaño de la letra, dependiendo de cómo te guste usas una u otra (yo la tengo a 20px).

Más adelante pone "background-color: #00000; /*background of tabs (default state)*/}" (es el color que sale en el botón cuando el cursor NO está encima) y "background-color: #00000;}" (es el color que sale en el botón cuando el cursor ESTÁ encima). Se puede ver los códigos de colores el la página: HTMLcolorcodes

Para la parte que pone "color: white;}" recomiendo solo usar o white o black dependiendo de los colores de fondo que hayas elegido.

Por último la parte de "<li><a href="URL_DE_TU_RED">Nombre de la red</a></li>

<li><a href="URL_DE_TU_RED">Nombre de la red</a></li>" es para agregar tus redes: para eso debes ir a tu perfil en la red que quieras añadir y copiar el enlace. Después vienes al código y lo pegas en la parte que pone URL_DE_TU_RED (importante que no borres las comillas "") y en la parte de "Nombre de la red" escribe la red que sea de ese URL. Recomiendo que lo escribas en mayusculas porque queda más aestetic pero si lo quieres en minúsculas también vale.

Después de tener listo el HTML a tu antojo ve a la parte de diseño de tu blog y busca la parte de sidebar para pegar el código en la función de HTML:

Abre donde pone "añadir un gadget" y busca HTML/JavaScript y copia tu código, después dale a guardar y para ver cómo queda y si tienes que hacer alguna modificación dale al ojo que sale en la parte de abajo de la pantalla a la derecha. Una vez visto puedes comprobar cómo queda y modificar lo que tú quieras.

Una vez terminado acuérdate de dale al botón de guardar que está al lado del ojo.

Esto sería todo por hoy, espero que te sirva el tutorial <3 Si tienes alguna otra duda escríbela en los comentarios!! Nos vemosss