Widget Atractivo de Social Media Para Blogger

Hola Amigos! En esta ocasion te mostrare un hermoso y atractivo widget para compartir en los medios sociales como una manera de aumentar los visitantes a tu blog. Sabemos que cada blogero añade distintos estilos de Widget de Social Media para atraer mas lectores, compartire hoy uno hecho a mano en forma de dibujo de iconos sociales para Blogger.Veras que luce distinto y facil de insertar en tu blog solo en un paso.
Ejemplo:

Paso simple para añadir un Widget de Social Media Dibujado a Mano en tu Blog.

• Entra en cuenta de Blogger > Diseño > Añadir un Gadget y selecciona "HTML/Java Script"
• Copia el codigo de abajo y pegalo en html/javascript.

<style class="text/css">

table

{

border-bottom: 0px solid #E6E6E6;

float: center;

width: 260px;

margin:10px 0 0 3px;

}

.subicons

{

border-right: 1px solid #E6E6E6;

}

.Fadeout {

filter:alpha(opacity=100);

opacity: 1.0;

border:0;

}

.Fadeout:hover{

filter:alpha(opacity=80);

opacity: 0.8;

border:0;

}

</style>

<div class="table">

<table>

<tr>

<td><div class="subicons"><a class="Fadeout" href="http://www.facebook.com/trucosdeblogger"
 imageanchor="1" target="_blank" rel="nofollow"><img border="0" 
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijUKF06LgivfijguCXwAo-_5yi4jDlopsCDaMmVDpgST69PBHxXKkLSwtYrRKP7IEO4JF3JXvii8YK31QcyGsP18qbG73j03mxiiMkT-uNm4A2i7oeE6sf16jyo8SQT04TaAR65sU1r9T-/s1600/facebook-48.png"
 /></a></div></td><td><div 
class="subicons"><a class="Fadeout" href="http://twitter.com/andante772"
 imageanchor="1" target="_blank" rel="nofollow"><img border="0" 
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_kmH3aJH0xfUjRZIQDhlxxcksu1lEaaIj7I0H7B8hi2KAAT5vcpQ7Ew-KFL_ItDrLl143r3-FuK9DUL-MM788b1FY5QcaYBZ-QGbWdwg_2q4Qa8hIg6A4c4O6agSX_fjtlqn3yYxo2nj5/s1600/twitter-48.png"
 /></a></div></td>

<td><div class="subicons"><a class="Fadeout" href="http://feeds.feedburner.com/supertrucosdeblogger"
 imageanchor="1" target="_blank" rel="nofollow"><img border="0" 
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLuc1cEeWaDIMthvXPfiRtaWmUzimLJEiTSrTQlOUrYF8rsFoltzYxAXpxsquBFXOYEreQGx8ROV4NkqclvKi65XQv8fERS_n_xAFZVMZ5HsUM9BnVkbSypj9TsdCFvDOt4Cq5C_KiRX4Z/s1600/rss-48.png"
 /></a></div></td>

<td><a class="Fadeout" href="https://plus.google.com/116180896434879626623/posts"
 imageanchor="1" target="_blank" rel="nofollow"><img border="0" 
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb6kU2VETc3EJbYfwwKWJq2YlryvPyeo_sNuY-ma5CtRlUegzPe8zPrsxRkVUYj9LsFDY8pmOAPDYWW6XNgpCj033CaqSIRa20lPFX3VTeEtezSdwlRrjYU5famifpENMq4bfjf7YUs2YN/s1600/google-48.png"
 /></a></td>

</tr></table>

</div>

Customizacion

Necesitas reemplazar todos los enlaces en color amarillo por tu nombre o id de usuario en estas redes sociales.

Ademas si asi deseas puedes  customizar el ancho del widget simplemente reemplazando width: 260px por el ancho deseado.

Si no deseas borde entre cada icono , simplemente reemplace border-right: 1px con border-right: 0px

Read More

Anadir Barra Lateral Fija de Medios Sociales a Blogger

En este tutorial te mostrare como añadir una barra fija de media social  a blog de blogger. Las ventajas de insertarla en tu pagina o blog puedes enlazar tu perfil de media social como Facebook, Twitter Google plus y Rss feed. Es atractiva y aparecera al borde lateral derecho de tu pantalla,ocupa poco espacio y se activa o expande al pasar el cursor sobre el mismo.
ejemplo:ve a http://tricksblogspot.blogspot.com/

Pasos para añadir este barra fija de media social a tu blogger.
1.Entra en tu cuenta de Blogger

2.Selecciona Diseño

3. Da Click Añadir un Gadget y selecciona 'HTML/Javascript

4. Copia y pega el codigo de abajo dentro espacio en HTML/Javascript

