Mostrando entradas con la etiqueta gadget. Mostrar todas las entradas
Mostrando entradas con la etiqueta gadget. Mostrar todas las entradas

domingo, 21 de abril de 2013

widgets de cuantas personas visitan tu blogs, sin registrarte

estadisticas de tu blogs



Para quienes quieran saber cuantos y de donde visitan tu blogs whos.amung.us es una excelente opción y es muy fácil de agregar ademas tiene varios widgets en los que podemos escoger

Instalación de estadísticas en su sitio web es muy fácil. No hay ningún registro y que son completamente gratis! Basta con copiar el código html que aparece a continuación y pegarlo en cada página que usted desea realizar un seguimiento.  


Si te intereso Visita  el sitio




sábado, 23 de marzo de 2013

widget de redes sociales en 3D con efecto Rotatorio



Seguiendo con los Widget de redes sociales, a diferecia de los otros que e pueblicado este me a gustado mucho ya son imagens 3D y tiene un efecto Rotatorio que le da un toque unico.



Para agregar este widget ve Diseño, a Añadir Gadget, HTML/Javascript y pega lo siguiente:

<style> #social a:hover {background-color: transparent;opacity:0.7;} #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social 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="social"> <!--Start Rss Icon--> <a title="Grab Our Rss Feed" href="URL DE FEED RSS" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijt6duuBzMRq6EYikgLtDAsfFbKQ-TZOH2BsZ5POUAwJjMkPjOstYcoQFO5tRKQEMYWVe1Rw-R81ThZtrwXoSXUDodq02QySLy8sPmwGkTJgiuNw4WISwI12-0OkFfZhU4eOEEdh7geWJW/s1600/RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Rss Icon--> <!--Start Email Rss Icon--> <a rel="nofollow" title="Get Free Updates Via Email" href="URL DE FEED DE EMAIL" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpR37h-9rFJRXGCPcJL478S_2CUm6LAWHr9RYoR_jNJdebMe8UTuVNmYuXbqAzUp_6poLfqZ5DFNNdAisGXYWln05VeQCz-LfQS7R3HjH0zXYCMJJk7MhiCPd5DQkbz7AG1BBVhm3YQJco/s1600/RSS-EMAIL-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Email Rss Icon--> <!--Start Facebook Icon--> <a rel="nofollow" title="Like Our Facebook Page" href="URL DE TU PAGUINA DEFACEBOOK" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9zvNpXAL5tRsYhkhM4dS7DLXUmOhKVojhn6-PZvX-W2PM3uUZoQAwOTqVnfjji0DTl_qF5EuyZRn5grD4ESCp3rR90z8Zb8eb7yC30z54NP4albxw6FgtCVg48h6V3ze80_jRVIM5pWfx/s1600/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Facebook Icon--> <!--Start Twitter Icon--> <a rel="nofollow" title="Follow Our Updates On Twitter" href="URL DEVTWITTER" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdzeH5Af-osEEZa8pDCr2-yRzUJ82Mr-2mi1Y_LpxDYkaCuj0lmvNcTjWtjex9rPyL1DCRvF_VEuMj5rXgYFqX6xwum7s56H7uWSw0FdzU8VKbGTyzdax1Na4nA-nRK7SznPkYYgUSDDOi/s1600/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Twitter Icon--> <!--Start Google+ Icon--> <a title="Follow Us On Google+" rel="nofollow" href="URL GOOGLE-PLUS" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXbH2jwn6IU5A8wmjoGeKYSf9oYIBaH5D2vDG35bhYgCO5EhgK8zN11YdA1xPo90H2tI0_31DDka089HJIE3P24r0fcFXB6l9wfrJS3MZuCsDHqW9OJQhpljw-RlejA6UxDI-ani8FF9W0/s1600/GOOGLE-PLUS-48x48.png"/></a> <!--End Google+ Icon--> <!--Start Pinterest Icon--> <a title="Follow Our Pins" rel="nofollow" href="URL PINTEREST" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjupIYuUV96EQjv_hvfx8vOk6M39tM_r_oa7Wtik3B_qL1EBP_IsjprdiTO_4dd9UnBYtAUR8VhG1Kan3KdnN7iI5cdNXFIGpxbFYldkC80i-ekk9sDrMKvAf5XusI9A6WguV8zlwAkM3dl/s1600/PINTEREST-48x48.png" alt="Follow Me on Pinterest" /></a> <!--End Pinterest Icon--> </div><br/> <!--Start Feed Count Button--> <a href="FEEDBURNER-URL" target="_blank"><img alt="spice up your blog" src="http://feeds.feedburner.com/~fc/spiceupyourblog?bg=ff9933&fg=000000&anim=1" style="border:0" /></a><!--End Feed Count Button--> </center>
Ahora simplemete cambia todo lo que esta en rojo y listo.

La Vista Previa.




Icon Icon Icon Icon Follow Me on Pinterest

spice up your blog

Elegante Widget de redes sociales y suscribete para blogger

Esta ves les traigo un bonito widget de las redes sociales mas comunes, dentro de ellas Facebook, Google+, Pinterest, Twitter, Rss y tambien suscripcion por Email.


Para agregar este gadget a tu blogs, Para agregar este widget ve Diseño, a Añadir Gadget, HTML/Javascript y pega lo siguiente:


<style>
.social{background:none repeat scroll 0 0#fff;border-bottom:1px solid#F0F0F0;height:90px;padding:8px}.social li{float:left;margin-right:4px;text-align:center;width:52px;list-style:none}.social li.last{margin-right:0}.social li a{color:#666666;font-size:11px;line-height:34px;opacity:0.6;padding-top:42px}.social li a:hover{color:#666666;opacity:1;text-decoration:none}.social.social-feed{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjRmZ7cDffRk8uruBKo_oPMG-DIVisaZT-tc1VIrv_eTEk7ps03TdxIwQ9eNRSjlU6ZM5CWqid8M0B1VXERh1lBeaQgkSBrA4jQBj39kbD1NFpS1KWp7VX6UUcmqu-7U0TuXf5gZt6p8nE/")no-repeat scroll 0 0 transparent;display:block}.social.social-email{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbNqcP67Jo1IgI77Y0rDu5hTSiFg2YbLcWX2ySzL92XyJBehzYl1z6enbCihzqeOvKOeAf9VEJdBUl2K-Ht2-XEoMwi07fq3ZAvLOD_iA9HRhWh_Ee0_dcA30F1HQNoOZdbdr1gHkekPHC/s1600/email-feed.png")no-repeat scroll 0 0 transparent;display:block}.social.social-twitter{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9tzXRaIwXpJOatmW2OnPts1Ep25SeJdumrK_WXiP7yegFhyphenhyphencyM-Sdg_fRfcsIcXx1LprIjeCWqK94jD0xGugMDZ4d0CLa3ghv6VXYUmoKzz4UTEeFSmd_kpPPoFH96tLtzPDTvwkyBThX/")no-repeat scroll 0 0 transparent;display:block}.social.social-facebook{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR2izl-3DYFzIRAc89xMDlCEvnyK0ae9aARs98mBjLVBh9c6JjSx_qHA0vNotDD4YBjlnBCvXwFjjlrtdY92J_lFOskdGqx8lP2hXo6JSwd13t4JcZixjH4ZoefIEsT6mGWa0xikEOC0Hy/")no-repeat scroll 0 0 transparent;display:block}.social.social-googleplus{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXLJy-gddtJBtHcJrWov7CWA3N4tPNcUMOhOm6G4BGBPTctMReleQsajWB5CiQ3N3a7ErexD-5kBtT_DBLvoqKuG4C3GdvebhAGxaghvjqYSTCq75UMKpBshyphenhyphen5SZeERgJPzRy0jyQ8lzNx/")no-repeat scroll 0 0 transparent;display:block;margin-right:0}.social.social-pinterest{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYg8DiUcBjzX0LgkYqBg8taf08Md24SGN2p7ZfVnVQjg-tQqP3LOG4U_IYGM9y2nhJU8HwVZVEgyCDp13tgVIFc9GOxp2HyfTPDNSc8D6ErN9viS0LQbU3kZlryUZzbhOXTXkeUFcE_L2A/s1600/pinterest-icon.png")no-repeat scroll 0 0 transparent;display:block}
/* from http://www.mdtutoriales.blogspot.com */
</style>
<ul class='social'>
<li><a class='social-feed' href='http://feeds.feedburner.com/Tublogs' rel='nofollow' target='_blank'>RSS</a></li>

<li><a class='social-email' href='http://feedburner.google.com/fb/a/mailverify?uri=tublogs&loc=en_US'
rel='nofollow' target='_blank'>Email</a></li>
<li><a class='social-twitter' href='http://twitter.com/tublogs' rel='nofollow' target='_blank'>Twitter</a></li>
<li><a class='social-facebook' href='http://facebook.com/tublogs' rel='nofollow' target='_blank'>Facebook</a></li>

<li><a class='social-pinterest' href='http://pinterest.com/tublogs/' rel='nofollow' target='_blank'>Pinterest</a></li>
<li class='last'><a class='social-googleplus' href='https://plus.google.com/Id de tu perfil/posts'>Google+</a></li>
</ul>
<small><a href="http://www.mdtutoriales.blogspot.com">Tutoblogger</a></small>

Todo lo que esta en rojo es lo que tienes que editar, bueno en el caso de google+ lo e puesto en azul en esa parte va el ID de tu perfil, el ID son todos los numero que aparese en el url de tu perfil por ejemplo:


el url de mi perfil de google+  https://plus.google.com/u/0/107424685125055103818/posts

en este caso mi ID es : 107424685125055103818

miércoles, 20 de marzo de 2013

Contador Flash de Visita para Blogger por paises



Para todos los que quiere saber cuantas personas visitan su blogs y mostrar dicha información también a los lectores, en esta ocasión les presento un contador  de vistitas que nos permite esto. se trata de 99counters que nos permite visualizar cuantas personas visitan nuestro blogs, de que país lo están visitando con pequeñas banderas de cada país y en total diario de visitas.

Con Tu cuenta gratis de 99counters ahora puede crear contador de red personalizadas para su sitio de red, blog y perfiles sociales en red.

El uso de 99counters es una manera efectiva y poderosa para obtener instantáneamente estadísticas de red

Para quienes quiera agregar este contador visiten  99counters y registrate.

martes, 12 de marzo de 2013

Etiquetas al Estilo Taringa en Blogger


 Bueno es este día les enseñare como colocarle mas estilo a nuestras etiquetas en blogger, esta ves tendrán el estilo de taringa, que ya todos conocemos. bueno empecemos


La etiquetas siempre se muestran con un código similar a este:

<span class='post-labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop>
</b:if>
</span>
Eliminamos este código:

<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
Colocamos este Código antes de </b:skin>:

.post-labels {
margin: 0;
padding: 0;
}
.post-labels a {
float: left;
position: relative;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq6qAa1ntEZ7loC-pSJ_RD477JILW_HwKz5hrGEem6EtbNP2l9rR5Og_YFaUgnejiwP7EU7HfuYyxgxdwR2n0ugAtOYhD2bphMlndNkdo2UjZ8H_iqsieHFstIFt4A8jg9sJo7mdH3va4/s400/tag-taringa-ajmrdesign.com.png") no-repeat bottom right;
height: 24px;
line-height: 24px;
padding:0 10px 0 8px;
margin: 0 0 0 25px;
color: #333;
font-size:13px;
font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;
text-decoration: none;
}
.post-labels a:before {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq6qAa1ntEZ7loC-pSJ_RD477JILW_HwKz5hrGEem6EtbNP2l9rR5Og_YFaUgnejiwP7EU7HfuYyxgxdwR2n0ugAtOYhD2bphMlndNkdo2UjZ8H_iqsieHFstIFt4A8jg9sJo7mdH3va4/s400/tag-taringa-ajmrdesign.com.png") no-repeat;
content: "";
width:15px;
height: 24px;
float: left;
position: absolute;
top: 0;
left: -15px;
}
.post-labels a:hover {
text-decoration: underline;
}

Y listo ya tenemos nuestras etiquetas a un mejor estilo

via: mil trucos blogger 

jueves, 19 de abril de 2012

Fanbox flotante de twitter con efecto deslizante

Para los que querían agregar una fan box flotante y con efecto deslizante de los usuarios de twitter les recomiendo este gadget creo que es bastante útil para tener todos los blogs, debido a que:

Gana espacio suficiente en su siderbar es importante para todos los bloggers.
Gana seguidores de Twitter que hacen caja de los seguidores más evidente para los visitantes.
Fácil de agregar
Pero ir a ver cómo instalarlo en tu blog:

Ahora en Diseño,ve a Añadir Gadget,HTML/Javascript y pega lo siguiente:



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script><script type="text/javascript">//<!--$(document).ready(function() {$(".twitterboxot").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function(){$(this).stop().animate({right: "-250"}, "medium");}, 500);});//--> </script><style type="text/css">.twitterboxot{background: url("http://1.bp.blogspot.com/-ldfb1FsK_Xk/T0bpHaTD5nI/AAAAAAAAGqE/7y1fL69TQa8/s1600/Twitter.png")no-repeat scroll left center transparent !important;display: block;float: right;height: 240px;padding: 0 5px 0 29px;width: 245px;z-index: 99999;position:fixed;right:-250px; top:1%;}</style><div class="twitterboxot"><div><script type="text/javascript"src="http://script-ot.googlecode.com/svn/twitterbox.js"></script><divid="twitterfanbox"></divid="twitterfanbox"></div><script type="text/javascript">fanbox_init("usuario");</script><center><span style="font-size: xx-small;">Creado por <a href="http://mdtutoriales.blogspot.com/2012/04/fanbox-flotante-de-twitter-con-efecto.html" target="_blank">Tutoblogger</a></span></center></div>






simplemente cambia "Usuario" por tu nombre de usuario, guarda los cambios y listo
Powered by Tutoblogger

martes, 3 de abril de 2012

Shareaholic Slide jQuery Gadget marcadores con información sobre herramientas y contadores para Blogger

Durante los años en Spice Up Your Blog he encontrado artefactos de marcadores sociales para estar entre los más populares posts.Whats más los gadgets más populares de marcadores han sido de la "Compartir es sexy" series.Back mayo 2011 publicamos un post con el Impresionante animación completa V3 Sexy Marcadores Sociales para Blogger , que después realmente cubrir todas options.Today quiero darte algo similar, pero con un poco de fresco widget de extras.



Recuerde siempre una copia de tu plantilla, antes de hacer cambios -

Paso 1. En tu Escritorio de Blogger Haga clic en Diseño en HTML> Editar> Marque el cuadro "Expandir plantillas de artilugios"

. Paso 2 Busque el siguiente fragmento de código en sus blogs Html: (Haga clic en la tecla Ctrl y F para una barra de búsqueda para ayudar a encontrar el código -

]]></b:skin>

Paso 3 Copia y pega el siguiente código desde arriba / Antes de ]]></b:skin>


div.shr-bookmarks{margin:20px 0 8px;clear:both !important;display:block !important}div.shr-bookmarks ul.shr-socials{width:100% !important;margin:0 !important;padding:0 !important;float:left !important}div.shr-bookmarks ul.shr-socials{background:transparent none !important;border:0 none !important;outline:0 none !important}div.shr-bookmarks ul.shr-socials li{display:inline !important;float:left !important;list-style-type:none !important;padding:0 !important;height:29px !important;width:60px !important;cursor:pointer !important;margin:3px 0 0 !important;background-color:transparent !important;border:0 none !important;outline:0 none !important;clear:none !important}div.shr-bookmarks ul.shr-socials li:before,div.shr-bookmarks ul.shr-socials li:after,div.shr-bookmarks ul.shr-socials li a:before,div.shr-bookmarks ul.shr-socials li a:after{content:'' !important;}div.shr-bookmarks ul.shr-socials a,div.shr-bookmarks ul.shr-socials a:hover{display:block !important;width:60px !important;height:29px !important;text-indent:-9999px !important;background-color:transparent !important;text-decoration:none !important;border:0 none !important}div.shr-bookmarks ul.shr-socials a:hover,div.shr-bookmarks ul.shr-socials li:hover{background-color:transparent !important;border:0 none !important;outline:0 none !important}.shareaholic-show-on-load{display: block !important;}div.shr-bookmarks div.shr-getshr{line-height:20px !important;padding-left:8px !important;float:left !important;}div.shr-bookmarks div.shr-getshr a{width:auto !important;font-size:10px !important; text-indent:0px !important;text-decoration:none !important;}div.shr-count{font:12px bold,arial !important;position: relative !important;}div.shr-count-outline{position: absolute !important;color: white !important;}div.shr-count-center{position: absolute !important;color: blue !important;}li.shr-2{background-position:-120px bottom !important}li.shr-2:hover{background-position:-120px top !important}li.shr-3{background-position:-180px bottom !important}li.shr-3:hover{background-position:-180px top !important}li.shr-5{background-position:-300px bottom !important}li.shr-5:hover{background-position:-300px top !important}li.shr-7{background-position:-420px bottom !important}li.shr-7:hover{background-position:-420px top !important}li.shr-10{background-position:-600px bottom !important}li.shr-10:hover{background-position:-600px top !important}li.shr-38{background-position:-2280px bottom !important}li.shr-38:hover{background-position:-2280px top !important}li.shr-40{background-position:-2400px bottom !important}li.shr-40:hover{background-position:-2400px top !important}li.shr-43{background-position:-2580px bottom !important}li.shr-43:hover{background-position:-2580px top !important}li.shr-52{background-position:-3120px bottom !important}li.shr-52:hover{background-position:-3120px top !important}li.shr-74{background-position:-4440px bottom !important}li.shr-74:hover{background-position:-4440px top !important}li.shr-88{background-position:-5280px bottom !important}li.shr-88:hover{background-position:-5280px top !important}li.shr-106{background-position:-6360px bottom !important}li.shr-106:hover{background-position:-6360px top !important}li.shr-201{background-position:-12060px bottom !important}li.shr-201:hover{background-position:-12060px top !important}li.shr-219{background-position:-13140px bottom !important}li.shr-219:hover{background-position:-13140px top !important}

