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 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 Widget Social Media Slide Out En Tu Blog De Blogger

En este tutorial te incluire un widget muy especial para compartir tus entradas o articulos en las redes sociales.Este se esconde en el lado de la pantalla .Cuando el lector o visitantes ponen el cursor del raton sobre las mismas este se desplazara hacia afuera y una vez quitemos el cursor se desplaza hacia adentro o se escondera. 

Tiene varios elementos o folder donde se muestra la pagina principal nuestra de esas paginas como twitter,you tube,google plus,facebook y subscripcion Rss.

Muy recomendado si deseas estar adelante en propagar tus articulos atraves del mundo de la internet.Para instalarlo es muy simple solo siguie estos pasos.  

1.Entra cuenta de tu Blogger 
2.Selecciona Plantilla
3.Da Clic en Editar HTML
4.Encuentre el siguiente codigo ]]></b:skin> puedes usar teclas dentro editor para buscarlo(Ctrl + F)   
5.Copie el codigo de abajo y peguelo antes/arriba de ]]></b:skin>  
 

#on {visibility:visible;}
#off {visibility:hidden;}
#facebook_div {width:196px;height: 353px;overflow: hidden;}
#twitter_div {width:246px;height: 353px;overflow: hidden;}
#google_plus_div {width:200px;height: 143px;overflow: hidden;}
#knfeedburner_div {width:300px;height: 97px;overflow: hidden;}
#facebook_right {z-index: 10005;border:2px solid #3c95d9;background-color: #fff;width:196px;height: 353px;position: fixed;right: -200px;}
#facebook_right img {position: absolute;top: -2px;left: -35px;}
#facebook_right iframe {border:0px solid #3c95d9;overflow: hidden;position: static;height: 360px;left:-2px;top:-3px;}
#twitter_right {z-index: 10004;border:2px solid #6CC5FF;background-color: #6CC5FF;width:246px;height: 353px;position: fixed;right: -250px;}
#twitter_right_img {position: absolute;top: -2px;left: -35px;border: 0;}
#google_plus_right {z-index: 10003;background-color: #006ec9;border:2px solid #006ec9;border-top:2px solid #0056a0;border-bottom: 2px solid #0056a0;border-right:2px solid #0056a0;border-left: hidden;width:200px;height: 143px;position: fixed;right: -203px;}
#google_plus_right_img {position: absolute;top: -2px;left: -33px;border: 0;}
#feedburner_right {z-index: 10002;background-color: #fefefe;border:2px solid #5b5b5b;border-top:2px solid #5b5b5b;border-bottom: 2px solid #5b5b5b;border-right:2px solid #5b5b5b;border-left: hidden;width:300px;height: 97px;position: fixed;right: -303px;}
#feedburner_right_img {position: absolute;top: -2px;left: -33px;border: 0;}
#youtube_right {z-index: 10001;background-color: #fefefe;border:2px solid #ff0000;border-top:2px solid #5b5b5b;border-bottom: 2px solid #5b5b5b;border-right:2px solid #5b5b5b;border-left: hidden;width:301px;height: 106px;position: fixed;right: -303px;}
#youtube_right_img {position: absolute;top: -2px;left: -33px;border: 0;}

6.Otra vez busca la etiqueta </head> (CTRL+F)   
7.Ahora copie el codigo de abajo y peguelo antes de </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
jQuery(document).ready (
function(){jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },
function(){ jQuery("#facebook_right").stop(true,false).animate({right: -200}, 500); });
jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },
function(){ jQuery("#twitter_right").stop(true,false).animate({right: -250}, 500); });
jQuery("#google_plus_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },
function(){ jQuery("#google_plus_right").stop(true,false).animate({right: -203}, 500); });
jQuery("#feedburner_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },
function(){ jQuery("#feedburner_right").stop(true,false).animate({right: -303}, 500); });
jQuery("#youtube_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },
function(){ jQuery("#youtube_right").stop(true,false).animate({right: -303}, 500); });
});
</script>

     8.Guarde Plantilla.
     9.Vaya ahora a Diseno.
    10.Ahora da Clic en Anadir un Gadget.
    11.Seleccione la opcion HTML/Javascript
    12. Copie el codigo de abajo y peguelo en espacio de contenido.

