Eliop
Lambda
Verificación en dos pasos activada
Hola amigos de forobeta.
Pues hoy le traigo un pequeño tutorial a los usuarios de blogger, para crear el botón deslizante al costado de la pagina un ejemplo es el de mi pagina, pueden verla Enlace eliminado dice here.
Nota: antes de empezar quiero aclarar que no hice el código, lo escogí de la web Ciudad Blogger.
Es algo sencillo, pero primero debemos crear el cuadro que aparecerá, pueden usar alguna pestaña de twitter, facebook o hacer una imagen en paint, si sabéis usar el fotoshop aun mas podrán hacer algo excelente no como la mía que la hice horrible con (Macromedia firework) XD.
El ancho recomendable es : 28.
El alto ya es opcional yo le puse 190 pero ya es como ustedes lo quieran.
Nota2: Recuerden hacer una copia de seguridad se su plantilla, por si acaso.
Cuando tengan todo a mano, entran a su blogger y se dirigen
Diseño > Edición de HTML.
Con la ayuda de Ctr + F ubicamos en el código ]]></b:skin> y justo antes pegamos este código
Para desmenuzar este código se los explico aquí mismo. Lo único que debemos cambiar (Opcional mente) es
Bueno despues que hemos ubicado nuestro primer codigo, con la misma ayuda de Ctr+F buscamos </head> y justo antes pegamos.
Como no halle nada que hacer en este seguimos al siguiente.
Ahora ubicamos </body> y justo antes pegamos
Bueno creo que en este ultimo tema, es obvio lo que debemos hacer pero bueno 🙂 les digo
Esto es los links. Ejemplo:
<li><a href='http://forobeta.com'>Forobeta</a></li>
Si le dan a vista previa se fijaran que tiene otro diseño que dice menú, es opcional quedarse con ese.
Se acuerda cuando les dije que hagan su barra?.
Pues la vamos a sustituir la que dice menú, por la que hemos hecho.
Ubicamos esta linea, que esta en el tercer código de arriba.
Esta de color verde el link, ahi solo deben sustituir por el link de la imagen que ustedes crearon y listo 🙂.
Espero verles ayudado, si hallan un erro decidme.
🙂
Saludos amigos.
EDIT1
Navegando por la web, me encontre esto
Un pajarito muy lindo el de twiter que navega contigo y al darle click se dirige a tu twitter.
Puedes ver un ejemplo en la pagina que esta en mi firma, dura unos 10 o 15 segunditos en salir no se desesperen, se hace así para no distraer al instante al visitante.
Bueno para añadirlo solamente necesitamos añadir un gadget (Html/javascript)
Y añadirlo en cualquier lado no importa donde.
El código es
Lo unico que deben cambiar para que al darle click sea dirigido a sus paginas de twitter es
http://pczeros.blogspot.com/2011/06/gadget-pajaro-twitter-volando-blogger.html
Por la de tu twitter.
Nota : Tutorial sacado de http://pczeros.blogspot.com
Es muy lindo en verdad añadanlo.
Saludos
Pues hoy le traigo un pequeño tutorial a los usuarios de blogger, para crear el botón deslizante al costado de la pagina un ejemplo es el de mi pagina, pueden verla Enlace eliminado dice here.
Nota: antes de empezar quiero aclarar que no hice el código, lo escogí de la web Ciudad Blogger.
Es algo sencillo, pero primero debemos crear el cuadro que aparecerá, pueden usar alguna pestaña de twitter, facebook o hacer una imagen en paint, si sabéis usar el fotoshop aun mas podrán hacer algo excelente no como la mía que la hice horrible con (Macromedia firework) XD.
El ancho recomendable es : 28.
El alto ya es opcional yo le puse 190 pero ya es como ustedes lo quieran.
Nota2: Recuerden hacer una copia de seguridad se su plantilla, por si acaso.
Cuando tengan todo a mano, entran a su blogger y se dirigen
Diseño > Edición de HTML.
Con la ayuda de Ctr + F ubicamos en el código ]]></b:skin> y justo antes pegamos este código
Insertar CODE, HTML o PHP:
#sideBar{
text-align:left;
}
#sideBar h3{
margin:10px 10px 10px 10px;
color:#FFFFFF;
font-size:110%;
font-family:arial;
font-weight:bold !important;
}
#sideBar h3 span{
font-size:125%;
font-weight:normal !important;
}
#sideBar ul{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
#sideBar li{
margin:0px 10px 3px 10px;
padding:2px;
list-style-type:none;
display:block;
background-color:#DA1074;
width:177px;
color:#FFFFFF;
}
#sideBar li a{
width:100%;
}
#sideBar li a:link,
#sideBar li a:visited{
color:#FFFFFF;
font-family:verdana;
font-size:100%;
text-decoration:none;
display:block;
margin:0px 0px 0px 0px;
padding:0px;
width:100%;
}
#sideBar li a:hover{
color:#FFFFFF;
text-decoration:underline;
}
#sideBar{
position: fixed;
width: auto;
height: auto;
top: 140px;
right:0px;
background-image: url(http://4.bp.blogspot.com/_dsEG33PDaHw/TJgkQYRg-WI/AAAAAAAAAXI/PIf482FPBBg/s1600/background.png);
background-position:top left;
background-repeat:repeat-y;
}
#sideBarTab{
float:left;
height:137px;
width:28px;
}
#sideBarTab img{
border:0;
}
#sideBarContents{
float:left;
overflow:hidden !important;
width:200px;
height:320px;
}
#sideBarContentsInner{
width:200px;
}Para desmenuzar este código se los explico aquí mismo. Lo único que debemos cambiar (Opcional mente) es
Bueno despues que hemos ubicado nuestro primer codigo, con la misma ayuda de Ctr+F buscamos </head> y justo antes pegamos.
Insertar CODE, HTML o PHP:
<script src='http://www.google.com/jsapi'/>
<script>
google.load("prototype","1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>
<script type='text/javascript'>
var isExtended = 0;
function slideSideBar(){
new Effect.toggle('sideBarContents', 'blind', {scaleX: 'true', scaleY: 'true;', scaleContent: false});
if(isExtended==0){
new Effect.Fade('sideBarContents',
{ duration:1.0, from:0.0, to:1.0 });
isExtended++;
}
else{
new Effect.Fade('sideBarContents',
{ duration:1.0, from:1.0, to:0.0 });
isExtended=0;
}}
function init(){
Event.observe('sideBarTab', 'click', slideSideBar, true);
}
Event.observe(window, 'load', init, true);
</script>Como no halle nada que hacer en este seguimos al siguiente.
Ahora ubicamos </body> y justo antes pegamos
Insertar CODE, HTML o PHP:
<div id='sideBar'>
<a href='javascript:void(0)' id='sideBarTab'><img alt='sideBar' src='http://3.bp.blogspot.com/_dsEG33PDaHw/TJgkmFY8Q5I/AAAAAAAAAXQ/jvq54RD-IZI/s1600/slide-button.gif' title='sideBar'/></a>
<div id='sideBarContents' style='display:none;'>
<div id='sideBarContentsInner'>
<h3><span>Contenido</span></h3>
<ul>
<li><a href='URL del enlace'>Pestaña 1</a></li>
<li><a href='URL del enlace'>Pestaña 2</a></li>
<li><a href='URL del enlace'>Pestaña 3</a></li>
<li><a href='URL del enlace'>Pestaña 4</a></li>
<li><a href='URL del enlace'>Pestaña 5</a></li>
<li><a href='URL del enlace'>Pestaña 6</a></li>
</ul>
</div>
</div>
</div>Bueno creo que en este ultimo tema, es obvio lo que debemos hacer pero bueno 🙂 les digo
Es para cuando le des click a la barra aparezca el tema.
Esto es los links. Ejemplo:
<li><a href='http://forobeta.com'>Forobeta</a></li>
Si le dan a vista previa se fijaran que tiene otro diseño que dice menú, es opcional quedarse con ese.
Se acuerda cuando les dije que hagan su barra?.
Pues la vamos a sustituir la que dice menú, por la que hemos hecho.
Ubicamos esta linea, que esta en el tercer código de arriba.
Esta de color verde el link, ahi solo deben sustituir por el link de la imagen que ustedes crearon y listo 🙂.
Espero verles ayudado, si hallan un erro decidme.
🙂
Saludos amigos.
EDIT1
Navegando por la web, me encontre esto
Un pajarito muy lindo el de twiter que navega contigo y al darle click se dirige a tu twitter.
Puedes ver un ejemplo en la pagina que esta en mi firma, dura unos 10 o 15 segunditos en salir no se desesperen, se hace así para no distraer al instante al visitante.
Bueno para añadirlo solamente necesitamos añadir un gadget (Html/javascript)
Y añadirlo en cualquier lado no importa donde.
El código es
PHP:
<script src="https://sites.google.com/site/pczeros/Home/pajaritoTwitterVolador.js" type="text/javascript"></script><script type="text/javascript">var birdSprite='https://sites.google.com/site/pczeros/Home/pajaritoTwitterVolando.png';var targetElems=new Array('img','hr','table','td','div','input','textarea','button','select','ul','ol','li','h1','h2','h3','h4','p','code','object','a','b','strong','span');var twitterAccount = 'http://pczeros.blogspot.com/2011/06/gadget-pajaro-twitter-volando-blogger.html';var twitterThisText ='';tripleflapInit();</script>Lo unico que deben cambiar para que al darle click sea dirigido a sus paginas de twitter es
http://pczeros.blogspot.com/2011/06/gadget-pajaro-twitter-volando-blogger.html
Por la de tu twitter.
Nota : Tutorial sacado de http://pczeros.blogspot.com
Es muy lindo en verdad añadanlo.
Saludos
Última edición:
