TEMAS IMPOSIBLES: Blogger

Mostrando entradas con la etiqueta Blogger. Mostrar todas las entradas

20:22

COLOCAR UNA IMÁGEN CON TEXTO EN UN LADO EXPLICITO O TODO ALREDEDOR.

Las Imágenes son la portada de una publicación donde el Lector se fija en la primera mirada y a continuación va a por el texto que tiene que ser de calidad pero primero va a la imágen por esto el texto tiene que estar muy bien colocado alrededor de la Imágen.

ahora os explicare el caso más clásico es el de envolver con texto una foto que se ubicará contra el margen izquierdo.

Aqui lo que debemos hacer es “flotar” hacia la izquierda el elemento, en este caso, la imagen.

16:52

WIDGET PARA BLOGGER DE REDES SOCIALES CON EFECTO DE EXPANSIÓN .

Tener un buen widget de redes sociales en nuestro blog de blogger, es algo necesario para nuestro blog.
Atraer a los usuarios que visitan nuestros blogs con buenos efectos y así animarlos a que se suscriban en nuestros perfiles de redes sociales, es darse a conocer mucho más en el ámbito del internet.
La intención es que nuestros visitantes puedan suscribirse en las diferentes redes sociales y así compartir con ellos nuestras nuevas actualizaciones.
No vamos a insertar ningún Javascript ni tampoco un Jquery, todo el código esta implementado para hacer fácil su instalación.
El código es basado en líneas CSS el cual le dará un efecto a su widget de redes sociales.

Blogger featured redes sociales widget

15:39

FENOMENAL WIDGET DE REDES SOCIALES PARA BLOCS Y PÁGINAS WEB.

Las redes sociales es el método más usual para compartir todo tipo de artículos y así dar a conocer nuestros blocs, es por eso que voy a compartir con vosotros un simple código con el cual lo podréis insertar en un widget

y ubicarlo donde mejor os parezca. Lo que vamos hacer es copiar un código en un widget “HTML/Javascript” y realizar tres simples cambios para ubicar las direcciones de nuestra Fanpage de Facebook y de nuestra cuenta de Twitter,

como también existirá un icono de Email para que los usuarios lo puedan contactar a su dirección de correo electrónico. Este truco de Blogger sirve para cualquier página web y blocs.

Blogger featured redes sociales widget

14:41

CREAR UNA GALERÍA DE IMÁGENES EN EL SIDEBAR DE BLOGGER

Con una carga de imágenes ligera, rápida y realmente hermosa que a todos los bloggers les encantara y sobre todo que les muestre una galería de imágenes controlable,
en la cual se pueden mostrar una galería completa, con avances, retrocesos, pausa, texto, y un link en cada imagen para dirigir a su post o artículo que quiera mostrar.
En este tutorial vamos a usar jQuery, JavaScript, CSS y HTML, bueno realmente es un solo widget en la cual vosotros vais a insertar el código que os proporcionare,
Una vez más he tratado que su instalación sea fácil y de primera. Así que sólo tienes que copiar y pegar el código dentro de un widget "HTML/Javascript" para que las cosas funcionen.

Blogger featured galería widget

11:52

FIRMA TUS ENTRADAS! AUTOMÁTICAMENTE..

En blogger puedes poner tu firma al final de cada uno de tus post de forma automática de forma muy sencilla.

La firma es importante porque hace que el visitante recuerde tu blog mas fácilmente, es uno de esos detalles que añaden un poco de personalidad a las plantillas de blogger, quién dice firma dice foto anuncio… da igual lo que importa es añadir esos pequeños detalles que hacen que tu blog sea especial.

Quiero poner una firma al final de todos mis posts pero que ya salga sola, que no tenga que ponerla cada vez que hago una entrada.

Blogger entradas featured truco

3:00

Una Marquesina Diferente a todas las que he visto hasta ahora.

Esta es una Marquesina con un montón de rotulos que salen uno detras de otro en diferentes formas, total que parece que hay 19 marquesinas diferentes,

La podéis ver aquí mismo colocada en un Gadget,solo puede ir en un Gadget “HTML-Javascript”, espero que sea de vuestro agado tal como me agrado ami y lo pongáis en vuestra Web.

Blogger featured marquesinas widget

21:25

Crear texto simple en movimiento con etiqueta marque.

En muchos sitios web verá un texto en movimiento, también puede agregarlo a su blog con solo una etiqueta de marquesina.

También puede agregarlo en la parte superior o justo debajo de su barra de navegación.

En este tutorial primero veremos cómo usarlo. la etiqueta de la marquesina y después veremos la etiqueta de la marquesina usando el CSS.