<div id="on"><div id="facebook_right"style="top:8%;"><div id="facebook_div"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7bNzSeA2EwTlvJtdhVqwNovKcxjC7q3iF1AivR1PMPTXHLOFl86CISO4_9fCJxOnWion4ZBVdVd2M-WRgoX6AJe0EQevDWc8N_eaDoqSEScLpyzeOF8cTQESOUxvXblkauGu2OVuqNg/s1600/Facebook.png"alt=""/><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FTu Enlace de Pagina Fanaticos de FACEBOOK&amp;locale=en_GB&amp;width=200&amp;connections=9&amp;stream=&amp;header=false&amp;show_faces=0&amp;height=356"scrolling="no"></iframe></div></div></div><div id="on"><div id="twitter_right"style="top:25%;"><div id="twitter_div"><img id="twitter_right_img"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyTSOFwJwby8wimAnuSCLEXN6GWEqS5GfrokyKroonVUzI9VT7IQALRnjpLATIY-yA5sMnV7vVWr0pi1bedP9ZdT6YvVF-zUVgfDxUEutmo7h50J7WIW-toR5ZiaHFoXkbxm0KhqdRBg/s1600/Twitter.png"/><script src="http://widgets.twimg.com/j/2/widget.js"></script><script>new TWTR.Widget({version:2,type:'profile',rpp:4,interval:1000,width:246,height:265,theme:{shell:{background:'#63BEFD',color:'#FFF'},tweets:{background:'#FFF',color:'#000',links:'#47a61e'}},features:{loop:false,live:true,scrollbar:false,hashtags:false,timestamp:true,avatars:true,behavior:'all'}}).render().setUser('YOUR-TWITTER-ID-Va aqui').start();</script></div></div></div><div id="on"><div id="google_plus_right"style="top:42%;"><div id="google_plus_div"><img id="google_plus_right_img"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH0EnYGF4tg7-I_YxMxqqmnIxL3wYyU5E-dDU_qZLVlYSyvvL_T6nOhxgVMPRpvZDWactb8Tb6xGCVM-exyVxLLWxiFHpz9MQoyoGBeU_UbfPiJfZoG0JWZzG-Dipdu52XTEItqPQCxA/s1600/Google+Plus.png"/><div style="float:left;margin:1px 0px 0px 2px;"><script type="text/javascript">mbgc='006ec9';ww='200';mbc='006ec9';bbc='006ec9';bmobc='3b71c6';bbgc='006ec9';bmoc='3F79D5';bfc='FFFFFF';bmofc='ffffff';tlc='ffffff';tc='ffffff';nc='ffffff';bc='ffffff';l='y';t='Add_Me_To';fs='20';fsb='13';bw='3F79D5';ff='4';pc='4889F0';b='0';pid='102256859586166648016';</script><script type="text/javascript"src="http://widgetsplus.com/google_plus_widget.js"></script></div></div></div></div><div id="on"><div id="feedburner_right"style="top:59%;"><div id="knfeedburner_div"><center><br />&#9660;&#9660;&#9660;&#9660;&#9660;&#9660;&#9660;&#9660;&#9660;&#9660;&#9660;&#9660;<h4 style="color:#F66303;">Puedes Tambien Recibir Actualizaciones Gratis en E-Mail Updates:</h4><form action="http://feedburner.google.com/fb/a/mailverify"method="post"target="popupwindow"onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=El ID del-FEEDBURNER-Aqui','popupwindow','scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10"class="enteryouremail"name="email"value="Enter Your E-Mail Here..."onblur="if (this.value == &#39;&#39;){this.value = &#39;Enter Your E-Mail Here...&#39;}"onfocus="if (this.value == &#39;Enter Your E-Mail Here...&#39;){this.value = &#39;&#39;}"type="text"/><input value="Tu Nombre de FEED va aqui"name="uri"type="hidden"/><input value="Submit"class="submitbutton"type="submit"/></form></center><img id="feedburner_right_img"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSVzx_q5ssjj9_WARCeKJSBPyBX6Oyn0H-dos6A0cD7HBgrLeudLq812dhNwnHBNmfGaIlJQegLW-zRLf5bR3Va6wuk_b4_P7qySli7OZqGLyPdVqEnOkSWvLQgRakrdrCSQwEigNitA/s1600/Subscribe.png"/></div></div></div><div id="on"><div id="youtube_right"style="top:76%;"><div id="youtube_div"><img id="youtube_right_img"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzDsUOFy9guj_6xWw5WzLLJKArrJh1vlG2p120FZVrdTH_42WBusbXKyJ3OIl1maVei5otJGeHzH4hPNjwWVOB47Oxg-gv1zD4ELaWP09QR34NHih4bDoMgIvj6UwTG6xW4F0wMsC_5Q/s1600/YouTube.png "/><div style="float:left;margin:1px 0px 0px 2px;"><iframe src=http://www.youtube.com/subscribe_widget?p=Tu ID deYOUTUBE-ID-Aqui ="height:105px;width:300px;border:0;"scrolling="no"frameBorder="0"></iframe>
</div></div></div>
</div>

