martes, 14 de julio de 2015

un divisor para tu blog

Hola chic@s hoy les enseñare como separar las entradas con un divisor  Hare 2 versiones por si una forma no funciona prueben con la segunda forma (Y es porque en algunas plantillas los codigos son diferentes) 

Primera Forma

oki para empezar vas a:


Diseño >> Elementos de Pagina >> Edicion HTLM y marcas Expandir Artilugios


buscas el siguiente codigo:

<b:include data='post' name='post'/>


Y justo debajo de ese codigo pegas lo siguiente:

<center><img src='URL de la imagen'/></center>


Ahora lo que tienes que hacer es remplazar donde diceURL de imagen por la direccion de tu separador !!


Segunda Forma 

te vas a :

Diseño >> Elementos de Pagina >> Edicion HTLM


Buscas el siguiente codigo (para mas rapidez pulsa ctrl+F para la busqueda) :

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
}


Cuando lo encuentres remplazalo por el siguiente:

.post {
background: url(Url_de_tu_divisor);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:5.5em;
}

Remplaza donde dice url de tu divisor por la direccion del divisor de tu preferencia !! vay bloguer@s

domingo, 12 de julio de 2015

crea y diseña tu propio contador de visitas


Hola! en este pequeño tuto les dire como pueden crear su propio contador del color y tamaño que quieran! ya que normalmente muchos no saben y ponen uno que les da la pagina y no de el color o tamaño que ustedes quieren!

EMPESEMOS

Primero que nada este tipo de contador que haremos es distinto ya que te muestra los que estan online y de que pais son :) son como estos..



1 Ve a http://www.contadordevisitas.me registrate y has todo eso es rapido xD 

2 Te dira que crees tu tema ps ahi le das a crear tema te saldra algo asi .. y tu lo haces como quieras ahi mas o menos te señalo para que es cada uno , :)


3 le das a guardar y ya:)

4 Luego te apareceran todos tus temas , y tu vas a ir en donde dice ''mis contadores''


5 Luego vas a selecionar el tema que acabas de hacer , lo buscas ahi con el nombre con el que guardaste tu tema cuando lo creaste :)


6 Elijes el tamaño del que lo quieres , das en gusardar y te daran un codigo  , ese codigo lo copias y lo vas a poner en >Diseño>Añadir Gadget>HTML , ahi lo pegas y lo guardar :) y ya:)


CUANDO LO HAGAS POR SEGUNDA VES SERA DIFERENTE SOLO EN EL PRINCIPIO

Inicias secion y te saldra asii como en la imagen le vas a dar en mis tema''


Luego le das a crear tema y ya haces todo como en el resto del anterior :)
disfrutaloo

crea y diseña tu propio contador de visitas


Hola! en este pequeño tuto les dire como pueden crear su propio contador del color y tamaño que quieran! ya que normalmente muchos no saben y ponen uno que les da la pagina y no de el color o tamaño que ustedes quieren!

EMPESEMOS

Primero que nada este tipo de contador que haremos es distinto ya que te muestra los que estan online y de que pais son :) son como estos..



1 Ve a http://www.contadordevisitas.me registrate y has todo eso es rapido xD 

2 Te dira que crees tu tema ps ahi le das a crear tema te saldra algo asi .. y tu lo haces como quieras ahi mas o menos te señalo para que es cada uno , :)


3 le das a guardar y ya:)

4 Luego te apareceran todos tus temas , y tu vas a ir en donde dice ''mis contadores''


5 Luego vas a selecionar el tema que acabas de hacer , lo buscas ahi con el nombre con el que guardaste tu tema cuando lo creaste :)


6 Elijes el tamaño del que lo quieres , das en gusardar y te daran un codigo  , ese codigo lo copias y lo vas a poner en >Diseño>Añadir Gadget>HTML , ahi lo pegas y lo guardar :) y ya:)


CUANDO LO HAGAS POR SEGUNDA VES SERA DIFERENTE SOLO EN EL PRINCIPIO

Inicias secion y te saldra asii como en la imagen le vas a dar en mis tema''


Luego le das a crear tema y ya haces todo como en el resto del anterior :)

como poner una notita deslisante en tu blog



Hola! amigos y amigas   en esta oportunidad les traigo como poner una notita deslisante en tu blog
 esta notita la vez si das click en donde dice ''clic aqui'' en la barra de alado ps esta hermosa y ps bien primero que nada haras lo siguiente..

Vas a ir a 'DISEÑO' 

Añadir Gadget 

y elije HTML/Javascript

Ahi pondras el siguiente codigo..



<center>
<style type="text/css">
#at{
position:fixed;
right:450px;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url();
}
.atcontent{
float:left;
border:2px solid #ffaad5;
background:#FFFFFF 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;">
<img src="URL DE LA IMAGEN DE TU PREFERENCIA" />
AQUI TUS ESCRITOS O MENSAJES
</span></div>
</div>
</div>
<br />
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><div >
<span ></span></div></a></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 TU IMAGEN CLIC AQUI" alt="PUSH" title="Click"/></a>
</center>

Luego le das a guardar normalmente.

Bueno ahora has los siguientes

Vas a ajustar a tu gusto:

Rojo: Grosor del borde

Verde: tipo de borde

Naranja: Color del borde

Lila: color del fondo de la caja

Rosa palido: Tus escritos o mensajes

Cafe: bueno este es opcional : este es la imagen que puedes añadir , yo puse esa imagen que dise todo y es rosa el cuadro , puedes hacer una en ps y subirla en una pagina como tynipic que te de un link de esa :)
MOrado: Url de la direccion de tu imagen [osea la imagen que yo tengo alado que dice clic aqui ] esa es una imagen que tu puedes hacer en ps y subir a una pagina que te de un link yo uso tynipic y me dan un link de la imagen y esa es la que pongo ahi

