Personalizar estructura de comentarios

La estructura de los comentarios contiene distintas etiquetas las cuales cada una se diferencian con distintas Id's o clases, por lo tanto se pueden personalizar mediante CSS.

He visto en distintos blog los cuales por ejemplo, el editor de comentarios se encuentra a la izquierda y con un tamaño muy chico, el cual distorsiona con el diseño del blog.

Por supuesto que eso va en el gusto de cada uno.

Con algo de CSS podemos cambiar el aspecto de nuestro editor.

También se puede corregir la distancia en la parte de abajo del editor.

En la siguiente imagen veremos distintas partes las cuales podemos personalizar, destacadas por un numero y un borde de distinto color:

Cada parte tiene una ID (#) o una clase (.)

Los códigos CSS van arriba de ]]></b:skin>

#comments{
propiedad: valor;
propiedad: valor;
}
#comments h4{
propiedad: valor;
propiedad: valor;
}
.avatar-image-container{
propiedad: valor;
propiedad: valor;
}
#comments-block{
propiedad: valor;
propiedad: valor;
}
.comment-author{
propiedad: valor;
propiedad: valor;
}
.comment-body{
propiedad: valor;
propiedad: valor;
}
.comment-timestamp{
propiedad: valor;
propiedad: valor;
}
.comment-form {
propiedad: valor;
propiedad: valor;
}
#comment-post-message{
propiedad: valor;
propiedad: valor;
}
.comment-form p{
propiedad: valor;
propiedad: valor;
}
#comment-editor{
propiedad: valor;
propiedad: valor;
}

Por ejemplo si queremos personalizar el editor: (11)

#comment-editor{
width:600px; /*ANCHO */
height:240px; /* ALTO */
margin-left:20px; /* DISTANCIA DESDE LA IZQUIERDA */
}

Ajustamos el ancho.
Con la altura podemos sacarle la separación que tiene abajo.
Con el margin-left ajustamos para dejarlo centrado.

Ver ejemplo:

Si quieren dejar un mensaje a los visitantes arriba del editor (10), lo hacen desde:

Configuración, Comentarios y colocan el texto en donde dice:

Mensaje del formulario de comentarios.

Ejemplo para personalizar: (10)

.comment-form p{
border: 1px solid #ccc;
width:500px;
padding:10px;
color:#fff;
background:#000;
margin-left:20px;
}

Si solo quieren centrarlo.

Centrar todo (1)

#comments{
margin:0px auto;
}

Centrar la caja desde "Publicar un comentario en la entrada" (8)

.comment-form{
margin:0px auto;
}

Cualquier duda me lo comentan.

Iconos de frutas y vegetales Icons

Fruit and Vegetable Icons es un set gratuito de íconos en formas de frutas y vegetales, ideales para un blog o web sobre cocina.

CARACTERÍSTICAS

Pack de 9 íconos de frutas y vegetales.
Autor : bingxueling
Formato: PNG.
Tamaños: 256x256 px.

Descargar

Twitter Buttons Icons

Twitter Buttons Icons es un set gratuito de íconos de Twitter, muy elegantes, ideales para un sitio web o blog.

CARACTERÍSTICAS

Pack de 4 íconos Twitter con el pajarito característico.
Autor : Graphic Leftovers
Formato: PNG.
Tamaños: 128x128, 256x256 px.

Descargar

Efecto humo en el cursor

Para los cursores ya habíamos visto algunos tutoriales para darles efectos(estrellas que caen, burbujas que suben y explosión de estrellas).

Hoy vamos a ver otro efecto, ideal para blogs de cocina, de cafés o de estilo dark, que podemos agregarle a nuestro cursor. Se trata de un efecto que hace que cuando hacemos clic en cualquier parte de nuestro blog salga humo del cursor.

( ↪ Ver DEMO)

Para agregar el efecto sigue estos sencillos pasos:

1.§ Vamos a Plantilla - Editar HTML.

2.§ Damos un clic dentro del código, en la casilla search buscaremos </head> y justo antes de éste, pegaremos el siguiente script:

✵ Ver SCRIPT [+/-]

<script type="text/javascript">
//Efecto humo en el cursor
// <![CDATA[
var smokeyness=100; // cantidad de humo
var density=40; // densidad del humo
var swide=800;
var shigh=600;
var toke=new Array();
var tokex=new Array();
var tokedx=new Array();
var tokey=new Array();
var nicotine=new Array();
var mousedown=false;
var x=400;
var y=300;
var sleft=sdown=0;
var ie_version=(navigator.appVersion.indexOf("MSIE")!=-1)?parseFloat(navigator.appVersion.split("MSIE")[1]):false;

function addLoadEvent(funky) {
var oldonload=window.onload;
if (typeof(oldonload)!='function') window.onload=funky;
else window.onload=function() {
if (oldonload) oldonload();
funky();
}
}

addLoadEvent(puff);

function puff() { if (document.getElementById) {
var i, fag;
for (i=0; i<smokeyness; i++) {
fag=document.createElement("div");
toke[i]=fag.style;
toke[i].position="absolute";
toke[i].backgroundColor="transparent";
toke[i].font="bold "+density+"px Tahoma, Geneva, sans-serif";
toke[i].color="rgba(234,234,234,0.033)";
toke[i].zIndex="9999";
toke[i].pointerEvents="none";
toke[i].visibility="hidden";
fag.appendChild(document.createTextNode(String.fromCharCode('0x25CF')));

document.body.appendChild(fag);
tokey[i]=false;
}
set_scroll();
set_width();
setInterval(drag, 50);
}}

function drag() {
var c;
if (mousedown) for (c=0; c<smokeyness; c++) if (tokey[c]===false) {
toke[c].left=(tokex[c]=x-density/2)+"px";
toke[c].top=(tokey[c]=y-density)+"px";
toke[c].visibility="visible";
tokedx[c]=(c%2?1.5:-1.5)*Math.random();
nicotine[c]=80;
break;
}
for (c=0; c<smokeyness; c++) if (tokey[c]!==false) smoke_rising(c);
}


document.onmousedown=function(){set_scroll();if(ie_version)setTimeout('mousedown=true', 51);else mousedown=true;};
document.onmouseup=function(){mousedown=false};

function smoke_rising(i) {
var cancer;
tokey[i]-=4+i%3;
tokex[i]+=tokedx[i]-0.5+Math.random();
if (tokey[i]>sdown-density*2 && tokex[i]>sleft && tokex[i]<sleft+swide-density && (nicotine[i]+=2)<256) {
cancer=nicotine[i].toString(16);
cancer="#"+cancer+cancer+cancer;
if (ie_version && ie_version<10) toke[i].filter="Glow(Color="+cancer+",Strength="+Math.floor(nicotine[i]/5)+")";
else if (ie_version) toke[i].textShadow='#000000 0px 0px '+Math.floor(nicotine[i]/5)+'px';
else toke[i].textShadow=cancer+' 0px 0px '+Math.floor(nicotine[i]/5)+'px';
toke[i].top=tokey[i]+"px";
toke[i].left=tokex[i]+"px";
}
else {
toke[i].visibility="hidden";
tokey[i]=false;
}
}

document.onmousemove=mouse;
function mouse(e) {
if (e) {
y=e.pageY;
x=e.pageX;
}
else {
set_scroll();
y=event.y+sdown;
x=event.x+sleft;
}
}

window.onresize=set_width;
function set_width() {
var sw_min=999999;
var sh_min=999999;
if (document.documentElement && document.documentElement.clientWidth) {
if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth;
if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight;
}
if (typeof(self.innerWidth)=='number' && self.innerWidth) {
if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth;
if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight;
}
if (document.body.clientWidth) {
if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;
if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight;
}
if (sw_min==999999 || sh_min==999999) {
sw_min=800;
sh_min=600;
}
swide=sw_min;
shigh=sh_min;
}

