Trucos Blogger

Menú Bordeado Animado

Hay muchas personas que deciden poner una gran imagen arriba en la cabecera. A mi personalmente no me gusta, pero para gustos... En estos casos, poner debajo un menú horizontal con las categorías puede ser inconveniente porque el menú quedaría escondido, con lo que perdería su eficacia. Si es el caso que la plantilla es de 2 columnas, con el sidebar a la derecha te recomendaría este menú. Como veis en la imagen a continuación, coloca una imagen arriba, por la que al pasar el ratón despliega un menú a la izquierda y abajo muy ligero y fácil de hacer. 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDi8attuu7-8mH4NKIBL1Zl2zYqOvzFI5A5k1qACvN3cE_WlAlv0s9mKsCdfDZP5W4FVokJdpq_OvqDqBoX2KvLZTiyp5P0dKAnG6-AQROs3Q_e1yCg0wMbMYbQRf1Lmsq4WgUyWc25fw/s1600/menu.jpg" imageanchor="1" rel="nofollow" style="margin-left: 1em; margin-right: 1em;"><img alt="Menú Bordeado Animado" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDi8attuu7-8mH4NKIBL1Zl2zYqOvzFI5A5k1qACvN3cE_WlAlv0s9mKsCdfDZP5W4FVokJdpq_OvqDqBoX2KvLZTiyp5P0dKAnG6-AQROs3Q_e1yCg0wMbMYbQRf1Lmsq4WgUyWc25fw/s1600/menu.jpg" title="Menú Bordeado Animado" /></a></div>
 
Lo primero vamos a Plantilla y en el html buscamos la etiqueta </head> y justo antes de ella pegamos el siguiente código: 
<blockquote class="tr_bq">
<link rel="stylesheet" type="text/css" href="http://sites.google.com/site/recursosbit/iconos.css"/> <link rel="stylesheet" type="text/css" href="http://sites.google.com/site/recursosbit/menuanimado.css" /> </blockquote>
Ahora buscamos la etiqueta </body> y justo encima pegamos lo siguiente: 
<blockquote class="tr_bq">
<script src="http://sites.google.com/site/recursosbit/classie.js"></script> <script src="http://sites.google.com/site/recursosbit/castromenu.js"></script></blockquote>
Guardamos los cambios y nos vamos a crear un widget Html en Diseño y dentro pegamos lo siguiente: 
<blockquote class="tr_bq">
<nav id="menucastro" class="menucastro">     <a href="#" class="menucastro-trigger">Menu</a>     <ul>      <li><a href="#">Link 1</a></li>      <li><a href="#">Link 2</a></li>      <li><a href="#">Link 3</a></li>      <li><a href="#">Link 4</a></li>      <li><a href="#">link 5</a></li>     </ul>     <ul>      <li><a href="#" class="castro-iconos icon-twitter">Twitter</a></li>      <li><a href="#" class="castro-iconos icon-gplus">Google+</a></li>      <li><a href="#" class="castro-iconos icon-facebook">Facebook</a></li>      <li><a href="#" class="castro-iconos icon-github">icon-github</a></li>     </ul> </nav> </blockquote>
Fuente: <a href="http://bitcreativo.blogspot.com.es/2013/10/menu-bordeado-animado.html#.UlNTq1PMgvk" rel="nofollow" target="_blank">BitCreativo</a>

Menú Bordeado Animado

Hay muchas personas que deciden poner una gran imagen arriba en la cabecera. A mi personalmente no me gusta, pero para gustos... En estos ca...

10/08/2013

Pop up con Efecto Lightbox en Blogger

<div class="separator" style="clear: both; text-align: center;">
<a class="center" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkJ-EmK9WA7pz3NDlpzsHr0stsutthyIcG8zjriEtGV2aOrGAECfojwCBau3Qt09YfTDJ2xGiQEOtTf_M3EJOMPyPm_Rg3nmGwBA1Z1nJMeq7b5x1Zhp0IYmce7iRDzEbH8AmYv6SkzXU/s1600/popupconefectolightbox.jpg">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkJ-EmK9WA7pz3NDlpzsHr0stsutthyIcG8zjriEtGV2aOrGAECfojwCBau3Qt09YfTDJ2xGiQEOtTf_M3EJOMPyPm_Rg3nmGwBA1Z1nJMeq7b5x1Zhp0IYmce7iRDzEbH8AmYv6SkzXU/s320/popupconefectolightbox.jpg" width="320" /></a></div>
 
Los pop ups son los elementos más odiados por los lectores. Esas molestas ventanitas, llenas de publicidad sin ninguna utilidad, que empeoran tu experiencia en una web no es algo a lo que debas recurrir en un blog si quieres que tus lectores te vuelvan a visitar. Ahora bien, si el contenido en cuestión fuera de utilidad, el pop up seria un recurso a tener en cuenta, sobretodo si está integrado dentro de la misma pestaña, sin que se abran ventanas nuevas del explorador.
 
El pop up con efecto lightbox obliga al lector a centrarse en el contenido que quieres que lean y tienen que tomar acción, cerrando el pop up, para poder seguir navegando por tu web. 
Posibles usos para el pop up con efecto lightbox: 
<ul>
<li>El más conocido sería para mostrar una imagen donde anuncies algo (recuerda que sea de utilidad).</li>
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU637EHMsINPYZb9cUf1j8Cg18pwuZQ5gWaUTEktWr2KkAwMh_GTH-PBxkp_OlpBKf55S8Gfr_giAxpx97TJOvbpXbmYY5LDAZ7RypZj333oTFlZo0MOyUx22ePtfFvazT8EnQCRzvsHk/s1600/popupfectolightbox2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="288" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU637EHMsINPYZb9cUf1j8Cg18pwuZQ5gWaUTEktWr2KkAwMh_GTH-PBxkp_OlpBKf55S8Gfr_giAxpx97TJOvbpXbmYY5LDAZ7RypZj333oTFlZo0MOyUx22ePtfFvazT8EnQCRzvsHk/s320/popupfectolightbox2.jpg" width="320" /></a></div>
 
<li>Puedes meter un formulario de correo para suscribirse a las actualizaciones de tu web.</li>
 <div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju-mQ1tDpgtC1vsCuTk5_I9_brPEfIJTORu6vn6utoBSyyIiK0tyoiksQWYz6wkgqKOGELk7jnEbtbCH4H3iQKbWBpB-NeT68lOyfVEIf0oGoAKp1Uxo8Yt_d03dZYnBlIvzNmfhmTGRE/s1600/popupregaloemail3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="165" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju-mQ1tDpgtC1vsCuTk5_I9_brPEfIJTORu6vn6utoBSyyIiK0tyoiksQWYz6wkgqKOGELk7jnEbtbCH4H3iQKbWBpB-NeT68lOyfVEIf0oGoAKp1Uxo8Yt_d03dZYnBlIvzNmfhmTGRE/s320/popupregaloemail3.jpg" width="320" /></a></div>
 
<li>Últimamente, se han hecho populares los pop ups con el fanbox de Facebook. Pero podrías meter el de cualquier red social de tu preferencia como Google+ o Twitter.</li>
 
<div class="separator" style="clear: both; text-align: center;">
<a class="center" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9knXOC5-JnRJzcdwVGw6NAvHInOaY3_e2rApk5HYrioOJnV9JhZC0qgRSwz21Cx1inDZbPX2hMoDX4t36Hnn5sjMxdCG9vHLAQBDFRiyUnoUNCmfcnLZuMP-7VrSZnB8pxCUjqCKYtUs/s1600/popupfanboxtwitter4.jpg"> <img height="212" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9knXOC5-JnRJzcdwVGw6NAvHInOaY3_e2rApk5HYrioOJnV9JhZC0qgRSwz21Cx1inDZbPX2hMoDX4t36Hnn5sjMxdCG9vHLAQBDFRiyUnoUNCmfcnLZuMP-7VrSZnB8pxCUjqCKYtUs/s320/popupfanboxtwitter4.jpg" width="320" /></a></div>
</ul>
 
A continuación te mostraré sencillamente el código para que pongas tu pop up con efecto Lightbox en Blogger y más adelante crearé posts con el código concreto para crear un fanbox y los demás ejemplos que hemos visto antes. Así que ve a Diseño - Añadir un gadget - HTML/Jacascript y pega lo siguiente: 
 
<blockquote class="tr_bq">
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>;
<style> 
#fanback{display:none;background:url(https://sites.google.com/site/terrenoblogger/imagenes/bg.png);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999;}#fan-exit{width:100%;height:100%}#fanbox{background:white;width:420px;height:270px;position:absolute;top:50%;left:50%;-webkit-box-shadow:inset 0 0 50px 0 #939393;-moz-box-shadow:inset 0 0 50px 0 #939393;box-shadow:inset 0 0 50px 0 #939393;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;margin:-135px 0 0 -210px;}#fanclose{float:right;cursor:pointer;background:url(https://sites.google.com/site/terrenoblogger/imagenes/fanclose.png) repeat;height:15px;padding:20px;position:relative;padding-right:40px;margin-top:-20px;margin-right:-22px;}.remove-borda{height:1px;width:366px;margin:0 auto;background:#F3F3F3;margin-top:16px;position:relative;margin-left:20px;} 
</style> 
<script type="text/javascript"> 
jQuery.cookie=function(key,value,options){ 
 
if(arguments.length>1&&String(value)!=="[object Object]"){options=jQuery.extend({},options); 
 
if(value===null||value===undefined){options.expires=-1;} 
 
if(typeof options.expires==='number'){var days=options.expires,t=options.expires=new Date();t.setDate(t.getDate()+ days);} 
 
value=String(value); 
 
return(document.cookie=[ 
encodeURIComponent(key),'=', 
options.raw?value:encodeURIComponent(value), 
options.expires?'; expires='+ options.expires.toUTCString():'', 
options.path?'; path='+ options.path:'', 
options.domain?'; domain='+ options.domain:'', 
options.secure?'; secure':''].join(''));} 
 
options=value||{}; 
var result,decode=options.raw?function(s){ 
return s;}:decodeURIComponent;return(result=new RegExp('(?:^|; )'+ encodeURIComponent(key)+'=([^;]*)').exec(document.cookie))?decode(result[1]):null;}; 
</script> 
 
