SILO CREATIVO

INDICE DE ENTRADAS AVANZADO PARA BLOGGER

INDICE DE ENTRADAS AVANZADO PARA BLOGGER.

A lo largo de todos estos años hemos publicado una buena colección de indices para Blogger, pero el que se trae hoy es más avanzado que los otros indices, puesto que trae las siguientes opciones:

Ordena las entradas por dos filtros: Las más nuevas y las que han sido recientemente actualizadas.

Filtro de entradas por categorías (bastante útil cuando no se quiere mostrar todo el contenido del blog sino justo el que el lector requiere).

Buscador entradas por palabras claves.

Todo esto hace de este indice el más completo que hemos publicado hasta la fecha.

Para agregar este truco en tu blog solo debes ir a la edición HTML de una página (es recomendable en una página, aunque también se puede hacer en una entrada) y pega lo siguiente:

<tr><td><label>Ordenar entradas por : </label></td><td><select id="orderFeedBy"><option selected="" value="published">Nuevas</option><option value="updated">Actualizadas</option></select></td></tr>

<tr><td><label>Filtrar por etiquetas : </label></td><td><span id="labelSorter"><select disabled=""><option selected="">Cargando...</option></select></span></td></tr>

<tr><td><label>Buscar por palabra clave : </label></td><td><form id="postSearcher">

</td></tr>

</tbody></table>

</div>

Cargando entradas...</div>

Ahora guarda los cambios y listo; como ves no tienes que hacer más nada, ya el código viene preparado para mostrar el contenido de tu web sin hacer modificaciones extras.

Fecha de la Publicación; 19/11/2020

Fuente miltrucosblogger.

Publicado por:

INDICE DE ENTRADAS PARA BLOGGER QUE MUESTRA TODOS LOS POST

INDICE DE ENTRADAS PARA BLOGGER QUE MUESTRA TODOS LOS POST.

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.

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:

</div>

#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.

Fecha de la Publicación; 19/11/2020

Fuente miltrucosblogger.

Publicado por:

GADGET DE MARCADORES FLOTANTES CON EFECTO HOVER

GADGET DE MARCADORES FLOTANTES CON EFECTO HOVER.

En esta oportunidad compartiré con ustedes un espectacular truco para Blogger, se trata de un espectacular menú de marcadores flotantes que se ubican en la parte izquierda del blog y al pasar el cursor sobre los iconos estos se expanden.

Puedes ver el truco en acción en esta misma entrada (en la parte izquierda de la pantalla).

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

1-Un clic en “Diseño”

2-Clic en “Añadir un gadget”

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

4-Coloca el siguiente codigo en el interior

ul#social {

position: fixed;

margin: 0px;

padding: 0px;

top: 10px;

left: 0px;

list-style: none;

z-index:9999;

}

ul#social li {

width: 100px;

}

ul#social li a {

display: block;

margin-left: -2px;

width: 100px;

height: 70px;

background-color:#fff;

background-repeat:no-repeat;

background-position:center center;

border:1px solid #AFAFAF;

-moz-border-radius:0px 10px 10px 0px;

-webkit-border-bottom-right-radius: 10px;

-webkit-border-top-right-radius: 10px;

-khtml-border-bottom-right-radius: 10px;

-khtml-border-top-right-radius: 10px;

-moz-box-shadow: 0px 4px 3px #000;

-webkit-box-shadow: 0px 4px 3px #000;

}

ul#social .twitter a{

background:#0F96C6 url(http://www.miltrucosblogger.com/wp-content/uploads/2013/10/Twitter.png)no-repeat;

background-position:center center;

}

ul#social .googleplus a {

background:#D73D27 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8wsaA9EbsXcjdEc9AxrNhbfI78HTkwQNSbW6P3wRcnQNJNi71Lky1OSUZMDyX1T77yGsF-xdC4nAxONJuc0dYZbIBwjfICbHA8dnD0cRjxGtMqeRRtBWG9ji2muaEraywsc6DNurI-Fo/s1600/GOOGLE+PLus.png)no-repeat;

background-position:center center;

}

ul#social .facebook a {

background:#1A4B97 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAZZXBs-oIYmdlII40CLBcFIGt7_NxU5Ns61ZcBsrgWW_lErEnIZIfUjFk4q__bZBk0td_bXR3XaaryZE_Stv79visPxMYvqwUVMHrBaIuqtypUJL7hdrwHZKX-Z8OT51aI__QmaltcqE/s1600/Facebook.png)no-repeat;

