lunes, 15 de agosto de 2016

Colocar Borde de Colores a una Imagen

Publicadas por Unknown a la/s 4:38 a.m. Etiquetas: Codigo HTML 0 comentarios

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»

lunes, 21 de marzo de 2016

Gadget Elegante Google Traductor Para Blogger

Publicadas por Unknown a la/s 6:11 p.m. Etiquetas: Widget 0 comentarios

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

Publicadas por Unknown a la/s 5:56 p.m. Etiquetas: Social, Widget 0 comentarios

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»

domingo, 30 de noviembre de 2014

Ocultar Suscribirse a: Entradas (Atom) de Blogger

Publicadas por Oscar Cabrera a la/s 10:56 a.m. Etiquetas: Truco Blogger 2 comentarios

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

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

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

Seguir leyendo»

jueves, 27 de noviembre de 2014

Como agregar Gadget de 5 estrellas en Blogger

Publicadas por Oscar Cabrera a la/s 10:39 a.m. Etiquetas: Truco Blogger, Widget 5 comentarios

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 != "static_page"'><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'>{[['<img src="http://static.graddit.com/img/star.png"/>']]}</div><div expr:id='"ffbs_stats_" + data:post.id' class='ffbs_stats'></div><script type='text/javascript' expr:src='"http://www.graddit.com/rate/eng/5/" + data:post.id + "?id=" + data:post.id + "&stats=ffbs_stats_" + data:post.id + "&labels=labels_" + data:post.id + "&info=info-" + data:post.id + "&info_delay=2&url=" + data:post.url + "&class_star=ffbs_star_img&class_star_set=ffbs_star_img_set&class_star_vote=ffbs_star_img_vote&views=yes&votes=yes&average=yes"'></script></b:if>

Eso fue todo espero que les agrade

Seguir leyendo»

Colocar Borde de Colores a una Imagen

Gadget Elegante Google Traductor Para Blogger

Añadir Widget Social estilo Metro Blogger

Ocultar Suscribirse a: Entradas (Atom) de Blogger

Como agregar Gadget de 5 estrellas en Blogger

Categorias

Post + populares

Archivos del blog

Perfil del autor

Directorio