Emoticones animados para tus comentarios

Buscando emoticones para mi blog y al no haber encontrado a mi gusto me tome el tiempo de hacer los mios, y en esta oportunidad comparto mis resultados:

Para implementarlo en tu blog sigue estos pasos:

PASO 1: Vamos a Diseño,Edición de HTML, marcamos la casilla Expandir plantillas de artilugios y buscamos la etiqueta </head> y sobre ella pegamos el siguiente script:

<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
function emoticonComentario(emoticon) {
if(!document.getElementById) {return;}
bodyText = document.getElementById(emoticon);
cambiarLetra = bodyText.innerHTML;

// :)
cambiarLetra = cambiarLetra.replace(/:\)/g,'<img src="https://4672811658048357345-a-1802744773732722657-s-sites.googlegroups.com/site/coquitoblogger/46.gif" />');

// :(
cambiarLetra = cambiarLetra.replace(/:\(/g,'<img src="https://4672811658048357345-a-1802744773732722657-s-sites.googlegroups.com/site/coquitoblogger/49.gif" />');

// ;)
cambiarLetra = cambiarLetra.replace(/;\)/g,'<img src="https://4672811658048357345-a-1802744773732722657-s-sites.googlegroups.com/site/coquitoblogger/34.gif" />');

// :P
cambiarLetra = cambiarLetra.replace(/:\P/g,'<img src="https://4672811658048357345-a-1802744773732722657-s-sites.googlegroups.com/site/coquitoblogger/48.gif" />');

// :D
cambiarLetra = cambiarLetra.replace(/:D/g,'<img src="https://4672811658048357345-a-1802744773732722657-s-sites.googlegroups.com/site/coquitoblogger/3.gif" />');

// XD
cambiarLetra = cambiarLetra.replace(/XD/g,'<img src="https://4672811658048357345-a-1802744773732722657-s-sites.googlegroups.com/site/coquitoblogger/11.gif" />');

// :S
cambiarLetra = cambiarLetra.replace(/:S/g,'<img src="https://4672811658048357345-a-1802744773732722657-s-sites.googlegroups.com/site/coquitoblogger/25.gif" />');

// X(
cambiarLetra = cambiarLetra.replace(/X\(/g,'<img src="https://4672811658048357345-a-1802744773732722657-s-sites.googlegroups.com/site/coquitoblogger/9.gif" />');

// :'(
cambiarLetra = cambiarLetra.replace(/:'\(/g,'<img src="https://4672811658048357345-a-1802744773732722657-s-sites.googlegroups.com/site/coquitoblogger/44.gif" />');

// 8)
cambiarLetra = cambiarLetra.replace(/8\)/g,'<img src="https://4672811658048357345-a-1802744773732722657-s-sites.googlegroups.com/site/coquitoblogger/40.gif" />');

// :O
cambiarLetra = cambiarLetra.replace(/:\O/g,'<img src="https://4672811658048357345-a-1802744773732722657-s-sites.googlegroups.com/site/coquitoblogger/29.gif" />');

// :*
cambiarLetra = cambiarLetra.replace(/:\*/g,'<img src="https://4672811658048357345-a-1802744773732722657-s-sites.googlegroups.com/site/coquitoblogger/6.gif" />');

// :A
cambiarLetra = cambiarLetra.replace(/:A/g,'<img src="https://4672811658048357345-a-1802744773732722657-s-sites.googlegroups.com/site/coquitoblogger/35.gif" />');

// 3:
cambiarLetra = cambiarLetra.replace(/3:/g,'<img src="https://4672811658048357345-a-1802744773732722657-s-sites.googlegroups.com/site/coquitoblogger/33.gif" />');

bodyText.innerHTML = cambiarLetra;
}
//]]>
</script>
</b:if>

PASO 2:  Buscamos lo siguiente:

<p>
<data:comment.body/>
</p>

PASO 3: Una vez encontrado los códigos lo eliminamos y los remplazamos por los siguientes códigos:

<p expr:id='"combody-" + data:comment.anchorName'><data:comment.body/></p>
<script type='text/javascript'>
emoticon = "combody-" + "<data:comment.anchorName/>";
emoticonComentario(emoticon);
</script>

PASO 4: Buscamos esta linea de códigos:

<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>