<style>
.menufijo{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh5kgxdc-uCeBfJanJ3E_yKYM4CltZEqe8Y3g8PrZIpoO98VlKXuVTHP2yClNrgVsS8QOmmMon18lLDALIWAYfD6-Balk_I94j_8KtMIRYtll58bAEthm0nF5gCrQmCX2jZUA6Y7vpYYk/s1600/facebook.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:160px; z-index:1000;}
.menufijo1{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkxYR7mxSZHSwbfI7xnbXQVzBBcAkdsHUjaYoqzwE9Riu0FDv4vmrtHv3zmGSqibldc6fIne2x9WbClEW6sIiRbm4gyszdWJPjrpXTMswZRAq3zZRqwlFZSAl_LNuRzZmAy44NowJU1r8/s1600/facebook-hover.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:160px; z-index:1100;}
.menufijo_1{margin:0px 0 0 43px}
.menufijotw{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiCVd4J-XW8cM4akjmsvXOZVffk0hd2u_van9EZH8idJk8TITXsy4hGC2rAL1pF9fWwY_6lypi03osRSh_cxG5aR0j6_HAsiQC2BnwQR9C_D-oB_NxlOsZdwRs9xITQ7N3z_Ip3PQSipM/s1600/twitter.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:205px;z-index:1000;}
.menufijotw1{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjedUiS0z0RDiJCg6QIDUuCbrK4rYdxjYBRvYIA30KfH1dMc6awpp_L31QLson0nYvoG8C1vdD4YqUTT3yOC_ikCb4aJicqv9yh8alxuOlo4u4zvj0hXyCQb78IunA3OQUKnSXhUXeTP0w/s1600/twitter_hover.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:205px; z-index:1100;}
.menufijotw_1{margin:0px 0 0 43px}
.menufijofb{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb-PG2TmPX3n14Kt8mJtPJ8GUUVAqbWEW2bC_yOrHGj-uMWQHV3NA1eAUEiPbHdD8u-nUXDFUWykCf88rP5KkvzjDguEngtoXS_KatKL5TXXNKNuk-1kVfo5qaGHLH7Kletf11LIc64tA/s1600/Gplus.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:250px; z-index:1000;}
.menufijofb1{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhohmrE7PwGNbYf0vb0r1tJv7nnctRiPXuvDVy6BfqubVYerq1KT0NxiRYreI-YnEAwANQuW7aUSjoUHgO1TmdzGFHuLEESel4KjDe1d3veuca2XFW-OZEJEgPE-HamSNVWk8Uzc-oHXUM/s1600/Gplus_hover.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:250px; z-index:1100;}
.menufijofb_1{margin:0px 0 0 43px}
.menufijorss{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVs-1ipNC03c_BfsN1JxUZbXQdPm-IZ_uB7j8c-iHRMti7NQ_NPLme3o4zQD7f8tlwOALT1FNPg5nUe_VWavf2dAC4GnVRmUtbvpAVIFOuVONziOpEPC3kQma3N5UH6AkVe62D4xmd8BE/s1600/rss.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:295px; z-index:1000;}
.menufijorss1{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcihPR-jQRPJckDTkBXlm1QuX3xOj3EEaxt0Lfozne6_FJ97N3R-TG5bJX2awT8-WYRFUIOaE8Zg-rGHm9E9_DvnQbrTe1fg7GT0HpXog7cqwF9ny5jrshhuMnYRTmNwAdqzhnXaPewwQ/s1600/RSS-hover.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:295px; z-index:1100;}
.menufijorss_1{margin:0px 0 0 43px}
</style>
<div class='menufijo' onmouseout='this.className=&apos;menufijo&apos;' onmouseover='this.className=&apos;menufijo1&apos;'><div class='menufijo_1'>
<a href='https://www.facebook.com/trucosdeblogger' target='_blank'><img alt='Dale like en Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYqiWUQg33HMXdWML4l2b8m-mLEnahRB6Kz1_7CcMP_0qwadpmr_gxy2s59jAQ7jZCZJISfGmoDKb6yMQL7hQn7rUSqiMZmuuf74NIVf0V9k3LTclCLl4I0uo2f6wNqmWk7ygO9myeM3bx/s1600/facebook-hover1.png' title='Dale like en Facebook'/></a><br/>
</div></div><div class='menufijotw' onmouseout='this.className=&apos;menufijotw&apos;' onmouseover='this.className=&apos;menufijotw1&apos;'><div class='menufijotw_1'>
<a href='https://twitter.com/andante772' target='_blank'><img alt='Siguenos en Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6qcyoFffL2hCu9JZyESs-XIzu5SiV5-Nt3YL1ifhJuylR75avlGRLYUlvJca7GzNpkRLdxxi_VP_PaCfNG3mjaM_pQ_SS9rRseAHLnJEqWkM2myxD9qaq9rTl-g_xbGw3204gSZ6Bg4mY/s1600/twitter_hover1.png' title='Siguenos en Twitter'/></a><br/>
</div></div><div class='menufijofb' onmouseout='this.className=&apos;menufijofb&apos;' onmouseover='this.className=&apos;menufijofb1&apos;'><div class='menufijofb_1'>
<a href='https://plus.google.com/ID de Usuario' target='_blank'><img alt='Recomiendanos en Google Plus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGYjSmfmxsQ3_tQXlTWVVDdneBBrTbnYmy79b7Kv3DEvRLVW91jHOxmRSHl5aKszm8pyRo8lz4pqrSMx0Wa9wCBcBsA3cQv0RsV74GN7JQSzKg4pmWQuI52Y1gwAEjbTBEMu1beS5iZbYP/s1600/Gplus_hover1.png' title='Recomiendanos en Google Plus'/></a><br/>
</div></div><div class='menufijorss' onmouseout='this.className=&apos;menufijorss&apos;' onmouseover='this.className=&apos;menufijorss1&apos;'><div class='menufijorss_1'>
<a href='https://feeds.feedburner.com/supertrucosdeblogger' target='_blank'><img alt='Suscribeme en RSS' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDBDpwV6tEI0J7O5tTowIcfu67QPv6sPoqGGXByUJC-Oou0rFKwlqFZFgc93f3NXeJoHOkhQaa80Ss-a7apEAXFE-BodoBdogVowc6pEwSlUDHb2RAxK7Ff27kHIGl2VapHg_5FLXfoHkx/s1600/RSS-hover1.png' title='Suscribeme'/></a><br/>
</div></div>

Reemplace trucosdeblogger con tu nombre de usuario de Facebook
Reemplace andante772 con tu nombre de usuario de Twitter
Reemplace ID de Usuario con tu Id de Google plus
Reemplace supertrucosdeblogger con tu Id de Feedburner

5. Para finalizar guarda la HTML/Javascript'.
  Todo esta listo para que tus visitantes se suscriban a tu perfil de medios sociales....

Read More

Añadir Botones Sociales Debajo Articulos En Blogger

Los Medios Sociales juegan un papel importante en la propagacion o divulgacion del contenido de los articulos que escribas en tu blog de blogger.Es por eso de la importancia de tener el widget debajo de cada entrada o articulo para que los lectores una vez terminado de leer puedan recomendarlos en las redes sociales para que otras tengan la oportunidad de disfrutar de un buen tema de interes.

Por eso en esta ocasion el tutorial se basa en eso como añadir un widget atractivo  debajo de tus entradas o artuclos de blogger.Las Caracteristicas de este widget contiene botones de principales redes sociales tales como facebook,google plus,twitter y stumble Upon.

La segunda caracteristica de este widget es que esta hecho usando Html y codigo de javascript,El html se uso para disenarlo y el javascript para ponerlo a funcionar,es uno de tipo ligero y de gran diseno que anadira atractivo a tu blog.
Ejemplo:

Como añadirlo en tu blog de blogger.
Es un proceso sencillo y añadiremos codigo dentro de la plantilla.
 1.Entra en tu cuenta de blogger
 2.Vaya a Editar Html y busque la siguiente etiqueta </head>
 3. Copie y pegue el siguiente codigo antes de la etiqueta </head>

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

4.Ve de nuevo a Editar Html y busca la siguiente etiqueta
<data:post.body/> y en algunas platillas aparece acompanado de <p><data:post.body/></p> y pega el siguiente codigo debajo de <data:post.body/>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='padding:4px;'>
<table border='0'>
<tbody><tr>
<td>
<div style='margin-right:10px;'>
<a class='twitter-share-button' data-count='horizontal' data-via='Andante772' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
</td>
<td>
<div style='margin-right:10px;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp; action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; margin-left:0px; width:100px; height:20px;'/>
</div>
</td>
<td>
<div style='margin-right:10px;'>
<g:plusone expr:href='data:post.url' size='medium'/>
</div>
</td>
<td><div style='margin-right:10px;'>
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/> 
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</div>
</td>
<td>
<div style='margin-right:10px;'>
<script expr:src='&quot;http://www.stumbleupon.com/hostedbadge.php?s=1&amp;r=&quot; + data:post.url'/>
</div>
</td>
</tr>
</tbody></table></div>
</b:if>

5.Haga Los Siguente Cambios
a.Reemplace el nombre en color amarillo por nombre de usuario de tu cuenta de twitter.
b.Puedes aumentar la anchura del borde del widget cambiando el valor 0 por defecto.
c.Solo chequea tu blog para que veas este widget en funcion.

Read More

Widget Atractivo De Suscripcion Social Para Blogger

Hola!En este tutorial les mostrare un super truco de widget de suscripcion a las redes sociales.Este cuenta con cuatro botones muy atractivos de las paginas de facebook,Twitter,Google Plus y ones RSSFeed.Los colores de estos botones de suscripcion a tu blog de blogger tienen un fondo brillante que al poner el cursor de tu mouse sobre los mismos se activan,con un efecto especial de opacidad que atrae a tus lectores o visitantes a suscribirse.
Ejemplo:Clic en Boton.