13.Guarda el gadget y chequea tu blog para que veas esta barra al lado derecho de tu pantalla.Listo.
Nota:Reemplaza lo que esta en ROJO en codigo anterior por direcciones y ID de tu cuenta en redes sociales  .

Read More

Nueva interfaz de Social Metro-Style para su Blogger

Hola Amigos! En este tutorial compartire el truco o widget de compartir en medios sociales  con un efecto de animacion.Este es un widget de la nueva generacion de widgets como los diseñados de Window8.Hara la apariencia de tu blog mas agradable y atractivo.Lo puedes andir atu blog de blogger siguiente estos cortos y simples pasos.

Ejemplo diseno:Puedes verlo en vivo en este sitio en barra lateral.

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

<div class="MH" id="MH">
<ul id="MH-social">
<li><a class="fb" href="Tu Enlace De Pagina De-FACEBOOK-Aqui "></a></li>
<li><a class="tw" href="Tu-Enlace-De-TWITTER-LINK-Aqui"></a></li>
<li><a class="gp" href="Tu-Enlace-De-Profile-De-GOOGLE PLUS-Aqui"></a></li>
<li><a class="fd" href="Tu-Enlace-De-RSS-FEED-Aqui"></a></li>
</ul>
</div>
<style>
#MH-social{width:305px;float:left;margin-top:10px}#MH-social li{position:relative;cursor:pointer;padding:0!important}#MH-social .fb,.tw,.gp,.fd{position:relative;-moz-transition:all .4s ease-in-out;-webkit-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out;z-index:5;display:block;float:left;margin:1px}#MH-social .fb{width:150px;height:152px;background:url(//goo.gl/6xmUk) no-repeat center center #3b5998}#MH-social .tw{width:150px;height:74px;background:url(//goo.gl/oyiFK) no-repeat center center #3b5998}#MH-social .gp{width:150px;height:74px;background:url(//goo.gl/oT0kF) no-repeat center center #3b5998}#MH-social .fd{width:302px;height:74px;background:url(//goo.gl/ncoLY) no-repeat center center #3b5998}#MH-social li:hover .fb{-moz-transition:all .1s ease-in-out;-webkit-transition:all .1s ease-in-out;background:url(//goo.gl/MH8AP) no-repeat center center #3468b6}#MH-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #4099ff;-moz-transition:all .1s ease-in-out;-webkit-transition:all .1s ease-in-out}#MH-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #e44524;-moz-transition:all .1s ease-in-out;-webkit-transition:all .1s ease-in-out}#MH-social li:hover .fd{background:url(//goo.gl/JFGqn) no-repeat center center #f60;-moz-transition:all .1s ease-in-out;-webkit-transition:all .1s ease-in-out}
</style>

Cambie todo lo que esta en color ROJO con tus enlaces Medio Sociales

Save It.

Read More