Ahora veamos cómo usar la etiqueta de marquesina.

Ve a tu editor de publicaciones

Cambiar pestaña para Editar HTML

En Editar tipo de sección HTML

Oh ve a Diseño y añade un elemento de pagina “HTML-Javascript” y lo incustas dentro y a volar.

Aquí tenemos la Marquesina Básica que tira a la izquierda i va que te matas

<marquee>BIENVENIDO A TEMAS IMPOSIBLES</marquee>

Y se Verá de esta manera;

BIENVENIDO A TEMAS IMPOSIBLES

Para detener marquesina con el mouse sobre el mouse, deberás usar esta etiqueta

<marquee behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();">BIENVENIDO A TEMAS IMPOSIBLES</marquee>

Y se Verá de esta manera;

BIENVENIDO A TEMAS IMPOSIBLES

Agregar CSS a la etiqueta de la marquesina

Para cambiar el fondo, la familia de fuentes y el color de la fuente, use el siguiente código:

Color del Texto; color:#FF0000;

Color de Fondo #FFCC00 C

Y se Verá de esta manera;

BIENVENIDO A TEMAS IMPOSIBLES

Y por ultimo lo guardáis todo bien guardadito y listo a otra cosa mariposa espero que el post haya sido de vuestro agrado y hasta otra Amigos.

Fecha de la Publicación: 02-12-2018

Fuente:helperblogger

Publicado por

Blogger featured marquesinas

19:35

Cómo quitar Suscribirse a entradas ATOM

Para quitar el aviso de "Suscribirse a entradas ATOM" que sale al final de cada entrada y la verdad hoy en día con las demás funciones que cuenta Blogger ya no tiene sentido y lo que hace es estorbar, hacer lo sigiente.

Entrad a Plantilla / Editar HTML y clic sobre Plantilla de Formato. Y ayudándose del buscador interno de la plantilla Control + F puedes buscar por ejemplo: feedLinks o <data:feedLinksMsg/>

La parte completa del código es esta:

<b:includable id='feedLinksBody' var='links'>
<div class='feed-links'><data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>
</b:includable>

Y borrrar o quitar lo que está en azul; eso sería todo, ya no volverán a visualizar el aviso de los ATOM.

Fuente: www.charkleons.com

Fecha:22/03/2017

Publicado por:

Blogger featured tutorial

15:22

Boton de entradas al azar para Blogger

Una utilidad muy buena para los blogs es incluir un widget para que los usuarios puedan ver entradas aleatorias. Esto se consigue con Javascript y un enlace simple, una imagen o, como en este caso un boton. Con un poco de codigo de CSS3, he diseñado este boton naranja tan chulo con efecto 'presionado', que haciendo click sobre el, te muestra un post al azar automaticamente. Para ponerlo en tu blog de Blogger, tan solo tienes que copiar el codigo de abajo y añadirlo en un gadget HTML, asi de sencillo

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

<div id='postaleatorio'></div>
<script type='text/javascript'> function showLucky(root){ var feed = root.feed; var entries = feed.entry || []; var entry = feed.entry[0]; for (var j = 0; j < entry.link.length; ++j){if (entry.link[j].rel == 'alternate'){window.location = entry.link[j].href;}}} function fetchLuck(luck){ script = document.createElement('script'); script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } function feelingLucky(root){ var feed = root.feed; var total = parseInt(feed.openSearch$totalResults.$t,10); var luckyNumber = Math.floor(Math.random()*total);luckyNumber++; a = document.createElement('a'); a.href = '#random'; a.rel = luckyNumber; a.onclick = function(){fetchLuck(this.rel);}; a.innerHTML = 'Ver una entrada al azar'; document.getElementById('postaleatorio').appendChild(a); } </script> <script src='/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky'></script>
<style type='text/css'>
@import url( 'http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:700' );
#postaleatorio a {
position: relative;
color: rgba(255,255,255,1) !important;
text-decoration: none;
background-color: rgba(219,87,5,1);
font-family: 'Yanone Kaffeesatz';
font-weight: 700;
font-size: 30px;
display: block;
padding: 4px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
-moz-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
margin: 10px auto;
width: 200px;
text-align: center;

-webkit-transition: all .1s ease;
-moz-transition: all .1s ease;
-ms-transition: all .1s ease;
-o-transition: all .1s ease;
transition: all .1s ease;
}

#postaleatorio a:active {
-webkit-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
-moz-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
position: relative;
top: 6px;
}
</style>

Da un clic en “Guardar” Y listo.

Fuente: redeando.blogspot.com

Fecha:18/03/2017