<script type="text/javascript"> 
jQuery(document).ready(function($){if($.cookie('popup_user_login')!='yes'){ 
$('#fanback').delay(100).fadeIn('medium'); 
$('#fanclose, #fan-exit').click(function(){ 
$('#fanback').stop().fadeOut('medium')})} 
$.cookie('popup_user_login','yes',{path:'/',expires:30})}); 
</script> 
 
<div id="fanback"> 
<div id="fan-exit"></div> 
<div id="fanbox"> 
<div id="fanclose"></div> 
<div class="remove-borda"></div>CONTENIDO</div> 
</div></blockquote>
Para no ser redundantes en el código haz primero una busqueda en tu html de "jquery". A veces ya hemos llamado este script desde otro widget que hayamos instalado, o viene por defecto en nuestra plantilla y no sería necesario poner esa línea. Puedes probar a no ponerla y si no te funciona entonces la añades. 
Para determinar cada cuanto se abre el pop up, este script añade una cookie. Por defecto lo he puesto para que salga cada 30 días, pero puedes cambiarlo en 
expires:30 
Cambia 
CONTENIDO por lo que quieras poner: una imagen, un texto, lo que quieras. Por ejemplo, para añadir una imagen tendrías que reemplazarlo por: 
<blockquote class="tr_bq">
<img src="URL de IMG"></blockquote>
Fuente del script: <a href="http://www.terrenoblogger.co/2013/05/Fanbox-de-Facebook-Emergente-y-Desvaneciente.html" rel="nofollow" target="_blank">Terreno Blogger</a>

Pop up con Efecto Lightbox en Blogger

Los pop ups son los elementos más odiados por los lectores. Esas molestas ventanitas, llenas de publicidad sin ninguna utilidad, que emp...

9/26/2013

Personalizar la Lista Numerada en Blogger

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR6qUtMp3rVdFqzSWurS-UmUfqm6kS8vMKdW6GjBbvj-wCNIupfF8PYoLmDuFaX_CcIPQs7OcTucMXR-m7wuYXslPIiBVdYbt855OyLvKoFnlv7p09sIhPnsIwOpXcQ4p6Us5wLjK4HWo/s1600/listanumerada.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Personalizar la Lista Numerada en Blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR6qUtMp3rVdFqzSWurS-UmUfqm6kS8vMKdW6GjBbvj-wCNIupfF8PYoLmDuFaX_CcIPQs7OcTucMXR-m7wuYXslPIiBVdYbt855OyLvKoFnlv7p09sIhPnsIwOpXcQ4p6Us5wLjK4HWo/s1600/listanumerada.jpg" title="Personalizar la Lista Numerada en Blogger" /></a></div>
 
En el post anterior estuvimos trasteando en el CSS de nuestra plantilla para <a href="http://trucosbloggerblog.blogspot.com/2013/09/cambiar-las-vinetas-en-blogger.html" target="_blank">cambiar las viñetas en Blogger</a>. En esta entrada vamos a personalizar la lista numerada en Blogger del mismo modo. Os voy a enseñar el estilo que tengo puesto en este blog. 
<ol>
<li><div>
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium.</div>
</li>
<li><div>
Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum .</div>
</li>
</ol>
Ahora vamos al lí. Vete a Plantilla > Edición HTML. Busca ]]></b:skin> y encima pega lo siguiente: 
<blockquote class="tr_bq">
.post-outer ol{ 
counter-reset:li; 
margin-left:0; 
padding-left:0 
} 
.post ol li{ /*Estilos de cada elemento*/ 
position:relative; 
margin:0 0 20px 2em !important; 
padding:4px 8px !important; 
list-style:none; 
*list-style: decimal; 
border:1px solid #e2e3e2; /*Color de borde*/ 
background:#f2f2f2; /*Color de fondo*/ 
text-indent:10px; 
} 
.post ol li:before{ /*Los estilos del Número*/ 
content:counter(li); 
counter-increment:li; 
position:absolute; 
top:-5px; 
left:-5px; 
font-family:'Oswald', serif; 
font-size:14px; 
width:12px; 
margin:0 0 10px 0; 
padding:4px !important; 
color:#727272; /*Color de texto*/ 
text-align:left; 
background:#e2e2e2; /*Color de fondo*/ 
text-indent:2px 
} 
.post ol li:after{ 
content:""; 
position:absolute; 
top:-5px; 
left:14px; 
width: 0px; 
height: 0px; 
border-style: solid; 
border-width: 5px 0 0 5px; 
border-color: transparent transparent transparent #aeaeae; /*color del triangulito*/</blockquote>
Ahora haz la prueba: 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrMixrXhbCbnB9q11qC8kr-yeZhxkB82VECazjlbba5qKvsI-yPb4AMU1POSFsngqu0skDk2SYc9RZBmgMlGMdlEFFNkC2v4zCONMI8reEE4pHpD2q2aK8_weOaAoLP4adYblyDMoDBqY/s1600/Personalizarlalistanumeradaenblogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrMixrXhbCbnB9q11qC8kr-yeZhxkB82VECazjlbba5qKvsI-yPb4AMU1POSFsngqu0skDk2SYc9RZBmgMlGMdlEFFNkC2v4zCONMI8reEE4pHpD2q2aK8_weOaAoLP4adYblyDMoDBqY/s1600/Personalizarlalistanumeradaenblogger.png" /></a></div>

Personalizar la Lista Numerada en Blogger

En el post anterior estuvimos trasteando en el CSS de nuestra plantilla para cambiar las viñetas en Blogger . En esta entrada vamos a per...

9/24/2013

Cambiar las Viñetas en Blogger

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG5j91gvD-BTglKrVUEN57Duk1fYBHZ3QzRVb48gFrgS-Sb0NTHAgLDcIrWO1HNFt7rvT2-GZKGyeZk2BT8lR_vCtbpkKFiE6gmjOkseS57Pck_6VTcHkaXmQeBFaBL_BTC0Zcx_OT1s8/s1600/lists1.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cambiar las Viñetas en Blogger" border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG5j91gvD-BTglKrVUEN57Duk1fYBHZ3QzRVb48gFrgS-Sb0NTHAgLDcIrWO1HNFt7rvT2-GZKGyeZk2BT8lR_vCtbpkKFiE6gmjOkseS57Pck_6VTcHkaXmQeBFaBL_BTC0Zcx_OT1s8/s400/lists1.gif" title="Cambiar las Viñetas en Blogger" width="380" /></a></div>
 
A los lectores les encantan los listados, es un hecho demostrado, por lo que poner un diseño bonito siempre es de agradecer. Para cambiar las viñetas en Blogger, solo hay que acceder al editor de HTML y trastear un poco. Vamos a ello. 
 
Entra en Diseño > Edición de HTML y pega el siguiente código encima de ]]></b:skin> 
<blockquote class="tr_bq">
/* Inicio Personalizacion de Viñetas  - http://trucosbloggerblog.blogspot.com */ 
.post ul {
list-style: none; 
margin: 10px 0 0 20px; 
padding: 0; 
} 
 
.post ul li { 
background:url(URL de la imagen) center left no-repeat; 
margin:0; 
padding:3px 3px 3px 20px; 
} 
/* Fin Personalizacion de Viñetas  - http://trucosbloggerblog.blogspot.com 
*/
</blockquote>
Cambiar 
URL de la imagen por la direccion de la imagen que quieras poner. En <a href="http://www.websitebullets.com/" rel="nofollow" target="_blank">Websitebullets</a> tienes un monton de viñetas para elegir. Si tu blog tiene un fondo distinto a blanco te tocará darle un reparso con un editor de imagenes para ponerles un fondo transparente.
 
 
Tras cambiar las viñetas en Blogger, vamos a ver que tal quedan:
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrS1K6-uPKXg1K79vIBjQJSdpqAGjERunk6pcoUDsknIdEXfuZMIL71kqTfj7JgXI37_ro-uwm3tSs7Q6sTO1DnvxaQ8l4-PCkyy9s1X4vWjhdr9xbv8L73xlTKkRMdJwcjvNbfZpQ1Ak/s1600/cambiarlasvi%C3%B1etasenblogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrS1K6-uPKXg1K79vIBjQJSdpqAGjERunk6pcoUDsknIdEXfuZMIL71kqTfj7JgXI37_ro-uwm3tSs7Q6sTO1DnvxaQ8l4-PCkyy9s1X4vWjhdr9xbv8L73xlTKkRMdJwcjvNbfZpQ1Ak/s1600/cambiarlasvi%C3%B1etasenblogger.png" /></a></div>
<ul>
<li>Lista no ordenada a</li>
<li>Lista no ordenada b</li>
<li>Lista no ordenada c </li>
</ul>
Ya puestos, no te pierdas como <a href="http://trucosbloggerblog.blogspot.com.es/2013/09/personalizar-la-lista-numerada-en.html" target="_blank">Personalizar la Lista Numerada en Blogger</a> 
 