background-position:center center;

}

ul#social .rss a {

background:#FAAE17 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0Pf-pfCTltee90-zvaXgDMyAx7z0etJQDkBupvOL4vXi6L43ad8hMBpYSHdFAQw7dbjb-L8OPIOcJ6VOtjQmEuXeb7F4jSVmQ0E860PkHx69G0JQ4tqkyDPAejWUr5pzLVmQGiVwY7_w/s1600/rss.png)no-repeat;

background-position:center center;

}

ul#social .pinterest a {

background:#963336 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDmrqumE6utXDTCY1qml-WfqnjvnEEb0JPXdcoOUl5GNmAmZof9NWKBfHrGeCQxLddGqTx8rN-4RbfwaZawTXp2rotdigHpKXUfIvKq98fFkenpySXDhKAtKzcSdCyT7cX53W2KGacDsQ/s1600/Pinterest.png)no-repeat;

background-position:center center;

}

</style>

$(function () {

$('#social a').stop().animate({

'marginLeft': '-85px'

}, 1000);

$('#social > li').hover(

function () {

$('a', $(this)).stop().animate({

'marginLeft': '-2px'

}, 200);

function () {

$('a', $(this)).stop().animate({

'marginLeft': '-85px'

}, 200);

}

);

});

</script>

</ul>

Reemplaza lo que esta en resaltado en color azul por lo que se indica en cada caso y guarda los cambios.

Despues de haber insertado el código, un clic en "Guardar"

Fecha de la Publicación; 18/11/2020

Fuente miltrucosblogger.

Publicado por:

INDICE EN BLOGGER CON EFECTO DESLIZANTE

Un indice en tu blog hará que se vea mas organizado y la opción de indice que te traigo hoy es muy elegante,con efecto deslizante y sencilla de añadir.

Para añadir el truco crear una pagina o entrada luego en editar paginas editas la pagina recien creada y pegas el siguiente codigo

</script>

</script>

var accToc=true;

</script>

</script>

Cambia lo que está en color rojo por los datos de tu blog, publicas la entrada y listo.

Fecha de la Publicación; 18/11/2020

Fuente miltrucosblogger.

Publicado por:

GADGET DE ETIQUETAS EN SCROLL

GADGET DE ETIQUETAS EN SCROLL.

Hace ya un tiempo atrás veíamos como hacer que el gadget de etiquetas quedara como un menú desplegable, pues bien hoy veremos un truco similar pero en vez de quedar como un menú desplegable, el gadget de etiquetas quedará dentro de una especie de cuadro o caja de desplazamiento.

Para agregar este truco a tu blog primero debes tener añadido el gadget de etiquetas, luego de esto debes ir a Plantilla, Editar HTML y justo arriba de ]]></b:skin> pega lo siguiente:

Para instalarlo en vuestro Bloc solo tenéis que seguir estos pasos:

1 Un clic en “Plantilla”

2 Un clic en “Editar HTML”

Ahora se te abrirá el Editor HTML de tu plantilla

En este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor,

debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor,

3 Busca el siguiente código

]></b:skin>

Cuando lo hayas Encontrado el código deberás insertar las siguientes líneas de código justo arriba del código que encontraste

#Label1 .widget-content{height:200px; width:auto;overflow:auto;}

Ahora solo guarda los cambios y listo.

Este truco es perfecto para cuando tienes un gran número de etiquetas pero no quieres que se oculten como se hace con el truco del menú desplegable que deja oculta todas las etiquetas hasta que el lector desglose el gadget; en cambio aquí dejarás siempre visible las etiquetas y te ahorrarás buen espacio.

Fecha de la Publicación; 18/11/2020

Fuente miltrucosblogger.

Publicado por:

ESPECTACULARES Y ORIGINALES MARCADORES SOCIALES PARA TU BLOG DE BLOGGER

ESPECTACULARES Y ORIGINALES MARCADORES SOCIALES PARA TU BLOG DE BLOGGER.

Ya he compartido muchos pack de marcadores sociales pero ninguno de los que he publicado hasta ahora es tan espectacular como este, este conjunto de marcadores sociales incorpora los botones de las principales redes sociales: Google+, Facebook y Twitter con un espectacular efecto hover.