window.onscroll=set_scroll;
function set_scroll() {
if (typeof(self.pageYOffset)=='number') {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body && (document.body.scrollTop || document.body.scrollLeft)) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
// ]]>
</script>

3.§ Si queremos, podemos cambiar la cantidad y la densidad del humo.

4.§ Damos clic a guardar y listo.

Tu cliente es el cliente de tu cliente

Tu cliente es el cliente de tu cliente es una frase que suelo emplear para hacer entender mi punto de vista sobre como deben de plantearse cualquier acción en Internet relacionadas con marcas y empresas.

Pecamos de intentar trasladar o adaptar las acciones que se realizan en el mundo offline al online, y no contemplamos la realidad del medio donde nos movemos. Hablamos de comunicación, conversación, bidirreccionalidad pero al ejecutar las acciones seguimos usando técnicas del offline, unidireccionales e intrusivas.

En la red lo realmente importante es el usuario, eso lo decimos todos pero ¿lo tenemos en cuenta? sinceramente creo que cada vez menos. ¿Nos hemos parado a analizarlo? ¿Lo vemos como lo que realmente es? ¿Miramos hacia él?

Por deformación profesional uno mira hacia los intereses de su cliente y desde ese planteamiento realiza las acciones en la red y para mi eso es un error estratégico grave, si lo que queremos es alcanzar nuestros objetivos de negocio de forma rápida y directa mostramos un profundo desconocimiento del mismo.

Volvamos al principio del todo, en la red hay millones de usuarios y no deben verse como clientes, si no como lo que son, usuarios. ¿Y esos usuarios por que están en la red? ¿Que buscan en ella? ¿Que les gusta?

Esas son las preguntas que debemos de responder, debemos de dejar de mirar hacia nuestro cliente, mirar hacia los usuarios, analizarlos como tales y sacar conclusiones. La principal conclusión que uno puede sacar de ese análisis y experiencias personales es que entre otras muchas, buscan valor.

Y la clave es esa en darle respuesta a su búsqueda de valor y te identifiquen con el, y añado algo mas, de manera indirecta. Cualquier presencia en Internet que busque conseguir objetivos de negocio debe plantearse desde un objetivo primario enfocado a los intereses de los usuarios, la propuesta de valor de los usuarios.

Siempre uso el mismo ejemplo (bueno uso otro también pero se podría malinterpretar) para que se me entienda "si soy una tienda de zapatos y mi objetivo de negocio es vender zapatos ¿me presento así en la red?" Yo digo que no... Debes presentarte como un usuario mas (es importante que te identifiquen como un usuario mas y no como una marca) y ofrecer al resto de usuarios de la red tu propuesta de valor que perfectamente podría ser "experto en zapatos", pero claro no vale (muchos lo hacen) presentarte como tal, no hace falta decir que lo eres debes demostrarlo, participando como un usuario mas, los usuarios no somos tontos y sabemos distinguir quien nos aporta valor y quien pretende solo vender. Si vienes a mí de manera directa es muy complicado que me alcances pero si me aportas valor probablemente seré yo el que te siga. Tus acciones deben servir para que el resto de usuarios te identifiquen como una propuesta de valor para ellos, eso te generara una comunidad relacionada con tus intereses, con usuarios comprometidos que te recomendaran a otros usuarios y te seguirán. Los usuarios somos agradecidos con lo que nos aporta valor.

Y una vez implantada esa propuesta de valor en la memoria colectiva de los usuarios ¿no creéis que será más fácil alcanzar los objetivos de negocios? ¿nuestras acciones no tendrán más éxito?

Lo realmente importante en la red son los usuarios, mirando sus intereses conseguiremos los intereses de nuestro cliente. A todo esto yo le llamo posicionamiento web, otros lo llaman acciones de marketing ¿que más da?

Lo importante es conocer el medio y desgraciadamente no se esta teniendo en cuenta...

Botón de llamada a la acción animado solo con CSS

He realizado un botón de call-to-action animado solo con CSS, simple pero que permite llamar la atención del visitante hacia el. La animación es permanente y se detiene al pasar el ratón sobre ella.

Contáctame

Este es el CSS (igual tenéis que ajustar algo los margenes según vuestros sitios)

.contacta a {
float:left;
font-size: 18px;
font-style: italic;
margin: 40px;
padding: 60px 30px;
border: 3px solid #e1e1e1;
background: red;
border-radius: 80px;
color: #fff;
box-shadow: 4px 4px 6px rgba(0,0,0,0.30);
filter: progid:DXImageTransform.Microsoft.Shadow(color='#e1e1e1', Direction=145, Strength=5);
animation: pulso 4s ease-out;
animation-iteration-count: infinite;
-ms-animation: pulso 4s ease-out;
-ms-animation-iteration-count: infinite;
-webkit-animation: pulso 4s ease-out;
-webkit-animation-iteration-count: infinite;
opacity: 0.0;
}
@-webkit-keyframes pulso {
0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
50% {opacity: 1.0;}
100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}
@keyframes pulso {
50% {opacity: 1.0;}
100% {transform: scale(1.2, 1.2); opacity: 0.0;}
0% {-ms-transform: scale(0.1, 0.1); opacity: 0.0;}
50% {opacity: 1.0;}
100% {-ms-transform: scale(1.2, 1.2); opacity: 0.0;}
0% {transform: scale(0.1, 0.1); opacity: 0.0;}
}
.contacta a:hover {
animation-play-state:paused;
-webkit-animation-play-state:paused;
-ms-animation-play-state:paused;
background: green;
}

El HTML es el básico de un enlace pero en un div

<div class="contacta">
<a href="http://consejosblogge.blogspot.com/">Contáctame</a>
</div>

Se le pueden dar otros uso pero yo lo he hecho para el botón de contacto del footer...

Somicro Social Icons

Somicro Social Icons es un set gratuito de íconos de redes sociales sencillos,pero muy elegantes en forma de círculos, ideales para un sitio web o blog.

CARACTERÍSTICAS

Pack de 40 íconos de las principales redes sociales: AddThis, App.net, Behance, Blogger, DeviantART, Digg, Dribbble, Email, Facebook, Flickr, Forrst, Foursquare, GitHub , Google+, Indiegogo, Instagram, Kickstarter, Last.fm, Linkedin, Livejournal, Messenger, MySpace, Orkut, Paypal, Picasa, Pinterest, Reddit, RSS, ShareThis, Skype, Soundcloud, Spotify, StackOverflow, StumbleUpon, Tumblr, Twitter, Vimeo, WordPress, Yelp, Youtube.
Autor : Veodesign
Formato: PNG.
Tamaño: 35x32 px.

Descargar