SOY JUANCHORROY: diseño

Mostrando entradas con la etiqueta diseño. Mostrar todas las entradas

domingo, 16 de octubre de 2016

CAJA DE SUSCRIPCIÓN PERSONALIZADA.

En esta ocasión les voy a enseñar a cómo poner una caja de suscripción personalizada, totalmente funcional y con muy bonita apariencia la cual te puede servir en blogger para que los visitantes se suscriban a travéz del feed de feedburner.
La caja de suscripción de feedbuerner por defecto es la siguiente:

La que vamos a poner en el blog es la siguiente:

Como ven tiene una mejor apariencia y además se pueden agregar los íconos de las redes sociales.

Así que para eso les voy a explicar paso a paso cómo editar el código, no se preocupen que también lo explico en ESTE VÍDEO.

Copia el código que te voy a dar aquí y sigue los siguiente pasos:

Vas a blogger, luego click en diseño, buscas añadir un gadget, buscas HTML/JavaScript lo abres y pegas lo siguiente:

AHORA LO MAS IMPORTANTE: Debes reemplazar la parte azúl donde dice: URL DE FACEBOOK por la url de tu cuenta de facebook y lo mismo haces con los demás.

En las tres partes que está escrita con rojo y dice: SoyJuanchorroy debes borrar eso y poner tu nombre de feedburner.

Una vez tengas todo listo le das guardar.

Si quieres ver cómo lo hago entonces aquí te dejo el vídeo con un ejemplo más claro de los pasos:

VER VÍDEO.

sábado, 24 de septiembre de 2016

CÓMO CREAR UN GIF ANIMADO CON PHOTOSHOP

Hola que tal amigos en esta oportunidad les quiero recomendar un vídeo que hice donde explico muy detalladamente cómo hacer un gif animado con photoshop CS6.

Este truco te puede servir para hacer espectaculares proyectos con gifs muy profesionales los cuales puedes usar en tus blogs o páginas webs para hacer publicidad, vender productos o incentivar a las personas para que visiten enlaces de descargas, páginas de afiliados, páginas de referidos, entre otros.

Aquí te dejo en link para que accedas al vídeo:

VER VÍDEO

viernes, 18 de marzo de 2016

BOTONES DE REDES SOCIALES PARA COMPARTIR EN BLOGGER.

Hace algùn tiempo hice un vìdeo en mi canal de Youtube, donde explico còmo poner botones para compartir en blogger usando el servicio de ShareThis: PUEDES VER EL VÌDEO AQUÌ.

Pero al parecer la plataforma ha cambiado mucho, empezando porque ya no dan la opciòn de poner los botones en blogger y muchas personas me siguen preguntando còmo hacerlo.

Asì que para resolver algunas dudas y poder ayudarle a los visitantes de mi canal y mi blog, he querido compartir el còdigo que les permite tener esos botones en su blog de blogger.

Asì que aquì les dejo el còdigo con los botones, lo ùnico que tienen que hacer es copiarlo y pegarlo como un gadget en su blog.
Una vez copien y peguen el còdigo en su blog, le dan en "Guardar los cambios".

Puedes ver el vìdeo donde explico paso a paso còmo poner el còdigo en su blog: VER EL VÌDEO.

MUY IMPORTANTE: Debes reemplazar la parte donde estàn las "equis" por tu nombre de usuario de tu canal de Youtube.

"EL CÒDIGO SÒLO FUNCIONA PARA LAS PLANTILLAS QUE TRAE POR DEFECTO BLOGGER."

<span id="st_finder"></span><script type="text/javascript" src="http://w.sharethis.com/widget/stblogger2.js"></script><script type="text/javascript">var switchTo5x= true;stBlogger2.init("http://w.sharethis.com/button/buttons.js",{"sharethis":["large","ShareThis",""],"facebook":["large","Facebook",""],"googleplus":["large","Google ",""],"twitter":["large","Tweet",""],"linkedin":["large","LinkedIn",""],"pinterest":["large","Pinterest",""],"email":["large","Email",""],"youtube":["large","Youtube Subscribe","",[["st_username","XXXXX"]]]}, "16866f9b-9c22-4160-ae70-e21570ec9b06");var f = document.getElementById("st_finder");var c = f.parentNode.parentNode.childNodes;for (i=0;i<c.length;i++) { try { c[i].style.display = "none"; } catch(err) {}}</script>