Si encontramos de una utilizamos el segundo y después de ella pegamos lo siguiente:

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcZt6c7NDsJYms8gbz0_8ht67-0O1e9WpLSkp1lWWtt5NQlTAoV8PXiRT6hOfW5ZZSdr7x4aMZG3h1vnqf-674lTHRUtE92gd88J0He-gTHUHLVbT-UHd34fmgsjALMqQOi5_uSHSylQ/s1600/EmoticonesCoquito.PNG" />

Una vez realizado todos los pasos, guardamos plantilla y visualisamos los resultados.

Eliminar la numeración en las Etiquetas

Alguna vez nos topamos con este problema, desmarcamos la opción Mostrar cantidad de entradas por etiqueta y aun así nos sigue apareciendo la numeración, me tome el tiempo de buscar una solución y esta fue la siguiente:

Nos ubicamos en Diseño>Edición de HTML y activamos la opción Expandir plantillas de artilugios, tecleamos Ctrl+F y buscamos la siguiente linea:

(<data:label.count/>)

Una vez encontrado esta linea la eliminamos, guardamos plantilla y veremos que ya no tendremos ese problema.

Buscador Interno estilo Google

En esta oportunidad comparto con ustedes un buscador interno para el blog al estilo de Google, jugando un poco con los estilos css, el resultado es el de la imagen, espero que les guste.

Si te gusto este Buscador, lo puedes usar en tu blog de la siguiente manera.

1.- Vamos a Diseño>Edición de HTML tecleamos Ctrl+F y buscamos ]]></b:skin> y sobre ella pegamos lo siguiente:

/* Boton y borde del buscador */
#search-btn {
width:70px;
height: 31px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHJyy8cj4e66ZI1KCbjcytfV3pUR9hIQWzVndEl1cwVuoe2cQZXx1K07V23m7bpmbjzV3blpZgJ8I9ixO0nZmwlwPzGpCz0J6bMsBMXNg1sOD60Par-AAgPifueqVbo7TvfKiGewI6ZHQ/s1600/ico-search.png) no-repeat #4d90fe center;
font-size:0;
padding: 1px;
margin: 0px 0px 0px 12px;
border: 1px solid #3079ED;
}

#search-box {
float:left;
width:300px;
height:27px;
line-height:27px;
text-indent:10px;
font-family:arial, sans-serif;
font-size:1em;
color:#333;
background: #fff;
border:solid 1px #d9d9d9;
}
/* Fin del codigo */

2.- Guardamos plantilla, nos vamos a Diseño>Añadir un Gadget>HTML/Javascript y allí pegamos el siguiente código:

<form action='/search' id='searchthis' method='get' style='display:inline;'><input id='search-box' name='q' type='text'/><input id='search-btn' type='submit' value=''/></form>

Con width:300px; puedes ajustar el ancho del buscador de acuerdo a tu blog, si seguiste bien los pasos el resultado sera como la imagen, Suerte!

El trio Margin-Padding-Border

En la imagen de abajo puedes ver mejor a qué zona corresponde cada una de estas propiedades.

Puedes ver el borde, que le he puesto color azul para distinguirlo. Entre el borde y el contenido está la separación creada por el padding y entre el borde y el exterior el espaciado dejado por el margin.

Así, si ponemos dos imágenes una junto a la otra y queremos separarlas, usaremos por ejemplo el margin. Lo mismo para los párrafos etc. Si quisieramos separar un elemento A de los que tiene alrededor, le pondriamos a A un margin.

Si tenemos un elemento encerrado en una capa y queremos que su contenido se separe un poco de su extremo (de su borde) le hariamos un padding.

Con esta simple definicion, esperemos no tener mas confuciones.

Reflejos 3D en nuestras imágenes

Este es un bonito efecto hecho a base de Javascript, no estaría nada mal darle un poco mas de estilo a nuestras imagenes, es muy sencillo de instalar y el resultado es agradable, aquí les pongo un ejemplito.



Si te gusto este efecto lo puedes hacer de la siguiente manera:

1.- Nos vamos a Diseño/Edición de HTML y buscamos la etiqueta </head>, y sobre ella pegamos lo siguiente:

<script src='http://blobs.ge.tt/8hjaaY5/prototype.js' type='text/javascript'/>
<script src='http://blobs.ge.tt/8hjaaY5/scriptaculous.js?load=builder' type='text/javascript'/>
<script src='http://blobs.ge.tt/8hjaaY5/reflection.js' type='text/javascript'/>