Bueno eso es todo


sábado, 11 de julio de 2015

TextArea

Hola amigos o amigas porlo visto  muchas estan utilizando los TextArea en los blog son esos cuadritos en los que normalmente para poner los codigos html y textitos tambien, hoy les enseñare como se hacen es muy simple,  Es muy fácil, cuando vayan a crear una entrada copien y peguen esto:

<textarea rows="4" cols="50">
AQUI LO QUE DECEAS PONER
</textarea>

Pueden cambiar el formato de alto y ancho, rows es ancho y cols es alto :D Y Bueno eso es todo, recuerden que cuando hagan la entrada se interprete el HTML escrito y no tal cual porque si no no les tomará :D 
Buano, ojala les haya salido, ya si quieren personalizarlo mas tardesito hare un entrada para eso ok

viernes, 10 de julio de 2015

como poner en tu blog una imagen de subir

HOLA MIS FANATICOS DE BLOG BUENO VAMOS A VER COMO PONER UNA FLECHITA DE SUBIR COMO LA MIA

BUENO LA VERDAD ES MUY MUYY FACIL VAMOS A


DISEÑO>>AÑADIR GADGET >> HTML

& Colocas el siguiente código.

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="subir"><img src="URL DE LA IMAGEN" /></a>

Bueno en donde dice ''URL de la imagen'' es donde pondrás la URL de la imagen que quieres poner ahí :) 

En donde dice''right'' es en donde quieres poner la imagen right es derecha [en donde lo tengo yo] y si quieres ponerlo en el otro lado pones ''left'' & Listo lo guardas :)
------------------------

La URL de la imagen la consigues subiendo tu imagen a tynipic :)

Aquí les hice algunos :) solo copien el link y pónganlo en donde dice ''URL de la imagen''

http://i46.tinypic.com/5bqwyx.png


http://i48.tinypic.com/9abyo4.png



http://i45.tinypic.com/k3xgqo.png


http://i45.tinypic.com/2zf7sp2.png



http://i46.tinypic.com/5vyusg.png


http://i47.tinypic.com/2qtiweq.png


http://i48.tinypic.com/29ofhad.png

ESPERO QUE TE GUSTEEE


como personalizar el puntero de tu blog

HOLA AMIGOS LE ENSEÑARE A CAMBIAR EL PUNTERO DE TU BLOG
BUENO
1-VAMOS A NUESTRO BLOG DONDE DICE DISEÑO luego añadir Gadget y le damos click en el que dice  HTML y colocas estos codigoos de aqui abajoo y listo

<style type="text/css">body    {cursor:url("http://i1085.photobucket.com/albums/j433/Annyz-chan/AnnyzKawaiiBlog/cuteosito.png"),default}</style><a  href="">    <span><b></b></span></a> 

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/others/oth-9/oth800.cur), progress !important;}</style><a href="http://www.cursors-4u.com/cursor/2012/02/04/pink-bow-tie-9.html" target="_blank" title="Pink Bow Tie"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Pink Bow Tie" style="position:absolute; top: 0px; right: 0px;" /></a> 


 <style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/others/oth-7/oth649.ani), url(http://cur.cursors-4u.net/others/oth-7/oth649.png), progress !important;}</style><a href="http://www.cursors-4u.com/cursor/2011/11/07/animated-rainbow-moustache.html" target="_blank" title="Animated Rainbow Moustache"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Animated Rainbow Moustache" style="position:absolute; top: 0px; right: 0px;" /></a> 

en esta pagina encontraras muchos mas que se ponen igual  
http://www.totallyfreecursors.com/


PERSONALIZA LA BARRA DE DESPLAZAMIENTO DE TU BLOG

HOLA TE ENSEÑO A PERSONALIZAR TU BARRA DE DESPLASZAMIENTO

¿QUE ES LA BARRA DE DESPLAZAMIENTO?

ES ESTA BARRITA PARA SUBIR Y BAJAR 

Bueno esta barrita la tienen todaaas las paginas y hasta carpetas de nuestra computadora
pero como podemos personalizarla con otro color o fondo muy sencillo te enseño como
bueno nos vamos a nuestro blog donde dice diseño 
luego a plantilla y donde dice EDICION HTML>>
bueno y ponemo este codigo   ]></b:skin> y  pegamos este codigo  ::-webkit-scrollbar {
height: 12px;
width: 15px;
background-image:url 

::-webkit-scrollbar-thumb {
background-image:url(URL DEL FONDO);
-Moz-border-radius-bottomRight: 50px; border-bottom-right-radius: 50px; -Moz-border-radius-topLeft: 50px; border-top-left-radius: 50px;


 donde dice imagen url ps ahi ponen las url de los fondo que quieren ponerlo como la extraemos facil  buscamos la imagen y ponemo extraer url 

el primero es de la barra que esta precisa y el segundo de la que se deslisa :) 



Solo dan a vista previa para ver como queda y lo guardan :)

espero que les gusta  no se copien es para que lo pongan en su blog no lo posteen