BUSCA Y ENCONTRARAS

martes, 18 de octubre de 2016

Las Twitter Cards En Blogger

Este post es de http://www.lascronicasdelcesar.com/2015/08/como-instalar-las-twitter-cards-en.html




Introducción

Las Twitter Cards nos pueden ayudar mucho a la hora de compartir un link ya que gracias a ellas podemos hacer mas vistoso el tweet que enviamos a ojos de las personas que lleguen a ver nuestro tweet e incrementa las posibilidades de que interactúen con nuestro tweet y le den clic a el link compartido y así enviarlo a nuestro blog o página.





Concepto Básico

Podemos resumir que las Twitter Cards son diferentes maneras en las que un tweet con link se presenta dentro de Twitter.



Tipos de Twitter Cards

Resumen. En donde encontraremos el Titulo, Descripcion, Vista en Miniatura y la Cuenta de atribución.



Resumen con Imagen Grande. Similar a la de Resumen pero con una Imagen más Grande.



App. Para detallar una app para movil con link a descarga.



Reproductor. Para adjuntar un video/audio/multimedia.



En este link puedes ver más a detalle cada tipo de Twitter Card.



El tipo de Twitter Card que vamos a instalar es el de Resumen con Imagen Grande.



Post Relacionado
Pasos Para Instalar En Blogger

1.Tienes que accesar a blogger y elegir en blog en donde quieres instalar el código para las Twitter Cards.



2.Elegir "Plantilla" y despues "Editar HTML".







Buscamos la etiqueta </head> y justo antes de la etiqueta insertamos el siguiente código:



Dar clic para ver en grande


No te preocupes que el código te lo dejo mas abajo para que puedas copiar y pegar.



¿Cómo Modifico El Código Para Utilizarlo A Mis Necesidades?

En la primera parte del código (en la imagen) se muestra la un comentario que especifica que a partir de ahí hacia abajo inician el código de las Twitter Cards (este pedazo de código es opcional ya que solamente es un comentario).



La siguiente linea especifica el tipo de Twitter Card que vamos a querer, en este caso el de Resumen con Imagen Grande (summary_large_image)



La tercera y cuarta linea se especifica la cuenta en Twitter del sitio al que pertenece el link y la cuenta de la persona que escribió el post que estamos compartiendo. Como yo no tengo una cuenta aparte para éste blog (uso mi propia cuenta) la cuenta a especificar del sitio (twitter:site) es la misma que la del creador (twitter:creator). Estas 2 últimas lineas las puedes cambiar con tu cuenta de Twitter.







En la segunda parte del código se usa una etiqueta de condición de blogger para saber si el link que se esta compartiendo es el Index (la pagina principal del blog) o si es algún post u otra página.



Si es el index, lo que hace es poner como Titulo (en Twitter), el texto "Las Crónicas Del César". Como descripción (en Twitter), pone "No soy un adepto escribiendo, pero lo haré......". Pone una imagen para compartir que es ésta. Y en URL, pone la principal del blog. De aquí lo que puedes cambiar es el Titulo, la Descripción y la Imagen. La URL de tu blog la pone automáticamente.



Pero si no es el Index (por ejemplo una publicación o página estatica) hace lo siguiente:

Pone como URL la del post que estamos compartiendo. En titulo pone la del post que estamos compartiendo. Y en imagen pone la primera imagen que publicamos en nuestro post. De aquí no te recomiendo cambiar nada porque pone automáticamente la URL, Titulo e Imagen de tu publicación.



Dale clic para ver en grande
En la última parte del código se pregunta si el post tiene descripción (esto no se ve en el post actual, son etiquetas para el buscador de Google).



Si tiene, pone como descripción (en Twitter) la descripción que pusiste a la hora de escribir un post que esta situado en la parte derecha de tu editor para escribir post (ver imagen aqui).



Si no tiene, pone una descripción que tu hayas puesto, en este caso yo puse una descripción genérica: "Mira el post completo. Si te gusta.......", lo puedes cambiar por tu propia descripción genérica para tus publicaciones.



Dale clic para ver en grande
Una vez hecho esto procedemos a la validación en Twitter en el siguiente link:

https://cards-dev.twitter.com/validator



Pegamos nuestra dirección del blog en la caja para validar. En nuestra dirección hay que cambiar .mx por .com y volverlo a validar para que sin importar cual compartamos (con .mx o .com) nos aparezcan las Twitter Cards en la timeline.





Esta es la vista previa del link en Twitter:





Y de un link en Twitter:





Código para copiar y pegar.









Referencias:

https://dev.twitter.com/cards/overview

http://blogger-hints-and-tips.blogspot.mx/2013/09/how-to-set-up-twitters-view-summary.html





Si te gusto el post, dale +1, Tuitealo, Like y Compartelo en tus redes sociales, de verdad me ayuda mucho. No olvides comentar en la sección de abajo.






¿Te ha gustado la publicación?

Suscribete aqui para recibir en tu correo publicaciones como esta.

También puedes darme like en Facebook, Seguirme en Twitter o agregarme a tus Circulos en Google+.

Si tienes alguna duda o sugerencia puedes contactarme mandándome un correo aquí o comentar en esta misma publicación, no te olvides de compartir

jueves, 21 de julio de 2016