Como Anadir Este Widget a Tu Blog De Blogger.
     1.Entra en tu cuenta  Blogger
     2. Ir a la presentación
     3.Elija añadir un gadget
     4.Seleccione HTML / JavaScript
     5.Pega el siguiente código en su interior

    <style>

    .iconosocial_widget_barralado li {

        float: left;

        width: 147px;

        height: 147px;

        margin: 0 0 0 0;

        padding: 0 0 0 0;

        border-bottom: none;

    }

    .iconosocial_widget_barralado li a {

        line-height: 1px;

        display: block;

    }

    .iconosocial_widget_barralado li a:hover img {

        -webkit-opacity: 0.8;

        -moz-opacity: 0.8;

        opacity: 0.8;

    }

    .iconosocial_widget_barralado li a span {

        display: none;

    }

    .iconosocial_widget_barralado li.rss-icon {

        margin: 0 6px 6px 0;

    }

    .iconosocial_widget_barralado li.facebook-icon {

        margin: 0 6px 0 0;

    }

    </style>

   

    <div id="iconosocial_widget_barralado-2" class="ruta iconosocial_widget_barralado ">

    <ul style="margin: 0 0 0 0; padding: 0 0 0 0; list-style: none;">

   

    <li class="twitter-icon" style="margin-left: 155px;"><a target="_blank" href="http://www.twitter.com/andante772" rel="nofollow"><img src="http://s24.postimg.org/v6c4wylfp/twitter.png" width="147" height="147"><span>Twitter</span></a></li>

   

    <li class="facebook-icon" style="margin-top: -146px;"><a target="_blank" href="http://www.facebook.com/trucosdeblogger" rel="nofollow"><img src="http://s22.postimg.org/pysfehtw1/Facebook.png" width="147" height="147"><span>Facebook</span></a></li>

   

    <li class="rss-icon" style="margin-top: 7px;"><a target="_blank" href="http://feeds.feedburner.com/ciudadblogger" rel="nofollow"><img src="http://s18.postimg.org/956935g3t/rss.png" width="147" height="147"><span>Rss Feed</span></a></li>

   

    <li class="google-icon" style="margin-left: 155px;margin-top: -153px;"><a target="_blank" href="https://plus.google.com/u/0/116180896434879626623"><img src="http://s7.postimg.org/h8r9ijoyj/googleplus.png" width="147" height="147"><span>Google+</span></a></li>

   

    </ul>

    </div>

Personalización  del Widget:

     Reemplace ciudadblogger con nombre usuario  de su página de Facebook ,Twitter y RSS.
     Reemplace 116180896434879626623 con su numero de identificacion Perfil de Google Plus + .
     ¡Ya está! Ahora sólo tiene que pulsar boton Guardar.



Si tienes cualquier problema. Sólo tienes que arrastrar tu comentario. Voy a ser capaz de ayudar a usted sobre este widget Estén atentos para más. Paz y bendiciones amigos!

Read More

Widget del Hombre Twitter Animado y Volador en Blogger

Twitter es el único sitio web de redes sociales que está dominando toda la internet a la delantera. Esto no quiere decir que no tenga competencia, porque Facebook, Google Plus y Pinterest son los verdaderos pioneros, pero Twitter tiene su propia clase y  normas.

Por lo tanto, el consejo a los nuevos blogeros deben iniciar la construcción de su audiencia en twitter para que puedan tomar ventaja de esto. El logro de más de dos mil seguidores en Twitter reales es algo que podría dar un enorme impulso a las capacidades de un blogero. Después de crear una cuenta en Twitter, se puede vincular fácilmente en nuestro sitio web, por lo que cualquier persona que se acerque a nuestro sitio web desde el motor de búsqueda o cualquier otra fuente puede convertirse en nuestro seguidor permanente.

Sin embargo, para atraer a tantos seguidores en nuestra cuenta de Twitter que podemos disfrutar de una espléndido widget que atraiga la atencion a tus visitantes y que le encante hacer clic en él una y otra vez. En este artículo, vamos a añadir un Widget  del Hombre Twitter Animado y Volador en Blogger.

Esta animado Hombre Twitter le seguirá en todas y cada rincón y esquina de su sitio. Fundamentalmente, este hombre que vuela intenta seguir el cursor cuando alguien sea desplaza hacia arriba o hacia abajo de la página.Para verlo en accion de clic AQUI.

Instrucciones para instalar este widget en tu blog de blogger.
     1.Ir a tu cuenta de Blogger.com >> Diseño >> Añadir un gadget.
     2.Luego, dentro de la lista de dispositivos, seleccione HTML / JavaScript.
    3. Ahora basta con pegar el siguiente código allí.

<script type="text/javascript" src="https://googledrive.com/host/0B0DJgT4v15seT3Y0Ump5Z0tqeTA"></script><script type="text/javascript">
var twitterAccount = "andante772";
tripleflapInit();
</script>

Reemplace andante772 con su nombre de usuario de twitter y guardar tu widget, pulse el Boton Guardar.

Todo hecho: Ahora seguir adelante y revisar su sitio y usted será testigo de una imagen perfecta de Hombre Twitter que lo siga por todo el blog.

Read More

Widget Botones Sociales Con Efecto Hover Para Blog De Blogger

Google está jugando el papel más importante está matando todo el tráfico de un sitio web por el implementacion de nuevas actualizaciones del algoritmo. Debido a esto casi el 50 por ciento de los bloggers están tratando de utilizar las redes sociales para aumentar su tráfico.

Este nuevo widget es elegante y con estilo además de que tiene toda la nuevo diseno que atraera a los lectores. Así que hoy, en este artículo vamos a compartir Cómo agregar botones sociales con efectos Hover en Blogger.
 Donde aparecera este botón social con efecto Con Hover  en tu plantilla:
Este widget de marcadores sociales  se puede utilizar en la barra lateral. Cuenta con cinco botones sociales que incluye Pinterest, Facebook, Google Plus, Twitter y RSS. Echa un vistazo a la siguiente ilustracion.Para verlo en vivo da Clic en la Imagen.

Pasos para instalar este widget de botones de redes sociales a tu blog de blogger.

• Entra en Blogger.com >> Diseno>> Anadir un Gadget.
• De la lista selecciona Editar HTML/JavaScript.
• Ahora en el espacio de HTML Text pegue el siguiente codigo

                       <div id="mbl-social-hover">

<div class="tota2"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSHjtToeubKe3VUhxp3lZYiJQcTof_bjbXE67xK9jOZP-G2ADnP4GvbMaxqMWwhamf9xfr3ZSEjCzGVy__m6mmre8UX55T1ndYDWpZrf0EQD1dffrwLTphqC3_2ZQSsn1_aR_R6XMLdS7u/s1600/suscribete.png" width='200' /> /></div>

<div id="links"><a href="http://twitter.com/andante772" class="twitter" title="Twitter" target="_blank"><div class="tota"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEMdAsHY5aPzuNg-PfeAjxnbLrUu0tZXmxUJSbTLKKXlPXVvLhqGcMTTum6tHehoxLNMAi29F5HxD3g38eQQxZpbamshj5o_f4EMxM6lwMrtwC-LKizwIwAh9gcCCeLtAWlGIVEZseqxM/s1600/twitter.png" /></div></a>

<a href="http://www.facebook.com/trucosblogger" class="facebook" title="Facebook" target="_blank"><div class="tota"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQqG7vGwruP3RKnsYJVk9XZQ6Dlr754q_TuyXUhUy6OY7iaIliTHPd4ys0nQEMvLAVVv-pih35ugeuZGtuDhQIs9aIndy8ShJG7L5D9_kbGCQFlbqr50Dhp0K0TQemgEwwtJOvvyRH3Fg/s1600/FB.png"  /></div></a>

<a href="https://plus.google.com/116180896434879626623" class="google" title="Google Plus" target="_blank"><div class="tota"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFJAQJXwVVhgApiTC60JQ3jV4CVat-9-3dtwSHBHiWsuMP9Pwe4mnVjVIuDUlXM86tVholcERNhu7YDbjh7kG4JZvXF04hd_cwEJdDtl6wbqOboxin0bOTkJjxLXi69rT9z06xu9a3WGI/s1600/google.png" /></div></a>