<ul>
</ul>

Cambiar las Viñetas en Blogger

A los lectores les encantan los listados, es un hecho demostrado, por lo que poner un diseño bonito siempre es de agradecer. Para cambiar...

9/24/2013

Formulario de Contacto En Una Pagina en Blogger

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhglR8mz4JsnvECg1FfuJoNkZWDDsAnQtGGfQwca7Y2N4xIjF9vJshki9NNtKdzgbsMt4EYMeGGZ3sc580YyIuBqtzfxYXbQB2LN5kjEp_823k-AtqTrzpKLezlCkRbDDD5Gi-7AcjUreI/s1600/formulariodecontacto.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Formulario de Contacto En Una Pagina en Blogger" border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhglR8mz4JsnvECg1FfuJoNkZWDDsAnQtGGfQwca7Y2N4xIjF9vJshki9NNtKdzgbsMt4EYMeGGZ3sc580YyIuBqtzfxYXbQB2LN5kjEp_823k-AtqTrzpKLezlCkRbDDD5Gi-7AcjUreI/s400/formulariodecontacto.jpg" title="" width="400" /></a></div>
 
Si queremos que nuestros lectores se pongan en contacto con nosotros, lo mejor es usar un formulario de contacto de los de toda la vida. Para ello simplemente hay que configurar un widget y nos sale en el lateral. Lo cual me parece molesto, gasta espacio y es poco estético. Vamos a configurar uno nosotros para que al pinchar en un enlace nos salga el formulario de contacto en una pagina en Blogger. 
 
<ol>
<li>
Diseño > Añadir gadget > Más Gadgets > Formulario de Contacto.  Guardar.
</li>
<li>Para esconderlo del lateral y darle estilo vamos a Plantilla  > Editor HTML. Buscamos la etiqueta </head> y encima pegamos:</li>
<blockquote>
<b:if cond='data:blog.pageType == "static_page"'> <style> #ContactForm1{ display:none!important;} </style> </b:if></blockquote>
 
<blockquote>
<style> /*---- Compatible contact Form by MBT -----*/ .contact-form-name, .contact-form-email, .contact-form-email-message { max-width: 220px; width: 100%; font-weight:bold; } .contact-form-name { background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg182-CSgCKQtGSie_rOCpD8ObOmahxtP98J94w4hhAhyphenhyphenTAjpQkromGK1QCqbhviCKy12Ysibsi5R02L3I2zo4PtDQUZ7tEXIhPS5tdeX-6t4L7t4jqvZ0Q9iTCmax2xs9_kbU2my5TJ_Q/s320/name.png) no-repeat 7px 8px; background-color: #FFF; border: 1px solid #ddd; box-sizing: border-box; color: #A0A0A0; display: inline-block; font-family: Arial,sans-serif; font-size: 12px; font-weight:bold; height: 24px; margin: 0; margin-top: 5px; padding: 5px 15px 5px 28px; vertical-align: top; } .contact-form-email { background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVJknEpVRqaLmSa4QH5Zgwmn215-P6HBe0R1OBQZHDKBTTVjf8FeIp_eEja7ZziTgKQaIxNN8PAwfFBLIHwpbFk1jLSWK4P91NIYIWRVYj5o3JKcb31CxFOInlYwoQV2LvjsQTEzYGV0g/s320/email.png) no-repeat 7px 10px; background-color: #FFF; border: 1px solid #ddd; box-sizing: border-box; color: #A0A0A0; display: inline-block; font-family: Arial,sans-serif; font-size: 12px; font-weight:bold; height: 24px; margin: 0; margin-top: 5px; padding: 5px 15px 5px 28px; vertical-align: top; } .contact-form-email:hover, .contact-form-name:hover{ border: 1px solid #bebebe; box-shadow: 0 1px 2px rgba(5, 95, 255, .1); padding: 5px 15px 5px 28px; } .contact-form-email-message:hover { border: 1px solid #bebebe; box-shadow: 0 1px 2px rgba(5, 95, 255, .1); padding: 10px; } .contact-form-email-message { background: #FFF; background-color: #FFF; border: 1px solid #ddd; box-sizing: border-box; color: #A0A0A0; display: inline-block; font-family: arial; font-size: 12px; margin: 0; margin-top: 5px; padding: 10px; vertical-align: top; max-width: 350px!important; height: 150px; border-radius:4px; } .contact-form-button { cursor:pointer; height: 32px; line-height: 28px; font-weight:bold; border:none; } .contact-form-button { display: inline-block; zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */ *display: inline; vertical-align: baseline; margin: 0 2px; outline: none; cursor: pointer; text-align: center; text-decoration: none; font: 14px/100% Arial, Helvetica, sans-serif; padding: .5em 2em .55em; text-shadow: 0 1px 1px rgba(0,0,0,.3); -webkit-border-radius: .5em; -moz-border-radius: .5em; border-radius: .5em; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); } .contact-form-button:hover { text-decoration: none; } .contact-form-button:active { position: relative; top: 1px; } .MBT-button-color { color: #fef4e9; border: solid 1px #da7c0c; background: #f78d1d; background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20)); background: -moz-linear-gradient(top, #faa51a, #f47a20); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20'); } .MBT-button-color:hover { background: #f47c20; background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015)); background: -moz-linear-gradient(top, #f88e11, #f06015); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015'); border-color: #F47C20!important; } .MBT-button-color:active { color: #fcd3a5; background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a)); background: -moz-linear-gradient(top, #f47a20, #faa51a); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a'); } </style>  <style> @media screen and (-webkit-min-device-pixel-ratio:0) { .contact-form-name { background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg182-CSgCKQtGSie_rOCpD8ObOmahxtP98J94w4hhAhyphenhyphenTAjpQkromGK1QCqbhviCKy12Ysibsi5R02L3I2zo4PtDQUZ7tEXIhPS5tdeX-6t4L7t4jqvZ0Q9iTCmax2xs9_kbU2my5TJ_Q/s320/name.png) no-repeat 7px 6px; padding: 15px 15px 15px 28px; } .contact-form-email { background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVJknEpVRqaLmSa4QH5Zgwmn215-P6HBe0R1OBQZHDKBTTVjf8FeIp_eEja7ZziTgKQaIxNN8PAwfFBLIHwpbFk1jLSWK4P91NIYIWRVYj5o3JKcb31CxFOInlYwoQV2LvjsQTEzYGV0g/s320/email.png) no-repeat 7px 8px; padding: 15px 15px 15px 28px; } .contact-form-email:hover, .contact-form-name:hover{ padding: 15px 15px 15px 28px; } .contact-form-button { height: 28px; } } </style></blockquote>
 