.




 Paso 4 Buscar el siguiente fragmento de código en sus blogs Html: (Haga clic en la tecla Ctrl y F para una barra de búsqueda para ayudar a encontrar el código

<div class='post-footer'>
Paso 5. Ahora copia y pega este código directamente debajo / Después <div class='post-footer'>
<!--Start Ssocial Bookmarks from http://www.spiceupyourblog.com -->
<b:if cond='data:blog.pageType == &quot;item&quot;'><div class='shr_class shareaholic-show-on-load'>
</div>
<script type='text/javascript'>
var SHRSB_Settings = {&quot;shr_class&quot;:{&quot;src&quot;:&quot;http://www.shareaholic.com/media/css/styles/sb&quot;,&quot;link&quot;:&quot;&quot;,&quot;service&quot;:&quot;5,7,2,38,3,219,43,52,201,88,74,10,106,45,40,210,78,39&quot;,&quot;apikey&quot;:&quot;6ffe2cbf142c45bd4cd03b01ec46b8658&quot;,&quot;localize&quot;:true,&quot;shortener&quot;:&quot;google&quot;,&quot;shortener_key&quot;:&quot;&quot;,&quot;designer_toolTips&quot;:true,&quot;twitter_template&quot;:&quot;Some fancy post title - http://goo.gl/dbqlx via @Usuario&quot;}};
</script>
<script type='text/javascript'>
(function() {
var sb = document.createElement(&quot;script&quot;); sb.type = &quot;text/javascript&quot;;sb.async = true;
sb.src = (&quot;https:&quot; == document.location.protocol ? &quot;https://dtym7iokkjlif.cloudfront.net&quot; : &quot;http://cdn.shareaholic.com&quot;) + &quot;/media/js/jquery.shareaholic-publishers-sb.min.js&quot;;
var s = document.getElementsByTagName(&quot;script&quot;)[0]; s.parentNode.insertBefore(sb, s);
})();
</script><a href='http://www.spiceupyourblog.com/' target='_blank'>Blogger Social Bookmark Gadget</a></b:if>
<!-- End Social Bookmarks from http://www.spiceupyourblog.com -->
Importante:

Cambiar paulcrowepro en rojo con su nombre de usuario de Twitter, si no tienes un nombre de usuario de Twitter por favor, elimine usuario y dejarlo en blanco.

Las dos secciones de código en color amarillo que el gadget sólo aparecen por debajo de los mensajes en las páginas de no publicar el page.If casa que desea el gadget que aparezca en su página de inicio de retirar los dos fragmentos.

Paso 6. Eso es guardar la plantilla y echa un vistazo a su nuevo gadget fresco.

El crédito para la versión original de este va a Shareaholic . Asegúrese de revisar más de nuestros aparatos de social bookmarking .




Descripcion en imagenes con efecto deslizante usando css

Una forma de agregarle mas estilo a nuestras imágenes y hacer que nuestro blogs sea mas profesional, es poniendo una pequeña descripc...