2.- Para visualizar el efecto lo podemos hacer mediante una entrada o un gadget(HTML/Javascript) y utilizando el siguiente código:

<div id = "holder">
<img src = "URL de tu Imagen" />
</div>
<script type="text/javascript">
new Reflect3D('holder');
</script>

Con todo eso el resultado sera como el que puse como ejemplo.

NOTA: Los script: prototype.js, scriptaculous.js y reflection.js ya están alojados, pero si quisieras alojarlo tu mismo lo puedes descargar desde aquí.

Bonito Rotador de imágenes automático

Este es un bonito rotador de imagenes automático, hecho a base de css y JavaScript, y lo puedes ver en acción en el siguiente blog de pruevas.

Si te gusto este rotador lo puedes hacer de la siguiente manera:

1.- Nos vamos a Diseño/Edición de HTML tecleamos Ctrl+F y buscamos la etiqueta </head> y sobre ella pegamos lo siguiente:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>

$(document).ready(function() {

//Set Default State of each portfolio piece
$(".paging").show();
$(".paging a:first").addClass("active");

//Get size of images, how many there are, then determin the size of the image reel.
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;

//Adjust the image reel to its new size
$(".image_reel").css({'width' : imageReelWidth});

//Paging + Slider Function
rotate = function(){
var triggerID = $active.attr("rel") - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

$(".paging a").removeClass('active'); //Remove all active class
$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)

//Slider Animation
$(".image_reel").animate({
left: -image_reelPosition
}, 500 );

};

//Rotation + Timing Event
rotateSwitch = function(){
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
$active = $('.paging a.active').next();
if ( $active.length === 0) { //If paging reaches the end...
$active = $('.paging a:first'); //go back to first
}
rotate(); //Trigger the paging and slider function
}, 6000); //Duracion de tiempo en rotar (6 segundos)
};

rotateSwitch(); //Run function on launch

//On Hover
$(".image_reel a").hover(function() {
clearInterval(play); //Stop the rotation
}, function() {
rotateSwitch(); //Resume rotation
});

//On Click
$(".paging a").click(function() {
$active = $(this); //Activate the clicked paging
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation
return false; //Prevent browser jump to link anchor
});

});
</script>

2.- Ha hora toca el CSS, para eso buscamos ]]></b:skin> y encima pegamos estos codigos:

/*--Main Container--*/
.main_view {
float: left;
position: relative;
}
/*--Window/Masking Styles--*/
.window {
height:260px; width: 490px;/*--TAMAÑO DEL ROTADOR DE IMAGENES--*/
overflow: hidden; /*--Hides anything outside of the set width/height--*/
position: relative;
}
.image_reel {
position: absolute;
top: 0; left: 0;
}
.image_reel img {
height:260px; width: 490px;/*--TAMAÑO DE LAS IMAGENES--*/
float: left;
}