domingo, 28 de febrero de 2016

PONER CAJA DE SUSCRIPCIÒN AL FINAL DE LAS ENTRADAS.

En esta ocasiòn les traigo un còdigo que les puede servir para poner una caja personalizada de suscripciòn, ideal para poner al final de las entradas de tu blog.

La cual se verà asì:

Lo ùnico que tienes que hacer es copiar este còdigo y pegarlo en un en el HTML cuando termines de redactar un post en tu blog para que se vea al final de tus entradas.

Recuerda cambiar donde estàn las "equis" por tus nombres de usuario de redes sociales. Si quieres puedes ver el vìdeo donde te explico paso a paso còmo hacerlo AQUÌ.

<b:if cond="data:blog.pageType == "item"">
<style>
form.feedburner{
margin:20px 0 0;
display:block;
clear:both;
}
.dcstyle{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7MS9p6_zF25kroYXRd90pJY4nwjzC3djZA5mU1Kt6UT6tJUNyvHePpoydN23y9uA2lf8Cp9d_guiCiHo99aarK4wY1PfpvkOtNcx3UxSvIOtjmsni01zoeUi5nY5BdRJQSqkzMmm60I94/s400/email_icon.png) no-repeat scroll 4px center transparent;
padding:7px 15px 7px 35px;
color:#666;
font-weight:bold;
text-decoration:none;
border:1px solid #D3D3D3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
.dcsubmit{
color:#666;
font-weight:bold;
text-decoration:none;
padding:6px 15px;
border:1px solid #D3D3D3;
cursor: pointer;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-goog-ms-border-radius: 4px;
border-radius: 4px;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}
#emailwidget-outer {
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
-goog-ms-border-radius: 10px 10px 10px 10px;
border-radius: 10px;
background: none repeat scroll 0 0 rgba(104, 249, 101, 0.34);
border: 1px solid #D3D3D3;
padding: 8px;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
width:480px;
}
#emailwidget-outer:hover{
background: none repeat scroll 0 0 #FFF;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
#emailwidget-outer td{
padding:3px 0;
}
</style>
</b:if><br />
<center>
<div id="emailwidget-outer">
<div class="separator" style="clear: both; text-align: center;">
</div>
<div id="emailwidget">
<table style="border: none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; width: 100%px;">
<tbody>
<tr style="border: none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;">
<td align="left" style="border: none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;"><div style="font-size: 22px; font-weight: bold; margin: 0px 0px 5px;">
<span style="color: blue;">Suscríbete por E-mail</span></div>
<form action="http://feedburner.google.com/fb/a/mailverify" class="feedburner" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=XXXX', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" style="margin: 0pt;" target="popupwindow">
<input name="uri" type="hidden" value="XXXX" />
<input name="loc" type="hidden" value="en_US" />
<input class="dcstyle" name="email" onblur="if (this.value == "") {this.value = "Ingresa tu e-mail";}" onfocus="if (this.value == "Ingresa tu e-mail") {this.value = ""}" type="text" value="Ingresa tu e-mail" />
<input alt="" class="dcsubmit" title="" type="submit" value="Suscribirme" />
</form>
</td>
<td style="border: none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;"><div style="font-size: 14px; font-weight: bold; margin: 0px 0px 5px;">
o sígueme en:</div>
<a href="https://www.youtube.com/user/XXXXX"><img border="0" height="43" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhau6iJj918DyyKsknZY69oEjXNCuT9i6g7TDMGbCtfVuf1Nu8FFhkNk300_y6e8WSjPAJ7zjEnfabZ6YO2NcTnz2jen_Ep9Xt2gXC5LTdeYxgJZ9-2MoJRGX2zu9XRUiJ0D5ygqrZtZffm/s200/you.png" width="30" /></a>
<a href="https://twitter.com/XXXXX"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVo12GYzzeHz339H4UbMYoy-bMTEDts-0AElA9_Df-qNy9MsBelAb1C-HIaE-oe7LPwftPEuQgiisz-XXkjlcHQh4jUJe82U0FGvBWDUwAS3GfgowhaDL2kXkZJO0ZrZHlZrUYI7u-nYY/s1600/twitter-30%C3%9743.png" /></a>
<a href="https://www.facebook.com/pages/XXXXX/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEa0yCitkGvSyANwNAVNRnVqlNfAgELEtJPGqpijZhBt-2yw6rrRBvi7fbCzFUo0BScdFqWDUcHCDPJDvqtvaNrCOUv2t0y0r_moM73MOdntrid6uUsb70Gq00bK74RMZQEbSTlxYoZQI/s1600/facebook-30%C3%9743.png" /></a>
<a href="https://plus.google.com/u/0/XXXXX"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilEVxmkejREhX7mg0k-dpmgXLDAUNkeRLK1LxkYT1rEK4rmlRFtwJAY9cCbqddZcPNPDPFQU9ZqFtxcHYswUbSU2oUCC89DYyJlEsyoSQGBFwk-IkSJwZ60to35eDiZzXS9guaFKBndRM/s1600/googleplus-30%C3%9743.png" /></a>
</td>
</tr>
</tbody></table>
<div align="center">
<span style="color: white; font-size: 8px; font-style: italic;"><span decoration="none" style="color: white;"></span></span></div>
</div>
</div>
</center>