Vista previa del truco.

Para agregar este truco a tu blog ve a Plantilla, Editar HTML y busca la siguiente linea:

Un clic en Plantilla

Un clic en “Editar HTML”

Ahora se le abrirá el Editor HTML de su plantilla

En este punto deberás presionar la tecla “Control” de su teclado seguido de la tecla “F” para que aparezca

el buscador integrado en la parte superior derecha de su editor, aquí es donde tendrás que insertar

el código para buscarlo e insertar los códigos correspondientes en el editor,

a continuación mire la imagen la cual le muestra como debe aparecerle el buscador en el editor HTML

de su plantilla y así pueda colocar el código en el buscador al momento que yo diga busca este código.

Buscador de la Plantilla

Busca esta linea en la plantilla

Debajo de la anterior linea pega lo siguiente:

<b:if cond='data:blog.pageType == "item"'><style>@import url(http://fonts.googleapis.com/css?family=Open+Sans);@import "//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css";#cajared{width:430px;overflow: hidden;margin: 10px auto 0;}

.botones{float:left;margin-right: 10px;width: 120px;background: #eaeaea;border: 1px solid #cbcbcb;border-radius: 3px; -o-border-radius: 3px;-ms-border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;box-shadow:inset 0 1px 0px #fdfdfd;padding:15px 5px 5px;box-sizing:border-box;}

.botones i{background: #c5c5c5;color: #eaeaea;text-align:center;line-height:40px;font-size: 18px;width:40px;height:40px; display:block;margin: 0 auto 10px;border-radius: 50%;-o-border-radius: 50%;-ms-border-radius: 50%;-moz-border-radius: 50%; -webkit-border-radius: 50%;}

.social-container{text-align:center;text-transform:uppercase;font-size: 12px;color: #656565;line-height: 54px;font-family: Open Sans;background: #d8d8d8;width: 100%;height: 45px;box-shadow:inset 0 -2px 4px #c7c7c7;border-radius: 3px;-o-border-radius: 3px;-ms-border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;position:relative;overflow: hidden;}

.slide,.botones i{-webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-ms-transition:all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;}

.slide {box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);border-radius: 0 0 22px 22px;-o-border-radius: 0 0 22px 22px; -ms-border-radius: 0 0 22px 22px;-moz-border-radius: 0 0 22px 22px;-webkit-border-radius: 0 0 22px 22px;transition: all 0.2s ease-in-out;position: absolute;height: 45px;width: 100%;top: -35px;}

.slide::after {content: "";display: block;position: absolute;width:100%;height: 10px;box-shadow: inset 0 1px 0px #fdfdfd, 0 3px 0px #cdcdcd;border-radius: 3px;-o-border-radius: 3px;-ms-border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;background: #eaeaea;border:1px solid #cbcbcb;box-sizing: border-box;bottom: 0;}

.botones:hover .slide {top: 0;border-radius: 3px;}

.IN-widget,.botones iframe, .google #___plusone_0 {top:-2px;position: relative;}

.twitter iframe {width: 79px !important;}

.google #___plusone_0 {width: 60px !important;}

.botones.facebook:hover i, .facebook .slide {background:#305c99;color: white;}

.botones.twitter:hover i, .twitter .slide{background: #00cdff;color: white;}

.botones.google:hover i, .google .slide{background: #d24228;color: white;}

</style><div id='cajared'><div class='facebook botones'> <i class='icon-facebook'/> <div class='social-container fb'> <div class='slide'> <iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=true&width=100&action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:20px'/> </div> Facebook </div></div><div class='twitter botones'> <i class='icon-twitter'/> <div class='social-container tw'> <div class='slide'><a class='twitter-share-button' href='https://twitter.com/share'> Tweet </a> <script> !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https'; if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></div>Twitter </div></div><div class='google botones'> <i class='icon-google-plus'/> <div class='social-container tw'> <div class='slide'><div class='g-plusone' data-size='medium'/><script type='text/javascript'>(function(){var po=document.createElement('script');po.type = 'text/javascript';po.async = true;po.src='https://apis.google.com/js/plusone.js'; var s =

document.getElementsByTagName('script')[0];s.parentNode.insertBefore(po, s);})();</script></div>Google+</div></div></div><div style='text-align: right;'/></b:if>

Ahora solo falta que guardes los cambios y hemos finalizado el truco de hoy.

Guardar plantilla