<li>Para insertarlo en una página estática vamos a:
Panel de control - Páginas - Página nueva - Página en blanco - Le pones un título (Formulario de Contacto) y en HTML colocamos lo siguiente:
</li>
<blockquote>
<div class='form'>  <form name='contact-form'>  <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' value="Name" size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Name&quot;;}' onfocus='if (this.value == &quot;Name&quot;) {this.value = &quot;&quot;;}' />  <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' value="Email ID" size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Email ID&quot;;}' onfocus='if (this.value == &quot;Email ID&quot;) {this.value = &quot;&quot;;}'/>  <textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' value='Leave Your Message..' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Leave Your Message..&quot;;}' onfocus='if (this.value == &quot;Leave Your Message..&quot;) {this.value = &quot;&quot;;}'></textarea>  <input class='contact-form-button contact-form-button-submit MBT-button-color' type='reset' value='Clear'/>  <input class='contact-form-button contact-form-button-submit MBT-button-color' id='ContactForm1_contact-form-submit' type='button' value='Send'/>  <div style='text-align: center; max-width: 222px; width: 100%'> </div> </form>  </div></blockquote>
</ol>
Hay veces que no se oculta bien. Para entonces busco en el HTML la etiqueta: <b:skin><![CDATA[  y justo después pego: 
<blockquote class="tr_bq">
#ContactForm1 { display: none ! important; }</blockquote>
 
Fuente: <a href="http://www.amorsevillista.com/2013/05/personalizar-formulario-de-contacto-de.html" rel="nofollow" target="_blank">Amorsevillista</a>

Formulario de Contacto En Una Pagina en Blogger

Si queremos que nuestros lectores se pongan en contacto con nosotros, lo mejor es usar un formulario de contacto de los de toda la vida. ...

9/23/2013

Añadir una descripcion en las entradas de Blogger

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifbuS6EB7sr-w2U_fekMf8uJ_ojo6ncOebNuzSXW216xTnqM6YQfuKtSVkQIcmzLwiKWholxxN8HyZIUFKzgb4EAbhciblXgBZcfUKoTjYyMS6mhyphenhyphenpwZllNRIcCnQTSklDRlQc6K612ks/s1600/A%C3%B1adirdescripcionenentradasBlogger.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Añadir una descripcion en las entradas de Blogger" border="0" height="228" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifbuS6EB7sr-w2U_fekMf8uJ_ojo6ncOebNuzSXW216xTnqM6YQfuKtSVkQIcmzLwiKWholxxN8HyZIUFKzgb4EAbhciblXgBZcfUKoTjYyMS6mhyphenhyphenpwZllNRIcCnQTSklDRlQc6K612ks/s400/A%C3%B1adirdescripcionenentradasBlogger.jpg" title="Añadir una descripcion en las entradas de Blogger" width="400" /></a></div>
Una de las primeras formar que un buscador nos encuentra es mediante la descripción de la página. No solo nos conformaremos con poner una descripción para todo nuestro blog, si no que vamos a añadir una descripcion en las entradas de Blogger individualmente. 
Cuando queremos que nuestra web se vea en Google, normalmente nos preocupamos de nuestra portada, en mi caso http://trucosbloggerblog.blogspot.com y nos olvidamos del resto. Si yo quiero que esta entrada llegue a mas gente, tengo que optimizarla por si sola. Es mas, cuanto mas optimizadas esten nuestras entradas por si mismas, mas subirá en el ranking nuestra web en general. 
Como veis en nuestra imagen a continuación, por defecto no tenemos don de poner nuestra descripcion. 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFiU-mHdj9M4Qw1k4cH9iLGQXv_c7qUWpbj9l3rGSp1ikagL8jxd4kvI9ZKAwdeJhvj-NyTyMBLMM-5GMNTZzSTtOg3P_CQyS0jctiB2NxPiXaefMs3HwMOUlacQI9ydZqoJPghSTgPGQ/s1600/A%C3%B1adirdescripcionenentradasBlogger2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFiU-mHdj9M4Qw1k4cH9iLGQXv_c7qUWpbj9l3rGSp1ikagL8jxd4kvI9ZKAwdeJhvj-NyTyMBLMM-5GMNTZzSTtOg3P_CQyS0jctiB2NxPiXaefMs3HwMOUlacQI9ydZqoJPghSTgPGQ/s1600/A%C3%B1adirdescripcionenentradasBlogger2.jpg" /></a></div>
 
Para añadir una descripcion en las entradas de Blogger vamos a hacer lo siguiente: 
<ol>
<li>En  nuestro Blogger vamos a Configuración > Lo básico</li>
<li>Rellenamos nuestra descripción general de la web.</li>
<li>Ahora vamos a Configuración > Preferencias para motores de búsqueda</li>
<li>En Etiquetas meta rellenamos la descripción.</li>
</ol>
Ahora cuando abrís una nueva entrada vereis que teneis el campo "Descripción de la búsqueda" disponible. 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMCYig_o9V7ESIJZsghc3ExyI7Vl4PEIYrLXjZYxn2rsJtFU9iOXf40VpdEPx2KDxLo-w4GrTOEK2m_ALIPN47Mlaejo_Sh0c-pmZO-2j0Cww4uK-ybMoysHA-8FEnIwXsZWf-8pZt4OM/s1600/Descripci%C3%B3ndelab%C3%BAsqueda.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Descripción de la búsqueda" border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMCYig_o9V7ESIJZsghc3ExyI7Vl4PEIYrLXjZYxn2rsJtFU9iOXf40VpdEPx2KDxLo-w4GrTOEK2m_ALIPN47Mlaejo_Sh0c-pmZO-2j0Cww4uK-ybMoysHA-8FEnIwXsZWf-8pZt4OM/s400/Descripci%C3%B3ndelab%C3%BAsqueda.jpg" title="Descripción de la búsqueda" width="253" /></a></div>
 
<ol>
</ol>

Añadir una descripcion en las entradas de Blogger

Una de las primeras formar que un buscador nos encuentra es mediante la descripción de la página. No solo nos conformaremos con poner una ...

9/23/2013

Google Analytics en Blogger

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikSoEiNXBON9fTh4Si4UFI51ogPol9IjjddG-xdh-pzr5YMxUOyq_Ypl5nKV_hA0zkWhcCi0RCUemO6ZO9Lj93nkPcs5puNdk6NNGY5PEHCgo4PQ3L4ASsObtYpJz4GEaKKbKXi4IwHUg/s1600/googleanalytics.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Google Analytics" border="0" height="202" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikSoEiNXBON9fTh4Si4UFI51ogPol9IjjddG-xdh-pzr5YMxUOyq_Ypl5nKV_hA0zkWhcCi0RCUemO6ZO9Lj93nkPcs5puNdk6NNGY5PEHCgo4PQ3L4ASsObtYpJz4GEaKKbKXi4IwHUg/s320/googleanalytics.jpg" title="Google Analytics" width="320" /></a></div>
 
Blogger incorpora unas estadísticas a las que puedes accerder desde el menú de administricion de tu blog. Ahora bien, si quieres unas estísticas más detalladas, vas a tener que incorporar Google Analytics en Blogger. Para ellos sigue estos sencillos pasos. 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQh-FteS56VroUzZRZHoPFzw5IKSl-VNqTNJ5qb7wmDmUvDk4uxkZStlOIbjedwZLsFFMcPSYfMRcL7kG_PPpYkWJOu6JF2S5PokF7VKrOmw1OD5ES6yCYL4sZCsuvBZsjKQKrjRA-LpE/s1600/GoogleAnalyticsenBlogger.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Google Analytics en Blogger" border="0" height="142" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQh-FteS56VroUzZRZHoPFzw5IKSl-VNqTNJ5qb7wmDmUvDk4uxkZStlOIbjedwZLsFFMcPSYfMRcL7kG_PPpYkWJOu6JF2S5PokF7VKrOmw1OD5ES6yCYL4sZCsuvBZsjKQKrjRA-LpE/s400/GoogleAnalyticsenBlogger.jpg" title="Google Analytics en Blogger" width="400" /></a></div>
 
<ol>
<li>Entra en <a href="https://www.google.com/analytics" rel="nofollow" target="_blank">Google Analitics</a> y rellena los datos que te piden. Pinchas en el botón azul "Obtener ID de Seguimiento.</li>
<li>Ahora nos saldrá el código que buscamos: el ID de Seguimiento algo como UA-44623533-1.</li>
<li>Abrimos otra ventana de nuestro navegador y entramos en Blogger > Configuración > Otros.</li>
<li>Debajo del todo veremos el Cuadrito donde nos pide la ID de propiedad web de Google Analytics. Pegamos el que hemos conseguido antes y hacemos click en Guardar Configuracion.</li>
</ol>
 
Ya teneis listo vuestro Google Analytics en Blogger.

Google Analytics en Blogger

Blogger incorpora unas estadísticas a las que puedes accerder desde el menú de administricion de tu blog. Ahora bien, si quieres unas est...

9/23/2013

Eligir el diseño del blog

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIOgVI9cmRnvkCrR9Pty0j9AnpZ4it6sbV_IPakz1yvU-Mm-qBeK_HqsiSEqKwtO0ur05Sfgpk7kti0KgsAtg9yCH5HTwcOJyZ7CDVJmXfxU6CG2qQztZaIzLAP2CT72EGzgmz9cxqdV8/s1600/freshlife.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIOgVI9cmRnvkCrR9Pty0j9AnpZ4it6sbV_IPakz1yvU-Mm-qBeK_HqsiSEqKwtO0ur05Sfgpk7kti0KgsAtg9yCH5HTwcOJyZ7CDVJmXfxU6CG2qQztZaIzLAP2CT72EGzgmz9cxqdV8/s320/freshlife.jpg" width="320" /></a></div>
Este es un post de prueba para ver que tal se ven los diseños que estoy probando. Elegir el diseño del blog es algo divertido pero que si no se hace bien perderemos un monton de tiempo. Estoy buscando que sea bonito, por supuesto. Un blog agradable a la vista es lo primero que un lector va a agradecer. Somos asi de caprichosos. Me gusta que esté bien organizado y limpio. 
 
Hay veces que entramos a un blog y el contenido que leemos primero es medianamente util. Lo primero que yo hago es mirar a simple vista si hay otro contenido que me interese. Somos asi de vagos. Por lo que si no ofrecemos altenativas perdemos al lector rapidamente. A primera vista, el diseño ha de ofrecer los títulos de otros post. Me gusta sobre todo el widget de posts populares, con las imagenes en miniatura es capaz de enganchar rápidamente. 
 
Si viene equipado con widgets y botones de las redes sociales mas importantes mejor que mejor. Si no toca hacerlo a mano y se ha de invertir un monton de tiempo si no das con los códigos rápidamente. 
 
Algo que tambien hay que tener en cuenta es el SEO, hay plantillas mas compatibles que otras y si se es un lerdo como yo en CSS, más vale que venga todo ya preparadito que no tenerlo que hacer a mano.

Eligir el diseño del blog

Este es un post de prueba para ver que tal se ven los diseños que estoy probando. Elegir el diseño del blog es algo divertido pero que si...

9/22/2013

Valido la inscripción de este blog al servicio Paperblog bajo el seudónimo trucosblogger

Valido la inscripción de este blog al servicio Paperblog bajo el seudónimo trucosblogger

Valido la inscripción de este blog al servicio Paperblog bajo el seudónimo trucosblogger

9/22/2013

Trucos Blogger

Menú Bordeado Animado

Pop up con Efecto Lightbox en Blogger

Personalizar la Lista Numerada en Blogger

Cambiar las Viñetas en Blogger

Formulario de Contacto En Una Pagina en Blogger

Añadir una descripcion en las entradas de Blogger

Google Analytics en Blogger

Eligir el diseño del blog

Valido la inscripción de este blog al servicio Paperblog bajo el seudónimo trucosblogger

Entradas Populares

Archivo del blog