Añade Botones Isometricos en Blogger

En este tutorial te mostrare como añadir unos botones isometricos para compartir en los medios sociales y elegante con codigos de CSS3 a blog de blogger . Puedes insertarlo en tu pagina como un widget facilmente en simples pasos.Atractivo colores y animado al pasar el cursor de tu mouse.

Ejemplo:Ve a esta direccion http://tricksblogspot.blogspot.com/
Para instalarlo en tu blogger sigue estos pasos.
1.Entra en tu cuenta de Blogger

2.Selecciona Diseño

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

4. Dentro de este copia y pega el codigo de abajo.

<style>
/* Ciudadblogger  */
.envolturaburbuja{
list-style-type:none;
margin:0;
padding:0;
}
.envolturaburbuja li{
display:inline;
width: 60px;
height:60px;
}
.envolturaburbuja li img{
width: 50px; /* ancho de cada imagen.*/
height: 50px; /* alto de cada imagen.*/
border:0;
margin-right: 4px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}
.envolturaburbuja li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}</style>

<br /><center>
<br />
<ul class="envolturaburbuja">
<li><a href="http://www.digg.com/Nombre de usuario"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1DaSUOWcSc54NLEkPVUgf6aaY4q1fZ6j_oCqAcB0hJz4Vj-iEM19E2b-XUUzqSi0CJY-bw3KovPuufVxK49MwI0Pg8FGEcooBIW3likANB1MsoWxpoqfZMa8AtAkPzdfMMi65oR3hkt8/s1600/btrix-small-digg.png" title="Añadi a Digg" /></a></li>
<li><a href="http://www.facebook.com/trucosdeblogger"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtPIsLhA3cW1XwafvgrRyo8YeSWntBCcwQLDjlh0rJL7PHr3K3ijsxGefUNsBOsT8pz0qNm85VyWDej4s0aw2cb3_DKmbFOU6JBA1IiOfGF9Jc807_JSIdNmUMzRTQdW2zGPzEKhoMLIs/s1600/btrix-small-facebook.png" title="Añadir A Facebook" /></a></li>
<li><a href="http://www.plus.google.com/nombredeusuario"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhuNxUU8zvqUiCoAX2Wrj0hYtMYmAt01d6FOPWH3u4Oy_JsxapD7HbhRQCSql2VruabJC9RE4DYKesQGdBipgvxLA5wuiZd7a4k79_ZK5HCUTXOCHRrRuVoLHctyqonEnUFb6haRLyhoc/s1600/btrix-small-google.png" title="Añadir a Digg" /></a></li>
<li><a href="http://www.twitter/andante772"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJgQb4DaDQdQIgfzOSS3URpH315jxEWQZvpgBthL4P9ZCmnCCrdbFVoT3-VSHhrfrHA3ydGrNi7EqukHsQWD6yFTcXRLGG6ccP_JxI99-ak4DErZxcI7p8J0danRp6w27BfP2ICWa2JJs/s1600/btrix-small-twitter.png" title="Añadir a Twitter" /></a></li>
<li><a href="http://feeds2.feedburner.com/Supertrucosdeblogger"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3oZpwEX5537eE99u_iY9mifLkckeDGUg9iyIk3HCQjweFR4pRJVjCWBuA9-Lzk0APb_ASmrIWm66D2pEOi8dsX3YKt9ihT0EqIaCrvzzJhGYGkEj1amRAPyMpeRKapz4biP5UxJnXlFM/s1600/btrix-small-rss.png" title="Añadir RSS Feed" /></a></li>
</ul>
</center>

Despues que pegues el codigo:
*Reemplace trucosdeblogger con tu nombre de usuario de facebook username
*Reemplace andante772 con tu nombre de usuario de  twitter
*ReemplaceNombre de usuario con el nombre de usuario de digg
*Reemplace Supertrucosdeblogger con el nombre de usuario de feedburner
*Reemplace nombre de usuario con nombre de usuario de google plus

5. Para finalizar guarda tu HTML/Javascript'.y listo tus visitantes disfrutaran de este animado compartidor en redes sociales en tu blog de blogger.

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

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

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

Widget de Slide Eggs Bookmark Para Blog De Blogger

En este instante te dare un widget muy atractivo en forma de huevo para que lo integres a tu blog que ayudara a esparcir tus articulos en las redes sociales.Se trata de un atractivo truco que incluye el Efecto Hover este incluye los botones de Facebook compartir, Twitter,Google +, Blogger, LinkedIn, Stumble Upon, Email.

Como anadir este widget en forma huevo a tu blog de blogger.


1. Entrar a la cuenta de blogger e Ir a Diseño >> Edición de HTML
 
