INSERTAR IMÁGENES EN LA CAJA DE COMENTARIOS EN BLOGGER
- 1 Dirigete a configuracion
- Click en plantillas "es importante hacer una copia de tu plantilla antes de cualquier modificacion"
- Click en HTML
- Buscar con las teclas CTRL+F y buscar la etiqueta </body>
- Pegar el siguiente codigo encima de la etiqueta </body>
<script src='http://dl.dropbox.com/u/35784805/Mil%20Trucos%20Blogger/imagen%20comentarios.js' type='text/javascript'/>Para personalizar el estilo que tendrán las imágenes de los comentarios
- Busca en la p`lantilla con las teclas CTRL+F el código ]]></b:skin>
- Encima del código ]]></b:skin> pegar el siguiente código
#comments img {
max-width: 550px;
border:0px solid #000;
-moz-border-radius:0px;
-webkit-border-radius:0px;
border-radius:0px;
padding:0px 0px 0px 0px;
}
- Lo resaltado en negrita son las cosas que puedes editar, como el ancho máximo de las imagenes que esta por defecto en 550px, tu puede editarlo y poner el ancho de las entradas de tu blog.
- lo demás por defecto está en 0px y no hay cambios en la imagen hasta que tu mismo le pongas un numero.
- El color del borde está en negro por defecto, tu puedes cambiarlo usando colores hexadecimales o RGBA.
- Luego guarda los cambios.
- Listo, ahora debes saber los codigos.
- Para insertar imagen se utiliza [img]URL de la imagen[/img]
- Para cambiar color de texto se utiliza [color="red"]Texto que cambiara[/color]
- Para crear marquesina se utiliza [ma]Texto en marquesina[/ma].
- Listo es lo que pueden hacer los usuarios.
- Esto es el tutorial en insertar imagenes en Blogger
INSERTAR LINKS DE VIDEOS EN LA CAJA DE COMENTARIOS EN BLOGGER
- 1 Dirigete a configuracion
- Click en plantillas "es importante hacer una copia de tu plantilla antes de cualquier modificacion"
- Click en HTML
- Buscar con las teclas CTRL+F y buscar la etiqueta </body>
- Pegar el siguiente codigo encima de la etiqueta </body>
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
// if oetag=0, just use video urls like:
// http://www.youtube.com/watch?v=12345678901
// surrounded by white space (video tag can be used, too)
// if oetag=1 (for nerdy blogs?), use syntax:
// [video=http://www.youtube.com/watch?v=12345678901]
// config:
var oetag = 0; // see above
var oetagname = "video"; // [video=zzz], maybe you like "embed" or "youtube" more?
var oelazy = -1; // -1 detect, 0 = normal, 1 = lazy (needs lazy load hack)
//
function oe_loadscript(filename) {
var scr=document.createElement('script');
scr.setAttribute("type","text/javascript");
scr.setAttribute("src",filename);
document.getElementsByTagName("head")[0].appendChild(scr);
}
function oe_jumptohash() { // reposition to anchor
window.scrollTo(0, $("#"+window.location.hash.replace(/^#/, "")).offset().top);
}
var oe_tid;
var oe_elems = {};
//
function oembed_callback(response) {
var resp = response;
revurl = resp.url.split("").reverse().join("");
html = oe_elems[response.callID].html();
ee = $(resp.html);
w = parseInt(ee.attr("width"));
h = parseInt(ee.attr("height"));
if(oelazy==1) { // convert to lazy load
src = ee.attr("src");
src += ((src.indexOf("?")==-1) ? "?" : "&") + "autoplay=1";
ee.attr("src", src);
ee.attr("style", "vertical-align:top;");
htm = $("<div/>").append(ee).html();
htm = $('<div/>').text(htm).html().replace(/"/g,'"');
resp.html = '<a href="'+resp.url+'" class="youtube-lazy-link" style="width: '+w+'px; height: '+h+'px; background: #000 url('+resp.thumbnail_url+') center center no-repeat;" onclick="$(this).replaceWith(\''+htm+'\');return false;"><div style="width:'+(w-4)+'px;height:'+(h-4)+'px;" class="youtube-lazy-link-div"></div><div class="youtube-lazy-link-info"><b>'+resp.title+(resp.playlist ? '</b> [playlist]' : '</b>')+'<br /><small>by '+resp.author_name+'</small></div></a>';
}
htmlx = html.replace("[" + oetagname + "="+resp.url+"]", " " + resp.url + " ");
htmlx = htmlx.replace("[" + oetagname + "="+resp.url+" ]", " " + resp.url + " ");
htmlx = htmlx.replace('"'+resp.url+'"', '"'+revurl+'"'); // trick to preserve href="url"
htmlx = htmlx.replace(resp.url, '<div style="height:'+h+'px;" class="oembed youtube">'+resp.html+'</div>')
htmlx = htmlx.replace('"'+revurl+'"', '"'+resp.url+'"'); // trick to preserve href="url"
if(html != htmlx) {
oe_elems[response.callID].html(htmlx);
if(window.location.hash.replace(/^#/, "").length > 0) {
if(oe_tid) window.clearTimeout(oe_tid);
oe_tid = window.setTimeout("oe_jumptohash()", 1000);
}
}
}
function oembed_yt(url, width, callID) {
src = "http://oembed-js.appspot.com/?url=" + encodeURIComponent(url) + "&callback=oembed_callback&callID=" + encodeURIComponent(callID);
if(width) src = src + "&maxwidth=" + width + "&maxheight=" + width;
oe_loadscript(src);
}
$(document).ready(function() {
det=$('<div class="youtube-lazy-link-div" />');
$("body").append(det);
if(det.css("position")=="absolute") {
if(oelazy != 0) oelazy=1;
}
else oelazy = 0;
det.remove();
window.setTimeout(function() {
var callID=0;
$(".comment-content,.comment-body,.comment-body-author").each(function() {
html = " " + $(this).html() + " ";
if(oetag)
matches = html.match(new RegExp("\\["+oetagname+"=(https?:\\/\\/[^\\s<\\/]*youtu\\.*be[^\\]]+)", "g"));
else
matches = html.match(/([>\s^]|\[\w+=)(https?:\/\/[^\s<\/]*youtu\.*be[^\s<\]]+)/g);
if(matches && matches.length) {
for(var i=0;i<matches.length;i++) {
url = matches[i].match(/https?:\/\/[^\s<\/]*youtu\.*be[^\s<\]]+/);
oe_elems[callID] = $(this);
oembed_yt(url, $(this).width(), callID++);
}
}
});
}, 500);
});
//]]>
</script>
Para agregar el vídeo al comentario solo debes poner la URL del video de YOU TUBE y listo
Este a sido un tutorial para insertar VIDEOS EN los comentarios de blogger
NOTA: El tamaño del video se acopla segun el tamaño de tu blog ! Estare haciendo modificaciones al codigo para poder hacerlo personalizable :) NOS VEMOS!!!
Este a sido un tutorial para insertar VIDEOS EN los comentarios de blogger
NOTA: El tamaño del video se acopla segun el tamaño de tu blog ! Estare haciendo modificaciones al codigo para poder hacerlo personalizable :) NOS VEMOS!!!