Publicado por:

Blogger entradas featured truco

18:17

Entradas Relacionadas con miniaturas

Colocar un gadget de "Entradas Relacionadas" es una de las cosas que mas se han estado exigiendo este último tiempo, lo cual facilita mucho más el recorrido a los visitantes por nuestro Blog, tal cual lo mencionamos en la forma anterior para agregar dicho Gadget. En este caso no lo vamos a hacer por medio de otro sitio que agregue el Gadget de manera automática, sino lo vamos a hacer nosotros mismos mezclando un poco de código. Para que se den una idea de cómo se ve acá les dejo una foto:

Como verán, son unas simples miniaturas que, al apoyar el mouse sobre ellas se ve el título de dicha entrada, a mi en lo personal me gusta mucho y es hasta agradable a la vista :)

Vamos a "Plantilla"

Abre "Editar HTLM"

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, a continuación mire la imagen la cual te mostrara tal y cual deberá aparecerte el buscador en tu editor HTML de tu plantilla y así puedas colocar el código en el buscador al momento que yo diga busca este código.

Busca este código ]]></b:skin> una vez que hayas encontrado el código deberás insertar las siguientes líneas de código justo antes del código que encontraste

ul#related-posts{
font-family:"Droid Sans",Helvetica,Arial,sans-serif;
font-size:10px;
list-style: none;
margin: 20px 0;
padding: 0;
text-transform: none;
}
ul#related-posts li{
float: left;
height: auto;
margin:0 5px;
padding: 2px 1px 2px;
list-style-type:none;
}
*html ul.rp#related-posts li{
margin:0 13px;
}
ul#related-posts li a {
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
border: 2px solid #FFFFFF;
display: block;
height: 72px;
position: relative;
width: 72px;
}
ul#related-posts li a {
color: #474C51;
text-decoration: none;
text-shadow: 0 1px 0 #FFFFFF;
}
ul#related-posts li .overlay {
height: 66px;
line-height: 16px;
padding:6px 0 0 6px;
position: absolute;
width: 66px;
z-index: 10;
}
ul#related-posts li .overlay {
}
ul#related-posts li a:hover .overlay {
background: #fff;
display: block !important;
opacity:0.9;
}
ul#related-posts li img {
bottom: 0;
padding:0px !important;
}
ul#related-posts li a:hover {
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

Ahora expandimos los artilugios y debajo de <div class='post-footer'> agregamos lo siguiente:

<b:if cond='data:blog.pageType == "item"'>
<h3>Entradas Relacionadas</h3>
<script type='text/javascript'>
var defaultnoimage="http://www.webaholic.co.in/other/no-image.jpg";
var maxresults=6;
</script>
<script src='http://suyb.googlecode.com/files/rph.js' type='text/javascript'/>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/>
</b:loop>

<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</b:if>

Listo, esto fue todo, ahora guardamos la plantilla y ya podemos disfrutar de nuestras miniaturas de entradas relacionadas.

Fuente; hogarblogger

Fecha:16/02/2017

Publicado por:

Blogger entradas featured truco

19:20

Colocar "Entradas Relacionadas" en Blogger

Anteriormente vimos cómo colocar los gadgets de entradas relacionadas con miniaturas , después otra forma de poner las entradas relacionadas con un efecto y también otra que era proveída por un sitio externo que nos permitía colocar entradas relacionadas con imágenes o con texto.

Blogger entradas featured truco

18:59

Mostrar o Ocultar el contenido de una Entrada

Algunas veces tenemos mucho contenido que agregar en una entrada pero no queremos mostrarlo todo de un solo golpe, ya sea porque no queremos que la entrada se haga demasiado larga o porque queremos que el contenido se vaya descubriendo poco a poco.

Y sí, ya antes habíamos visto cómo expandir y contraer partes de una entrada usando Scriptaculous y que le da un efecto deslizante, pero como a muchos no les gusta usar Scriptaculous vamos a ver otra forma de hacerlo usando un simple javascript que aunque no tendrá efecto alguno cumple su función muy bien, que será la de mostrar y ocultar contenido.

Blogger featured imagenes truco

18:21

Galeria de imagenes y texto

Es muy fácil crear tablas para Blogger, además puedes incluir imágenes o texto, en Blogger In te enseñamos a crear tablas para tu blog.

Con un sencillo código podemos incluir tablas vistosas para vuestros blogs, como véis en la imágen superior yo he creado varias en mi blog,

Tú también puedes aprovechar éste recurso para dar a tu blog una presencia organizada incluyendo tablas allí donde no puedes usar el tabulador.

Blogger featured galeria imagenes truco