lunes, 18 de marzo de 2013 @ 7:51
2 +
Dos cbox deslizantes+iconos cbox
¡Hola! Traigo dos tutoriales de cbox deslizables y algunos iconos de cbox. Los dejo aquí.
1. Cbox flotante sin fondo (como la tengo yo).
En un gadget HTML/Javascript se copia lo siguiente:
<center><style type="text/css">#at{position:fixed;right:250px;z-index:+1000;}* html #at{position:relative;}.attab{height:100px;width:30px;float:left;cursor:pointer;background:url();}.atcontent{float:left;border:none;background: repeat-x bottom center scroll ;-moz-border-radius:20px;padding:10px;}</style><script type="text/javascript">function showHideAT(){var at = document.getElementById("at");var w = at.offsetWidth;at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);at.opened = !at.opened;}function moveAT(x0, xf){var at = document.getElementById("at");var dx = Math.abs(x0-xf) > 25 ? 35 : 1;var dir = xf>x0 ? 1 : -1;var x = x0 + dx * dir;at.style.top = x.toString() + "px";if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}}</script><div id="at"><div class="attab" onclick="showHideAT()"> </div><div class="atcontent"><div align="center"><div style="background:url() no-repeat;"><div style="text-align: center;"><div class="separator" style="clear: both; text-align: center;"><br /><form name="news"><textarea rows="1" style="border:3px double #E3CEF6;-moz-box-shadow: 0 0 15px 5px #E3CEF6;-webkit-box-shadow: 0 0 15px 5px #E3CEF6;border-radius:7px;font-size:12px;font-family:century gothic;cursor:crosshair;" cols="30" name="news2" wrap="virtual"></textarea><script language="JavaScript">var newsText = new Array();newsText[0] = "TEXTO";newsText[1] = "TEXTO";newsText[2] = "TEXTO";newsText[3] = "TEXTO";newsText[4] = "TEXTO";newsText[5] = "TEXTO";newsText[6] = "TEXTO";newsText[7] = "TEXTO";
var ttloop = 1; //var tspeed = 70; //var tdelay = 1000; //// ------------- CANNOT EDITING ------------- \var dwAText, cnews=0, eline=0, cchar=0, mxText;function doNews() {mxText = newsText.length - 1;dwAText = newsText[cnews];setTimeout("addChar()",1000)}function addNews() {cnews += 1;if (cnews <= mxText) {dwAText = newsText[cnews];if (dwAText.length != 0) {document.news.news2.value = "";eline = 0;setTimeout("addChar()",tspeed)}}}function addChar() {if (eline!=1) {if (cchar != dwAText.length) {nmttxt = ""; for (var k=0; k<=cchar;k++) nmttxt += dwAText.charAt(k);document.news.news2.value = nmttxt;cchar += 1;if (cchar != dwAText.length) document.news.news2.value += "_";} else {cchar = 0;eline = 1;}if (mxText==cnews && eline!=0 && ttloop!=0) {cnews = 0; setTimeout("addNews()",tdelay);} else setTimeout("addChar()",tspeed);} else {setTimeout("addNews()",tdelay)}}doNews()</script></form></div>Código de tu Cbox</div></div><br /><div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><div ><span ></span></div></a></div></div></div><script type="text/javascript">var at = document.getElementById("at");at.style.top = (-200-at.offsetWidth).toString() + "px";</script><a href="javascript:void(0);"onclick="showHideAT()"/><img class="expando" src="URL de la imagen de cbox" alt="PUSH" title="Click"style='position:fixed; top:0; right:50px;'/></a></div></center>
Se sustituye: los códigos de colores (en azul claro) por otros códigos de colores (opcional) y los códigos en azul oscuro por el texto que quieres que diga, el código de tu cbox y la URL de la imagen que dice Cbox, respectivamente.
Créditos: Biblioteca de gatitos, aunque yo lo saqué de Clasic y love.
2. Cbox deslizante con fondo a un lado del blog.
En un gadget HTML/Javascript pegamos lo siguiente:
<style type="text/css">#gb{position:fixed;top:50px;z-index:+1000;}* html #gb{position:relative;}.gbtab{height:400px;width:150px;float:left;cursor:pointer;background:url('URL DE LA IMAGEN QUE DICE CBOX') no-repeat;}.gbcontent{float:left;border:1px solid #F6CEF5;background:#F5F5F5;padding:8px;}</style><script type="text/javascript">function showHideGB(){var gb = document.getElementById("gb");var w = gb.offsetWidth;gb.opened ? moveGB(0, 150-w) : moveGB(170-w, 0);gb.opened = !gb.opened;}function moveGB(x0, xf){var gb = document.getElementById("gb");var dx = Math.abs(x0-xf) > 10 ? 5 : 1;var dir = xf>x0 ? 1 : -1;var x = x0 + dx * dir;gb.style.right = x.toString() + "px";if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}}</script><div id="gb"><div class="gbtab" onclick="showHideGB()"> </div><div class="gbcontent">CÓDIGO DE TU CBOX<div style="text-align:right"><a href="javascript:showHideGB()">[close]</a></div></div></div><script type="text/javascript">var gb = document.getElementById("gb");gb.style.right = (140-gb.offsetWidth).toString() + "px";</script>Se sustituye: los códigos en azul oscuro por el código de tu Cbox y la imagen que dice Cbox, respectivamente; los códigos en azul claro por códigos de otros colores (opcional) y el código en verde por los píxeles y el tipo de borde.
Créditos: My cute world
Recursos:
Página con códigos de colores {X}
Tipos de borde:
Etiquetas: Blogger, CBox, Recursos, Tutoriales
Please do the rules:
- No spamming--no no no!
- Don't talk rudely--don't don't don't!
- I like nice people--
if you need meh to follow your blog back--ask it nicely and i'll think about it~
кuму at 18 de marzo de 2013, 9:51
los iconos son super lindos *0* gracias x compargir todo
Sociología at 27 de junio de 2013, 10:03
lindo tutorial gracias lo estaba buscando