2. Encuentre la siguiente etiqueta usando Ctrl + F </ head>

3. Pegue el código de abajo antes de  </ head>

<script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/><script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/><script type='text/javascript'>stLight.options ({publisher: &quot;bea50586-2b9f-448d-947a-01385f28e305&quot;, onhover:false}); </script><link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/>

 5. Ahora busca el siguiente código mediante el uso de Ctrl + F </ body>

6. Pegue el código de abajo  antes de eiqueta </ body>

<div style='position: fixed; bottom: 2%; left: 2%;'><div class='shareEgg' id='shareThisShareEgg'/></div><script type='text/javascript'>stlib.shareEgg.createEgg(&#39;shareThisShareEgg&#39;, [&#39;facebook&#39;,&#39;twitter&#39;,&#39;googleplus&#39;,&#39;linkedin&#39;,&#39;blogger&#39;,&#39;stumbleupon&#39;,&#39;sharethis&#39;], {title:&#39; <data:blog.pageTitle/>&#39;,url:&#39;<data:blog.url/>&#39;,theme:&#39;shareegg&#39;});</script><a href="http://www.ciudadblogger,info/">Blogger Widgets</a>

7. Ahora guarde la plantilla, ya está.

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 Crear Una Barra De Medios Sociales Para Tu Blog

No hay duda que, por anos Social Media ha probado ser el recurso mas prominente de trafico por anos a los websites. Sin Embargo eso no significa que el sitio web tenga el carisma o la chispa  para obtener el trafico de visitantes. 

La manera ideal  de tener exposicion social es convertir tus visitantes diarios en seguidores sociales. Ahora el problema es, como debemos convertirlos en nuestros Seguidores Sociales ?La Repuesta es bastante directa podemos utilizar algunos widgets de redes sociales  que guiara a los visitantes a las diferentes plataformas sociales i.e. Facebook, Twitter, YouTube, Google+  etc.Por esa razon, hemos creado otro widget paa los amantes de medios sociales. Hoy en este articulo, aprenderemos Como Crear Una Barra De Medio Social En Blogger?.

Que es una barra de Social Media ?

1. Este es un widget que tiene 8 de los mas populares redes sociales integrados en forma de barra. Este flota a lo largo de la pantalla.Cuando, un visitante baja y sube la pagina este widget se movera con el. No es una ciencia detras de este widget por que todo es hecho con la ayuda modesta de jQuery.  Considere la siguiente toma pantalla y disfrute de la accion en vivo. 

Donde Podria Aparecer el Widget de Social Media Bar ?

Este es extremadamente  flexible, y lo podemos poner ya sea en Lado Izquierdo, Lado Derecho, y Arriba y aun Debajo.Pues, usamos jQuery.Sin embargo,tenemos que usar unos pocos comandos como “bottom”, “top”, “left” and “right” para mostrarlo en diferentes partes de nuestro website.Para aclarar mira la siguiente foto.

Como Anadir el Widget de Social Media Bar en Blogger?

Siga los simples pasos para implementarlo en tu blog.

Entra en Blogger.com >> Plantilla >> Editar HTML >> Proceda.

En la Plantilla busca la siguiente etiqueta </body> y justo arriba de esta pega el siguiente codigo. No cambies el codigo pues dejara de funcionar .

Nota:Si no puedes hallar la etiqueta </body> , puedes pegarlo debajo de etiqueta <body> . 

<!-- import Scripts -->
<script type="text/javascript" src="https://mybloggerlab.googlecode.com/files/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="https://mybloggerlab.googlecode.com/files/mblsocialbar.js"></script>
<div id="scolder">
<script type="text/javascript" src=" http://mbl-flipper-google-blogger.googlecode.com/files/socialflipmin.js"></script></div>
<link href='http://mybloggerlab.com/StyleSheet/mblsocialbar.css' rel='stylesheet' type='text/css'/>

<!-- MBL Social Media Bar For Blogger -->
<script type="text/javascript">
$(document).ready(function(){
$.mblSocialBar({
items: {
twitter: { url: '#', text: 'Follow me on twitter' },
facebook: { url: '#', text: 'Profile on facebook' },
rss: { url: '#', text: 'RSS Feed' },
google: { url: '#', text: 'Profile on google+' },
youtube: { url: '#', text: 'Profile on youtube' },
orkut: { url: '#', text: 'Profile on orkut' },
myspace: { url: '#', text: 'Profile on myspace' },
digg: { url: '#', text: 'Profile on digg' },

},
show: 8,
position: "left",
skin: "clear"
});

});
</script>

• Anade URL: Reemplace todos los #  con tus URL de acuerdo a tu gusto.

• Cambiar de Posicion:Para cambiar este widget de posicion reemplace “Left” por “right”, “top” o “bottom” en el codigo de acuerdo a como desees. Recuerda: No uses Letras Mayusculas pues podria dejar de funcionar.

• Mostrar Menos Sitio Sociales:Para mostrar menos sitios sociales solo reemplace “8” con numeros menores tales como i.e. 7, 6, 5 y mostrara menos botones. Sin embargo, comenzara mostrando una flecha que permitira a los visitantes tener acceso a los sitios escondidos.  

• Cambiar Fondo: Hemos anadido 2 temas  a esta barra de medios sociales  i.e. “claro” y “oscuro”.Pra cambiar el fondo del tema “claro” a oscuro solo reemplace claro a oscuro en el codigo de JavaScript. 

Todo LISTO: Despues de personalizartodo de acuerdo a sus necesidades , guarde la plantilla presionando el boton de “Guardar Plantilla” .Visita ahora tu sitio para que veas este nuevo widget en funcion.

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

Como Indezar Su Pagina Web Rapidamente en Google

Google 貼牌冰箱（Google Refrigerator） (Photo credit: Aray Chen)

Para una cantidad de bloggers y webmasters, estar en el indice de Google rápidamente les ayuda a disfrutar de los beneficios de las estrategias de SEO a un ritmo mucho más rápido.

Cuando su blog o pagina web es indexada hace que su presencia en Google sea notoria en los resultados de búsqueda.  Google controla el 70 porciento de las busquedas en internet esto hace que su pagina web o blog este presente a un mayor numero de internautas aumentando las visitas a tu web.

El paso de la presencia en google es de suma importancia para nposotros los bloggers y webmasters . Pues presentaras el contenido de tu pagina a mayor lectores sin eso tu web o blog no tendra la importancia relevente que necesita en los buscadores Te dire  cinco efectivos pasos cómo puedes hacer que tu blog o sitio web sean indexados por Google rápidamente.



Idea 1: Envía tu blog / sitio web a los motores de búsqueda, directorios, evaluadores de sitios, etc

Envia tu blog o tu web directamente a los motores de búsqueda es la forma más rapida de ser indexado por Google.Sin Olvidar  motores de búsqueda populares, como Yahoo! y Bing, constituyen una pequeña porción de la pizza.


Idea 2: Establezca su presencia en los sitios de medios sociales como Facebook, Twitter y LinkedIn

 El establecimiento de su presencia en los sitios de medios sociales como Facebook, Twitter y el sitio de redes profesionales LinkedIn es también una forma de establecer su experiencia y autoridad sobre su nicho.

Esto funciona de dos formas: en primer lugar le ayuda a alcanzar y ser más personal a su nicho de mercado, en segundo lugar le ayuda a obtener más de retroceso.(backlinks)Los Sitios web más activos tienen una mayor probabilidad de ser visitados por los motores de búsqueda.

Idea 3: Inicie fuerte - lanzar artículo agresivo y campañas de video marketing

Un buen comienzo es necesario si usted realmente desea conseguir un índice y lograr mayor posicionamiento en Google. Lanzamiento de campana de  comercialización del artículo y video con la ayuda de los directorios como Ezine, Build My Rank y plataformas de intercambio de vídeos YouTube es ante todo una manera genuina de empezar fuerte y la indexación de Google más rápido que de costumbre.

Sea agresivo con sus campañas de marketing - recuerda el proverbio latino, "la fortuna favorece a los audaces".

Consejo 4: Si está utilizando WordPress como CMS, aproveche sus multiples plugins de SEO

Si está utilizando WordPress como sistema de gestión de contenido, asegúrese de que usted tome ventaja de su SEO-dirigido plug-ins. Algunos de los mejores SEO plugins para WordPress incluye todo-en-uno-SEO pack, Automatic SEO Links, Google XML Sitemaps y Platinum SEO Plug-in.

All-in-one-SEO Pack es uno de los más utilizados plug-ins por bloggers y webmasters y hace un poco de todo -. Perfecto para los bloggers y webmasters novatos Automatic SEO Links le permite elegir una determinada palabra clave o frase clave para crear el enlace automático mientras que Google XML Sitemaps son sitemaps que pueden ser leídos por el motor de búsqueda Google.

Platinum SEO Plug-in, por el contrario, le ayuda a evitar el contenido duplicado y tiene un número de características verdaderamente únicas y útiles.

Idea 5: No  olvide la importancia y la calidad del contenido

La calidad es siempre el elemento más importante cuando se trata de obtener un índice y alcanzar altas calificaciones. Todas las técnicas de SEO son inútiles si usted no las usa regularmente postear o escribir contenidos de calidad para tu blog o página web. Google favorece tu sitio web.

Read More