<a href="http://pinterest.com/andante77/" class="pinterest" title="Pinterest" target="_blank"><div class="tota"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8E5GYLuYB89NlO406ZWeKquPRgfNtKzSEHUb86GG068eVbfS1EnE-xlEOg81S-zO_YsFSx6yc00D5XiGttuuoZPnMNExyq_X74DW0dQRJ1YL0sgt7FHAMgI_DcKQNY9WP2I4897F-C44/s1600/pin.png" /></div></a>

<a href="http://feeds.feedburner.com/ciudadblogger" class="rss" title="Feedburner" target="_blank"><div class="tota"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht1ASXW9J8T2eiwgws8APZd0prSiv1dj-G3mT9jsL_F04oZXfMNIEVCxjrZuH2cT33vEFZ4Oj1XS8vheWK0JQ2Nx7SFdkkDHvrCWYNLQJ2r6KL2xul8Ms6qFpFwehItYC2j14ud67w-M4/s1600/rss.png" /></div></a>
</div></div>

<style>.tota2 { margin-left:15px; margin-top:10px;}.tota { margin-top:7px; }#mbl-social-hover{position:relative;width:240px;height:400px;background:#554e4c url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxvyfQam0jqDnvT1-6A0D70H2iCwt03nMgpdwf4op6QwmGQq7f6jSrlNJgyFTe9TjEWKZgooqdcz8LsQlJdN1oHFCeFNQFFuGxUefLnrEZ-ItbpH3pWBoFDWPzCtwnQRa1HksAXN_0GC4/s1600/vintage.png");}#mbl-social-hover #title{font-family:'Open sans';font-size:28px;color:#fff;font-weight:600;margin:30px 20px 0;text-align:center;line-height:1.1em;text-shadow:1px 1px 1px rgba(0,0,0,0.3);}#mbl-social-hover #title span{display:block;font-size:14px;line-height:1.5em;margin-top:10px;font-weight:400;}#mbl-social-hover #links{position:absolute;bottom:0;width:100%;}#mbl-social-hover a{display:block;padding:0 20px;height:42px;line-height:42px;color:#fff;font-size:12px;background:rgba(0,0,0,0.08);border-top:1px solid #4c4644;border-top:1px solid rgba(0,0,0,0.1);-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;}#mbl-social-hover a:hover{background:rgba(0,0,0,0.15);text-decoration:none;}#mbl-social-hover a.twitter:hover{background:#79dbff;}#mbl-social-hover a.facebook:hover{background:#6e9bee;}#mbl-social-hover a.google:hover{background:#00be00;}#mbl-social-hover a.pinterest:hover{background:#cb2027;}#mbl-social-hover a.rss:hover{background:#ffae42;}#mbl-social-hover a span{height:15px;line-height:15px;width:15px;text-align:center;margin-right:20px;font-size:13px;padding:5px;border-radius:99px;background:rgba(0,0,0,0.1);}#home-tagline{text-align:center;font-size:32px;color:#000;font-weight:300;margin:60px 0 40px;}#home-tagline strong{color:#ff5421;font-weight:300;}#home-highlights{margin-bottom:40px;}.home-highlight{float:left;width:142px;padding:30px 0;margin-right:21px;text-align:center;font-size:13px;display:block;opacity:0.9;color:#796f6c;font-size:40px;background:#e2e0df;background:rgba(0,0,0,0.04);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;}.home-highlight p{margin:0;}.home-highlight:hover{color:#3a3534;text-decoration:none;background:rgba(0,0,0,0.1);}.home-highlight-title{font-size:13px;margin:7px 0 0;text-align:center;color:#796f6c;cursor:pointer;font-weight:900;-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;}.home-highlight:hover .home-highlight-title{color:#3a3534;}#home-featured{min-height:400px;margin-bottom:37px;}#home-featured .home-divider{margin-top:0;}#home-featured h2{text-align:center;font-size:32px;color:#161414;font-weight:300;margin:0 0 40px;}#home-featured h2:after{display:block;content:"";width:342px;margin:0 auto;height:1px;background:#161414;margin-top:5px;}.featured-theme-entry-content{font-size:16px;float:left;width:430px;font-weight:300;}.featured-theme-entry-content h3{font-size:21px;line-height:1.4em;margin:0;font-weight:400;}.featured-theme-entry-content .button{margin-top:15px;}.featured-theme-entry-content .button:hover{background:#f5634a;opacity:1;}.featured-theme-entry-img{display:block;float:right;margin-right:5px;}.featured-theme-entry-img a{display:block;padding:6px;background:#fff;border-radius:2px;}#featured-theme-slider .flex-control-nav{position:absolute;top:-20px;left:-54px;}#featured-theme-slider .flex-direction-nav{margin:0;}#featured-theme-slider .flex-direction-nav li a{background:#312d2c;cursor:pointer;display:block;height:70px;line-height:70px;width:30px;color:#fff;text-align:center;margin:-30px 0 0;position:absolute;top:50%;-moz-transition:background 0.3s ease-in-out 0s;opacity:0.15;border-radius:4px;}#featured-theme-slider .flex-direction-nav li .flex-prev{left:-90px;}#featured-theme-slider</style>

Customization: 

• Reemplace https://plus.google.com/116180896434879626623 con Url del Google+ Profile .
• Reemplace http://twitter.com/andante772 con Nombre de Usuario de Twitter.
• Reemplace http://feeds.feedburner.com/ciudadblogger con la URLdel RSS Feed
• Reemplace http://pinterest.com/andante77 con la URLdel Pinterest Profile .
• Reemplace http://www.facebook.com/trucosblogger con la URL de la Pagina de Facebook  URL.

Todo esta listo: Después de personalización, guarde la plantilla pulsando el botón Guardar. Eso es todo, seguir adelante y echa un vistazo a la página web para ver los resultados de la imagen perfecta.

Read More

Como Añadir Widget Avanzado De Suscripcion Social A Blogger

 La idea o truco de unir botones sociales en un gadget no es diferente porque hay un montón de widgets de Suscripciones que funcionan de la misma manera. Sin embargo, no son lo suficientemente flexibles como para soportar todas las plataformas sociales más importantes. Por ello, hemos diseñado un widget de Suscripción Social excelente. Tiene todas las plataformas sociales claves que son esenciales para un sitio web.

Hoy, en este artículo vamos a aprender a añadir Avanzado Widget de Suscripción social en Blogger.Este gadget está desarrollado para ser utilizado en la barra lateral de la página web. Sin embargo, cualquier persona puede utilizarlo de acuerdo a sus necesidades. 

Ejemplo de este widget:

Este gadget es extremadamente amplio y compatible con casi todas las plataforma  iPad, iPhone, Android, etc Ahora todo el mundo puede librarse de los diferentes tipos de aparatos de Suscripción Sociales porque se ponen todo en un solo gadget. Widget Social Avanzada añadiría una caja widget a tu barra lateral que consiste en todos los sitios populares de redes sociales como Google +1 /, Facebook Like o Twitter Tweet / Siga botones.Este es un widget cortecia de MBL.

Cómo agregar este Widget de Suscripción social en Blogger?

Los pasos que se mencionan a continuación son sencillos y  apenas se toma unos minutos para completar. Tenga en cuenta las  instrucciones que se mencionan a continuación.
1.Entra en tu blogger
2.Ir a Diseño>>Añadir un Gadget>>Selecciona Html/Javascript
3.Ahora pega el siguiente codigo

