miércoles, 31 de mayo de 2017

Cómo mostrar el estado de Facebook y twitter en Blogger - Parte 2

Si te gusta actualizar tu estado del Twitter de tu cada día para que tus clientes sepan lo que está haciendo, es posible que desee mostrar su estado actual en otras ubicaciones, como tu Blogger. Esto puede hacer que su blog se sienta más personal para sus lectores. También les permite saber que usted tiene una cuenta de twitter, para segirlo en sus interacciones y noticias desde twitter.

Cómo insertar una cronología

Los widgets de cronologías insertadas te permiten insertar una colección de Tweets (denominada cronología) en tu sitio web. Se pueden insertar cuatro fuentes de cronologías, todas ellas con la misma apariencia y estilo que las cronologías en twitter.com:

Cronología de usuario: muestra los Tweets públicos de cualquier usuario de Twitter.
Favoritos: muestra todos los Tweets que un usuario en particular ha marcado como favoritos.
Lista: muestra los Tweets de tus listas públicas o de las listas a las que estás suscripto.
Buscar: muestra resultados de búsqueda personalizados en tiempo real (ideal para eventos en vivo, conferencias, marcas, etc.).

Nota: las cronologías insertadas solo mostrarán el contenido de los usuarios cuyos Tweets son públicos. El contenido de los usuarios con Tweets protegidos no es compatible con ningún widget de cronología insertada de Twitter.

Pasos para agregar una cronología insertada a tu sitio web:

Inicia sesión en Twitter.
Ve a Configuración y selecciona Widget
Haz clic en Crear nuevo.
Elige la fuente de tu cronología insertada que quieres crear y comienza a configurarla:
- En Cronología de usuario "Profile", escribe el nombre de usuario en Twitter de la persona cuyos Tweets quieres mostrar.
- En Favoritos, escribe el nombre de usuario en Twitter de la persona cuyos favoritos quieres mostrar.
- En Lista, elije una lista pública que hayas creado o a la cual estés suscripto desde el menú desplegable.
- En Buscar, escribe tu consulta de búsqueda (para búsquedas avanzadas, usa los operadores de búsqueda de Twitter). por ejemplo #covfefe que es tan importante como la salida de USA del Acuerdo de Paris.
- Asegúrate de seleccionar Modo seguro, en caso de que quieras excluir contenido sensible, blasfemia, entre otras.
Personaliza el diseño especificando la altura, la plantilla (claro u oscuro) y el color del enlace para que combine con tu sitio web. También puedes configurar tu cronología insertada para que los Tweets con contenido multimedia se autoexpandan.
Haz clic en Crear widget; luego, copia y pega el código en un gadget de HTML/JAVASCRIPT y listo

Las otras opciones de twiter te mostraran una pantalla como la figura, en ella puedes elegir como quieres que se vea tu time line de twitter, puedes elegir la que mas te guste.

Fuente; https://support.twitter.com/articles/20171532

Cómo mostrar el estado de Facebook y twitter en Blogger - Parte 1

Si te gusta actualizar tu estado del Facebook de tu cada día para que tus clientes sepan lo que está haciendo, es posible que desee mostrar su estado actual en otras ubicaciones, como tu Blogger. Esto puede hacer que su blog se sienta más personal para sus lectores. También les permite saber que usted tiene una cuenta de Facebook, en caso de que les gustaría añadirlo como un amigo y darle like.

PASO 1: FACEBOOK; Ve a esta pagina;
https://developers.facebook.com/docs/plugins/page-plugin

PASO 2: Llena el Formulario:

Cada vez que cambies algún dato mueve el mouse fuera de la caja del formulario para visualizar los cambios.

PASO 3: Copiar el codigo. Luego de que estes conforme con el tamaño y lo que quieres que se muestre, pulsa el boton de "get Code" o "obtener código" y selecciona los 2 codigos y copialos ( ctrl + C)

*Puedes colocar cualquiera de las 2 opciones "SDK para JavaScript" o "Iframe"

PASO 4: En tu Pagina de Blogger ve a "Diseño" y agrega u gadget de "Html/ Java script" Pega el código copiado dentro del Gatget y listo

No es necesario que le pongas título pero para que recuerdes que contenía el gadget te recomiendo que lo hagas

Cómo comparto automáticamente el blog con Facebook o Twitter

Usando dlvr.it, puedes comenzar a compartir automáticamente tu blog con Facebook en un minuto o menos, esta aplicacion se conectara a tus cuentas de redes sociales y compartira tus nuevos post en tu linea de tiempo personal o fan page que administres, comensemos:

Paso 1: ve a dlvr.it y crea una cuenta. (llenar el formulario o darle acceso a tus datos de alguna de tus redes sociales)
Paso 2: Luego de haber ingresado a tu cuenta te pedira que agregues tu direccion de blog.

Paso 3: Luego, el boton de + te pedira seleccionar a donde quieres mandar tus Blog post; en mi caso sera facebook; primero te pedira con quien quieres compartir la informacion, no te preocupes y dale con cualquiera, la siguiente pregunta seran 3 opciones la primera sobre las paginas o time line donde quieres que que se comparta la inforamcion (si eres administrador de alguna) y el resto sobre los comentarios y otros eso ya depende de ti que y con quienes quieres compartir en mi caso solo con mi fan page de "mejorando tu Blogger"

Paso 4: Una ves seleccionado y autorizado dlvr.it enviara tus blog post a tu time line de facebook o twitter:

Eso es todo, nos vemos en el siguiente BLOG

Cómo poner tus Blog post como Slideshow

Slideshow, es una presentación de diapositivas que se puede reproducir (visualizado o presentado) mediante un navegador web.

Esta mostrara las imágenes y el titulo de nuestro blog para hacerlo más atractivo para nuestros visitantes.

Como hacerlo:

PASO 1: Ve a tus blogs Inicio> Plantillas (has una Copia de seguridad de tu plantilla para estar seguro de que si porsiacaso algo sale mal puedas arreglarlo recuperándola después)

PASO 2: Luego dale Editar HTML

PASO 3: Buscar la cabeza de cierre: </ head> en la plantilla (Sugerencia: para buscar en la plantilla: haga clic en cualquier parte del bloque de código y presione Ctrl + F)

PASO 4: Copie el código siguiente y pegue justo antes de </ head>

Como se muestra en la figura.

<!-- BloggerDynamicSlider Basic CSS -->
<style type="text/css">
/**
 *  jQuery BloggerDynamicSlider v1.0.0
 *  Copyright 2016 http://shuvojitdas.com
 *  Contributing Author: Shuvojit Das
 *  Plugin URL: https://github.com/shuvojit33/blogger-dynamic-slider
 *
 */

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400);
@import url("https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.0/flexslider.min.css");

/* Preloader */

.flexslider.loading:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;


background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia7F2wARD-x3BOtIgS_C1_-FU3YuNDibF5g7e14rDoiZlxqFdfEIDSgzPYztFW3gTAfQ7zFfyaWTpTTsoNXz4t0SsATa0LNqYhHRO4XngqmUGcbFW0Wl75XxGqoEUbYbA2CYjUcuZqSZXx/h120/loader.gif) no-repeat center center;
background-color: rgba(255, 255, 255, 0.9);
    z-index: 9999;
}

.flexslider.loading ul.flex-direction-nav,
.flexslider.loading ol,
.loading .flex-caption {
    display: none;
}

