GADGET DE ULTIMAS ENTRADAS PARA BLOGGER [NUEVO ESTILO]

"TECLEANDO PARA TI 2019"

Ya he publicado varios estilos del gadget de últimas entradas, incluso hace un par de semana publique uno muy bueno pero el de hoy es también muy bueno, gracias al CSS se ha logrado un gran cambio en el aspecto del gadget, el cual se ve de la siguiente manera


Para agregar este gadget solo ve a Diseño, Añadir gadget, HTML/JavaScript y pega allí lo siguiente:

Para implementarlo en vuestro Bloc en un gadget solo tenéis que seguir estos pasos:

 Un clic en “Diseño”

Clic en “Añadir un gadget”

Busca el widget que dice “HTML-Javascript” y ábrelo

Coloca el siguiente código en el interior

<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentpoststhumbs.js"></script>
<script style="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = false;
var posts_date = true;
var post_summary = true;
var summary_chars = 70;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://helplogger.blogspot.com/2014/11/5-cool-recent-post-widgets-for-blogger.html" rel="nofollow">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css' />
<style type="text/css">
img.recent-post-thumb {width:50px;height:50px;float:right;margin: 5px -5px 0px 0px; border-radius: 100%; padding: 3px;background: #fff}
.recent-posts-container {font-family: 'Ubuntu Condensed', sans-serif; float: left;width: 100%;min-height: 55px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container {list-style-type: none; background: #fff;padding: 0px; }
ul.recent-posts-container li:nth-child(1n+0) {background: #F49A9A; width: 100%}
ul.recent-posts-container li:nth-child(2n+0) {background: #FCD092; width: 95%}
ul.recent-posts-container li:nth-child(3n+0) {background: #FFF59E; width: 90%;}
ul.recent-posts-container li:nth-child(4n+0) {background: #E1EFA0; width: 85%;}
ul.recent-posts-container li:nth-child(5n+0) {background: #B1DAEF; width: 80%;}
ul.recent-posts-container li {padding:5px 10px;min-height:50px; list-style-type: none; margin: 0px 5px -5px 5px; color: #777;}
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover { color: #222;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 14px;color: #444; font-weight: bold;}
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #222;}
.recent-posts-details {padding: 5px 0px 5px; }
</style>

Ahora solo queda guardar los cambios y disfrutar de este genial gadget.

Después de haber insertado el código, un clic en "Guardar"

Data: 04/10/2019

 Fuente:miltrucosblogger

 Publicado por:                                                                   

ICONOS SOCIALES PARA BLOGGER CON EFECTO MOUSE OVER

"TECLEANDO PARA TI 2019"

En el mundo del diseño web se pueden lograr grandes efectos con pequeños trozos de códigos como el ejemplo que les voy a mostrar hoy, 

iconos sociales con efecto mouse over, esto quiere decir que cuando se pasa el cursor por encima de una imagen se muestra otra; el truco se ve de la siguiente manera:

Iconos Sociales con efecto Mouse Over

Para agregar este truco a tu blog añade el siguiente código en un gadget HTML/JavaScript y pegar allí lo siguiente: en la parte de tu web que quieras que se vea:

Para implementarlo en vuestro Bloc en un gadget solo tenéis que seguir estos pasos:

 Un clic en “Diseño”

Clic en “Añadir un gadget”

Busca el widget que dice “HTML-Javascript” y ábrelo

Coloca el siguiente código en el interior

<a href="URL FACEBOOK"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_N2tfIZRq_PQoablpBtMP9XyPpkD1hZKZE2Y2MVedNK_8BodXu8VnzSUvw5qOXIGmQ3cOAvulfcCZbqR7NYfhnmBomhgvjPCtgyqOE-ezpjnMm4crb8Kqh7w2PWVesykoCHbswD8U3ow/s1600/facebook-64.png" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPCyhAN6Q_EKj4Nc-_mlU8bnMRmoDzZqSPmsugLZl60bSWIcVCgbAt_7zr92uUTdhEZD1Ek9ib9mxP81SQNuyxv-glc1mU6OUd9kcs6SRKM4QTlxMaoJsDAFmp9rthmrONCTX_K9fwk-8/s1600/facebook.png'" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_N2tfIZRq_PQoablpBtMP9XyPpkD1hZKZE2Y2MVedNK_8BodXu8VnzSUvw5qOXIGmQ3cOAvulfcCZbqR7NYfhnmBomhgvjPCtgyqOE-ezpjnMm4crb8Kqh7w2PWVesykoCHbswD8U3ow/s1600/facebook-64.png'" /></a> <a href="URL TWITTER"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheM37rJKyfurqBiJtvCTPeUfMczSIXyNwxEqCHXC56rcWCYBzKd9PFMU0PJPFoRcJ1zkZg_hogHWfBX7sG_NLlU7WQeckfp22pXHT9I17MPHVKQhl4KyD4jf62hM-5QfQOpEgYbN22GCw/s1600/twitter-64.png" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuG9rhzJ3u9wHOQ_E1t8ngZMp7rsjt4auoKdrPx4nP8x_OLnlE1IihgvqmYLha8-ObkK7g74eFiCBTCDIwgOg3e9aK1yD5w26uIU3IkavDrOayir00dal09-lVGwN9cCs2-npLIi78Tls/s1600/google.png'" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheM37rJKyfurqBiJtvCTPeUfMczSIXyNwxEqCHXC56rcWCYBzKd9PFMU0PJPFoRcJ1zkZg_hogHWfBX7sG_NLlU7WQeckfp22pXHT9I17MPHVKQhl4KyD4jf62hM-5QfQOpEgYbN22GCw/s1600/twitter-64.png'" /></a><a href="URL GOOLGE+"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkcr5ARh0nVgd4QwTi8qA0N-JbyFOjUU0ZFTLPi50IaCpHypdDRfv0f3gzCYubyBDj6tRUZvUCnWUlhZEdA_QskK0nzpm8k7PlApo4WquVE_7eHhdJZHxtI-reRAEdUN00l9OfUKDLWnw/s1600/googleplus-64.png" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg55yW7LAiYRkh9o1mv2kgB1ip-eDshm7JUq4KCh6DOKIrZEpyp83fR_YomjZkhrybF6VCDqBFRrs9vmFLfYtn4ur6yUKOvbePxro67k2Org5XAsl_oS80HJX75Ic6Dx5m-Vra29IPHgHI/s1600/twitter.png'" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkcr5ARh0nVgd4QwTi8qA0N-JbyFOjUU0ZFTLPi50IaCpHypdDRfv0f3gzCYubyBDj6tRUZvUCnWUlhZEdA_QskK0nzpm8k7PlApo4WquVE_7eHhdJZHxtI-reRAEdUN00l9OfUKDLWnw/s1600/googleplus-64.png'" /></a>

hora reemplaza lo resaltado en color azul por lo que se indica en cada caso, guardas los cambios y listo.

Después de haber insertado el código, un clic en "Guardar"

Data: 04/10/2019

Fuente: miltrucosblogger

Publicado por:                                                                      

INDICE DE ENTRADAS QUE MUESTRA TODOS LOS POSTS CON FECHA Y ETIQUETAS PARA BLOGGER

"TECLEANDO PARA TI 2019"

Esta es una de esas entradas en la que no sabia que titulo poner, pero creo que le he puesto el titulo más descriptivo posible, puesto que este índice de entradas o mapa del sitio muestra en una sola lista todas las entradas que hemos publicado en el blog y lo mejor es que es muy personalizable y que con un solo clic en la parte de «Fecha» puedes ordenar los posts también por su fecha de publicación.

Indice de entradas para Blogger que muestra todos los posts

El truco se ve de la siguiente manera:

Para agregar este truco en tu blog, solo tienes que ir al editor html de una página o entrada y añadir allí lo siguiente:

Para instalarlo, Creamos una página nueva, para ello nos dirigimos al escritorio de Blogger, en la pestaña Páginas, hacer clic en Página en blanco. y en el contenido html, pegamos el script: 

<div id="bp_toc" style="max-height:1300px;overflow:scroll;overflow-x:auto;">
</div>
<script src="http://joderinga.com/miltrucosblogger/script-sitemap-blogger.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>
<style scoped="" type="text/css">
#comments {display:none;}
</style> <style type='text/css'>
/* CSS Full Sitemap */
#bp_toc {background:#348AF3;color:#021630;margin:0 auto;padding:5px;}
span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#FBFCFD;font-family:'Open Sans';font-weight:700;text-transform:uppercase;font-size:30px;line-height:normal;}
.toc-header-col1 {padding:10px;background-color:#EAF2FC;width:250px;}
.toc-header-col2 {padding:10px;background-color:#EAF2FC;width:75px;}
.toc-header-col3 {padding:10px;background-color:#EAF2FC;width:125px;}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {font-size:13px;
text-decoration:none;color:#0C386D;font-family:'Open Sans';font-weight:700;letter-spacing: 0.5px;}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
text-decoration:none;}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {background:#EAF2FC;padding:5px;padding-left:5px;font-size:89%}
.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{color:#666;font-size:13px;}
.toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#0C386D;}
#bp_toc table {width:100%;margin:0 auto;counter-reset:rowNumber;}
.toc-entry-col1 {counter-increment:rowNumber;}
#bp_toc table tr td.toc-entry-col1:first-child::before {content: counter(rowNumber);min-width:1em;margin-right:0.5em;}
td.toc-entry-col2 {background:#fafafa;}
</style>
<a style="display:block;text-align:right;font:normal bold 8px Arial,Sans-Serif;text-decoration:none;margin:10px;" href="http://www.miltrucosblogger.com/" title="indice">Mil Trucos Blogger</a>

El CSS ha sido resaltado en color azul para que lo puedas identificar fácilmente y desde allí puedes personalizar los colores del índice.

Data: 04/10/2019

Fuente: miltrucosblogger

Publicado por:                                                                      

NUEVO ESTILO DE INDICE POR ETIQUETAS PARA TU BLOG DE BLOGGER

"TECLEANDO PARA TI 2019"

Blogger es una gran plataforma, y uno de sus mejores aspectos es que con códigos sencillos se pueden crear un sin número de trucos que mejoran mucho esta plataforma, como es el caso del día de hoy en el que voy a mostrar un espectacular indice por etiquetas para Blogger, siendo quizás el mejor indice que he publicado hasta ahora.

El indice se ve de la siguiente manera:

Para agregar este truco a tu blog agrega el siguiente código en la edición html de una página de tu blog:

Para instalarlo, Creamos una página nueva, para ello nos dirigimos al escritorio de Blogger, 

en la pestaña Páginas, hacer clic en Página en blanco. y en el contenido html, pegamos el script: 

<div dir="ltr" style="text-align:left;" trbidi="on">
<style scoped="" type="text/css">
.table-of-content{background-color:#222;color:#ddd;font-family:Verdana,Geneva,Tahoma,Arial,Sans-serif;font-size:13px;font-weight:400;overflow:hidden;border-radius:4px;box-shadow:0 0 10px rgba(0,0,0,.1)}
.table-of-content .toc-header{color:#fff;font-family:inherit;font-weight:400;font-size:14px;background-color:#333;margin:0;padding:15px;overflow:hidden;cursor:pointer;border-top:1px solid #444;border-bottom:1px solid #222;transition:initial}
.table-of-content .toc-header:hover{background-color:#3a3a3a}
.table-of-content .toc-header:before{content:'';width:0;height:0;position:absolute;top:22px;right:15px;border:5px solid transparent;border-color:#aaa transparent transparent;transition:all .3s ease}
.table-of-content .toc-header.active{background:#3a3a3a;color:#fff}
.table-of-content .toc-header.active:before{border-color:#fff transparent transparent;top:16px;-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg);-ms-transform:rotate(-180deg);-o-transform:rotate(-180deg);transform:rotate(-180deg)}
.table-of-content .loading{display:block;padding:15px;text-decoration:blink}
.table-of-content ol{margin:0;padding:0;list-style:none;transition:initial}
.table-of-content li{line-height:normal!important;margin:0!important;padding:8px 8px 8px 15px!important;white-space:nowrap;text-align:left;overflow:hidden;background:#222!important;transition:initial}
.table-of-content a{color:#aaa;text-decoration:none;font-size:86%;transition:initial}
.table-of-content a:visited{color:#666;transition:initial}
.table-of-content a:hover,.table-of-content a:visited:hover{color:#fff;text-decoration:none;transition:initial}
.post ol li:before{display:none}
</style>
<div class="table-of-content" id="table-of-content">
<span class="loading">Cargando Indice...</span></div>
<script>
var toc_config = {
url: 'URL DE TU BLOG',
containerId: 'table-of-content',
showNew: 15,
newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#009fef;padding:1px 6px 3px 6px;line-height:normal;float:right;border-radius:3px;">Nuevo</strong>',
sortAlphabetically: {
thePanel: true,
theList: true
},
maxResults: 9999,
activePanel: 1,
slideSpeed: {
down: 400,
up: 400
},
slideEasing: {
down: null,
up: null
},
slideCallback: {
down: function() {},
up: function() {}
},
clickCallback: function() {},
jsonCallback: '_toc',
delayLoading: 0
};
</script>
<script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/daftar-isi-tea.js"></script>
</div>

Ahora reemplaza lo resaltado en color verde por lo que se indica (la URL de tu blog) y guarda los cambios.

Data: 04/10/2019

Fuente: Arlina Design

Publicado por:                                                                                 

AGREGAR UNA IMAGEN DE FONDO A UNA ENTRADA DE TU BLOG DE BLOGGER

"TECLEANDO PARA TI 2019"

Blogger es una estupenda plataforma que permite añadir geniales trucos con pequeñas porciones de códigos, 

como es el caso de hoy donde veremos como añadir una imagen de fondo a una entrada especifica (ya con anterioridad vimos como añadir una imagen de fondo a todo el blog).

El fondo en una entrada se ve de la siguiente manera:

Para agregar este truco en tu blog solo debes ir a la edición HTML de la entrada donde quieres agregar el fondo y pegar allí el siguiente código:

<table background="http://www.lasetaazul.com/estudio/imagenes/fondo_estudio.png" border="0" cellpadding="5" cellspacing="5" style="width: 100%px;"><tbody>
<tr><td>Contenido de la entrada aquí</td></tr>
</tbody></table

Solo coloca la URL de la Imagen donde te indica y el contenido de la entrada donde te lo pone.

En «contenido de la entrada» reemplázalo por todo el código HTML de tu entrada y guarda los cambios.

Como ves es un truco muy fácil de agregar y que con la imagen adecuada le puede dar un toque espectacular a tu entrada.

Data: 04/10/2019

Fuente: miltrucosblogger

Publicado por: