Colocar Mensaje de Bienvenida o Alerta Para Blogger

Esta Vez les vengo a traer este truco que suele estar en muchos blogs que visitas y quieres tener en tu blog que al entrar te puede decir que no olvides comentar o no  copies o algo que quiera informar sobre el blog pero resumido bueno sin mas nada que decir les explicare como colocar este pequeño truco para que lo tengas en tu blog blogger de Mensaje de Bienvenida para tu blogger

Simplemente vamos a agregar un gadget HTML/Javascript (sin ponerle título, no es necesario) y vamos a volcar dentro de él lo siguiente:

<script language="JavaScript" type="text/javascript">
alert("Acá coloca el mensaje que quieres que aparezca");
</script>

Ya Solo te toca cambiar lo que esta de color rojo porque que quieras que aparesca en el mensaje de entrar en tu blog blogger 

Seguir leyendo»

Colocar Borde de Colores a una Imagen

Para poner borde a imágenes de una entrada utilizamos, dependiendo de la ubicación, los siguientes códigos:


Imagen a la izquierda :

<div class="separator" style="clear: both; text-align: center;"><img src="URL" style="clear: left; float: left; margin-top: 5px; margin-right: 10px; border: 1px solid #COLOR"/></div>

Imagen a la derecha :

<div class="separator" style="clear: both; text-align: center;"><img src="URL" style="clear: right; float: right; margin-top: 5px; margin-left: 10px; border: 1px solid #COLOR"/></div>

Imagen en el centro:

<div class="separator" style="clear: both; text-align: center;"><img src="URL" style="margin-left: 1opx; margin-right: 110px; border: 1px solid #COLOR"/></div>

• En URL ponemos la URL de la imagen correspondiente.
• En COLOR ponemos el número correspondiente al código del color que se asigne al borde.

Blog para saber los códigos de colores HTML :  AQUI

Seguir leyendo»

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>

Seguir leyendo»

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

Seguir leyendo»