.flexslider {
    border: 1px solid #cacaca;
    padding: 4px;
    margin: 0 auto 60px auto;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

.flexslider a {
    text-decoration: none;
}


/* Caption/Post Title */

.flex-caption {
    position: relative;
    padding-left: 15px;
    padding-right: 10px;
    height: 60px;
    background: #FFFFFF;
    color: #1C1C1C;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-size: 26px;
    line-height: 26px;
    margin: 0;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
}

.flex-caption span {
    display: table-cell;
    vertical-align: middle;
    height: 60px;
}

.flex-caption.overlayDark,
.flex-caption.overlayLight {
    margin-bottom: -60px;
    bottom: 60px;
    position: relative;
}

.flex-caption.overlayDark {
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
}

.flex-caption.overlayLight {
    background: rgba(255, 255, 239, 0.9);
    color: #000;
}

ul.slides li a {
    display: block;
    overflow: hidden;
}


/* blogger css conflicts fix */

.flexslider ul {
    margin: 0 !important;
    padding: 0 !important;
    line-height: initial !important;
}

.flexslider ul.flex-direction-nav li {
    margin: 0;
    padding: 0;
    line-height: initial;
}

.flexslider ul li {
    margin-bottom: 0 !important;
}

.flexslider img {
    padding: 0;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

ul.flex-direction-nav {
    position: static;
}

ul.flex-direction-nav li {
    position: static;
}

.error {
    font-family: monospace, sans-serif;
}

@media (max-width: 600px) {
    .flex-caption {
        font-size: 20px;
        line-height: 20px;
        font-weight: 400;
    }
}
</style>
<!-- Include Dependency Script -->
<script type="text/javascript" 


src="https://code.jquery.com/jquery-1.12.0.min.js">


</script>
<script type="text/javascript" 


src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.0/jquery.flexslider-min.js">


</script>
<script type="text/javascript" 


src="http://shuvojitdas.com/script/jquery.bdslider.min.js">


</script>

PASO 5: Ahora los scripts del motor de desplazamiento están instalados, ya estamos listos para agregar el slider show en cualquier parte de su blog, incluyendo un gadget. Vamos a Diseño y le damos agregar un Gadget

y Seleccionamos uno de HTML/ JAVA SCRIPT

Dentro escribiremos como nombre Slider y dentro de contenido pondremos el siguiente Código:

<div id="slider1"></div> <script type="text/javascript"> $(document).ready(function() { $("#slider1").BloggerDynamicSlider({ imageWidth: 636, // Image width in px value imageHeight: 398, // Image height in px value maxItem: 6, // Max number of Slider Image to show animation: "slide", // Select your animation type, "fade" or "slide" showPostTitle: true, // Show post title as Caption ? (true/false) postTitleStyle: "overlayLight", // Caption style: "default, "overlayDark" or "overlayLight" }); }); </script>

Y listo :).

Cómo mostrar tus Blog post como Resumen

Los resúmenes de publicaciones, son el método por el cual cada entrada de blog consiste en un breve párrafo de introducción seguido de un enlace "Leer más" o "Más información". Esto permite al lector obtener una pequeña introducción a cada publicación en la página principal. Y darle click a un link de "Leer más" si le interesa lo suficiente el tema.

Las publicaciones expandibles son fáciles de implementar y pueden proporcionar a la página principal una apariencia profesional junto con una mayor exposición a sus otras publicaciones. También los resúmenes ayudan a los lectores optimicen el ancho de banda como sólo pieza requerida de texto o imágenes se muestran y no todo el texto y imágenes adicionales

Dada la justificación anterior procederé a explicar el procedimiento:

Modificaciones de plantillas:
PASO 1: Inicie sesión en su cuenta de blogger seleccione la ficha tema del blog que desea modificar.

PASO 2: Ahora antes de comenzar con la parte de edición, debe hacer una copia de seguridad de su plantilla haciendo clic en Descargar el enlace de plantilla completa en la misma página.

PASO 3: En la ficha tema, haga click en Editar HTML

PASO 4: El primer paso es poner código css condicional. Esto cambia la forma en que se muestran los mensajes en la páginas.

Ahora presione Ctrl + F y busque "]]> </ b: skin>" o "</ head>". Una vez encontrada, pegue el siguiente fragmento de código entre "]]> </ b: skin>" y "</ head>":

<script type='text/javascript'>
img_thumb_width = 180; // Image Thumbnail Width
img_thumb_height = 180; // Image Thumbnail Height
summary_noimg = 600; // Length of Summary Text if no image is Used
summary_img = 600; // Length of Summary Text if post has Image Thumbnail
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="overflow:hidden; border: none; margin:0 15px 10px 0; float:left; max-height:'+img_thumb_height+'px;width:auto;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="auto"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

PASO 6: Ahora presione Ctrl + F y busque <data: post.body /> en la plantilla y pegue el siguiente código remplazando <data: post.body />

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>","<data:post.url/>","<data:post.title/>");</script>
<span class='readmore' style='float:right;'><a expr:href='data:post.url'>Read More »</a></span></b:if></b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>

En tu plantilla deberían haber 2 o mas <data: post.body />, tienes que re reemplazarlas todas; debería quedarte como en la imagen.

PASO7: Guarda tu plantilla y visualiza como se ven tus post.

Adicionalmente puedes ir a; configuración -> entradas y comentarios; y modificar la cantidad de post que quieres que se vean en la página principal.

Bienvenidos a mi blog. Este espacio nace con la intención de ser un lugar de encuentro e intercambio de información sobre cómo hacer mejoras en tu blogger mediante html y css; No puedo ni es mi intención fijar pautas o fechas de publicación, pues todo dependerá de mis tiempos, pero espero poder escribir aquí con cierta periodicidad con el fin de mantener vivo este lugar en el ciberespacio.

Mejorando tu Blogger

About

miércoles, 31 de mayo de 2017

Cómo mostrar el estado de Facebook y twitter en Blogger - Parte 2

Cómo insertar una cronología

Pasos para agregar una cronología insertada a tu sitio web:

lunes, 29 de mayo de 2017

Cómo mostrar el estado de Facebook y twitter en Blogger - Parte 1

domingo, 28 de mayo de 2017

Cómo comparto automáticamente el blog con Facebook o Twitter

viernes, 26 de mayo de 2017

Cómo poner tus Blog post como Slideshow

Cómo mostrar tus Blog post como Resumen

Bienvenida