<style>
/*--- MBL Advance Social Gadget --- */
#socialwid { 
font-family:Arial, serif; 
text-transform: uppercase;
font-weight:bold; 
font-size:15px; color:white; text-align:center; margin-top:10px;}

#socialwid a {color:inherit;}

#mbladvance-sub div *{
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;}

#mbladvance-sub div #likered{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX6-LhBLP0G-lkUY46lfZaXD6ypwRRDUB-WZ0Py0V1n8UjZb8CBQqw8Kg69Gad-r-vmMW4YM-8HcLr_78rECiBtvOYVSEhqwLLgzbMyvlYPxm9RJ8o89OZfTc4vTZLec50bx8INkM0u2I/s1600/Sociala.png)!important;background-position:top left;
background-repeat:no-repeat;
height:242px;
width:300px;}
#mbladvance-sub div{
margin:0;
padding:0;
background-image:none!important;}

#mbladvance-sub{
margin-bottom:15px;
height:250px; 
background-color:#ffffff}
</style>

<div id="mbladvance-sub" style="height: 257px!important;" class="block">
<div>

<div id="likered" style="height:257px!important;">
<div style="height: 47px;"></div>

<!--Google +1/Follow-->
<div style="width:300px; height:54px;overflow:hidden;border: 3px solid #8ec801;border-bottom: none;border-top: none; margin-top:1px;">
<span style="width:75px;display:inline-block;float:left;padding: 15px 0 0 23px; ">
<div class="g-plusone" data-href="http://www.ciudadblogger.info"></div>
</span>

<span style="display:inline-block; width:170px;float:right;">
<div class="g-plus" data-href="https://plus.google.com/116180896434879626623" data-width="170" data-height="69"></div>
</span>
</div>

<!--Facebook Like--> 
<div style="border:1px solid #8ec801;padding:10px 10px 0 10px; border: 3px solid #8ec801;border-top: 1px solid #8ec801; border-bottom:none;">
<iframe src="//www.facebook.com/plugins/like.php?href=facebook.com%2Ftrucosdeblogger&amp;send=false&amp;layout=standard&amp;width=280&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=36" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:280px; height:36px;" allowtransparency="true"></iframe></div>

<!--Twitter Tweet/Follow--> 
<div style="border: 3px solid #8ec801;border-top: 1px solid #8ec801;border-bottom: none; padding:10px 0 5px 10px;height: 50px;">
<span style="display:inline-block; width:195px;height: 35px;float: left;">
<a href="http://twitter.com/andante772" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @andante772</a>
</span>

<span style="display:inline-block;width:78px; overflow: hidden;line-height: 0;float: left;">
<a href="http://www.ciudadblogger.info" class="twitter-share-button" data-show-count="false" data-size="large" data-text="Mejor Website De SuperTrucosDeBlogger" data-url="http://www.ciudadblogger.info" data-via="ciudadblogger" data-hashtags="design">Tweet</a>
</span>
 </div>

<!--Blogger--><div style="border: 3px solid #8ec801;border-top: 1px solid #8ec801; padding:8px 0 5px 10px;height: 54px;">
<span style="display:inline-block; width: 120px;height: 30px;overflow: hidden;line-height: 0;float:left;margin-left: 16px;">
<a href="http://www.blogger.com/profile/116180896434879626623" target="_blank">
<img style="margin-top: 2px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW_230qm9O1tHwt5nwIs7fuoSitrx3_nqQ29EERvwE0BZpGbHtnLSS6TBS6oIchU7rErmhBwonVc3fR2y8yO0FdOS22GpApCq4jrKMdUg_aV9n8yLyfoyZMVolM0Fk68T_S7yThIFPMbM/s1600/Bloggerzzz.gif" width="110" /></a>
</span>

<!--Pinterest--> 
<span style="display:inline-block;width: 111px;height: 50px;overflow: hidden;line-height: 0;float: left;margin-left: 20px;">
<a href="http://pinterest.com/andante77" target="_blank"><img style="margin-top: 3px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtnMNnAchQQjIzQ6F0nNb8tSkiFgeSmFRmXGEE1kJf2dlzUkIgkdBQx-hM4VX9VAihSdAynaXqQAov6s67uLn7C3OleRReYUTDFyXxKsF8tfyZrjzaqfKpYJfSJqYDePrDvhdI3F9KYBQ/s1600/LogoRed.png" /></a>
<span style="display:inline-block;width:1px;height: 50px;overflow: hidden;line-height: 0;float: left;margin-left: 20px;"><div id="socialwid"></div>
</span></span></div>
<script src='https://mybloggerlab.googlecode.com/files/advsub.js' type='text/javascript'></div>
</div>
</div>

Personalización de este Widget:
o
  Google +1 / Follow URL: Reemplace http://www.ciudadblogger.info con su URL del sitio web. También Reemplace https://plus.google.com/116180896434879626623 con tu perfil de Google+ o URL de la página.
     Facebook Like Button: Reemplazar trucosdeblogger con nombre de usuario de tu página de Facebook.
     Twitter Sigue / Tweet: Reemplace http://twitter.com/andante772 con su URL Twitter.
     Pinterest: Reemplace http://pinterest.com/andante77 con su URL Pinterest.
     Blogger: Sustituir http://www.blogger.com/profile/116180896434879626623 con su Perfil de Blogger URL.

Eso es todo usted y sus visitantes lo apreciaran.

Read More

Como Añadir Widget Cubo Hielo 3D en Blogger

Esta vez traigo un widget que les encantara su diseno y  atractivo y util en forma de bloque de hielo en 3D.Somos atraidos por lo que vemos y sin duda este widget hara esa funcion en los que visiten tu blog de blogger.Incluye un grupo de medios sociales para que compartas tus articulos. Es facil de instalar en tu blog de blogger solo sigue estos pasos.
Ejemplo:

Pasos para instalar el widget medio social en forma cubo hielo en 3D a tu blog:

1.Entra a la cuenta de Blogger
2.Selecciona la opcion de diseño
3.Click en Añadir un Gadget
4. Selecciona HTML/JavaScript de la lista
5.Copia y pega el siguiente codigo en espacio de HTML/Javascript .

<style>
<!--Blogging Industries Social 3D Ice Cubez Strat -->
#bi a:hover {background-color: transparent;opacity:0.7;}
#bi img
{ -moz-transition: all 0.8s ease-in-out; -webkit-
transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; }
#bi img:hover
{ -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }
</style>
<center>
<div id="bi">
<!--Start Blogging Industries Facebook Icon-->
<a title="Witness Our FB Social" href="Tu enlace de pagina de FACEBOOK va aqui" target="_blank">
<img border="0" src="https://bloggingindustries.googlecode.com/svn/trunk/BI Facebook.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Blogging Industries Facebook Icon -->
<!--Start Blogging Industries Twitter Icon-->
<a rel="nofollow" title="Follow Us On Twitter" href="Tu enlace de pagina de profile de TWITTER va aqui" target="_blank"> 
<img border="0" src="https://bloggingindustries.googlecode.com/svn/trunk/BI Twitter.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Blogging Industries Twitter Icon-->
<!--Start Blogging Industries Google+ Icon-->
<a title="Add Us On Google+" rel="nofollow" href="Tu enlace de pagina de GOOGLE-PLUS va aqui" target="_blank">
<img style="margin-right:1px;" src="https://bloggingindustries.googlecode.com/svn/trunk/BI Googleplus.png"/></a>
<!--End Blogging Industries Google+ Icon-->
<!--Start Blogging Industries LinkedIn Icon-->
<a title="Follow Our Links" rel="nofollow" href="Tu enlace de pagina de profile de LINKDIN va aqui" target="_blank">
<img style="margin-right:1px;" src="https://bloggingindustries.googlecode.com/svn/trunk/BI%20Linkedin.png" alt="Follow Me on Linkedin" /></a> <!--End Blogging Industries LinkedIn Icon-->
<!--Start Blogging Industries Technorati Icon-->
<a title="Follow Our Links" rel="nofollow" href="Tu enlace de pagina de TECHNORATI va aqui" target="_blank">
<img style="margin-right:1px;" src="https://bloggingindustries.googlecode.com/svn/trunk/BI Technorati.png" /></a>
<!--End Blogging Industries LinkedIn Icon-->
<!--For First time Social 3D Icecubez by Blogging Industries-->
</div>
<br/>
<!--Blogging Industries Social 3D Ice Cubez End -->
</center>

