Ayuda imaginaria

Como evitar que copien contenido de tu blog!

2009-03-28T21:30:00.000-07:00

:) or :-)
:D or :-D
:$ or :-$
:( or :-(
:p or :-p

Si tu problema es, que todos quieren copiar y hacer de tu contenido un típico Copy/Paste ¿Qué podemos hacer?

Añadir un nuevo elemento HTML / JavaScript -> Copiar el siguiente código:

<script language="JavaScript">

</script>

Así cuando intenten copiar algo de tu blog, saldrá un mensaje diciendo: Dont copyme bitch! o bien podemos cambiar el mensaje en esta parte del código:

<script language="JavaScript">

</script>

Y listo. nadie podrá si quiera copiar la fecha del post!

Colocar un slider de imagenes en tu blogger!

2009-03-28T20:32:00.000-07:00

"Antes de comenzar guarda un respaldo de tu plantilla!"

Hola ya hace que no colocaba cosas nuevas... Hoy tengo para ustedes el nuevo "Boom" de los blogger's, Un pequeño slider en la parte superior que nos permitirá exhibir nuestros visitantes una serie de imágenes relacionadas con nuestros post o cualquier otra cosa.

El aspecto del slider sera al así:

Lo primero que debemos hacer es situarnos en nuestra plantilla y colocar el siguiente código antes de:

]]></b:skin>

#myslides{
background:#2c3133;
}

.stepcarousel{
position: relative; /*leave this value alone*/
overflow: scroll; /*leave this value alone*/
width: 972px; /*Width of Carousel Viewer itself*/
height: 165px; /*Height should enough to fit largest content's height*/
margin: 0px 14px 5px 14px;
background:#2c3133;
}

.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 10px 17px ; /*margin around each panel*/
width:220px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
background:#202325;
height:140px;
border:1px solid #393f42;
}
.stepcarousel .panel p{
text-align: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px ; /*margin around each panel*/
}

.stepcarousel .panel h2{
text-align: left; /*leave this value alone*/
height:20px;
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 2px 5px ; /*margin around each panel*/
font-size:16px;
font-weight:bold;
text-align:center;
font-family:Georgia,century gothic,Arial,verdana, sans-serif;
}

.stepcarousel .panel img{
float: left; /*leave this value alone*/
background:#040404; /*clip content that go outside dimensions of holding panel DIV*/
margin: 10px 10px 10px 10px; /*margin around each panel*/
padding:0px 0px;
}

Ojo! El codigo que veran acontinuacion deben colocarlo antes de ]]></b:skin> pero situarlo correcta mente para que quede antes de los post.

Bueno ahora que vamos añadir debajo de ]]></b:skin> lo siguiente:

<script src='http://filefactor.webcindario.com/boxup/glide.js' type='text/javascript'/>
<script src='http://filefactor.webcindario.com/boxup/slider.js' type='text/javascript'/>

Esos son scripts, estos ingeniosos códigos proporcionara el movimiento de los "Paneles".
Ya hemos terminado de colocar los sripts y el estilo de los paneles, ahora comenzaremos a añadir la parte final de este código.

Ahora buscamos el <body> de la plantilla añadimos este código debajo de el mismo:

<div class='clear'/>


<div id='casing'>


<div id='myslides'>
<script type='text/javascript'>
stepcarousel.setup({
galleryid: 'mygallery', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 2, leftnav: ['http://web2feel.com/images/rem1.jpg', -14, 60], rightnav: ['http://web2feel.com/images/rem2.jpg', 0, 60]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['external'] //content setting ['inline'] or ['external', 'path_to_external_file']
})
</script>

<div class='stepcarousel' id='mygallery'>
<div class='belt'>

<div class='panel'>
<a href='Url de la entrada' title='Descripcion'><img alt='#' height='120' src='Url de la imagen' width='200'/> </a>
</div>

<div class='panel'>
<a href='Url de la entrada' title='Descripcion'><img alt='#' height='120' src='Url de la imagen' width='200'/> </a>
</div>

<div class='panel'>
<a href='Url de la entrada' title='Descripcion'><img alt='#' height='120' src='Url de la imagen' width='200'/> </a>
</div>