Como Achicar Direccion de Facebook

En este tutorial te enseñare  como usar un nombre de dominio de facebook corto y simple.Normalmente la Url de tu cuenta de facebook account luce asi:

http://www.facebook.com/profile.php?id=1233731616.

Esta forma resulta un tanto dificil de recordar.Pero usando este truco que te mostrare podras conseguir una sencilla y simple direccion o Url para tu cuenta de Facebook.

Como ejemplo tomemos el primera direccion:

http://www.facebook.com/Carlos.ruiz

Para añadir tu propio dominio de facebook sigue estos simples pasos.

1.Entra a tu cuenta de facebook.
2.Ahora ve a http://www.facebook.com/username/
 3.Puedes ver la pantalla como la siguiente.Da Click en "Mas".

 4.Ahora escribe el nombre de usuario que desees como el ejemplo de abajo y da clic en"Check availability".

Si tu nombre de usuario esta disponible da click a conseguir  le das "Confirmar".

Ya todo listo ya tienes tu nombre de dominio mas corto de facebook ,facil de recordar.

Read More

Widget De Suscripcion A Medios Sociales y Rss Para Blog De Blogger

Hola! Espero esten bien.Bueno en dia de hoy les mostrare el simple truco para anadir un asombroso Widget de subscripcion con Rss y Medios Sociales.Usar este widget puedes enlazar tu profile de redes sociales de Facebook, Twitter y Rss y para subcribirse. Este te ayudara a conseguir updates por email.

Como Anadir Este Widget a tu Blog De Blogger
1.Entra a Blogger>>Diseno>>Anadir un Gadget>>Selecciona Html/Javascript y pega el siguiente codigo dentro espacio en blanco.

