tag:blogger.com,1999:blog-30228488554510515262024-03-05T18:01:30.481-08:00 Cambio-Cambie-BloggerCódigos y Recursos - Aplicaciones para el blogUnknownnoreply@blogger.comBlogger14125tag:blogger.com,1999:blog-3022848855451051526.post-1033430654435028002016-03-19T14:04:00.000-07:002016-03-19T14:04:25.413-07:00Mostrar un Gadgets solo en la portada del blog<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfEQ4fPhPipW09ITitYaieCNBmkX7Ohug3uNXLic1QqMs1t4QS7iWG3D4jMVQwDyCDO7ZzL0OFH7BNgz-vOWdD5rBJ1-r5ttautgK5h0e2WsmgPQVEoKbTCspeXdHaimPMjZYpDmURY-M/s1600/CONDICIONALES.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="293" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfEQ4fPhPipW09ITitYaieCNBmkX7Ohug3uNXLic1QqMs1t4QS7iWG3D4jMVQwDyCDO7ZzL0OFH7BNgz-vOWdD5rBJ1-r5ttautgK5h0e2WsmgPQVEoKbTCspeXdHaimPMjZYpDmURY-M/s320/CONDICIONALES.jpg" width="320" /></a></div>
<br />
<br />
Uno de los mayores problemas que presentan todos los blogs es el tiempo que tarda en cargar la página.<br />
Si bien hay gadgets que podemos eliminar para hacer la carga más ligera, hay otros gadgets que son muy necesarios para el blog y no queremos eliminarlos, así que lo que haremos será mostrarlos sólo en la portada (página principal) , y cuando el lector entre a una entrada estos desaparecerán.<br />
<br />
Para ello nos utilizaremos los <a href="http://cambio-cambie.blogspot.com/2009/11/codigos-condicionales-de-blogger.html" target="_blank">códigos condicionales</a> que como había dicho son reglas que condicionan dónde se ejecuta determinado código y dónde no.<br />
<div>
<br /></div>
<div>
Entramos en Diseño → Edición de HTML y SIN expandir plantillas de artilugios buscamos el nombre del gadget que queremos ocultar y en seguida veremos su ID.</div>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0NNhlA5FIrZIaOn-HCsQYH7Hl_2w7M2asm03YsaJ3sW_XY45gzFSm2LOGCwTppYVspCzWt9ju1rVZEeHsFgZzys9_vWkbXHahjI3UeJZj0Po0IiX5xlUKea7cvQDk1MXZYo-aIkVAd_g/s1600/BuscarGadgets.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="213" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0NNhlA5FIrZIaOn-HCsQYH7Hl_2w7M2asm03YsaJ3sW_XY45gzFSm2LOGCwTppYVspCzWt9ju1rVZEeHsFgZzys9_vWkbXHahjI3UeJZj0Po0IiX5xlUKea7cvQDk1MXZYo-aIkVAd_g/s320/BuscarGadgets.PNG" width="320" /></a></div>
<br /></div>
<div>
En este caso elegí el de Entradas Populares</div>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8uWZFII63MjTbeBWFpUIVrU6SfxYASjmq8z1YKccTkQBLn7xJsyRPcNIfsKQKquQdOp_oWMbyueT_F0DNNdEqmz1LmTyTUAHriKtqYHLYn7TAvOo5CKrZq0-yc_pdpF2Ph4lJp0QLAXw/s1600/Id-Gadget.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="155" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8uWZFII63MjTbeBWFpUIVrU6SfxYASjmq8z1YKccTkQBLn7xJsyRPcNIfsKQKquQdOp_oWMbyueT_F0DNNdEqmz1LmTyTUAHriKtqYHLYn7TAvOo5CKrZq0-yc_pdpF2Ph4lJp0QLAXw/s320/Id-Gadget.PNG" width="320" /></a></div>
<br />
Ahora hacemos Click dentro del editor ►presionamos Ctrl+f ►pegamos<br />
<blockquote class="tr_bq">
</head></blockquote>
Arriba pegamos<br />
<blockquote class="tr_bq">
<br />
<!-- Mostrar un Gadgets sólo en la portada del blog --><br />
<b:if cond='data:blog.url != data:blog.homepageUrl'><br />
<style type='text/css'><br />
#PopularPosts1{<br />
display: none;<br />
}<br />
</style><br />
</b:if></blockquote>
<br />
Esto lo hacemos con cada uno de los gadgets que queremos mostrar en nuestra portada o pagina principal del blog, cuando ingresemos en una entrada especifica este gadgets no aparecerá.</div>
<div>
<br /></div>
<div class="boton">
<a href="http://cambiocambieblogger.blogspot.com/2013/01/entrada-6.html" target="_blank">Demo</a></div>
<br />
<br />
<div>
<br /></div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-3022848855451051526.post-42235705957926687572016-03-06T22:33:00.000-08:002016-03-06T22:33:43.950-08:00Menú Vertical sencillo con CSS en el Blog<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidm6ZZV_y1Cf2GqpYb1vdDhMdTxFV_TAuuwTwImq-j0ynA9N9PY41-YS8FtorvySLuxuQQ3YU6NY98OwC91ZZyAYGaRowH2hyk2jwJyD74OuOdiNmHOdPrNaOY03es2RB-w4sYf6rCZoI/s1600/menuborder.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="164" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidm6ZZV_y1Cf2GqpYb1vdDhMdTxFV_TAuuwTwImq-j0ynA9N9PY41-YS8FtorvySLuxuQQ3YU6NY98OwC91ZZyAYGaRowH2hyk2jwJyD74OuOdiNmHOdPrNaOY03es2RB-w4sYf6rCZoI/s1600/menuborder.PNG" width="320" /></a></div>
<br />
Con este menú sencillo y fácil lo que pretendo volver a lo básico que es siempre útil.<br />
<br />
Para incluir este sencillo menú con CSS en tu blog de Blogger<br />
<br />
Ir a:<br />
<br />
Diseño ► Elementos de Página ►Agregar un Gadget elegimos ►HTML/Javascript donde copias el código:<br />
<br />
<blockquote class="tr_bq">
<style type="text/css"><br />
#menuc a{<br />
padding-left: 4px;<br />
display: block;<br />
font-size: 14px; /* Tamaño de texto */<br />
text-transform: uppercase; /*Si queremos en minúscula ponemos lowercase */<br />
width: 200px; /* Ancho*/<br />
color: #000000;<br />
text-decoration: none;<br />
border-left: 4px solid #bbbbbb; /* Color borde */<br />
border-bottom: 1px solid #bbbbbb; /* Color línea inferior */<br />
}<br />
#menuc a:hover{<br />
border-left: 3px solid #dddddd; /*Color de línea vertical */<br />
background-color: #eeeeee; /* Color fondo*/<br />
color: #2A211A; /* Color de letra seleccionada */<br />
}<br />
</style><br />
<div id="menuc"><br />
<a href="URL">Enlace 1</a><br />
<a href="URL">Enlace 2</a><br />
<a href="URL">Enlace 3</a><br />
<a href="URL">Enlace 4</a><br />
<a href="URL">Enlace 5</a><br />
<a href="URL">Enlace 6</a><br />
</div></blockquote>
<div>
<div style="text-align: left;">
<br /></div>
</div>
<div>
<br /></div>
<div>
<div style="text-align: center;">
Ejemplo</div>
</div>
<div>
<br /></div>
<div>
<style type="text/css">
#menuborder a{
padding-left: 4px;
display: block;
font-size: 14px; /* Tamaño de texto */
text-transform: uppercase; /*Si queremos en minúscula ponemos lowercase */
width: 200px; /* Ancho*/
color: #000;
text-decoration: none;
border-left: 4px solid #bbbbbb; /* Color borde */
border-bottom: 1px solid #bbbbbb; /* Color línea inferior */
}
#menuborder a:hover{
border-left: 3px solid #dddddd; /*Color de línea vertical */
background-color: #eeeeee; /* Color fondo*/
color: #2A211A; /* Color de letra seleccionada */
}
</style>
<br />
<div id="menuborder">
<a href="http://cambio-cambie.blogspot.com/">Enlace 1</a>
<a href="http://cambio-cambie.blogspot.com/">Enlace 2</a>
<a href="http://cambio-cambie.blogspot.com/">Enlace 3</a>
<a href="http://cambio-cambie.blogspot.com/">Enlace 4</a>
<a href="http://cambio-cambie.blogspot.com/">Enlace 5</a>
<a href="http://cambio-cambie.blogspot.com/">Enlace 6</a>
</div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
Como ven es muy sencillo y personalizable se pueden cambiar casi todo los valores<br />
<br />
<br /></div>
</div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-3022848855451051526.post-55238712554883474212016-03-06T22:14:00.001-08:002016-03-06T22:14:30.045-08:00Gadget Etiquetas estilo menú en el blog<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvbOPLwu1Y_D-i6mHH16-ibiHKs7k4OmsQmtCufGFptOJ4dkrYrf5BzPhyphenhyphenlRR9jihHHxizwEHgqIJN_l9kT6haX8CgBe-R0wHvu4SfiOq1L19HyZ7sJEBjUpMPFasAF5pYhAAeIP9dl6g/s1600/Blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvbOPLwu1Y_D-i6mHH16-ibiHKs7k4OmsQmtCufGFptOJ4dkrYrf5BzPhyphenhyphenlRR9jihHHxizwEHgqIJN_l9kT6haX8CgBe-R0wHvu4SfiOq1L19HyZ7sJEBjUpMPFasAF5pYhAAeIP9dl6g/s320/Blogger.png" width="213" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSN1Eq8QAJN8kM1U5hLiuBtR76fDZV25iA6v6MRAi1v_52PSnQWJZMXKWqbdUGjhn5AqHNmWkupg2mbvJkMvhnfO65xOXmAo-BbbTFV3aLkA6B9Px9lQihzH0EgjEBrK9EwX86iUvyJbA/s1600/gadget-de-etiquetas.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="72" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSN1Eq8QAJN8kM1U5hLiuBtR76fDZV25iA6v6MRAi1v_52PSnQWJZMXKWqbdUGjhn5AqHNmWkupg2mbvJkMvhnfO65xOXmAo-BbbTFV3aLkA6B9Px9lQihzH0EgjEBrK9EwX86iUvyJbA/s320/gadget-de-etiquetas.png" width="320" /></a></div>
<br />
Este Gadgets puede ser configurado para que muestre solo las etiquetas que se decidan. Puede mostrarlas por orden alfabético, o por frecuencia. Por defecto blogger predefine el gadgets tipo lista.<br />
Para este estilo de etiquetas<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSLVny5tqCz2f3nzvSwCRbn_cXywQyOyYSLhu98n-PeC1PJht8k-YCGxyNWVJjbVGA7hWLqFPjeM4DgjHQaMzQOJmHSPuTztnpoAJ3bw46P_-mRp3LStYMD9Fv03HD6lDJRJ774X4l-oU/s1600/Etiquetas1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="232" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSLVny5tqCz2f3nzvSwCRbn_cXywQyOyYSLhu98n-PeC1PJht8k-YCGxyNWVJjbVGA7hWLqFPjeM4DgjHQaMzQOJmHSPuTztnpoAJ3bw46P_-mRp3LStYMD9Fv03HD6lDJRJ774X4l-oU/s320/Etiquetas1.PNG" width="320" /></a></div>
<br />
seleccionaremos <span style="color: red;">Nube</span><br />
<div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5n2ki8eJwdY3oohyphenhyphenDfXAvp4_U3QNhIgRuAcf-I_4ymumXVd-YMymTPipFCFTV6DsHNY8Bv0ulPJ1r3dpu-YP0shoUOX3AywdtWemKw6Zrk0ixK5WSqSJLWOgXbjc4rpnY_JZctx3RMKk/s1600/Etiquetas.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5n2ki8eJwdY3oohyphenhyphenDfXAvp4_U3QNhIgRuAcf-I_4ymumXVd-YMymTPipFCFTV6DsHNY8Bv0ulPJ1r3dpu-YP0shoUOX3AywdtWemKw6Zrk0ixK5WSqSJLWOgXbjc4rpnY_JZctx3RMKk/s320/Etiquetas.PNG" width="306" /></a></div>
<div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
Luego ir a:<br />
<br />
<ul>
<li>Plantilla</li>
<li>Personalizar</li>
<li>Diseñador de Plantillas</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-kk9vx8JRdZEeHmR10NtjM1FkINyleBrw8o_juSWU-AXD-Pr9xxw63C5DAb8moX-Em2N-LimDt02ojLLpzcjIh0DqmH2WpCU8EKbfmD0P8S6Le5GBSGn18VhrNloRJNuH6TkkJAV3d3Y/s1600/dise%25C3%25B1ador+de+plantillas+de+blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="87" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-kk9vx8JRdZEeHmR10NtjM1FkINyleBrw8o_juSWU-AXD-Pr9xxw63C5DAb8moX-Em2N-LimDt02ojLLpzcjIh0DqmH2WpCU8EKbfmD0P8S6Le5GBSGn18VhrNloRJNuH6TkkJAV3d3Y/s320/dise%25C3%25B1ador+de+plantillas+de+blogger.png" width="320" /></a></div>
<br />
<ul>
<li>Avanzado</li>
<li>Añadir código CSS personalizado, en el recuadro pegar el siguiente código:</li>
</ul>
<div>
<br /></div>
<div>
<blockquote class="tr_bq">
/*--nube etiqueta--*/<br />.cloud-label-widget-content {<br />text-align: center; /*Alineado el texto*/<br />text-transform: uppercase; /*En mayúsculas*/<br />}<br />.label-size a {<br />width: 45%;<br />float:left;<br />font: normal normal 12px Arial; /*Tipografía*/<br />display: block;<br />margin: 2px 2px 0 0;<br />padding: 4px;<br />border: 1px solid #111111; /*borde de cada etiqueta*/<br />color:#aaaaaa; /*color del texto*/<br />background: #ffffff; /*color de fondo*/<br />text-decoration:none;<br />}<br />.label-size a:hover {<br />border: 1px solid #aaaaaa; /*Borde al pasar por encima el ratón*/<br />color:#333333; /*Color del texto al pasar el ratón*/<br />background: #cccccc; /*Color del fondo al pasar el ratón*/<br />text-decoration:none;<br />}
</blockquote>
<div>
<br /></div>
<div style="text-align: center;">
<div class="boton">
<a href="http://cambiocambieblogger.blogspot.com/2013/01/entrada-6.html" target="_blank">Demo</a></div>
<br />
<br />
<br /></div>
</div>
</div>
</div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-3022848855451051526.post-71209243114108008702016-03-06T07:17:00.001-08:002016-03-06T08:20:31.215-08:00Buscador nativo de Blogger personalizado<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhobzGhTcL19FFOKKpoeFli-18-bnWjS10l9nq8t-NdKi5PYHNJapgIM3Cw4jMqVkLOA5U2FyDsU-0j8TCEQONgio0iJvxkuSvTy9MKrfX9r2qJnXUl67B11t5hxVGrvRDV_XEG905nhhs/s1600/Buscador+nativo+de+Blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhobzGhTcL19FFOKKpoeFli-18-bnWjS10l9nq8t-NdKi5PYHNJapgIM3Cw4jMqVkLOA5U2FyDsU-0j8TCEQONgio0iJvxkuSvTy9MKrfX9r2qJnXUl67B11t5hxVGrvRDV_XEG905nhhs/s320/Buscador+nativo+de+Blogger.png" width="213" /></a></div>
<br />
Un poco de teoría: el buscador nativo o genérico del blog de Blogger<br />
<br />
Las características gráficas son genéricas y se cargan desde una hoja de estilo externa (<span style="color: blue;">gsearch.css</span>). Para que se adapte a nuestro sitio, Blogger sobrescribe algunas propiedades y por eso lo hace allí, justo después de cargar el gadget.<br />
<br />
<ul>
<li>En el HTML de nuestra plantilla de Blogger</li>
</ul>
<div>
Diseño ► Plantilla ► Editar HTML ► Click dentro del editor ► Ctrl+f ►pegamos <span style="color: red;">CustomSearch</span>, o vamos directamente al Widgets<br />
Lo visualizamos así<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM7eiqVSMIqfJs9MytRhXuvS6lxdDTR_KH3iKvUbOpbjybC0gKxHtHruS3VkOYHX6yYS-ZC_1rbi6ue9ccEFfiC-Nm1Qcix5Y3lKWu3xEqVYdRqjn9-BCh-QYLEjOPisCgExnvaqP8QWo/s1600/CustomSearch1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="244" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM7eiqVSMIqfJs9MytRhXuvS6lxdDTR_KH3iKvUbOpbjybC0gKxHtHruS3VkOYHX6yYS-ZC_1rbi6ue9ccEFfiC-Nm1Qcix5Y3lKWu3xEqVYdRqjn9-BCh-QYLEjOPisCgExnvaqP8QWo/s320/CustomSearch1.PNG" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtwFpZb4Xg1syFoEfQAebSub1Ax6OnG0LURB3HXKR1LWHYfIds-6akrp_SC12LEDgzSE7qc1AOmd7Rzlz6RDl6QosoSU2YG5XBegoDn6EgwgJHf4j9i_YlMZ450sYjR9TORd4ysjAYxgo/s1600/CustomSearch2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="244" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtwFpZb4Xg1syFoEfQAebSub1Ax6OnG0LURB3HXKR1LWHYfIds-6akrp_SC12LEDgzSE7qc1AOmd7Rzlz6RDl6QosoSU2YG5XBegoDn6EgwgJHf4j9i_YlMZ450sYjR9TORd4ysjAYxgo/s320/CustomSearch2.PNG" width="320" /></a></div>
<br />
Internamente el Gadgets o Widgets nos mostrara el siguiente código<br />
<br />
<blockquote class="tr_bq">
<b:widget id='<span style="color: red;">CustomSearch1</span>' locked='false' title='Buscar en este blog' type='<span style="color: red;">CustomSearch</span>'><br />
<b:includable id='main'><br />
<!-- only display title if it's non-empty --><br />
<b:if cond='data:title != &quot;&quot;'><br />
<h2 class='title'><data:title/></h2><br />
</b:if><br />
<div class='widget-content'><br />
<div expr:id='data:widget.instanceId + &quot;_form&quot;'><br />
<span class='cse-status'><data:loadingMsg/></span><br />
</div><br />
</div><br />
<!-- <span style="color: blue;">override gsearch.css </span>--><br />
<style type='text/css'><br />
#uds-searchControl .gs-result .gs-title,<br />
#uds-searchControl .gs-result .gs-title *,<br />
#uds-searchControl .gsc-results .gsc-trailing-more-results,<br />
#uds-searchControl .gsc-results .gsc-trailing-more-results * {<br />
color:<data:linkColor/>;<br />
}<br />
#uds-searchControl .gs-result .gs-title a:visited,<br />
#uds-searchControl .gs-result .gs-title a:visited * {<br />
color:<data:visitedLinkColor/>;<br />
}<br />
#uds-searchControl .gs-relativePublishedDate,<br />
#uds-searchControl .gs-publishedDate {<br />
color: <data:dateColor/>;<br />
}<br />
#uds-searchControl .gs-result a.gs-visibleUrl,<br />
#uds-searchControl .gs-result .gs-visibleUrl {<br />
color: <data:urlColor/>;<br />
}<br />
#uds-searchControl .gsc-results {<br />
border-color: <data:borderColor/>;<br />
background-color: <data:backgroundColor/>;<br />
}<br />
#uds-searchControl .gsc-tabhActive {<br />
border-color: <data:borderColor/>;<br />
border-top-color: <data:activeBorderColor/>;<br />
background-color: <data:backgroundColor/>;<br />
color: <data:textColor/>;<br />
}<br />
#uds-searchControl .gsc-tabhInactive {<br />
border-color: <data:borderColor/>;<br />
background-color: transparent;<br />
color: <data:linkColor/>;<br />
}<br />
#uds-searchClearResults {<br />
border-color: <data:borderColor/>;<br />
}<br />
#uds-searchClearResults:hover {<br />
border-color: <data:activeBorderColor/>;<br />
}<br />
#uds-searchControl .gsc-cursor-page {<br />
color: <data:linkColor/>;<br />
}<br />
#uds-searchControl .gsc-cursor-current-page {<br />
color: <data:textColor/>;<br />
}<br />
</style><br />
<b:include name='quickedit'/><br />
</b:includable><br />
</b:widget></blockquote>
<br />
► Por defecto, sólo cambia algunos datos para igualar los colores de nuestra plantilla pero, nada impide agregar o modificar más definiciones.<br />
<br />
<br />
Empecemos con el cuadro del buscador que es el más sencillo. Hay cuatro definiciones importantes:<br />
<br />
<code>
input.gsc-input {<br />
/* es el cuadro donde se ingresa el texto a buscar */<br />
}<br />
input.gsc-search-button {<br />
/* es el botón "Buscar" */<br />
}<br />
.gsc-branding-text {<br />
/* es el texto inferior "con la tecnología de" */<br />
}<br />
.gsc-branding-img-noclear {<br />
/* es la imagen con el logo de Google*/<br />
}</code>
<br />
<h2 style="text-align: center;">
Personalizarlo</h2>
Pasos<br />
<br />
<br />
<br />
<br />
<ol>
<li>Agregar el Gadget<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6-i5gyF-jqm_0jhz3Rh7olqlF5qrg7Qdb8gqQxZ4WpESX6vs6ZY_XcGlFV_cICEBtbNd6ubpeXeQmLAqfn2ihV-H7c5cZ8te811i9_YQzgXieLzh910sDLp0jvpnDLLsDq4oo9nMlw2o/s1600/Cuadro-de-busquedad-de-blogger.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6-i5gyF-jqm_0jhz3Rh7olqlF5qrg7Qdb8gqQxZ4WpESX6vs6ZY_XcGlFV_cICEBtbNd6ubpeXeQmLAqfn2ihV-H7c5cZ8te811i9_YQzgXieLzh910sDLp0jvpnDLLsDq4oo9nMlw2o/s320/Cuadro-de-busquedad-de-blogger.JPG" width="320" /></a></div>
</li>
<li>Configurarlo<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGJq81eiKPmzAwDLrYZjBEvRTRzKcXGUItiTGGjhOCSGuvHt-0eiztaVBTDUpQ5B7REEyDiu8e16pYp0LPQQRmj-i2_W9IskQLd5j8B96i-tSd5x33cXko6ORCq017YOBWwow3uHCIVJw/s1600/Cuadro-de-busquedad-de-blogger2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGJq81eiKPmzAwDLrYZjBEvRTRzKcXGUItiTGGjhOCSGuvHt-0eiztaVBTDUpQ5B7REEyDiu8e16pYp0LPQQRmj-i2_W9IskQLd5j8B96i-tSd5x33cXko6ORCq017YOBWwow3uHCIVJw/s320/Cuadro-de-busquedad-de-blogger2.PNG" width="320" /></a></div>
</li>
<li><div class="separator" style="clear: both; text-align: center;">
<span style="text-align: left;">Ir a Diseñador de plantillas ► Avanzado ► Añadir CSS ►Añadir código CSS personalizado</span></div>
</li>
</ol>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-kk9vx8JRdZEeHmR10NtjM1FkINyleBrw8o_juSWU-AXD-Pr9xxw63C5DAb8moX-Em2N-LimDt02ojLLpzcjIh0DqmH2WpCU8EKbfmD0P8S6Le5GBSGn18VhrNloRJNuH6TkkJAV3d3Y/s1600/dise%25C3%25B1ador+de+plantillas+de+blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="87" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-kk9vx8JRdZEeHmR10NtjM1FkINyleBrw8o_juSWU-AXD-Pr9xxw63C5DAb8moX-Em2N-LimDt02ojLLpzcjIh0DqmH2WpCU8EKbfmD0P8S6Le5GBSGn18VhrNloRJNuH6TkkJAV3d3Y/s320/dise%25C3%25B1ador+de+plantillas+de+blogger.png" width="320" /></a></div>
<br />
Copiar una de los siguientes códigos:<br />
<br />
<div class="nota red">
/*---CustomSearch ----*/<br />
.gsc-results{<br />
margin: 10px 10px;<br />
background:#FED9BF !important;<br />
}<br />
#input.gsc-input{<br />
margin: 10px 10px;<br />
background: #eee;<br />
}<br />
.gsc-branding-text, .gsc-branding-img-noclear {<br />
display:none;<br />
}<br />
input.gsc-search-button {<br />
-moz-border-radius-bottomright: 5px;<br />
-webkit-border-bottom-right-radius: 5px;<br />
border-bottom-right-radius: 5px;<br />
-moz-border-radius-topright: 5px;<br />
-webkit-border-top-right-radius: 5px;<br />
border-top-right-radius: 5px;<br />
font-family:'trebuchet ms';<br />
font-size:15px;<br />
padding: 6px 6px;<br />
color:#ffffff;<br />
background:#808080;<br />
border: 10px ;<br />
font-weight:bold;<br />
}<br />
div#CustomSearch1.widget.CustomSearch{<br />
background: #00c0c0;<br />
padding: 4px 4px;<br />
margin: -20px 0 0 0;<br />
}<br />
div#CustomSearch1_form{<br />
background: #000;<br />
padding: 10px 10px;<br />
-moz-border-radius:2px 2px 2px 2px;<br />
-webkit-border-radius: 2px 2px 2px 2px;<br />
border-radius:2px 2px 2px 2px;<br />
}</div>
<br />
El diseño quedaría de esta manera<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIX_AQv-G_Ryq9jBr-ewoxpzEb5lgJ1ZsjFRPwopsi_eBmCYTtztm7LPGq-lyj4eo5d_7wvscp_Wl9M7HhWyI-bmDNKQqmJE2su_iEpMX52QhfPF4ju0Hl4a_f9ocTrYvvFM-vBgaicxw/s1600/CustomSearch-1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="204" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIX_AQv-G_Ryq9jBr-ewoxpzEb5lgJ1ZsjFRPwopsi_eBmCYTtztm7LPGq-lyj4eo5d_7wvscp_Wl9M7HhWyI-bmDNKQqmJE2su_iEpMX52QhfPF4ju0Hl4a_f9ocTrYvvFM-vBgaicxw/s320/CustomSearch-1.PNG" width="320" /></a></div>
<br />
<br />
<br />
<div class="nota blue">
<br />
/*---CustomSearch2 ----*/<br />
#input.gsc-input{<br />
margin: 10px 10px;<br />
background: #eee;<br />
}<br />
.gsc-branding-text, .gsc-branding-img-noclear {<br />
display:none;<br />
}<br />
input.gsc-search-button {<br />
-moz-border-radius-bottomright: 4px;<br />
-webkit-border-bottom-right-radius: 4px;<br />
border-bottom-right-radius: 4px;<br />
-moz-border-radius-topright: 4px;<br />
-webkit-border-top-right-radius: 4px;<br />
border-top-right-radius: 4px;<br />
font-family:'trebuchet ms';<br />
font-size:18px; padding: 6px 6px;<br />
color:#fff;<br />
background:$(link.color);<br />
border:0px;<br />
font-weight:bold;<br />
}<br />
input.gsc-search-button:hover {<br />
background: $(link.hover.color);<br />
color:#fff;<br />
}<br />
input .gsc-input{<br />
background: #cc0000;<br />
}<br />
div#CustomSearch1.widget.CustomSearch{<br />
background: $(link.color);<br />
padding: 4px 4px;<br />
margin: -20px 0 0 0;<br />
}<br />
div#CustomSearch1_form{<br />
background: #eee;<br />
padding: 8px 8px;<br />
-moz-border-radius:2px 2px 2px 2px;<br />
-webkit-border-radius: 2px 2px 2px 2px;<br />
border-radius:5px 5px 5px 5px;<br />
}</div>
<div>
<br />
Con este otro código Css el buscador de Blogger quedaría</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0xRwSJzpn0diNWMooCnceh1JP9ZbPpnRM1V3-XtAJybmObsT2to1ySTMeyPiOHq_eJ_vyV5U_5RnHlpyL9gkPz9MLLaayHE_DHag96S2uFde8usJeOsVuX_RTTZPxu5Ry40A8HxOwQ2s/s1600/CustomSearch-2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="201" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0xRwSJzpn0diNWMooCnceh1JP9ZbPpnRM1V3-XtAJybmObsT2to1ySTMeyPiOHq_eJ_vyV5U_5RnHlpyL9gkPz9MLLaayHE_DHag96S2uFde8usJeOsVuX_RTTZPxu5Ry40A8HxOwQ2s/s320/CustomSearch-2.PNG" width="320" /></a></div>
<br />
<br />
Cuando ayas elegido tu diseño personalizado del buscador nativo o por defecto de Blogger dale Aplicar al blog.<br />
<br />
<br /></div>
Unknownnoreply@blogger.com2tag:blogger.com,1999:blog-3022848855451051526.post-79830376500171274292016-01-27T04:57:00.000-08:002016-03-02T11:56:04.212-08:00Entrada destacada en blogger<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<br />
El gadget o widget de blogger que permite destacar la entrada que queremos que aparezca como una entrada favorita en el blog o Entrada destacada tiene como objetivo mostrar una entrada publicada anteriormente que quizás los navegantes quieran volver a ver y que no tenga dificultad para buscarla, o quizás queramos destacar una publicación vieja que nos parezca importante.<br />
<br />
Para agregar este gadget de Entrada destacada en blogger<br />
<div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7nTq3ij3VsG7vHQ6hNzddyBLf3k4JSz6W7_JbORLyYlXeljp62BC_JJOUzPpF-RMhYcpistqomEHN2eemmQQG6-fN7DTvMkL9Zrd3yRQBaaVPFjcmC4mv_lTsfDIVQpSzeiAIyOitZ3E/s1600/entrada-destacada.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="194" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7nTq3ij3VsG7vHQ6hNzddyBLf3k4JSz6W7_JbORLyYlXeljp62BC_JJOUzPpF-RMhYcpistqomEHN2eemmQQG6-fN7DTvMkL9Zrd3yRQBaaVPFjcmC4mv_lTsfDIVQpSzeiAIyOitZ3E/s320/entrada-destacada.PNG" width="320" /></a></div>
<div>
<br />
<ul style="text-align: left;">
<li>Ir a diseño. Ver en que lugar lo vas a poner.</li>
<li>Click en añadir un gadget, seleccionar Entrada Destacada.</li>
<li>Realizar la configuración, que es muy básica, consiste en el titulo del gadget, el fragmento de la entrada y seleccionar la entrada a usar, </li>
<li>Finalmente guardar después de que sea de tu agrado la vista previa.</li>
</ul>
<div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNfD7RRmZ2-K0Xzmy0uMAO69AsqE_f_Aj54cJrw7U0PDxcWsaywie-DfF3SBY2oE6m2si_FiYyuMWzBtYOoU8N9bFBoyAvV7NID2EtU34wYy4zrLiIuupcEFV_g-sNMfG7dmq558i_-z8/s1600/Configurar-la-entrada-destacada.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="233" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNfD7RRmZ2-K0Xzmy0uMAO69AsqE_f_Aj54cJrw7U0PDxcWsaywie-DfF3SBY2oE6m2si_FiYyuMWzBtYOoU8N9bFBoyAvV7NID2EtU34wYy4zrLiIuupcEFV_g-sNMfG7dmq558i_-z8/s320/Configurar-la-entrada-destacada.PNG" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br /></div>
Para personalizar el gatget entrada destacada<br />
<br />
Plantilla ►Personalizar ►Diseñador de Plantillas ► Avanzado ► Añadir Código CSS Personalizado<br />
<br />
<br />
<div>
<br /></div>
<div>
<br /></div>
<div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiANx_YBo65_M5Idu7yfz2Uz7FKMygSipNgls2Wr6rY3xRh1dVq6Ns4h2JonaoLNN_g9p4wb8hyphenhyphenrAavFaDV3wLvuDRck_rYEHN3Wp9EtW8d2CQ-AEVJ7Z0CMOJJg1CcOqi1VNvQ6vOnTj4/s1600/dise%25C3%25B1ador+de+plantillas+de+blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="87" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiANx_YBo65_M5Idu7yfz2Uz7FKMygSipNgls2Wr6rY3xRh1dVq6Ns4h2JonaoLNN_g9p4wb8hyphenhyphenrAavFaDV3wLvuDRck_rYEHN3Wp9EtW8d2CQ-AEVJ7Z0CMOJJg1CcOqi1VNvQ6vOnTj4/s320/dise%25C3%25B1ador+de+plantillas+de+blogger.png" width="320" /></a></div>
<div>
<br /></div>
<br />
<br />
En el recuadro pegar el siguiente Código:<br />
<br />
<br />
<blockquote class="tr_bq">
/*----Entrada Destacada-----*/<br />
.post-summary p{ /*resumen*/<br />
color: #0C762E; /*color de la fuente*/<br />
font-size: 180%; /* tamaño de la fuente*/<br />
font-family:'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif; /*tipo de la fuente*/<br />
text-align: center;/*alineación del texto*/<br />
}<br />
.post-summary h3 { /*titulo de la entrada*/<br />
font-size: 180%; /* tamaño de la fuente*/<br />
text-align:center; /*alineación del titulo*/<br />
}</blockquote>
</div>
<div>
<br /></div>
Guardamos los cambios.<br />
<div>
<br />
Si deseas utilizar otra imagen que no sea la predeterminada por blogger tenes que poner el siguiente código<br />
<br />
<blockquote class="tr_bq">
.post-summary img{<br />
content: url('URL de la imagen') !important;<br />
}</blockquote>
<br />
Así tendrás personalizada la Entrada destacada de tu blog en blogger,<br />
<div>
<br /></div>
<div>
<br />
<br /></div>
</div>
</div>
</div>
</div>
Unknownnoreply@blogger.com1tag:blogger.com,1999:blog-3022848855451051526.post-65162499196544693092014-12-03T08:44:00.000-08:002016-03-02T11:56:14.326-08:00Cómo hacer un banner animado para el blog<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both;">
</div>
<br />
<br />
Un banner es una imagen que sirve para destacar o promocionar un evento, una categoría, un post o una de las secciones de tu blog.<br />
<br />
Un banner puede ser fijo (una sola imagen) o animado, es decir en una misma imagen o espacio aparecen varias imágenes difererentes que van cambiando de forma automática, habitualmente estos banners que se<br />
mueven están hechos con gifs animados.<br />
<br />
Banner fijo:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNj9I_r-FB94AGzzhLP_iPI49ofiwC3hLF30Q0IXqB72m_Yh5NtDsG4yITBmThiiky9Gd8ZGW3Kz5gdbkt7A7Ygt6hWW08tBSFTL_z0s9WmliB64ZjPJ96_u4CgtirV7gHH71cP5RuAlI/s1600/C_C+Blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNj9I_r-FB94AGzzhLP_iPI49ofiwC3hLF30Q0IXqB72m_Yh5NtDsG4yITBmThiiky9Gd8ZGW3Kz5gdbkt7A7Ygt6hWW08tBSFTL_z0s9WmliB64ZjPJ96_u4CgtirV7gHH71cP5RuAlI/s1600/C_C+Blogger.png" width="125" /></a></div>
Banner animado:<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw7epnIowfR15QK8qENKv8SCrGTonXDGr_7wgabXK_vYKo2QXXS8H8JV6U2Yd22Nn5rn1CImrO87YYP9ZfISQdEVeB9a9FeSzxGE0NtXQ_CUtPE5yIp13QF-_sGx5nsfG30aQkJsLMB7M/s1600/C-C-Blogger.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw7epnIowfR15QK8qENKv8SCrGTonXDGr_7wgabXK_vYKo2QXXS8H8JV6U2Yd22Nn5rn1CImrO87YYP9ZfISQdEVeB9a9FeSzxGE0NtXQ_CUtPE5yIp13QF-_sGx5nsfG30aQkJsLMB7M/s1600/C-C-Blogger.gif" /></a></div>
<br />
<br />
¿Qué es un gif animado?<br />
<br />
El gif animado es un formato gráfico que permite guardar varias imágenes en distintos fotogramas para crear una animación. Las imágenes pueden ser fotos o ilustraciones<br />
<br />
¿Cómo hacer un gif animado? <br />
<br />
Para hacer un gif animado necesitas un programa que te permita hacerlo, puedes hacer gifs animados con photoshop, con fireworks y también hay programas gratuitos y online como <a href="http://gifmake.com/" target="_blank">Gifmake</a> o <a href="http://gickr.com/" target="_blank">Gickr</a>.<br />
<br />
El proceso para hacer el banner animado necesitas una secuencia de imágenes que pueden ser fotos o ilustraciones, si lo haces online tienes que subir la imágenes, ordenarlas para crear la secuencia y después aplicarles una velocidad de fotogramas, (en gifmake te permite aplicar la velocidad de fotograma de forma independiente a cada imagen.<br />
Una vez creado tu banner animado lo guardas en tu ordenador y ya lo puedes usar para ponerlo en tu blog.<br />
<div>
<br />
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5Jn17K9E352dzN-DpbFJnugZBRgmC8BM8ZHEcqm6ay2cUjNzoiDSBuj9TB17SPopqb2DLvYd2tcj-yamFDQFXOxlVShDucM_PSf6fGIBm7EvnSq9kzWq2Rn9mzs4Kpc2YUlYED02DHvw/s1600/C-C-Blogger.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5Jn17K9E352dzN-DpbFJnugZBRgmC8BM8ZHEcqm6ay2cUjNzoiDSBuj9TB17SPopqb2DLvYd2tcj-yamFDQFXOxlVShDucM_PSf6fGIBm7EvnSq9kzWq2Rn9mzs4Kpc2YUlYED02DHvw/s1600/C-C-Blogger.gif" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ5f545Q0C0DDvbqqk4jaS0wfzCK6tLElczHWkHTF_gvhWiVOUyGilpGb6KwHtix8A62BrhY17_fEIpU1dbu6_Zh6tdvzeFq4UtcSK6HRzrUPz8EisECP2Ap1Ky4EwXOy9IBbZu2QMVP8/s1600/C-C-B-gif.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ5f545Q0C0DDvbqqk4jaS0wfzCK6tLElczHWkHTF_gvhWiVOUyGilpGb6KwHtix8A62BrhY17_fEIpU1dbu6_Zh6tdvzeFq4UtcSK6HRzrUPz8EisECP2Ap1Ky4EwXOy9IBbZu2QMVP8/s1600/C-C-B-gif.gif" /></a></div>
<br /></div>
<br /></div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-3022848855451051526.post-38143506868798391412014-12-03T07:18:00.000-08:002016-03-02T11:56:25.752-08:00Entradas aleatorias con imagen en miniatura<div dir="ltr" style="text-align: left;" trbidi="on">
<div>
<br /></div>
El siguiente gadget permite añadir en el sidebar de nuestro blog de blogger una lista de entradas aleatorias, elegidas al azar, con una imagen en miniatura como pueden ver en la imagen superior.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwP4Zuyfjck5GS7lVGGB47CcLhGR4sq-Z28o073qbvgrvmItGSCEuWFkAa9VEkdGIjxaDPK1Ce8PbP5mYoosk9mYqOg__zzZReZ6ozcv1YhCa7Ef4rOWPguGB7vCvDhY2Sb3mhd2lEo5w/s1600/Entradas+aleatorias+con+imagen+en+miniatura.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwP4Zuyfjck5GS7lVGGB47CcLhGR4sq-Z28o073qbvgrvmItGSCEuWFkAa9VEkdGIjxaDPK1Ce8PbP5mYoosk9mYqOg__zzZReZ6ozcv1YhCa7Ef4rOWPguGB7vCvDhY2Sb3mhd2lEo5w/s1600/Entradas+aleatorias+con+imagen+en+miniatura.PNG" width="196" /></a></div>
<br />
Para añadirlo a tu blog sigue los siguientes pasos.<br />
<br />
→ Paso 1<br />
<br />
<br />
• Ir a Escritorio Blogger.<br />
• Seleccionamos Plantilla.<br />
• Hacemos clic en Editar HTML.<br />
• En el buscador de código pegamos lo siguiente:<br />
<br />
<br />
<blockquote class="tr_bq">
]] ></b:skin></blockquote>
<br />
Encima de este pegar el siguiente código:<br />
<br />
<br />
<blockquote class="tr_bq">
#random-posts img {<br />
float:left;<br />
margin-right:10px;<br />
border:1px solid #999;<br />
background:#FFF;<br />
width:70px;<br />
height:70px;<br />
padding:3px;<br />
}<br />
#random-posts li {<br />
list-style-type: none;<br />
}</blockquote>
<br />
<br />
→ Paso 2<br />
<br />
<br />
• En el Escritorio Blogger <br />
• Diseño.<br />
• Añadir un Gadget donde queramos poner el gadget.<br />
• Seleccionamos HTML / JavaScript.<br />
<br />
<br />
En él pegamos el siguiente código:<br />
<blockquote class="tr_bq">
<ul id='random-posts'><br />
<script type='text/javaScript'><br />
<span style="color: red;">var rdp_numposts = 5</span>;<br />
var rdp_snippet_length = 150;<br />
var rdp_info = 'yes';<br />
var rdp_comment = 'Comentarios';<br />
var rdp_disable = 'Comments Disabled';<br />
var rdp_current = [];<br />
var rdp_total_posts = 0;<br />
var rdp_current = new Array(rdp_numposts);<br />
function totalposts(json) {<br />
rdp_total_posts = json.feed.openSearch$totalResults.$t<br />
}<br />
document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');<br />
function getvalue() {<br />
for (var i = 0; i < rdp_numposts; i++) {<br />
var found = false;<br />
var rndValue = get_random();<br />
for (var j = 0; j < rdp_current.length; j++) {<br />
if (rdp_current[j] == rndValue) {<br />
found = true;<br />
break<br />
}<br />
};<br />
if (found) {<br />
i--<br />
} else {<br />
rdp_current[i] = rndValue<br />
}<br />
}<br />
};<br />
function get_random() {<br />
var ranNum = 1 + Math.round(Math.random() * (rdp_total_posts - 1));<br />
return ranNum<br />
};<br />
</script><br />
<script type='text/javaScript'><br />
function random_posts(json) {<br />
for (var i = 0; i < rdp_numposts; i++) {<br />
var entry = json.feed.entry[i];<br />
var rdp_posttitle = entry.title.$t;<br />
if ('content' in entry) {<br />
var rdp_get_snippet = entry.content.$t<br />
} else {<br />
if ('summary' in entry) {<br />
var rdp_get_snippet = entry.summary.$t<br />
} else {<br />
var rdp_get_snippet = "";<br />
}<br />
};<br />
rdp_get_snippet = rdp_get_snippet.replace(/<[^>]*>/g, "");<br />
if (rdp_get_snippet.length < rdp_snippet_length) {<br />
var rdp_snippet = rdp_get_snippet<br />
} else {<br />
rdp_get_snippet = rdp_get_snippet.substring(0, rdp_snippet_length);<br />
var space = rdp_get_snippet.lastIndexOf(" ");<br />
rdp_snippet = rdp_get_snippet.substring(0, space) + "…";<br />
};<br />
for (var j = 0; j < entry.link.length; j++) {<br />
if ('thr$total' in entry) {<br />
var rdp_commentsNum = entry.thr$total.$t + ' ' + rdp_comment<br />
} else {<br />
rdp_commentsNum = rdp_disable<br />
};<br />
if (entry.link[j].rel == 'alternate') {<br />
var rdp_posturl = entry.link[j].href;<br />
var rdp_postdate = entry.published.$t;<br />
if ('media$thumbnail' in entry) {<br />
var rdp_thumb = entry.media$thumbnail.url<br />
} else {<br />
<span style="color: red;">rdp_thumb =</span> "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcjAHxazlZR7A3zHbvofsiFG7xbI83nHcrirB6W7hW4E43xg-2dnuRJ3Txzp0lzMjNr2syjHFJjyzuxmQHkgCcJrNJZTNpgOUSqY4KgOiAgTb9dkQmlvU2VnQJF4hEDwg8hmCIE8GK6ac/w140-h109-p/IMAGEN+NO+DISPONIBLE.jpg"<br />
}<br />
}<br />
};<br />
document.write('<li>');<br />
document.write('<img alt="' + rdp_posttitle + '" src="' + rdp_thumb + '"/>');<br />
document.write('<div><br />
<a href="' + rdp_posturl + '" rel="nofollow" title="' + rdp_snippet + '">' + rdp_posttitle + '</a></div><br />
');<br />
if (rdp_info == 'yes') {<br />
document.write('<span>' + rdp_postdate.substring(8, 10) + '/' + rdp_postdate.substring(5, 7) + '/' + rdp_postdate.substring(0, 4) + ' - ' + rdp_commentsNum) + '</span>'<br />
}<br />
document.write('<div style="clear:both"><br />
</div><br />
</li><br />
')<br />
}<br />
};<br />
getvalue();<br />
for (var i = 0; i < rdp_numposts; i++) {<br />
document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index=' + rdp_current[i] + '&max-results=1&callback=random_posts\"><\/script>')<br />
};<br />
</script><br />
</ul></blockquote>
<div>
<br /></div>
<span style="color: red;">rdp_thumb =</span> poner URL de la imagen cuando el post no contenga.<br />
<span style="color: red;">var rdp_numposts = 5;</span> número de entradas que quieres mostrar.<br />
<br />
<br /></div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-3022848855451051526.post-25149939158706719122014-11-23T13:25:00.000-08:002016-03-02T11:56:38.088-08:00Traductor con banderas en el Blog<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
La traducción de contenidos de nuestro Blog utilizando la tecnología de <a href="https://translate.google.com/" target="_blank">Google Translator</a> puede hacerse de una manera sencilla, con la inserción de un código que a partir de las imágenes de banderas de distintos países, permita a tus usuarios seleccionar el idioma con el que desean leer tu Blog.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtlU29PH0vVhnr7Zr2q5SCNrFxs7CvfykUnqv3Ld067iDKegno6zdARc0iVW_aP9sl1-kyBvMFXfKuLRewBosW10GSEsYcrjQjNq-RATdQhOXozvl_qG_MtLSNS3RidfwW1nJJva0ZJtw/s1600/Traductor.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="68" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtlU29PH0vVhnr7Zr2q5SCNrFxs7CvfykUnqv3Ld067iDKegno6zdARc0iVW_aP9sl1-kyBvMFXfKuLRewBosW10GSEsYcrjQjNq-RATdQhOXozvl_qG_MtLSNS3RidfwW1nJJva0ZJtw/s1600/Traductor.PNG" width="320" /></a></div>
<br />
Cuando tus visitantes seleccionen la bandera deseada los dirigirá a Google Translator para que se traduzca la página que estén<span style="font-family: "courier new" , "courier" , monospace;"> visualizando</span> en ese momento.<br />
<div>
<br /></div>
Para insertarlo en el blog entramos en ▶ Diseño ▶ Añadir un Gadget elegimos▶HTML/Javascript donde copias el código:<br />
<div>
<br /></div>
<div>
<br /></div>
<div align="left" style="border-bottom: #000000 1px dotted; border-left-color: #AFAFAF; border-left-style: outset; border-right-color: #AFAFAF; border-right-style: inset; border-top-color: #AFAFAF; border-top-style: groove; color: black; font-family: Courier New, Courier, monospace; height: 300px; overflow: scroll; scrollbar-3dlight-color: #FFFFFF; scrollbar-arrow-color: #FFFFFF; scrollbar-darkshadow-color: #FFFFFF; scrollbar-face-color: #FFFFFF; scrollbar-highlight-color: #FFFFFF; scrollbar-shadow-color: #FFFFFF; width: auto;">
<div>
<br />
<div align="center"> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizDHG_tEU9por1gXy6NBKW-asgD2idI2q20I9hW7R5Xiz9vTIXiJMJ-nf1R1goVfk-WccAH6Hjt1o6HJZUESUpT83uo4Wuc1yzRAeH1_1oOYaBjpB1xSnxap_YM72xNBvwlw0rk2vnYQQ/s200/United+Kingdom(Great+Britain).png" style="cursor: pointer;margin-right:8px" width="24"/></a><a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbiNjEhZAA-GtwyntP2mO4vZlXcKlz8oHSr_A94dShKMJGwx1bU7iUPAAWYfEsB0jt2QGTSyx5GzMXIfQFSyXIKkVpR_xMyFhAc_ebd-BtGZnxYvJm7Xe5zWslJEESqqAFnIOgHC6aikM/s200/France.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD3cC98L6ke47lZ2hsiz4A_NkvmXOd2MCga5-UMyDFtALaPPQ2z40h0amsBsoiviJC8-RHjyE5lFuGGgLKPSDvcjH65SyI6m6o8UEB8XVMoOTo-6djN0xyhhDGwRY0-dJ4oE-5z_hSJnw/s200/Germany.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIu64wxP-IzXjI4gaTSg4bwPDmq3MwGjoWB6jMHIkJbTqu5vguAix9kQSwlgTubgEh43uwo8iJeROkBAbv1HuU7jOdJBlcQHXKe5ph8NWYA03OclebXOaUmbx7gu9GaYCgM8fhyOmoTL0/s200/Spain.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMBwGVqmsGrwaEoJV1xl-L1K3M4LH4WgjIp1mOPOn8aY6j131SAtJtB_VpX7Epk-davRjbAobk-S5YIpx99JCuvB7YpuW6dXtDePwhXfGkcTtYvwAEZcBuwvOvAqYpF8CqWyVVZ9cuXYU/s200/Italy.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEJB1ljPUvlWsALOOGYp5CsG8MQEKhhx_hGkuOKagCvhyegbeO0ArMf_3uX6YExoJaDyKLvVsDRf0Cz_8wNchD3FndPwCu37ZkG3Zu52J59dqzdZKWD8mBoQ2p97DZGW-iQt3Ja1UyO1w/s200/Netherlands.png" style="cursor: pointer;margin-right:8px" width="24"/></a><a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGjbYQwXM6_QBYdPEep8OPiNnW3FgMx44QUspskgF5BoenWbjJ_8hYVrs0ZFZRu6tJ0YQtZYXXRCaeR_9yDB7QZ4ZxrWoGPIxr00k5EbxBdoU4bZZGAB9EnbrQk3UmFyzGbv_DpvfdoLY/s200/Russian+Federation.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKM4W-MYpb7_VJ580r6kIDXsowNf6Z_JdIP2jGhxWtywseNtYJf0kIjpIzG6qPV9ish0aXJrHdYmpZPCofPt72LBEkSShwMf8oJGL_xA49av2XmIPwkqhd9d13hL2aduaKNjmUlrrHDTw/s200/Brazil.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfpXXKDVyjAr3GC3OnX9uBeaIPz4YzQE8yv9n6Ar9YS159R8p4CLO9vlB35uQqFf72T3Saz4D_ssA2YVHAc6AavWWpghQibpf7hQSrOwYsR2WYhYTBK8RaRuKJ0MzeyVtbaF5aUllcMQI/s200/Japan.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiPa9QF2coCmYO1DM3FsVIsyiXt0NRJOgcl-zvV4D-mIrVdNJq0oZJK6l3wGE_Xcu8iCD5y1SK-OQwHxR9wPq-Jpaw62BcDsAzhaPjyZsNVraIzsjAGdz3l6tkcPPL91f9yUXNBaltngY/s200/South+Korea.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOGxWRUrZDoOLz-X-Mg8HO4OYN7elfL_bWKNmIw4bfUc-4FGn1RsrOIohB8CPNUPi88AG-YI_aqbOXGC2YWmE6GaOSYpG5sZIiwQwP6eRm7mLy7-tsxZX5YNDURX3EQiWpdp_drYHPj48/s200/Saudi+Arabia.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyog31QJApwrA0sKThx8EH_2GUuRAqzHHSU87QdxIFf-ovRLar_XxEwwQBVI9di2cs8dsKZb43CpItIkmeOPKiDIzpIoUjywUlLugnVTy4KtQYKOnhXlIoKAqYkDqoKRW9-wB2rHnY9Q4/s200/China.png" style="cursor: pointer;margin-right:8px" width="24"/></a></div><br />
<br /></div>
</div>
<br />
<br />
Así de fácil tendrán un traductor automático y personalizado con banderas en el blog.<br />
<br />
<br />
<br />
<br />
<br />
<div align="center">
</div>
</div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-3022848855451051526.post-23056250402888534482014-11-23T08:12:00.001-08:002016-03-06T20:03:50.730-08:00Entradas populares personalizadas en el blog<div dir="ltr" style="text-align: left;" trbidi="on">
<div>
El gadget de entradas populares muestra cuáles son las entradas más visitadas del blog, y puedes configurarlo en cuatro combinaciones posibles, para mostrar los datos que quieras : </div>
<div>
<ol style="text-align: left;">
<li>Solo el titulo de la entrada. </li>
<li>Imágenes miniaturas con el título.</li>
<li>El título de la entrada con un resumen.</li>
<li>El título de la entrada, con una imagen miniatura y un resumen de la entrada.</li>
</ol>
</div>
Este widget es un elemento que no puede faltar en tu blog, ya que incita a los lectores a que naveguen en tu contenido y puede despertar el interés para que se suscriba al blog, al ver interesante el contenido.<br />
<div>
<div>
<br /></div>
<div>
Para cambiar estilo de entradas populares de nuestro blog, que nos da por defecto blogger, y que se vea de la siguiente manera. <b style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: small; line-height: 18.2000007629395px; text-align: justify;"><br /></b><br />
<div>
<br style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.4799995422363px; text-align: justify;" />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0cFiX0i4CvjtVQ_nclyAm8d11e9jB3mhqeFj2eaD8ZaDZtD-ykhwWFepoEw9vUBCTIXG_eRjLm-FuXXJZGMqeZecsEXzIABKlJy2ANgHnYzepLxEFJslDHThqsarL8pcZQZ8jZClKEJ8/s1600/ENTRADAS+POPULARES.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0cFiX0i4CvjtVQ_nclyAm8d11e9jB3mhqeFj2eaD8ZaDZtD-ykhwWFepoEw9vUBCTIXG_eRjLm-FuXXJZGMqeZecsEXzIABKlJy2ANgHnYzepLxEFJslDHThqsarL8pcZQZ8jZClKEJ8/s1600/ENTRADAS+POPULARES.PNG" width="135" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<br />
Primero ir a:<br />
<br />
<br />
Diseño► Elementos de Página ►Agregar un Gadget:</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1xLeXUmkHTux5zdhsX9dtnlHe4UCmV8TBT55bjiwCRyPkXCmEtKZrzyFnQOQsyf1drL7pZ6kux2T2ro_Wl7BaZp0O_pryTBLWd7iSA5K0JpULbkaKvRVRpCQRUdVCbHtqo0FYwM0Nsmg/s1600/entradas-populares.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="74" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1xLeXUmkHTux5zdhsX9dtnlHe4UCmV8TBT55bjiwCRyPkXCmEtKZrzyFnQOQsyf1drL7pZ6kux2T2ro_Wl7BaZp0O_pryTBLWd7iSA5K0JpULbkaKvRVRpCQRUdVCbHtqo0FYwM0Nsmg/s1600/entradas-populares.png" width="320" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
Y le daras en guardar.<br />
Luego ir a:<br />
<br />
Plantilla ►Personalizar ►Diseñador de Plantillas ► Avanzado ► Añadir Código CSS Personalizado<br />
<br />
En el recuadro pegar el Código<br />
<br />
<blockquote class="tr_bq">
/* Entradas Populares<br />
----------------------*/<br />
#PopularPosts1 h2{<br />
text-transform: uppercase;<br />
text-align: center;<br />
font-size:14px;<br />
padding:5px 0 3px 0;<br />
}<br />
.popular-posts ul {<br />
padding-left: 0px;<br />
counter-reset: popcount;<br />
background: #eee;<br />
border: 1px outset #dddddd;<br />
border-radius:10px;<br />
box-shadow: 1px 2px 2px #666666;<br />
width:245px;<br />
}<br />
.popular-posts ul li:before {<br />
list-style-type: none;<br />
margin-right: 10px;<br />
padding: 0.3em 0.6em;<br />
counter-increment: popcount;<br />
content: counter(popcount);<br />
font-size: 16px;<br />
background: #ccc;<br />
color: #fff;<br />
position: relative;<br />
font-weight: bold;<br />
font-family: georgia;<br />
float: right;<br />
border: 1px solid #dddddd;<br />
box-shadow: 1px 2px 3px #666666;<br />
border-radius:70px;<br />
}<br />
.popular-posts ul li {<br />
border-bottom: 1px solid #dddddd;<br />
}<br />
.popular-posts ul li:hover {<br />
border-bottom: 0px dashed #696969;<br />
background:#99C9FF;<br />
border:1px solid #FD7474;<br />
}<br />
<br />
.popular-posts ul li a {<br />
text-decoration:none;<br />
color:#5A5F63;<br />
font-size:12px;<br />
font-weight: bold;<br />
font-family: Verdana;<br />
}<br />
.popular-posts ul li a:hover {<br />
text-decoration:none;<br />
}<br />
.popular-posts img {<br />
-webkit-transition:all .5s ease;<br />
-moz-transition:all .5s ease;<br />
transition:all .5s ease;<br />
float:left;padding:0;<br />
border:2px solid #cccccc;<br />
-webkit-border-radius:70px;<br />
-moz-border-radius:70px;<br />
border-radius:70px;<br />
background:#fff;<br />
margin-right:10px;<br />
height:80px;<br />
width:80px;<br />
}<br />
.popular-posts img:hover{<br />
-moz-transform:scale(1.2) rotate(-150deg);<br />
-webkit-transform:scale(1.2) rotate(-150deg);<br />
-o-transform:scale(1.2) rotate(-150deg);<br />
-ms-transform:scale(1.2) rotate(-150deg);<br />
transform:scale(1.2) rotate(-150deg);<br />
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.3),inset 0 0 20px rgba(0,0,0,0.1);<br />
-moz-box-shadow:0 0 20px rgba(0,0,0,0.3),inset 0 0 20px rgba(0,0,0,0.1);<br />
box-shadow:0 0 20px rgba(0,0,0,0.3),inset 0 0 20px rgba(0,0,0,0.1);<br />
background:#999;<br />
}</blockquote>
<div>
<br /></div>
Así podrás cambiar estilo de entradas populares de tu blog es un diseño fácil de implementar.<br />
<br />
<div class="boton">
<div style="text-align: center;">
<a href="http://cambiocabecera.blogspot.com/2015/01/gadget-arriba-en-la-cabecera-del-blog.html" target="_blank">Ver Demo</a></div>
</div>
<br />
<br />
<br /></div>
</div>
</div>
</div>
Unknownnoreply@blogger.com5tag:blogger.com,1999:blog-3022848855451051526.post-71108197776462259742014-11-21T11:44:00.000-08:002016-03-06T09:18:18.709-08:00Seguir por correo electrónico personalizado<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
Para personalizar el gadget de Seguir por correo electrónico de nuestro blog en Blogger primero ir a:<br />
<br />
Diseño► Elementos de Página ►Agregar un Gadget:<br />
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWiQSyUot-Dw4ABwElHa_gDcjV06w18OKPsJRnvo7TnnzDvkwlQ5MDURju9BNLI43edYJwer9H5A0w1nG3OYe0bSPbd0ls5Icoh8aW71w4EgnjxXmw0D-3Z8AcP4t2LzZ0FYhBe84ERyo/s1600/Seguir+por+correo.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="51" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWiQSyUot-Dw4ABwElHa_gDcjV06w18OKPsJRnvo7TnnzDvkwlQ5MDURju9BNLI43edYJwer9H5A0w1nG3OYe0bSPbd0ls5Icoh8aW71w4EgnjxXmw0D-3Z8AcP4t2LzZ0FYhBe84ERyo/s1600/Seguir+por+correo.jpg" width="400" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
Una vez agregado vamos a personalizarlo para esto ir a:<br />
<div>
<br /></div>
<div>
<br /></div>
Diseño► Edición de HTML ►Presionar Ctrl + F y Buscar lo siguiente:►<br />
<div>
<br /></div>
<blockquote class="tr_bq">
<input name='loc' type='hidden' value='<span style="color: red;">en_US</span>'/></blockquote>
<br />
cambiamos <span style="color: red;">en_US</span> por <span style="color: red;">es_ES</span><br />
<br />
Con esto cambiado el idioma de Ingles a Español <br />
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDZYLmF4RgY6f3bhqrodsQ8Ol1JL7l7nWaENnQ4U1EeCxzVDgHwcazUYDA78iCj-JPJZnEPE8Nji4gmYlYKp_bRy9cs29vNN35NqPwoSYtxIfKUbQ4lyGw53e3WMq9FKUE9ryKK7yI8DM/s1600/Seguir+por+Correo+Electr%C3%B3nico.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDZYLmF4RgY6f3bhqrodsQ8Ol1JL7l7nWaENnQ4U1EeCxzVDgHwcazUYDA78iCj-JPJZnEPE8Nji4gmYlYKp_bRy9cs29vNN35NqPwoSYtxIfKUbQ4lyGw53e3WMq9FKUE9ryKK7yI8DM/s1600/Seguir+por+Correo+Electr%C3%B3nico.jpg" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
Para cambiar el texto del Botón:<br />
<br />
<blockquote class="tr_bq">
<input class='follow-by-email-submit' type='submit' value='<span style="color: red;">Submit</span>'/></blockquote>
<div>
<br /></div>
<div>
<br /></div>
Cambiar el texto en <span style="color: red;">rojo </span>por el que quieran y así tendrán la suscripción por correo electrónico personalizada.<br />
<div>
<br /></div>
<div>
<br /></div>
<blockquote class="tr_bq">
<input class='follow-by-email-address' name='email' placeholder='<span style="color: red;">Email address...</span>' type='text'/></blockquote>
<div>
<br />
Cambiar lo que esta en <span style="color: red;">rojo</span> por Correo Electrónico...<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnqv7QXuO3gvT4p9sPahoYGX6Fr4KXiv66JiQ1jwMf-c8Za0dTijFkHN-rhXXnsUaBciO_aqhjwzDJ3caUzelwJvu3mlacNmA548Z6nf07W85TUS4qCiNr1Y5LLpm5pGiVql0TWN3hykc/s1600/Seguir+por+Correo+Electr%C3%B3nico.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="64" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnqv7QXuO3gvT4p9sPahoYGX6Fr4KXiv66JiQ1jwMf-c8Za0dTijFkHN-rhXXnsUaBciO_aqhjwzDJ3caUzelwJvu3mlacNmA548Z6nf07W85TUS4qCiNr1Y5LLpm5pGiVql0TWN3hykc/s1600/Seguir+por+Correo+Electr%C3%B3nico.PNG" width="320" /></a></div>
<br />
<br />
<br />
<br />
Para darle estilo<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihkrTur0ICDBQfxK-M-0K87eLzLdxKbfjvUxgb0EarrRvGMKai7wG3e1ZvmN7-ZKUb0yACL8H2naV62_XymZpUAj3M4v6H5qZG2SMLlQWseiWtvqr8G641SH8yGJyCx6Y_WiLMiEB8x5Y/s1600/Seguir+por+Correo+Electr%C3%B3nico1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="78" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihkrTur0ICDBQfxK-M-0K87eLzLdxKbfjvUxgb0EarrRvGMKai7wG3e1ZvmN7-ZKUb0yACL8H2naV62_XymZpUAj3M4v6H5qZG2SMLlQWseiWtvqr8G641SH8yGJyCx6Y_WiLMiEB8x5Y/s1600/Seguir+por+Correo+Electr%C3%B3nico1.PNG" width="320" /></a></div>
<br />
Ir a:<br />
<br />
Plantilla ►Personalizar ►Diseñador de Plantillas ► Avanzado ► Añadir Código CSS Personalizado<br />
<br />
<br />
En el recuadro pegar el siguiente Código:<br />
<br />
<br />
<blockquote class="tr_bq">
.follow-by-email-inner{<br />
background-color: #000;<br />
padding: 5px 15px;<br />
text-align: center!important;<br />
border-bottom-left-radius: 15px;<br />
border-bottom-right-radius: 15px;<br />
border-top-left-radius: 15px;<br />
border-top-right-radius: 15px;<br />
border: 5px solid rgb(230, 230, 230);<br />
}</blockquote>
<div>
<br /></div>
<div>
Así tendrán la Suscripción por Correo Electrónico personalizado.</div>
<br />
<br />
<br />
<br />
<br /></div>
</div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-3022848855451051526.post-87041987372729980692014-11-21T01:40:00.000-08:002016-03-06T09:18:18.716-08:00 Banners para publicidad<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmE-iH61WcMwCqlfxM7OqPcNmCmzLtuErAjSMjDyVqs1lS5RlqQw5g75Zm_KodlcROoqQDYZk7v2pVdKhG8I1bwYcBlOx1a3jSakqNIoK5w8phpr81rLig3Y77IqAoRvHPZ-c-t82xzS5T/s1600/Anuncio.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmE-iH61WcMwCqlfxM7OqPcNmCmzLtuErAjSMjDyVqs1lS5RlqQw5g75Zm_KodlcROoqQDYZk7v2pVdKhG8I1bwYcBlOx1a3jSakqNIoK5w8phpr81rLig3Y77IqAoRvHPZ-c-t82xzS5T/s1600/Anuncio.jpg" /></a></div>
<br />
Poner en tu blog unos banners para publicidad en la sidebar<br />
<br />
Este es el código que debes insertar como un nuevo elemento Html/Javascript:<br />
<blockquote class="tr_bq">
<center><br />
<div class="banner img"><br />
<a href="<span style="color: red;">URL ENLACE</span>" title="<span style="color: red;">Nombre del Banner 15x15</span>"><img style="margin:0px 5px 5px 0px;" alt="<span style="color: red;">Nombre/Título enlace</span>" src="<span style="color: red;">URL IMAGEN</span>"/></a><br />
<a href="<span style="color: red;">URL ENLACE</span>" title="<span style="color: red;">Nombre del Banner 15x15</span>"><img style="margin:0px 0px 5px 0px;" alt="<span style="color: red;">Nombre/Título enlace</span>" src="<span style="color: red;">URL IMAGEN</span>"/></a><br />
<a href="<span style="color: red;">URL ENLACE</span>" title="<span style="color: red;">Nombre del Banner 15x15</span>"><img style="margin:0px 0px 5px 0px;" alt="<span style="color: red;">Nombre/Título enlace</span>" src="<span style="color: red;">URL IMAGEN</span>"/></a><br />
<a href="<span style="color: red;">URL ENLACE</span>" title="<span style="color: red;">Nombre del Banner 15x15</span>"><img style="margin:0px 0px 5px 0px;" alt="<span style="color: red;">Nombre/Título enlace</span>" src="<span style="color: red;">URL IMAGEN</span>"/></a><br />
</div><br />
</center></blockquote>
Cambiar lo que esta en <span style="color: red;">rojo</span>.<br />
<br />
Quedando de esta manera<br />
<br />
<br />
<center>
<div class="banner img">
<a href="http://cambio-cambie.blogspot.com/" title="Atención"><img alt="Advertencia" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitYC-TNvDRD5peKYk8WSTCITHc0qNU2FpwQECPxEnzIwK_MnqnzII7_OvHJTNy0g0SpUp9sjuvcGhxyXExG68hz2BCS7WOEiA40L_h8e_yx6SD_IRskTbhV2GOCLnxJ_ybAqxQsJjzgUg/w105-h105-p/advertencia.jpg" style="margin: 0px 5px 5px 0px;" /></a>
<a href="http://cambio-cambie.blogspot.com/" title="CSS"><img alt="CSS" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI6swNX8YmfCt8BmvvGZtgQPB4y47FDKYusCHlj5jI4XC_YPiHhGe7_LOY1Ma9eaZ12GRlrjmb_sOUcixxZDSaA4Y7-Sin8nLvq7GgRd4aaueJ97Ht14B1pxtyF-2ma-ctfipNhVpFZWw/w105-h105-p/flags_DD_CSS.png" style="margin: 0px 0px 5px 0px;" /></a><br />
<a href="http://cambio-cambie.blogspot.com/" title="HTML"><img alt="HTML" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaqdWNl8c_SkHJMu85Hu_yLXtqOalcDAuHzktvI53mOsCqVEphWDZi6My23VaHW_7p5YP7X4h6K-Pvu-xr68j0KE2P_8j_HGNeYuVJ_nuSlSNULi6-yD2VVXpbo0f1DYfzRJMYQunWrB88/w105-h105-p/HTML5_logo.png" style="margin: 0px 0px 5px 0px;" /></a>
<a href="http://cambio-cambie.blogspot.com/" title="Banner publicidad 15x15"><img alt="Anuncio" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmE-iH61WcMwCqlfxM7OqPcNmCmzLtuErAjSMjDyVqs1lS5RlqQw5g75Zm_KodlcROoqQDYZk7v2pVdKhG8I1bwYcBlOx1a3jSakqNIoK5w8phpr81rLig3Y77IqAoRvHPZ-c-t82xzS5T/w140-h123-p/Anuncio.jpg" style="margin: 0px 0px 5px 0px;" /></a>
</div>
</center>
<br />
<br />
<br />
<br />
<br />
<br />
<br /></div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-3022848855451051526.post-61256811201370137152014-04-26T19:20:00.000-07:002016-06-19T12:10:04.026-07:00Flecha para volver arriba con efecto deslizante<div dir="ltr" style="text-align: left;" trbidi="on">
<div>
<br /></div>
<div>
<br /></div>
En esta entrada colocaremos una flecha que nos permita volver al inicio o la parte superior del blog.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvziDyjWArLpDKBVzZ1O2_EFjTUikPoFYDSuJWNkNMnaCTbb_qckMzvzzyYT34LJhaqG0EYwf1z998DA5GZ0fIzK2ADueEOTiy_eQke26mYGoOhyphenhyphenukdepbU3X1dBE6Kg3xZTa3tL1OQ3E/s1600/navigation-up_blue.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvziDyjWArLpDKBVzZ1O2_EFjTUikPoFYDSuJWNkNMnaCTbb_qckMzvzzyYT34LJhaqG0EYwf1z998DA5GZ0fIzK2ADueEOTiy_eQke26mYGoOhyphenhyphenukdepbU3X1dBE6Kg3xZTa3tL1OQ3E/s1600/navigation-up_blue.png" width="200" /></a></div>
<br />
Obtendremos el mismo resultado que al realizar el truco "<a href="http://cambio-cambie.blogspot.com.ar/2014/02/flecha-flotante-en-para-volver-arriba.html" target="_blank">flecha para volver arriba</a>" pero esta vez, con un efecto deslizante, prácticamente igual pero sin necesidad de alojar scripts externos en la plantilla, con lo que obtendremos una instalación simple.<br />
<br />
Puedes comprobar el resultado pulsando la flecha en la esquina inferior izquierda de cualquier entrada o en el footer (parte inferior del sitio)de este blog.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCHmx2A017dmQ6zLCj_P_XbAeA6n4GgHUyaboX_F3PY3FC3COPZQoAeNX6w7QNoU_TV0-IQWIncTFbGldizSXzizbdIy8J50LHfgpZViAY1U_XpEX8BvipI59C629tRwIx-kcctyfqVVg/s1600/volver-arriba.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="70" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCHmx2A017dmQ6zLCj_P_XbAeA6n4GgHUyaboX_F3PY3FC3COPZQoAeNX6w7QNoU_TV0-IQWIncTFbGldizSXzizbdIy8J50LHfgpZViAY1U_XpEX8BvipI59C629tRwIx-kcctyfqVVg/s320/volver-arriba.PNG" width="320" /></a></div>
Ir a Edición de HTML:<br />
<br />
Diseño► Edición de HTML ►Presionar Ctrl + F y Buscar lo siguiente:►<br />
Busca la etiqueta <b></head> </b>y arriba de esta inserta el siguiente script:<br />
<br />
<blockquote class="tr_bq">
<!-- Volver arriba deslizante --><br />
<script language='javascript' type='text/javascript'><br />
var bl_subirdesliz;<br />
function bl_clicsubir() {<br />
if (document.body.scrollTop != 0 || document.documentElement.scrollTop != 0) {<br />
window.scrollBy(0, -40);<br />
bl_subirdesliz = setTimeout(&#39;bl_clicsubir()&#39;, 8);<br />
}<br />
else clearTimeout(t);<br />
}<br />
</script><br />
<!-- Fin volver arriba deslizante --></blockquote>
<br />
Ahora, justo encima de la etiqueta <b></body></b> inserta este código:<br />
<br />
<br />
<blockquote class="tr_bq">
<a href='#' onclick='bl_clicsubir();return false' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='ir arriba'><img src='<span style="color: red;">URL la imagen</span>'/></a></blockquote>
<br />
<br />
<br />
Obteniendo la flecha en la esquina inferior derecha. Para cambiar su posición:<br />
<br />
<br />
<ul style="text-align: left;">
<li><b>Flecha en la esquina superior derecha:</b></li>
</ul>
<br />
<br />
Cambia el atributo <span style="color: blue;">bottom </span>por <span style="color: blue;">top</span>.<br />
<br />
<br />
<ul style="text-align: left;">
<li><b>Flecha en la esquina inferior izquierda:</b></li>
</ul>
<br />
<br />
Cambia el atributo <span style="color: red;">right </span>por <span style="color: red;">left</span>.<br />
<br />
<br />
<ul style="text-align: left;">
<li><b>Flecha en la esquina superior izquierda:</b></li>
</ul>
<br />
<br style="background-color: white; font-family: Arial, helvetica, sans-serif; font-size: 13px; line-height: 20.7360000610352px; outline: none;" />
Cambia el atributo <span style="color: red;">right</span> por <span style="color: red;">left</span> así como <span style="color: blue;">bottom </span>por <span style="color: blue;">top</span>.<br />
<br style="background-color: white; font-family: Arial, helvetica, sans-serif; font-size: 13px; line-height: 20.7360000610352px; outline: none;" />
<br />
Puedes sustituir la imagen por cualquier otra, reemplazando la la línea en color gris con la URL de tu icono.<br />
<br />
Si en lugar de una imagen prefieres mostrar una palabra borra dicha línea gris y escribe el texto.<br />
<br />
<div style="text-align: center;">
<h3>
<b>La flecha al final de tus entradas</b></h3>
</div>
<br style="background-color: white; font-family: Arial, helvetica, sans-serif; font-size: 13px; line-height: 20.7360000610352px; outline: none;" />
Para mostrar la flecha en el pie de tus post, introduciremos el código <b>antes</b> de una de:<br />
<br />
<br />
<blockquote class="tr_bq">
<p class='post-footer-line post-footer-line-2'/></blockquote>
<br />
Sino la encuentras busca<br />
<br />
<blockquote class="tr_bq">
<div class='post-footer-line post-footer-line-2'></blockquote>
<br />
<br />
Antepone esta otra línea...<br />
<br />
<br />
<blockquote class="tr_bq">
<a href='#' onclick='bl_clicsubir();return false' style='float: left' title='ir arriba'><img src='<span style="color: red;">URL de la imagen</span>'/></a></blockquote>
<div>
<br />
Dale a Vista previa y guarda la plantilla.
<br />
<br /></div>
<div>
<div class="nota">
El icono se encontrara ubicado a la izquierda del pie del post. Para alinearlo a la <b>derecha</b>, cambia <span style="color: blue;">left</span> por <span style="color: blue;">right</span>.</div>
<div>
<br /></div>
<br />
<br />
<center>
<div class="boton">
<a href="http://cambiocambieblogger.blogspot.com/2013/01/entrada-4.html" target="_blank">Demo</a></div>
</center>
<br />
Para las imagenes ver en <a href="http://www.iconfinder.net/search/?q=up+arrow" target="_blank">esta página</a>.<br />
<div>
<br />
<br /></div>
<div>
<div class="tips">
<h2>
position: fixed</h2>
Este atributo sirve para posicionar una capa con posicionamiento absoluto, pero su posición final será siempre fija, es decir, aunque se desplace el documento con las barras de desplazamiento del navegador, siempre aparecerá en la misma posición.</div>
<br />
<br />
<br /></div>
</div>
</div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-3022848855451051526.post-60963562118801844682014-02-15T19:05:00.000-08:002016-06-19T11:06:00.536-07:00Flecha flotante en para volver arriba<div dir="ltr" style="text-align: left;" trbidi="on">
<div>
<br /></div>
<div>
<br /></div>
En este truco explicaré la manera más sencilla de conseguir que una imagen nos permita "subir".<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg19X0bpgLtxTbYLiRkq2K9h57T-uIqy9nfA-fWtTjc3eFEzLUpQxLsJLd_1XZZx_al0oozhxt4I0ASpRSV9n5KeDWkxmEDFORMDnLiwV5vE_Gvm_YFibKVS7G8OaHT1Sj8ak1-GnJJBjw/s1600/navigation.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg19X0bpgLtxTbYLiRkq2K9h57T-uIqy9nfA-fWtTjc3eFEzLUpQxLsJLd_1XZZx_al0oozhxt4I0ASpRSV9n5KeDWkxmEDFORMDnLiwV5vE_Gvm_YFibKVS7G8OaHT1Sj8ak1-GnJJBjw/s1600/navigation.png" /></a></div>
<br />
Sin necesidad de alojar script alguno o editar la plantilla, podemos conseguir que, tanto una imagen como una palabra o frase quede flotando en una esquina del blog, cumpliendo esta función.<br />
<br />
Puedes escoger la imagen que desees (ya sea una flecha o un icono) o escribir una palabra cualquiera.<br />
<div>
<br /></div>
Para insertarlo en el Blog entramos en ▶ <b>Diseño</b> ▶<b> Añadir un Gadget</b> elegimos ▶<b> HTML / Javascript </b><br />
<div>
<br /></div>
<div>
Donde copias el código:<br />
<div>
<br /></div>
<div>
<blockquote class="tr_bq">
<a style="position: fixed; bottom: 0px; right: 10px;" href="#" title="Subir"><img src="<span style="color: red;">URL DE LA IMAGEN</span>"></a></blockquote>
<div>
<br /></div>
Si en lugar de una imagen quieres utilizar una frase pone este código:</div>
<div>
<br /></div>
<blockquote class="tr_bq">
<a style="position: fixed; bottom: 0px; right: 10px;" href="#" title="Subir"><span style="color: red;">Volver arriba</span></a></blockquote>
Para darle estilo<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLUsXHLRObasjcJOx3cuShVkCMyaw4xZ7jqNoSlYAylk7tkB7AEEzKb_IJQi1LKIyc2a9BT_d_VGqNAl8v4p26V1ms5SE2dPVYgN1csQOb6wijsUun2hivYemmNN5IzIfsaLa9WZ33Nlc/s1600/Volver-arriba.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="73" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLUsXHLRObasjcJOx3cuShVkCMyaw4xZ7jqNoSlYAylk7tkB7AEEzKb_IJQi1LKIyc2a9BT_d_VGqNAl8v4p26V1ms5SE2dPVYgN1csQOb6wijsUun2hivYemmNN5IzIfsaLa9WZ33Nlc/s320/Volver-arriba.PNG" width="320" /></a></div>
utilizar el siguiente código<br />
<br />
<blockquote class="tr_bq">
<a style="padding:.5em 1em;text-shadow:1px 1px 2px #333;box-shadow:0px 0px 3px #000;-moz-box-shadow:0px 0px 3px #000;<br />
-webkit-box-shadow:0px 0px 3px #000;border-radius:2px 2px 2px 2px;-moz-border-radius:2px 2px 2px 2px;-webkit-border-radius:2px 2px 2px 2px;font:bold 14px Arial, Helvetica, sans-serif;color:<span style="color: red;">#fff</span>;background:<span style="color: red;">#666;</span>border:5px solid #000;position: fixed; bottom: 0px; right: 50px;" href="#" title="Subir">▲ Volver arriba ▲</a></blockquote>
<br />
<br />
<br />
<ul>
<li>Los valores que están en <span style="color: red;">rojo </span>se pueden cambiar.</li>
<li>En <span style="color: red;">Volver arriba </span>cambiarla por la palabra que desees.</li>
</ul>
<br />
<div>
<br /></div>
<div>
Para las imágenes ver en <a href="http://www.iconfinder.net/search/?q=up+arrow" target="_blank">esta página</a>.</div>
<br />
<br />
<div class="tips">
<h2>
position: fixed</h2>
<br />
Este atributo sirve para posicionar una capa con posicionamiento absoluto, pero su posición final será siempre fija, es decir, aunque se desplace el documento con las barras de desplazamiento del navegador, siempre aparecerá en la misma posición.</div>
<br />
<br /></div>
</div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-3022848855451051526.post-72025695268213580222014-01-10T05:35:00.000-08:002016-03-02T11:57:40.177-08:00Crear tu propio formulario de contacto para el blog o página web<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheolJ7xoA7BwzVZoxqqalS26Vu8mE-zfLwQu5Uq588DKj0tCue82gmSooq1j-UqBuYt8okjOobDLVjtPlD1OgqT6NxMmxklIckhsFnJYisTCwhJGPFU4U6NBm27PNwu8agUv03MnPdROA/s1600/icono_contactar.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheolJ7xoA7BwzVZoxqqalS26Vu8mE-zfLwQu5Uq588DKj0tCue82gmSooq1j-UqBuYt8okjOobDLVjtPlD1OgqT6NxMmxklIckhsFnJYisTCwhJGPFU4U6NBm27PNwu8agUv03MnPdROA/s1600/icono_contactar.png" /></a></div>
Para diseñar un formulario de contacto de manera sencilla y sin conocimientos previos de programación, utilizando un servicios externos y gratuitos de creación y personalización de formularios. <br />
<br />
<br />
Son varios los prestadores de este tipo de servicios, que nos permiten insertar un formulario en nuestro blog. Algunos estos son:<br />
<ul style="text-align: left;">
<li><a href="https://drive.google.com/" target="_blank">Google Drive Formularios</a></li>
</ul>
<ol style="text-align: left;">
<li>Un formulario es un documento de Drive y por tanto tiene su propio menú y su barra de botones. Se puede guardar con un nombre, duplicar, descargar y compartir.</li>
<li>En la plantilla de formulario puedes añadir todos los elementos o campos que quieras. También puedes organizar el formulario añadiendo encabezados y dividiéndolo en varias páginas.</li>
<li>Google también nos permite añadir un formulario a partir de una hoja de cálculo de Google Docs</li>
<li>Información detallada: <a href="https://support.google.com/drive/answer/87809?hl=es" target="_blank">Cómo crear un formulario de Google.</a></li>
</ol>
<ul style="text-align: left;">
<li><a href="http://spanish.jotform.com/" target="_blank">JotForm</a> </li>
</ul>
<ol style="text-align: left;">
<li>Debemos darnos de alta en su página web. En su versión gratuita podemos crear formularios de forma ilimitada, la restricción de espacio es de 100 megas y 100 envíos mensuales.</li>
<li>Presenta un panel de personalización en castellano muy completo: cuenta con más de 50 plantillas diferentes, permite personalizar fuentes, colores, fondos, tamaño del formulario, etc.</li>
<li>Podemos introducir campos de tipo cuadro de texto, áreas de texto, desplegables, botones de radio, casillas de verificación, campos para realizar pagos, podemos subir ficheros, imágenes, captcha.</li>
<li>También tenemos la posibilidad de añadir al formulario vídeos de YouTube, Image Slider, SoundCloud...</li>
</ol>
<ul style="text-align: left;">
<li><a href="http://www.emailmeform.com/" target="_blank">EmailMeForm</a> </li>
</ul>
<ol style="text-align: left;">
<li>Para su uso, tenemos que registrarnos. La versión gratuita te permite crear un número ilimitado de formularios y ofrece hasta un máximo de 100 megas y 100 envíos al mes.</li>
<li>Permite la subida de ficheros adjuntos de correo electrónico.</li>
<li>Implementa la gestión de permisos de usuarios y protección por contraseña, así como código captcha anti-spam.</li>
<li>Cuenta con versión adaptada para dispositivos móviles (Responsive Design).</li>
</ol>
<div>
<br /></div>
<ul style="text-align: left;">
<li><a href="http://es.foxyform.com/" target="_blank">Foxyform</a> </li>
</ul>
<ol style="text-align: left;">
<li>Es el que utilizo para este blog por razones de peso: "no necesito registrarme, ofrece los campos suficientes para integrar en mi formulario y permite de forma básica configurar el color de fondo, color de fuente, fuente y tamaño de la fuente. Y todo en menos de un minuto".</li>
<li>Además dispone de protección captcha y visualización previa.</li>
</ol>
<div>
<br /></div>
<ul style="text-align: left;">
<li><a href="http://www.kontactr.com/" target="_blank">Kontactr</a> </li>
</ul>
<ol style="text-align: left;">
<li>Es necesario crear una cuenta en su plataforma.</li>
<li>Dispone de protección Captcha.</li>
<li>Permite personalizar el color de fondo del formulario y de las cajas de texto.</li>
<li>Presenta el inconveniente de que los textos descriptivos de los campos están en inglés y no se pueden modificar.</li>
</ol>
<ul style="text-align: left;">
<li><a href="http://www.cloudcontactforms.com/" target="_blank">CloudContactForms</a> </li>
</ul>
<ol style="text-align: left;">
<li>Presenta características similares a la plataforma Kontactr.</li>
</ol>
<div>
<br /></div>
<br />
<br />
<br /></div>
Unknownnoreply@blogger.com0