<div class='panel'>
<a href='Url de la entrada' title='Descripcion'><img alt='#' height='120' src='Url de la imagen' width='200'/> </a>
</div>

<div class='panel'>
<a href='Url de la entrada' title='Descripcion'><img alt='#' height='120' src='Url de la imagen' width='200'/> </a>
</div>

</div>
</div>

</div>

Y listo ya tenemos los slides, la cuestión esta en personalizarlos un poco, cambiando los colores, flechas, marcos, etc.

Cualquier duda o problema solo siéntanse libres de comentar al respecto..!

Proximo post: Añadir un menú al blog sin complicaciones!

Anuncio!!!

2009-03-28T19:08:00.000-07:00

"Hola a todos! debido a los comentarios me siento en deuda por eso debemos continuar y seguir ayudándolos, así que espenme en esta semana con unos nuevos trucos que he checado por ahí! saludos!"

Agregar un efecto Nieve en tu blog...

2008-12-13T11:41:00.000-08:00

Perdon or no haber traido novedades en los ultimos dias... pero aqui tengo un script que les permitira colocar un efecto nieve en su blog...

<script src="http://s2.wordpress.com/wp-content/plugins/snow/snowstorm.js" type="text/javascript"></script>

Este codigo lo colocaremos en cualquier elemento "HTML O JAVASCRIPT" que tengamos en nuestra sidebar copiaremos el codigo sin problemas, y tendremos un muy buen efecto de nieve en nuestro blog... El script s un poco diferente al que se conoce.

Cambiar el tamaño del texto, del titulo de entradas y sidebar.

2008-11-23T10:32:00.000-08:00

Hoy aprenderemos como cambiar el tamaño del texto de la sidebar y de nuestras entradas... (recuerda guardar un respaldo tu plantilla antes de hacer cualquier cambio!)

Para modificar sólo el tamaño de la letra de tu sidebar, debes encontrar este código en tu plantilla:

#sidebar {
width : 277px;
height : 100%;

Y agregamos este otro:

font-size: 85%

si queremos agregarle un tipo de font diferente colocamos esto:

font: georgia;

Para el título de tus post, es justo aqui:

.post-title {

Y agregamos los iguiente:

font-size: 100%

ese 100% lo puedes modificar e ir viendo cual es la medida que corresponde haciendo "vista previa"

¿Aun quieres jugar?
Podemos añadir un blockquote el blockquote son las " COMILLAS " añadiendo lo siguiente en la sona de

.post-title {

.post blockquote {
color : #666;
margin : 0 30px 20px 30px;
padding : 0 0 0 10px;
border : 2px solid #fff;
border-left : 2px solid #a4a1a1;
}

podemos cambiar el color, y el borde.

al final se vera asi:

EJEMPLO DE BLOCKQUOTE

O podemos agregar una imagen colocando este codido despues del <head> :

<style>
blockquote {
background: url(aquí-la-url-de-la-imagen) no-repeat 0 5px;
color: #666;
padding-left: 20px;
font-style: italic;
margin-bottom: 1px;
display:block;
padding-top:7px;
}
</style>

Todo es cuestion de ir jugando con el diseño de nuestro blog, hasta tener lo que realmente queremos..!

Como cambiar de plantilla sin eliminar las encuestas!

2008-11-16T14:34:00.000-08:00

Muchos de nosotros, somos "explosivos" y cuando logramos aburrir la plantilla simplemente la cambiamos, y en ocaciones tenemos encuestas, y de verdad no deseamos quitarlas...

Para cambiar una plantilla y dejar nuestras encuestas haremos lo siguiente.

al subir la plantilla nos indica los widget que se van a eliminar. en ese momento la plantilla tiene los artilugios expandidos, en ese momento buscamos lo siguiente:

<b:section class="'sidebar'" id="'sidebar1'" preferred="'yes'">

luego colocamos el siguiente codigo de nuestras encuestas justo antes de esto:

</b:includable>
</b:widget>

Ese es el codigo de nuestra encuesta,

<b:include name='quickedit'/>
</b:includable>
</b:widget>
<b:widget id='Poll2' locked='false' title='NOMBRE DE TU ENCUESTA' type='Poll'>
<b:includable id='main'>
<div class='widget-content' id='widget-content'>
<h2><data:title/></h2>
<iframe allowtransparency='true' expr:height='data:iframeheight' expr:name='"poll-widget" + data:pollid' expr:src='data:iframeurl' frameborder='0' style='border:none; width:100%;'/>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
<b:widget id='Poll1' locked='false' title='NOMBRE DE TU ENCUESTA' type='Poll'>
<b:includable id='main'>
<div class='widget-content' id='widget-content'>
<h2><data:title/></h2>
<iframe allowtransparency='true' expr:height='data:iframeheight' expr:name='"poll-widget" + data:pollid' expr:src='data:iframeurl' frameborder='0' style='border:none; width:100%;'/>
<b:include name='quickedit'/>
</div>

Guardamos y listo!

De momento esta algo primitivo el tutorial, pero prometo perfeccionar, ya que luego de acer este cambio quedan desorganizados algunos widgets.

Subir varias imagenes al blogger!

2008-11-16T10:20:00.000-08:00

Este es un sistema muy popular que te permite subir varias imagenes al blogger simultaneamente. Es un plugin llamado DragDropUpload y con el subiras hasta 5 imágenes, aun puedes subir mas de 5 imagenes pero puede que el proceso se un poco lento. Aqui unas capturas de DragDropUpload.

Descarga DragDropUpload, instálalo en Firefox y reinicia el navegador.
Abre el asistente de imágenes de Blogger y desde el explorar de archivos arrastra todas las imágenes que quieras. Al hacer esto, podría parecer que solo 5 imágenes se arrastraron, pero en realidad el resta se encuentra en campos adicionales ocultos que crea el navegador.
Sube los archivos.

Imagenes de: http://blogandweb.com/

Añadir emoticones al blog!

2008-11-08T10:00:00.000-08:00

Muchos de nosotros siempre utilizamos estas caritas muy populares llamadas: "Emoticones" ahora podemos tenerlas también en nuestro blog, y lo podemos lograr de una manera muy sencilla.

Vamos a nuetra Plantilla/Edición de HTML y ubicamos:

]]></b:skin>