Video Failed To Connect To A Windows Service Fix| Windows 10/8.1 (Helps Sort Out Apps not Opening)

Google Chrome not opening? Documents not opening? Files not opening? Follow this video and it will sort out all of the problems.

Here I will show you how to fix "Failed To Connect To A Windows Service" for all the of the Microsoft windows OS's. This is a very easy and up to date guide on how to sort out this problem. This problem prevents your PC/Laptop from opening up any file to application on your Laptop/PC.

Commands I type in are:
1. "netsh" press enter
2. "winsock reset" press enter then restart your Laptop/computer.
3. Your done!

viernes, 1 de julio de 2016

Solucionado "Failed to connect to a windows service" error in Windows 10 [2 simple steps]

domingo, 19 de julio de 2015

online HTML to XML parser | Blogger adsense converter | escape tool

This online converter will convert your adsense,chitika, adbrite and any HTML code into XML coding which are compatible with the blogger templates.

Enter Code:
 
Parsed Code

This Adsense Parser / escape Online tool is Very Cool. Instead of Manually parse adsense code you can easily conver any html code to xml format. This tool are very easy and accurately escape tool which are hassle free parse the any html code. How To use ? when you enter html code in to above box parse code will be generated automatically just copy and past this code to your blogger use. 

viernes, 3 de julio de 2015

Añadir Adsense en los post de plantillas mobiles de Blogger

Fuente: Add Adsense Below Post Title of Mobile Blogger Templates

I've customized the mobile view of OgbongeBlog in such a way that I now have an Adsense 320x50 mobile banner been displayed under post titles as well as an Adsense 250x250 ad unit been displayed at the end of each post on the mobile view.



Besides that, I created an extra section above the header region and right there, I can also add an Adsense mobile banner or a non-adsense 320x50 banner. In this tutorial, I'm sharing with you how to add Adsense ad inside blog posts of Blogger mobile templates, directly below post titles.



Just follow me through the steps.



==> Log in to www.google.com/adsense to generate the Adsense code for the ad unit you want to add to the mobile view. eg 320x50 mobile banner.



Now, we need to parse the ad code.



==> Go to http://www.freehtmlparser.blogspot.com/

==> Copy and paste your ad code inside the box and click the "Encode" button

==> Copy and paste the code somewhere eg in a notepad



==> Ensure you have enabled CUSTOM Blogger mobile template.



If not sure, login to your Blogger dashboard, go to "Template". Under "Mobile", select "Yes. Show mobile template on mobile devices" and choose "Custom" from the "choose mobile template" dropdown box and save your settings.



==> Now, we need to find the code for the Blogger Mobile Template Post title so we can place the Adsense code directly below it.



==> So, back up your template and go to "Template" > "Edit HTML"



==> Click inside the HTML and use CTRL F to find the code below:


<b:includable id='mobile-post' var='post'>


==> Once you find the code, scroll down gently till you see the code below:



<div class='post-body entry-content'
expr:id='&quot;post-body-&quot; + data:post.id'
itemprop='articleBody'>


==> Paste your parsed Adsense code directly below the code above.



Save your template.



View one of your blog posts on mobile view using default browser of your mobile device (NOT Opera Mini) and you should see the ad below the post title on POST pages (Not on the homepage).







NBYou can place any ad code there be it AdDynamo, Infolink, media.net ad etc

domingo, 21 de junio de 2015

Añadir dos columnas de gadgets arriba o abajo de las entradas.

Via: Añadir dos columnas de gadgets arriba o abajo de las entradas.

Para añadir un gadget arriba o abajo de las entradas bastara con arrastrar el gadget hasta donde queramos que aparezca,

Pero si queremos añadir dos columnas de gadget arriba o abajo de las entradas. tal y como vemos en la siguiente imagen
la-red-columnas










 Entraremos en Edición HTML de la plantilla,y con Ctrl F buscaremos este código:



<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='false' title='Entradas del blog' type='Blog'/>
</b:section>


Si quieres las columnas de gadgets encima de las entradas, entonces agrega arriba de lo anterior esto:





<div id='BlogGadget1' style='width: 48%; float: left; margin:0; padding: 5px;'>
<b:section class='sidebar' id='gadget-1' preferred='yes' style='float:left;'/>
</div>
<div id='BlogGadget2' style='width: 48%; float: right; margin:0; padding: 5px;'>
<b:section class='sidebar' id='gadget-2' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>

Si también quieres dos columnas de gadgets debajo de las entradas, entonces agrega debajo del primer código esto:





<div id='BlogGadget3' style='width: 48%; float: left; margin:0; padding: 5px;'>
<b:section class='sidebar' id='gadget-3' preferred='yes' style='float:left;'/>
</div>
<div id='BlogGadget4' style='width: 48%; float: right; margin:0; padding: 5px;'>
<b:section class='sidebar' id='gadget-4' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>


El % en color rojo es el ancho de cada uno de los contenedores, si los gadgets no estuvieran igualados, reduce esos valores hasta que los gadgets se vean igualados, conseguiremos tener dos columnas en esa zona del blog.


Puedes poner las columnas arriba, las columnas abajo o arriba y abajo, eso es ya decision de cada uno o bien la necesidad que tengamos en cada blog

viernes, 1 de mayo de 2015

Video Mejorar Rendimiento de Windows 7 en 3 minutos