sábado, 28 de marzo de 2015

BOTONES FLOTANTES PARA COMPARTIR EN MI BLOG.

Hola a todos, en un vìdeo que hice para mi canal de youtube explico còmo poner botones para compartir en blogger usando "share this", pero a varias personas no les funcionan ya que han descargado otras plantillas diferentes a las que ofrece blogger por defecto.
Asì que en este post les voy a compartir un còdigo HTML para que lo pongan en su blog y que funciona muy bien en plantillas template, blogger, wordpress u otras que instales.

Es una barra de botones flotantes que se verà asi:

Para agregar estos botones debes ir en el caso de Blogger a Diseño, Añadir gadget, HTML/JavaScript y en el caso de Wordpress es Apariencia, Widgets y ahí pegas lo siguiente:

<style type="text/css">

.sb{

background:#f0f0f0;

cursor:pointer;

color:#fff;

padding:4px;

text-shadow:0 -1px 1px rgba(0,0,0,0.25);

-moz-border-radius:6px;

-webkit-border-radius:6px;

border-radius:6px; margin-left:8px;

font:12px sans-serif;

}

.sb:hover{

background:#777;

}

.tl {text-align:center;font-size:10px;font-weight:bold }

#Ps {position:fixed; bottom:15%; margin-left:-800px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background:#fff;border: 1px solid #f7f7f7; padding:0 0 2px 0;z-index:10;}

#Ps .sb {float:left;clear:both;margin:5px 2px 0 5px;}

#Ps:hover {-moz-border-radius:6px;

-moz-box-shadow: 0 2px 4px hsla(0,0%,0%,.35);

-webkit-box-shadow: 0 2px 4px hsla(0,0%,0%,.35);border: 1px solid #ddd;}

</style>

</div>

</div>

</div>

</div>

</div>

Para cambiar la posiciòn de los botones solo debes modificar en la parte donde dice: margin-left:-800px

Espero que te sirva y recuerda que puedes suscribirte a mi blog o canal de youtube, si tienes alguna pregunta no dudes en contactarme.

Páginas

domingo, 16 de octubre de 2016

CAJA DE SUSCRIPCIÓN PERSONALIZADA.

sábado, 24 de septiembre de 2016

CÓMO CREAR UN GIF ANIMADO CON PHOTOSHOP

viernes, 18 de marzo de 2016

BOTONES DE REDES SOCIALES PARA COMPARTIR EN BLOGGER.

domingo, 28 de febrero de 2016

PONER CAJA DE SUSCRIPCIÒN AL FINAL DE LAS ENTRADAS.

sábado, 28 de marzo de 2015

BOTONES FLOTANTES PARA COMPARTIR EN MI BLOG.

GANA DINERO POR ACORTAR TUS ENLACES

Vistas de página en total

Seguidores