Por ultimo guarda tu Html/Javascript y todo estara listo ve a tu pagina y lo veras instalado.

Read More

Añadir Barra Flotante Con Google +1 y Otros Botones a Blog

 En este tutorial, compartire contigo como anadir una barra flotante que incluye google +1, pinterest, facebook like  y otros botones, este widget fue creado aplicando efectos CSS y de jQuery. Me he asegurado que el proceso de instalacion sea facil, este trabaja bien en la mayoria de los navegadores.

Esta barra flotante aparecera al lado izquierdo y se movera arriba y abajo segun el lector navegue arriba y bajo, este tambien contiene un contador que muestra cuantas veces tus articulos han sido compartidos o de gusto.  Este hace un papel extraordinario expandir y compartir tus iculos en la red cual traera mayor trafico a tu blog.

Como Anadir este widget Flotante a tu blog.

• Entra en Blogger
• Da click en "Diseno" > "Editar HTML" > Haga Copia de Seguridad de Tu Plantilla"
• Use ctrl F para encontrar el codigo de abajo

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

Pega el codigo de abajo despues o debajo .<b:includable id='post' var='post'>

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <style>
    .RB_social_floating{
        position:fixed; bottom:10%; margin-left:-80px; float:left;
        width:60px;
        background-color:#f7f7f7;
        padding: 5px 0 0px 0px;
         border-top:1px solid #ddd;
    border-left:1px solid #ddd;
    border-bottom:1px solid #ddd;
    z-index:9999px !important;
    border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;
    }

    .RB_social_floating .RB_side_social_button{
        margin-bottom:5px;
        float:none;
        height:auto;
        width:60px;
    }
    .RB_social_floating .st_twitter_vcount, .RB_social_floating.st_plusone_vcount, .st_email{
        margin-left:5px;
    }
    .RB_social_floating .st_fblike_vcount{
        margin-left:5px;
    }
    .RB_social_floating .stButton_gradient{
        background:none !important;
        height:21px !important;
        padding-left:0 !important;
    }
    .RB_social_floating .chicklets, .RB_social_floating .stMainServices {
        background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGWVpnRg1nvIywsX4ZmiarLaacV51xq8vxDuMcOgVyqS5nx6HiJFoXpJv9Pq7LWtgnmmXSWPQcNnnBqku19vl1SKU803OlkNOUOd_t3yqc3eTJzsAKSIsbZhRpP8xvLS9FeeYG4jQu4GQO/s400/gc_social_sprite.gif&#39;) no-repeat !important;
        height:19px !important;
        width:45px !important;
        padding:0 !important;
    }

    .st_email .chicklets{
        background-position:0 -77px !important;
        background-image:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGWVpnRg1nvIywsX4ZmiarLaacV51xq8vxDuMcOgVyqS5nx6HiJFoXpJv9Pq7LWtgnmmXSWPQcNnnBqku19vl1SKU803OlkNOUOd_t3yqc3eTJzsAKSIsbZhRpP8xvLS9FeeYG4jQu4GQO/s400/gc_social_sprite.gif&#39;) !important;
    }
    .RB_social_floating .st_twitter_vcount .st-twitter-counter{
        background-position:0 -58px !important;
    }

    .RB_social_floating  .stButton_gradient{
        border:none !important;
    }
    .RB_social_floating .stBubble_count{
        width:44px !important;
        font-size: 15px !important;
        font-weight: normal !important;
        padding-top:7px !important;
        height:23px !important;
        background:none !important;
    }

    .RB_social_floating .st_twitter_vcount .stBubble_count{
        color:#00a6df;
        background-color:#f8fbfc !important;
    }


    .st_fblike_vcount{
        margin-bottom: 0px;
        display: block;
    }

    .st_twitter_vcount{
        margin-bottom: 3px;
        display: block;
    }


    .st_email{
        margin-bottom: 5px; margin-top: 3px;
        display: block;
    }
    .RB_social_floating .stBubble{
        background-position: 21px 31px !important;
        height:35px !important;
    }

    </style>


    <div class='RB_social_floating'>
        <script type='text/javascript'>var switchTo5x=true;</script>
        <script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
        <script type='text/javascript'>stLight.options({onhover:false});</script>
        <span class='st_fblike_vcount' displaytext=''/>
        <span class='st_twitter_vcount' displaytext='' st_via='ciudadblogger'/>

    <div style='margin:5px 0 0px 0;'>
    <center><a class='pin-it-button' count-layout='vertical' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a>
    <a href='javascript:void(run_pinmarklet())' style='margin-left:-46px; width:43px; height:20px; display:inline-block;'/>
    <script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
    <script type='text/javascript'>
    function run_pinmarklet() {
    var e=document.createElement(&#39;script&#39;);
    e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
    e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
    e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
    document.body.appendChild(e);
    }
    </script> </center>
    </div>

    <div style='margin:0px 0 0 5px;'>
        <span class='st_plusone_vcount' displaytext=''/>
    </div>
    
    <div class='addthis_toolbox addthis_default_style ' style='margin:5px 0px 5px 8px;'>
    <a class='addthis_counter'/>
    </div>
    <script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
    <script type='text/javascript'>
    var addthis_config = {
         ui_cobrand: &quot;Realcombiz&quot;,
    ui_header_color: &quot;#ffffff&quot;,
         ui_header_background: &quot;#0080FF&quot;
    }
    </script>

    <span class='st_email' displaytext=''/>


    </div>
    </b:if></b:if>

• Da Click "Guardar Plantilla"

Si desea personalizar la posicion y el fondo de tu widget, puedes editar el codigo sombreado, y reemplazarlo 'ciudadblogger' con tu nombre de usuario de twitter .

Nota:Este widget solamente se mostrara en paginas de articulos.

Read More

Como Añadir Widget Estilizado De Red Social

 Como todos sabemos que las redes social desempeñan un papel importante en el aumento de tráfico del blog y el ranking en los motores de búsqueda, y esa es la razón por la que debe proporcionar a sus lectores  currículum sociales compartidos, si realmente quiere mover su blog al siguiente nivel .

 Este aparato consta de una barra de búsqueda, RSS Feeds,enlace de suscripción, siga el vínculo del gorjeo, siga el enlace de facebook, herramientas para compartir y efecto especial estacionario, como se puede ver el efecto en el enlace twitter. He hecho este widget de manera fácil para usted para ponerlo en práctica en su blog.

Como Añadir este Widget a Blogger 

Paso 1

• Entra en tu Blogger
• Da Click en "Deseno" > "Editar HTML" > Haga Copia de Seguridad De Tu Plantilla.
• 
  
• Use ctrl F para encontrar el siguiente codigo ]]></b:skin>y pegue el sigiente codigo arriba/encima de ]]></b:skin>

