Poner banners 50x50px en el sidebar del blog

Hoy por hoy existen diferentes tamaños de banners que se utilizan no solo para agregar publicidad dentro del blog, sino que también suelen usarse para poner enlaces que direccionen a alguna página que nos gusta o ya sea para que otros blogs nos enlacen, etc; los motivos sobran, así que aquí les traigo esta entrada para que puedan agregar banners en el sidebar y lo decoren como  mejor les parezca.

Para agregarlo vas a Diseño, Añadir gadget, Html-javascript y pegas donde más te guste el siguiente código:

<div class="banner50">

 

<a href="http://blogerybloger.blogspot.com" target="_blank" title=" Bloger & Bloger"><img border="0" width="50" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgarZvk4_pzq-3d-HH1oIn2L375RYV-bAdWbNJ71JyLYeOzFu5ssrdMnIPgsd9HeFTkSMQvTJsi41H4TiUCuynmB_RUZuekFE0lMvAL9M_1kd5uVTzNIcbNm2XgOSxjlVd52Xpj9fZrX9Y/s50/bloger%2520y%2520bloger.1jpg.jpg" height="50"/></a>

<a href="http://blogerybloger.blogspot.com" target="_blank" title=" Bloger & Bloger"><img border="0" width="50" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgarZvk4_pzq-3d-HH1oIn2L375RYV-bAdWbNJ71JyLYeOzFu5ssrdMnIPgsd9HeFTkSMQvTJsi41H4TiUCuynmB_RUZuekFE0lMvAL9M_1kd5uVTzNIcbNm2XgOSxjlVd52Xpj9fZrX9Y/s50/bloger%2520y%2520bloger.1jpg.jpg" height="50"/></a>

 

<a href="http://blogerybloger.blogspot.com" target="_blank" title=" Bloger & Bloger"><img border="0" width="50" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgarZvk4_pzq-3d-HH1oIn2L375RYV-bAdWbNJ71JyLYeOzFu5ssrdMnIPgsd9HeFTkSMQvTJsi41H4TiUCuynmB_RUZuekFE0lMvAL9M_1kd5uVTzNIcbNm2XgOSxjlVd52Xpj9fZrX9Y/s50/bloger%2520y%2520bloger.1jpg.jpg" height="50"/></a>

<a href="http://blogerybloger.blogspot.com" target="_blank" title=" Bloger & Bloger"><img border="0" width="50" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgarZvk4_pzq-3d-HH1oIn2L375RYV-bAdWbNJ71JyLYeOzFu5ssrdMnIPgsd9HeFTkSMQvTJsi41H4TiUCuynmB_RUZuekFE0lMvAL9M_1kd5uVTzNIcbNm2XgOSxjlVd52Xpj9fZrX9Y/s50/bloger%2520y%2520bloger.1jpg.jpg" height="50"/></a>

<a href="http://blogerybloger.blogspot.com" target="_blank" title=" Bloger & Bloger"><img border="0" width="50" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgarZvk4_pzq-3d-HH1oIn2L375RYV-bAdWbNJ71JyLYeOzFu5ssrdMnIPgsd9HeFTkSMQvTJsi41H4TiUCuynmB_RUZuekFE0lMvAL9M_1kd5uVTzNIcbNm2XgOSxjlVd52Xpj9fZrX9Y/s50/bloger%2520y%2520bloger.1jpg.jpg" height="50"/></a>

</div> 

Cambian lo que está en rojo por la dirección del blog de ustedes y sustituye la Url-de-la-imagen.jpg por la de ustedes, teniendo en cuenta que la imagen debe ser del mismo tamaño en todas para que funcione correctamente, pudiendo elegir el tamaño que quieran, siempre considerando que la suma total de las imágenes no excedan el ancho del sidebar. Por ejemplo si el ancho del sidebar de tu plantilla es de 350px (lo más normal generalmente) solo entrarán 6 banners de 50px de ancho (width) y no 7 banners pues debes dejar espacio entre cada uno de ellos. Yo elegí banners de 50x50px en un ancho de sidebar de 300px por lo que solo entrarán 5, he aqui la imagen:

 

Si quieres agregar más banners solo debes incluir el número de veces que quieras antes de </div> lo siguiente:

<a href="UrldelBlogaEnlazar.com" target="_blank" title="Nombre del blog a enlazar"><img border="0" width="50" src="Url-de-la-imagen50x50.png" height="50"/></a>

Y listo, ya tienes tus banners para que puedas poner publicidad en tu blog o para que enlaces a tus webs amigas.

PD: Lo que está en azul es un atributo que hará que el enlace se abra en otra ventana.

Poner el botón de google+ en el blog.

Siempre es bueno tener varias opciones para poder compartir el contenido de nuestro blog con la mayor cantidad de usuarios en la red. Como ya lo hicimos antes con el botón “me gusta” de Facebook, que es más práctico que el de compartir, ahora también Google nos permite poner su botón compartir de google+ (el equivalente a “me gusta” de Facebook) en nuestro blog para que los lectores  recomienden nuestra página, y al mismo tiempo nos ayuden a promocionarla mejor.

Aquí les dejo dos modelos de botones y ustedes verán por cual se deciden.

Primer botón

 

 <!-- Coloca esta etiqueta en la cabecera o justo antes de la etiqueta de cierre "body". -->

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

<!-- Coloca esta etiqueta donde quieras que se muestre el botón +1. -->

<g:plusone annotation="inline"></g:plusone>

Segundo botón

 

<div align='right'>

<!-- Place this tag in the <head> of your document -->

<link href="https://plus.google.com/117393415183058087935" rel="publisher" />

<!-- Place this tag where you want the badge to render -->

<a href="https://plus.google.com/117393415183058087935?prsrc=3" style="text-decoration:none;"><img src="https://ssl.gstatic.com/images/icons/gplus-32.png" alt="" style="border:0;width:32px;height:32px;"/></a>

</div>

Lo que está en rojo es un condicional para que el botón quede alineado a la derecha. Si lo quieres a la izquierda, solo borra esa parte y listo; lo que está en naranja deberás cambiar por la dirección de tu página en google plus.

Pueden ponerlo en el sidebar como cualquier gadget, eligiendo Diseño, Añadir gadget html-javascript; allí pegan el código que escogieron,  o también pueden ponerlo abajo o arriba de las entradas, para ello deberán ir a Diseño, Edición html, y con los artilugios expandidos, buscan lo siguiente si quieren el botón debajo de las entradas:

<div class=’post-footer-line post-footer-line-3’/>

Justo debajo pegan el código; y si quieren el botón arriba de las entradas, busquen lo siguiente, no olviden los artilugios expandidos:

<div class='post-header-line-1'/>

Justo debajo pega el código del botón. En una plantilla personalizada si quieres el botón arriba de las entradas talvez tengas que buscar el siguiente código en tu plantilla:

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

<data:post.body/>

Justo arriba de eso pega el código, das en vista previa y si todo está ok das en guardar