/*--Paging Styles--*/
.paging {
position: absolute;
bottom: 10px; right: -2px;
width: 178px; height:47px;
z-index: 100; /*--Assures the paging stays on the top layer--*/
text-align: center;
line-height: 40px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxvj0s-xHgJXa9x7a2SRh6OllrSCnQRYjPjZbv4bjYt20JNvoXmnfQsZicwt7FuECyYHJEw2bHhtvrm6YQn7GTi6lBDeF8vbs1b_7m2o6fdIYdW6pDPNzxqxxtxBawKmaXkffyjKfKpA/s1600/paging_bg2.png) no-repeat;
display: none; /*--Hidden by default, will be later shown with jQuery--*/
}
.paging a {
padding: 5px;
text-decoration: none;
color: #fff;
}
.paging a.active {
font-weight: bold;
background: #920000;
border: 1px solid #610000;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}

Una vez hecho los pasos anteriores, GUARDAMOS PLATILLA.

3.- Para verlo en acción en nuestro blog, vamos a Diseño/Añadir un gadget/HTML/Javascript y pegamos lo siguiente:

<div class='main_view'>
<div class='window'>
<div class='image_reel'>
<a href='URL DE TU ENLACE1'><img alt='' src='URL DE TU IMAGEN1'/></a>
<a href='URL DE TU ENLACE2'><img alt='' src='URL DE TU IMAGEN2'/></a>
<a href='URL DE TU ENLACE3'><img alt='' src='URL DE TU IMAGEN3'/></a>
<a href='URL DE TU ENLACE4'><img alt='' src='URL DE TU IMAGEN4'/></a>
</div>
</div>
<div class='paging'>
<a href='URL DE TU ENLACE1' rel='1'>1</a>
<a href='URL DE TU ENLACE2' rel='2'>2</a>
<a href='URL DE TU ENLACE3' rel='3'>3</a>
<a href='URL DE TU ENLACE4' rel='4'>4</a>
</div>
</div>

Guardamos y vemos nuestro blog, si seguiste bien todos los pasos el resultado sera como el que puse en el blog de pruevas.

Si tienes dudas solo deja un comentario, Suerte!

Un Tabs elegante para tu Blog

Los tabs o pestañas nos ayudan a mostrar información en poco espacio, lo podemos usar en la sidebar o en una entrada.

• Imagen
• Texto
• Vídeo

La Semana Santa es la conmemoración anual cristiana de la Pasión, Muerte y Resurrección de Jesús de Nazaret o, lo que es igual, conmemorar sus últimos días; por ello, es un período de intensa actividad litúrgica dentro de las diversas confesiones cristianas. Da comienzo el Domingo de Ramos y finaliza el Domingo de Resurrección, aunque su celebración suele iniciarse en varios lugares el viernes anterior (Viernes de Dolores) y se considera parte de la misma el Domingo de Resurrección.

La Semana Santa es la conmemoración anual cristiana de la Pasión, Muerte y Resurrección de Jesús de Nazaret o, lo que es igual, conmemorar sus últimos días; por ello, es un período de intensa actividad litúrgica dentro de las diversas confesiones cristianas. Da comienzo el Domingo de Ramos y finaliza el Domingo de Resurrección, aunque su celebración suele iniciarse en varios lugares el viernes anterior (Viernes de Dolores) y se considera parte de la misma el Domingo de Resurrección.

La Semana Santa es la conmemoración anual cristiana de la Pasión, Muerte y Resurrección de Jesús de Nazaret o, lo que es igual, conmemorar sus últimos días; por ello, es un período de intensa actividad litúrgica dentro de las diversas confesiones cristianas. Da comienzo el Domingo de Ramos y finaliza el Domingo de Resurrección, aunque su celebración suele iniciarse en varios lugares el viernes anterior (Viernes de Dolores) y se considera parte de la misma el Domingo de Resurrección.

Los pasos a seguir son los siguientes:

1.- Nos vamos a Diseño/Edición de HTML tecleamos Ctrl+F y buscamos la etiqueta <head> y debajo pegamos el siguiente código:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>

2.- Ha hora nos toca pegar el CSS, buscamos ]]></b:skin> y encima pegamos lo siguiente:

ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px;
border-bottom: 1px solid #999;
border-left: 1px solid #999;
width: 100%;
}
ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 31px;
line-height: 31px;
border: 1px solid #999;
border-left: none;
margin-bottom: -1px;
overflow: hidden;
position: relative;
background: #e0e0e0;
}
ul.tabs li a {
text-decoration: none;
color: #000;
display: block;
font-size: 1.2em;
padding: 0 20px;
border: 1px solid #fff;
outline: none;
}
ul.tabs li a:hover {
background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover {
background: #fff;
border-bottom: 1px solid #fff;
}
.tab_container {
border: 1px solid #999;
border-top: none;
overflow: hidden;
clear: both;
float: left; width: 100%;
background: #fff;
}
.tab_content {
padding: 20px;
font-size: 1.2em;
}

3.- Para el correcto funcionamiento de los tabs nos toca pegar el JavaScript, buscamos </head> y encima pega lo siguiente:

<script type='text/javascript'>
$(document).ready(function()
{
$(".tab_content").hide();
$("ul.tabs li:first").addClass("active").show();
$(".tab_content:first").show();

$("ul.tabs li").click(function()
{
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_content").hide();

var activeTab = $(this).find("a").attr("href");
$(activeTab).fadeIn();
return false;
});
});
</script>

4.- Para añadir en nuestras entradas, usamos el siguiente código:

<ul class="tabs">
<li><a href="#tab1">Imagen</a></li>
<li><a href="#tab2">Texto</a></li>
<li><a href="#tab3">Vídeo</a></li>
</ul>

<div class="tab_container">
<div class="tab_content" id="tab1">
CONTENIDO DEL PRIMER TABS
</div>
<div class="tab_content" id="tab2">
CONTENIDO DEL SEGUNDO TABS
</div>
<div class="tab_content" id="tab3">
CONTENIDO DEL TERCER TABS
</div>
</div>

Si seguiste bien todos los pasos, el resultado sera como el que puse como ejemplo, si tienes alguna duda solo deja un comentario.

Añadir Botón de Seguir Twitter en Blogger

Añade el botón Seguir a tu página web para aumentar la participación y estar en contacto permanente con tu público.

Follow @EsWWE

Añade este Boton en tu blog llenando 3 simples pasos en Recursos Twitter

Cambiar el cursor del mouse en Blogger

Muchos buscan cambiar el cursor del Mouse(raton) y personalizarlo, esta vez les enseñare como hacer dicho truco.


1.- Vamos a Diseño/Edición HTML tecleamos Ctrl+F y buscamos el siguiente código:

</body>

2.- Justo encima de dicho código pega lo siguiente:

<style type="text/css">body {cursor: url(URL CURSOR NORMAL), progress;}
a:hover {cursor:url("URL CURSOR ENLACES"), pointer}
</style>

Reemplaza los valores por las direcciones de los cursores, guarda los cambios y listo.

Cambiar el favicon de Blogger

El favicon es el icono que aparece en los navegadores al lado derecho de las direcciones, que por defecto blogger no los proporciona, muchos no gustan de este icono y optan por cambiar por un icono que caracteriza a su Blog, al igual que yo tu también lo puedes hacer de la siguiente manera.




1.- Nos vamos ha Diseño/Edición de HTML tecleamos Ctrl+F y buscamos este código:

</body>

2.- Una vez encontrado dicho código, justo antes pega lo siguiente:

<link href='http://sitio.com/favicon.ico' rel='shortcut icon'
type='image/x-icon'/>

Hecho bien todos los pasos ha hora solo falta cambiar la linea de color verde por tu icono, Guardamos Plantilla y listo.

NOTA: Tu favicon o icono puede ser en formato .png .jpg .gif y lo puedes subir en blogger .

Texto con color de fondo distinto

Muchos de nosotros queremos darle un poco de colorido a nuestros post, y así no tener un blog monocromo y que se vea opaco y desolado, aquí unos ejemplos de como podemos variar jugando con las propiedades CSS.

La Semana Santa es la conmemoración anual cristiana de la Pasión, Muerte y Resurrección de Jesús de Nazaret o, lo que es igual, conmemorar sus últimos días; por ello, es un período de intensa actividad litúrgica dentro de las diversas confesiones cristianas. Da comienzo el Domingo de Ramos y finaliza el Domingo de Resurrección, aunque su celebración suele iniciarse en varios lugares el viernes anterior (Viernes de Dolores) y se considera parte de la misma el Domingo de Resurrección.

La Semana Santa es la conmemoración anual cristiana de la Pasión, Muerte y Resurrección de Jesús de Nazaret o, lo que es igual, conmemorar sus últimos días; por ello, es un período de intensa actividad litúrgica dentro de las diversas confesiones cristianas. Da comienzo el Domingo de Ramos y finaliza el Domingo de Resurrección, aunque su celebración suele iniciarse en varios lugares el viernes anterior (Viernes de Dolores) y se considera parte de la misma el Domingo de Resurrección.

Antes de usar en nuestras entradas vamos ha Diseño>Edición de HTML tecleamos Ctrl+F y buscamos ]]></b:skin> y sobre el pegamos el siguiente codigo:

#FondoTexto1 { /* Nombre del fondo 1*/
background:#ECF8E0; /* Aqui puedes cambiar el color de fonfo */
text-align: justify;
padding: 15px 15px 15px 15px;
}

#FondoTexto2 { /* Nombre del fondo 2*/
background:#E0F8F7; /* Aqui puedes cambiar el color de fonfo */
text-align: justify;
padding: 15px 15px 15px 15px;
}

Una vez realizado el paso anterior, usamos el siguiente código en nuestras entradas:

<div id="FondoTexto1">
Aqui colocas el texto1 que quieres con un fondo de color distinto...
</div>

<div id="FondoTexto2">
Aqui colocas el texto2 que quieres con un fondo de color distinto...
</div>

NOTA: Puedes seguir agregando mas fondos, pero siempre cambiando el nombre FondoTexto1 FondoTexto2 FondoTexto3 FondoTexto4 ...