Justo despues de ese codigo, colocaos lo siguiente:

<script src='http://louislim2.googlepages.com/addSmiley.js ' type='text/javascript'/>

y listo sos to! :) :( :@ ;( :D

Texto con movimiento en la barra de titulo!

2008-11-08T08:35:00.000-08:00

Navegando e investigando en "San Google" me tope con un codigo javascript, que nos permite colocar un texto en movimiento en la barra de estado del blogger.

El codigo es el siguiente:

<script language="JavaScript" type="text/JavaScript">

var txt="Aqui el texto";

var refresco=null;

function titulo() {

document.title=txt;

txt=txt.substring(1,txt.length)+txt.charAt(0);

refresco=setTimeout("titulo()",200);}

titulo();

// -->

</script>

Este script debe ser colocado en un nuevo elemento Html/Javascript, en una parte del codigo justo al final sale,

refresco=setTimeout("titulo()",200);}

ese "200" es el tiempo en que tarda el texto en desplazarse de un lado a otro.

Comunicado: Respuesta a los comentarios xd

2008-11-08T07:36:00.000-08:00

Gracias, muchas gracias por los comentarios, creo que nadie nace aprendido, es como los bebes... Primero gatean y posteriormente aprenden a caminar. A decir verdad no creo copiar el contenido de otros, (olvide colocar los créditos es cierto :( ) todos los blogs de ayudas recolectan la información necesaria que encuentran en otros blogs, yo si pido ayuda sobre todo en el escaparate de rosa, y Pizcos blogs aun así estoy agradecido por la gran ayuda que me han ofrecido siempre, y este blog es un proyecto, aquí quiero compartir cosas que nosotros los Blogger necesitamos, así como otras cosas que ningún otro Blogger de ayuda ha posteado.

No es necesario dejar un comentario anónimo, pues creo que suelo tomarlos de muy buena manera, aun así gracias por sus comentarios y opiniones sobre este blog de "ayuda" con respecto a que si un día preguntan algo, les aseguro que buscare todas las maneras posibles de responder correctamente a sus dudas!

Agregar un favicon a tu blog!

2008-11-07T14:04:00.000-08:00

Muchos de ustedes no se sentiran comodos, con el favicon que el blogger trae for default , hoy les dare un pequeño codigo, para cambiar el favicon de el blogge, por uno propio.

Este codigo lo colocaremos despues de el cierre de la etiqueta "Head"

<link href='Url de tu favicon' rel='shortcut icon'/>

Creo que es necesario decir que los favicones solo pueden ser 16x16 pixeles, aunque para su mayor comodidad aqui les dejo una pagina que generara un favicon 16x16 de cualquier imagen:

dynamicdrive favicon

Y en esta pagina encontraran varios favicon: favicons gallery

Como añadir marcadores sociales al blog!

2008-11-06T18:00:00.000-08:00

Este es mi primer post! Tratare de ser lo mas claro posible...:D.!

Los marcadores sociales son unas de las tantas cosas que no deben faltar en nuestro blog Los marcadores sociales son una forma sencilla y popular de almacenar, clasificar y compartir enlaces en Internet o en una Intranet. Es el usuario quien selecciona si desea compartir cierto articulo, esto se enviara y la noticia quedara “publicada” en la Web, cosa que te proporcionara mas visitas! Esta ves les diré como colocar marcadores sociales con un efecto un tanto opaco.

Vamos a nuestra plantilla, (edicion html) posteriormente presionamos f3 para buscar el codigo: ]]></b:skin> y antes de eso colocaremos lo siguiente:

/* Marcadores sociales
--------------------------- */
.marcadores ul{ font-size:100%; display:inline; margin:0pt !important; padding:0pt !important}
.marcadores li{ background:transparent none repeat scroll 0%; display:inline; list-style-type:none; margin:0pt; padding:2px}
.marcadores img{ border:0pt none; float:none; margin:0pt; padding:0pt}
.marcadores-sociales{ opacity:0.6; filter: alpha(opacity=60);}
.marcadores-sociales:hover{ opacity:2; filter: alpha(opacity=200);}

Guardamos los cambios, expandimos artilugios y localizamos esta linea:

<p class='post-footer-line post-footer-line-3'/>

Finalmente sobre esa line agregamos nuestra ultima parte de el codigo:

<div class='marcadores'>
Enviar a
<ul>
<li><a expr:href='"http://meneame.net/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a Meneame'><img alt='Agregar a Meneame' class='marcadores-sociales' src='http://img181.imageshack.us/img181/3083/meneamehm7.gif'/></a></li>
<li><a expr:href='"http://www.technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a Technorati'><img alt='Agregar a Technorati' class='marcadores-sociales' src='http://4.bp.blogspot.com/_8PJ-pgoBhWQ/R0ODcbltUKI/AAAAAAAACn0/weLnLJlJY7k/s200/technorathy.jpg'/></a></li>
<li><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a Del.icio.us'><img alt='Agregar a Del.icio.us' class='marcadores-sociales' src='http://4.bp.blogspot.com/_8PJ-pgoBhWQ/R0OD8bltUOI/AAAAAAAACoU/da4tqMev6zA/s200/deliciogl4.gif'/></a></li>
<li><a expr:href='"http://digg.com/submit?phase=2&amp;url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a DiggIt!'><img alt='Agregar a DiggIt!' class='marcadores-sociales' src='http://4.bp.blogspot.com/_8PJ-pgoBhWQ/R0OEMbltUPI/AAAAAAAACoc/Nc7aitpOiZw/s200/diggjf4.gif'/></a></li>
<li><a expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?u=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a Yahoo!'><img alt='Agregar a Yahoo!' class='marcadores-sociales' src='http://4.bp.blogspot.com/_8PJ-pgoBhWQ/R0OFJbltUUI/AAAAAAAACpE/u3XUXpq-cAI/s200/yahooyb7.png'/></a></li>
<li><a expr:href='"http://www.google.com/bookmarks/mark?op=edit&output=popup&bkmk=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a Google'><img alt='Agregar a Google' class='marcadores-sociales' src='http://2.bp.blogspot.com/_8PJ-pgoBhWQ/R0OER7ltUQI/AAAAAAAACok/oIqBV3hvsTo/s200/googleoq9.png'/></a></li>
<li><a expr:href='"http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a Furl'><img alt='Agregar a Furl' class='marcadores-sociales' src='http://3.bp.blogspot.com/_8PJ-pgoBhWQ/R0OF3LltUXI/AAAAAAAACpc/Ujlrak5C8k0/s200/furlee5.png'/></a></li>
<li><a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a Reddit'><img alt='Agregar a Reddit' class='marcadores-sociales' src='http://3.bp.blogspot.com/_8PJ-pgoBhWQ/R0OF-LltUYI/AAAAAAAACpk/UKSeg7d1aqE/s200/redditse1.png'/></a></li>
<li><a expr:href='"http://ma.gnolia.com/beta/bookmarklet/add?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a Magnolia'><img alt='Agregar a Magnolia' class='marcadores-sociales' src='http://4.bp.blogspot.com/_8PJ-pgoBhWQ/R0OGIbltUZI/AAAAAAAACps/4O4O6uFkcT8/s200/magnoliaho5.png'/></a></li>
<li><a expr:href='"http://www.blinklist.com/index.php?Action=Blink/addblink.php&Description=&Url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a Blinklist'><img alt='Agregar a Blinklist' class='marcadores-sociales' src='http://4.bp.blogspot.com/_8PJ-pgoBhWQ/R0ODsbltUNI/AAAAAAAACoM/1kkiZl7g3P4/s200/blinklistspk5.png'/></a></li>
<li><a expr:href='"http://blogmarks.net/my/new.php?mini=1&simple=1&url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a Blogmarks'><img alt='Agregar a Blogmarks' class='marcadores-sociales' src='http://4.bp.blogspot.com/_8PJ-pgoBhWQ/R0ODjbltULI/AAAAAAAACn8/cPI6nrIzbWo/s200/blogmarksus8.png'/></a></li>
<li><a expr:href='"http://tec.fresqui.com/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a Fresqui'><img alt='Agregar a Fresqui' class='marcadores-sociales' src='http://2.bp.blogspot.com/_8PJ-pgoBhWQ/R0RQUrltUcI/AAAAAAAACqE/6tHaBcKcyRs/s200/freski.PNG'/></a></li>
<li><a expr:href='"http://promotingblogs.com/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a Promoting Blogs'><img alt='Agregar a Promoting Blogs' class='marcadores-sociales' src='http://2.bp.blogspot.com/_8PJ-pgoBhWQ/R0OEZ7ltURI/AAAAAAAACos/PoC_Hn_rPI0/s200/pb16x16it8.png'/></a></li>
<li><a expr:href='"http://www.mister-wong.es/index.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a Mister Wong'> <img alt='Agregar a Mister Wong' class='marcadores-sociales' src='http://4.bp.blogspot.com/_8PJ-pgoBhWQ/R0ODnbltUMI/AAAAAAAACoE/1ohtyPM3zD4/s200/18mrwongua3.gif'/></a></li>
<li><a expr:href='"http://www.webeame.net/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a Webeame'> <img alt='Agregar a Webeame' class='marcadores-sociales' src='http://4.bp.blogspot.com/_8PJ-pgoBhWQ/R0OE0bltUTI/AAAAAAAACo8/VhIugHAA10Y/s200/nogravatar220aj1.jpg'/></a></li><li><a expr:href='"http://www.wikio.es/vote?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a wikio'><img border='0' class='marcadores-sociales' src='http://4.bp.blogspot.com/_8PJ-pgoBhWQ/R0OFebltUVI/AAAAAAAACpM/zYz0A1XfHMw/s200/wikio2.gif'/></a></li>
<li><a expr:href='"http://www.enchilame.com/login.php?return=/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a Enchilame'><img border='0' class='marcadores-sociales' src='http://1.bp.blogspot.com/_8PJ-pgoBhWQ/R0RYRbltUdI/AAAAAAAACqM/tMdnCA9AWLg/s200/enchilame.jpg'/></a></li>
<li><a expr:href='"http://barrapunto.com/submit.pl?story=&subj=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a Barrapunto'><img border='0' class='marcadores-sociales' src='http://1.bp.blogspot.com/_8PJ-pgoBhWQ/R0RYgbltUfI/AAAAAAAACqc/gBnwQ_mpddc/s200/Nombre3.jpg'/></a></li>
</ul>
</div>

Y listo sos to!

Nota: Tutorial original de: El Escaparate de Rosa!