<style> .subscribebtrix { border: 2px solid #000000; padding: 8px; width: 310px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .subscribebtrix:hover { -moz-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1); -webkit-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1); box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1); } .tbimailbox { border: 1px solid #D3D3D3; -webkit-border-radius: 4px; border-radius: 4px; -moz-box-shadow: 1px 1px 1px 1px rgba(255, 172, 84, 0.4) inset; -webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset; box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset; color: #666; font: 14px "trebuchet ms", sans-serif; padding: 7px 15px; width: 160px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tbimailbox:hover { -webkit-box-shadow: none; box-shadow: none; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .btrixsubmit { font: bold 12px Tahoma, Geneva, sans-serif; font-style: normal; color: #ffffff; background: #ff5714; border: 0px solid #ffffff; text-shadow: 0px -1px 1px #222222; box-shadow: 2px 2px 5px #000000; -moz-box-shadow: 2px 2px 5px #000000; -webkit-box-shadow: 2px 2px 5px #000000; border-radius: 10px 10px 10px 10px; -moz-border-radius: 10px 10px 10px 10px; -webkit-border-radius: 10px 10px 10px 10px; padding: 8px 15px; cursor: pointer; margin: 0 auto; } .btrixsubmit:active { cursor: pointer; position: relative; top: 2px; } .btrixsubmit::-moz-focus-inner { border: 0; padding: 0; margin: 0; } </style> <br /> <div class="subscribebtrix"> <div style="color: #666666; font-weight: bold; font: 22px Oswald, cursive; margin: 0px 0px 10px 15px;"> Free Updates to your Inbox</div> <div style="margin: 10px 0 0 6px;"> <form action="http://feedburner.google.com/fb/a/mailverify" class="emailform" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggertrix', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" style="margin: 0pt;" target="popupwindow"> <input name="uri" type="hidden" value="bloggertrix" /> <input name="loc" type="hidden" value="en_US" /> <input class="tbimailbox" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" type="text" value="Enter your email..." /> <input alt="" class="btrixsubmit" title="" type="submit" value="Subscribe" /> </form> </div> <div style="border: none; color: #666666; font: 22px Oswald, cursive; margin: 25px 0 0 5px;"> Follow us:</div> <div style="margin: -32px 0 0 120px;"> <a href="http://www.facebook.com/ciudadblogger" target="_blank" title="Join us on Facebook"><img alt="facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD6FAzY-RZS-hDx8sumW6gwt6gyIthv_Wbll18k4rRrHTECAf-VOixFKZ8GrUrbc4PZhdqYRSxFI34VTC2LhbbhOYsGwQfaWs2qjMXBGFFM8GxBjqJlDnP5AuNGbmKusH9r_RLl2fKbQg/s1600/facebook_btrix.png" /></a> <a href="http://www.twitter.com/ciudadblogger" rel="nofollow" target="_blank" title="Follow us on Twitter"><img alt="twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGZjf2X9Z_cffalZsBHZfwQ87-wszpeh4B9hLl5C4_3uNxD6lyOl5Cdxy14vuFOnREuAGTC7Qis-xN0SkvhjPIsevKu97FTM27aGjHiz2mRDefEC6FqAn4RD7QahsVGgpcP_yBtyVQ_AI/s1600/twitter_btrix.png" /></a> <a href="https://plus.google.com/UserId" rel="nofollow" target="_blank" title="Follow us on Google+"><img alt="gplus" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFKAQgqIcpgzMkp_vm_L2UMw-uwkBm46W_rMmaRWoSGZPLTblO-wG6vu-va8IVVEjCSX7RR4vhyphenhyphenwwYmtTE9W6iy5OsjMettEBHjdN_3xHyYaBtGFi9xg_V7FIj2Mhbyf7yNxRG02eEkwo/s1600/googleplus_btrix.png" /></a> <a href="http://www.pinterest.com/ciudadblogger" rel="nofollow" target="_blank" title="Follow us on Pinterest"><img alt="pinterest" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWF22fBsR6uOYJhhlzGnqi1pqVIESO16oyNjIc3pHhhFZv5o1MxayZxskKbG-CWkd-xH21_AmZ83lKdeZafxjF90fR4yNoBboABGEw-AC_mrmMB5ZD43-ocX1JvWOerluHXN_H8b3ApGA/s1600/pinterest_btrix.png" /></a> <a href="http://feeds2.feedburner.com/ciudadblogger" rel="nofollow" target="_blank" title="Subscribe to RSS"><img alt="rss" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsZ2QW6HpwEzXLReSsZsVdRpPOgCIHhPPBEITgsCYm7DpxOWxUzee-c3gipwqmgT8HhMp1TfCOPhnjQn8XSBJyGtCU_-1dVOF0TMD7mDKaBiyxy8s5olAbSMI9lZ5p4KtpJJbI58VKznw/s1600/rss_btrix.png" /></a> </div> <div align="center"> <a href="http://feeds.feedburner.com/ciudadblogger"><img alt="" height="26" src="http://feeds.feedburner.com/~fc/ciudadblogger?bg=FF9900&amp;fg=444444&amp;anim=1" style="border: 0;" width="88" /></a></div> </div>

Reemplaceciudadblogger con tu ID de Feedburner
Reemplace ciudadblogger con tu nombre de usuario Facebook
Reemplace ciudadblogger  con tu nombre de usuario  Twitter
Reemplace ciudadblogger con tu nombre de usuario Pinterest
Reemplace UserId con tu nombre de usuario de Twitter

5.Ahora guarda tu  HTML/Javascript'.

Listo...

Read More

Como añadir el boton de Facebook Like

Como añadir el boton de Facebook Like debajo del titulo de la entrada  para propagar tu articulo en red social mas efectivamentepues asi llamas de inmediato la atencion al lector. Si deseas añadir  el codigo de este boton debajo de los titulos de tus entradas  de tu blog de blogger entonces siga este sencillos pasos:

Ejemplo:

Añadir el Boton de Facebook Like a Blogger

1. Entra en Blogger > Diseño> Editar HTML
2. Haga copia de plantilla
3. Busque elsiguiente codigo

<data:post.body/>

     4.   pega el siguiente codigo arriba ,<data:post.body/>

<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; width:100px; height:20px;'/>

5.   Guarde la Plantilla y Listo.

Visita tublog para verla funcionando debajo de titulo de las entradas.

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