/*  -------------Ciudadblogger SOCIAL SHARING WIDGET-------------------- */
#search{width:300px; border:1px solid #E0DFD9;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYiPVfa1-JY_A0zKh05O4GRQXXhUZXj9zAqU-x7DWZRQ-J1HETkKMDmJmvx9fgbK69pYQnoVFA3t_GHsWjtG4JEe5ibW3-_j7UtAR7xaBI4Ommwfc0ffKhYZ_tHRUdjRoMxhR3EnGaW0c/s1600/search-bg.png) left top repeat-x;height:32px;padding:0;text-align:left;overflow:hidden}
#search #s{width:80%; background:none;color:#3F3F3F;border:0;padding:4px;margin:3px 0 0 12px;float:left}
#search .search-image{border:0;vertical-align:top;float:right;margin:8px 4px 0 2px}
#search-wrap{padding:15px 0}
.topsearch #search{margin-top:0;margin-bottom:10px}

.social-connect-widget{background:#FFF;border:1px solid #E7E6DE;padding:10px}
.social-connect-widget:hover{border:1px solid #CBCBC2;background:#F5F4EF}
.social-connect-widget a{text-decoration:none;font-weight:bold;font-family:Arial,Helvetica,Sans-serif;color:#4B4D4E}
.social-connect-widget a:hover{text-decoration:underline;color:#F77C04}
.social-connect-widget img{vertical-align:middle;margin-right:5px}

• Edite width:300px, para cambiar el ancho del cuadro de busqueda
• Edite width:80%, para cambiar el espacio de Caja de buqueda.
• Da Clic "Guardar Plantilla"

Paso 2

• Go to "Page Elements" > "Add a Gadget"
• Choose "HTML/JavaScript" from the list of the gadget that appear.
• Copy and paste the code below in the box.

<div class='topsearch'>
<div class='clerfix' id='search'>
    <form action='/search' id='searchform' method='get'>
        <input id='s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search here...&quot;;}' onfocus='if (this.value == &quot;Search here...&quot;) {this.value = &quot;&quot;}' type='text' value='Search here...'/>
        <input class='search-image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKZ0C1xrtvUMIped2yQ_ynrSfD72Pp7AAgGBJtO_MYFF6Rs4zYwVccifvOuPUW6cLCZPpmpq3dPKOVrKqiv-hPNfWNwMiNgjU6YxBC-Xq0i3j02cbU_lsIqEw4N1c_yIRNlAPpXFKSv7w/s1600/search.png' title='Search' type='image'/>
    </form>
</div>
</div>
<div style='clear:both;'/>

<div class="social-connect-widget" style="margin-top:0px;margin-bottom:10px;">
<img alt="rss feed" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizbr855DzVYGbRDKovif2HbH99xpPR6qsQNUDetupLLNEBJbvtUrlu848OuISWhBSkl-9T-iDCQ7I85v8c2xVEDhune7E64KbjP0ArCBmnQnIpYRAyCtKhqF_DPhz2qZj7U3wMaVOJSpyo/s1600/social-connect-rss.png" /><a href="http://feedburner.google.com/fb/a/mailverify?uri=ciudadblogger" target="_blank">Subscribe to our RSS Feeds!</a>
</div>

<div class='social-connect-widget' style='margin-bottom:10px;'>
<a href='http://twitter.com/realcombiz'><img alt='Follow Us on Twitter!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsHqgs5f3cwXr9xXRypESz9ojf7fAcRH2hejsUbxVrxxO5BrB6m5JSHaMFkxTd7WJqB9MpBWdrjqg9oaPG9blY9xFMFgplhgTXQjFu8L2zgx9zAE0VkQTM0_-bSaodBZR1EuummRrN7kNR/s1600/social-connect-twitter.png' title='Follow Us on Twitter!'/></a><a href='http://twitter.com/ciudadblogger'>Follow Us on Twitter!</a>
</div>

<div class='social-connect-widget' style='margin-bottom:10px;'>
<a href='http://facebook.com/realcombiz'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0BrZmq6tdVMUaya2lzi7H81z4JPscTkN69HAhikpuLRYeSJtslVJ1NRS73sXPaJ4-l657mb2Q5pBwa3tnnqx0iaKwy9cLF6o5o831y7T5xoT8JbH_eGPGSQvWoNEhJl9ck3EGjDkC3bT2/s1600/social-connect-facebook.png' title='Be Our Fan'/></a><a href='http://facebook.com/ciudadblogger'>Follow us on Facebook!</a>
</div>

<div style='clear:both;'/>

<div class='addthis_toolbox'> 
<div class='custom_images'>
<a class='addthis_button_twitter'><img alt='Twitter' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqhrtVJRMfrhA-3PamdxJXDyEu4pWvwcIPkWOf3XnWQgl2IyGtJ0IU_nUH68ZyPYQOBJ-moRj3B7wxCVxN0PRoROCavhqqVrJPwqyUzVJS2DhcP8_o7gDi8TB7MrBiMtIbhBIMs7sTXwc/s1600/twitter.png' width='32'/></a>
<a class='addthis_button_delicious'><img alt='Delicious' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguYD_awDz7ashHuQdYjyEq9UVtvFgSzePZ_Oq5U2RsyX8C8YLzxpgFt5xPgpjI4LU5xJ-aLHfn3TsN_yfEcUT4OgZMk5zy2T5IjSxHuqLrBYQhQcPiCKtoY5MWaWzBuDQa8xFZONxVe4s/s1600/delicious.png' width='32'/></a>
<a class='addthis_button_facebook'><img alt='Facebook' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAy6QFqDtjgmXaPyTsoCodclxoW2m46qmA5IBRiQd-JBQ1XjxFBXCh3SBATrjAwgwvR16PNH1ZhyNjWj0thyphenhyphenaRFNVbZ_aoB2K4S3ed8w-yZuInqRW0fPv4BNyv6M78gyc4vcK_xVJeoEg/s1600/facebook.png' width='32'/></a>
<a class='addthis_button_digg'><img alt='Digg' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGMHZQqrPV-FN4bq-PZy_5EMdUalLvaqh_8-qudLHZqzRfrfZfGH3I7itwPp954FtooDjeaYEbeRD5so0iRrCyqSQ36_W4EGlw8q9DZlpJF1IKlytGYc77qSbxCGY_v9k69z-G-VNRlhs/s1600/digg.png' width='32'/></a>
<a class='addthis_button_stumbleupon'><img alt='Stumbleupon' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfM8e4szOWsTcHijhkqByV6_5QRD4xcC92CJkVUjXbrR0Ja5G3EFIb_BY6UiAwOhf3gKvXcAx1x0vKzoJro1xiOAgisS3-d-H7hP3EY4J5VP96a8B3poi9kptA7lh0Gs5-ABBZ2A0w-pM/s1600/stumbleupon.png' width='32'/></a>
<a class='addthis_button_favorites'><img alt='Favorites' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPFy28-lz_jLgBLNc1Mamh7gp9cK03VL_FSCvQ_uNFiBNr12GxZ29EMbJpyHosOLXL_vgfwLeDzJLvztmR2KViQRhR1v9QwEAbRuybBX_ghb9FCg2zz0-j62jvRODoA-D4d7RO0e1_UFI/s1600/favorites.png' width='32'/></a>
<a class='addthis_button_more'><img alt='More' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAFRRqgUtNrgjV9ui006zZcpSkmS_-XvD4A6pYpyd7kpV150mG59vXvka_rIBsH6HiX3vUhDFIADx9vRNYSHf1Ae83XbnfuW3CF8JuMSeEjUuc9KrBjreR09qyWxLwe3Fl7ZNyxId32q0/s1600/more.png' width='32'/></a>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
</div>
<div style='clear:both;'/>

• Reemplace http://feedburner.google.com/fb/a/mailverify?uri=ciudadblogger con tu url del RSS Feeds .
• Reemplace http://twitter.com/ciudadblogger con tu url del profile de twitter
• Reemplace http://facebook.com/ciudadblogger con tu url del profile de facebook
• Da Click "Guardar" y Listo

Read More

Añadir Iconos Sociales Con Estilo Metro A Tu Blogger

Te voy a mostar como puedes añadir los iconos Redes Sociales de Estilo Metro a tu blog de blogger . Estos iconos son hechos puramente usando CSS sin usar JavaScript. Este tiene el efecto ademas cuando pones el cursor sobre el mismo  se anima este luce muy elegante y atractivo en cualquier plantilla.

Este widget ademas tiene 7 iconos de sitios de network sociales . Tales como : Facebook, Twitter, Youtube, Google+, LinkedIn, Pinterest and RSS. Puesdes ver una demostracion de este widget aqui debajo:

Una veas la  demostracion vamos entonces a anadir este widget a tu blog.


Entra en blogger>> Titulo Del Blog → Diseño → Añadir un Widget → HTML/JavaScript. y pega  en espacio de contenido el siguiente codigo.

<div class="metro-social">
<br />
<br />
<br />
<li><a class="fb" href="https://www.facebook.com/enrique.jimenez.92775838" rel="nofollow"></a></li>
<li><a class="tw" href="https://twitter.com/andante772/ciudadblogger"></a></li>
<li><a class="gp" href="https://plus.google.com/ciudadblogger"></a></li>
<li><a class="pi" href="http://pinterest.com/ciudadblogger" nofollow=""></a></li>
<li><a class="in" href="https://www.linkedin.com/ciudadblogger" nofollow=""></a></li>
<li><a class="yt" href="http://www.youtube.com/ciudadblogger"></a></li>
<li><a class="fd" href="http://feeds.feedburner.com/ciudadblogger/FyYj%20nofollow="></a></li>
</div>
<style>
.metro-social{width:285px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .fb,.tw,.gp,.pi,.in,.yt,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}
.metro-social .fb{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:68px;height:70px}
.metro-social .gp{width:69px;height:70px;background:url(//goo.gl/oT0kF) no-repeat center center #da4a38}
.metro-social .pi{background:url(//goo.gl/7olxx) no-repeat center center #d73532;width:68px;height:69px}
.metro-social .in{background:url(//goo.gl/PhFhj) no-repeat center center #0097bd;width:69px;height:69px}
.metro-social .yt{background:url(//goo.gl/zcwjB) no-repeat center center #e64a41;width:140px;height:69px}
.metro-social .fd{background:url(//goo.gl/lhBP1) no-repeat center center #e9a01c;width:140px;height:69px}
.metro-social li:hover .fb{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3}
.metro-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5}
.metro-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #da4a38}
.metro-social li:hover .pi{background:url(//goo.gl/IORvy) no-repeat center center #d73532}
.metro-social li:hover .in{background:url(//goo.gl/2zHrm) no-repeat center center #0097bd}
.metro-social li:hover .yt{background:url(//goo.gl/I1c4a) no-repeat center center #e64a41}
.metro-social li:hover .fd{background:url(//goo.gl/CjzDP) no-repeat center center #e9a01c}
</style>

Una vez hallas añadido el codigo cambia el texto Rojo que esta sombrado  por tu url de las distintas redes sociales. Despues que hagas eso guarda el widget y finamente guarda la plantilla.
Listo. Ahora tu y tus visitantes podran ver integrado el widget de redes sociales Metro Metro en tu blog.

Read More

Como Añadir en Flash El Pajarito de Twitter en Blogger

Los trucos sencillos de javascript son una gran forma de atraer la atencion de cada uno de los visitantes a tu pagina en esta ocasion te traigo el super truco de animacion de el pajarito de twitter llevando un mensaje.Solo sigue esto simples pasos para implementarlo a tu blog.

1.Entra a la interface de Bogger >> Diseño>> Element de Pagina.





2.Da Click en 'Anadir un Gadget' en barra del lado.



3.Selecciona 'HTML/Javascript' y añade el siguiente codigo:

<object type="application/x-shockwave-flash" data="http://www.twpics.com/BUTTON6/twitbutton.swf" width="180" height="80"><param name="movie" value="http://www.twpics.com/BUTTON6/twitbutton.swf"></param><param name="allowscriptaccess" value="always"></param><param name="menu" value="false"></param><param name="wmode" value="transparent"></param><param name="flashvars" value="username=andante772"></param><a href="http://www.gamblinginsider.ca" title="up your game at Gambling Insider">up your game at Gambling Insider</a><embed src="http://www.twpics.com/BUTTON6/twitbutton.swf" type="application/x-shockwave-flash" allowscriptaccess="always" width="180" height="80" menu="false" wmode="transparent" flashvars="username=andante772"></embed></object>

Note: Reemplace andante772 con tu nombre de la cuenta de twetter.

4.dale click a guardar html/javascript y listo.

Mira este ejemplo:Puesdes conseguir mas versiones de este pajarito en Recursos

Read More

Añadir EL Widget De Social Media De Botones Debajo de Tus Entradas

Los medios sociales crecen dia a dia y sirven para aumentar el trafico a tu blog, seria grandioso para nuestros visitantes  o seguidores compartir nuestro articulo facilmente en las redes sociales asi aumentar el trafico nuestro blog..

Hoy en este articulo te mostrare como anadir el widget para compartir en redes sociales con los botones Integrados de Google+, Facebook, Twitter y Stumbleupon  junto a un contador para cada entrada en blogger .Añadamos este  widget a tu blog.

1. Entre a la interface de Blogger ve a Plantilla > Edite Html
2. Antes de  Editar la Plantilla haga una copia de seguridad de tu plantilla
3. Da Click en Plantilla
4.Ahora busca el codigo de abajo presionando las teclas Ctrl + F

<data:post.body/>

5. Inmediatamente bajo este <data:post.body/> pegue el siguiente codigo.

<div style='clear: both;'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div align='left'>
<p style='margin:0; border-bottom:2px solid #333;'><font color='#333' face='Arial Black' size='5'>Amablemente Comparta Esta Entrada &#187;&#187;</font></p>
<table border='0' cellpadding='5' cellspacing='10'><tbody>
    <tr>
<td style='padding-top:8px;'>
<g:plusone size='tall'/>
<script type='text/javascript'>
  (function() {
    var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
    po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
</td>
      <td style='padding-top:8px; '>    <script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/>
</td>
      <td style='padding-top:8px;'>   <div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' href='' layout='box_count' send='false' show_faces='false'/></td>
      <td style='padding-top:8px;'><a class='twitter-share-button' data-count='vertical' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/> </td>
      <td>
<!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style '>
<a class='addthis_counter'/>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
<!-- AddThis Button END -->
</td>
    </tr>
  </tbody></table></div></b:if>
<div style='clear: both;'/> 

• Reemplace Amablemente Comparta Esta Entradacon cualquier texto que desee.
• Reemplace #333 para cambiar el color de la letra.
• Reemplace #333para cambiar el color del borde debajo del texto

Que disfruten y aumente el trafico a tu blog.

Read More