Patrocina mi blog!

Patrocinador de mi blog

Si te gustó no olvides ayudarme a seguir creciendo compartiendolo en tus redes sociales favoritas. ¡Gracias!

Por: Unknown 26 abr 2015

Leer más

Poner entradas de blogger en página web

Esta entrada es como la de Poner entradas de Wordpress en página web, pero esta vez, de Blogger.

Es igual de sencillo. El código lo podeis adaptar a vuestro gusto o necesidades.

Yo por ejemplo lo he usado para poner en una web mía mis últimas entradas de todos mis blogs, aunque aún no está terminada (estoy en ello, poco a poco).

Primero en un archivo aparte (feed.php), he creado una función que se llama feedCheydeveloper();

Aquí el código:

<?php
//para conectar con el blog de blogger

function feedCheydeveloper(){
$xml = new DomDocument();
$xml->load('http://cheydeveloper.blogspot.com.es/feeds/posts/default?alt=rss');
$raiz = $xml->documentElement;   $entradas = $raiz->getElementsByTagName('item');

$lista='';

for($i=0;$i<5;$i++){  
$titulo = $entradas->item($i)->getElementsByTagName('title')->item(0)->nodeValue;  
$vinculo = $entradas->item($i)->getElementsByTagName('link')->item(0)->nodeValue;
//$fecha = strftime("%d/%m/%Y",$fecha_unix);  

$lista.= '<li class="active"><a href="'.$vinculo.'" class="statistics"><span>'.$titulo.'</span><label class="digits active">'.$i.'</label><div class="clear"></div></a></li>';
}

return $lista;
}
?>

Para adaptarlo, sólo tienes que cambiar la url que está en rojo, por la del feed de tu blog de Blogger.

Después, para mostrarlo, dónde quieras hacerlo, tienes que incluir el archivo con un include, como ya sabemos.

<?php include ('feed.php'); ?>

Y ahora para que se muestren las últimas entradas sólo tienes que llamar a la función.

<li><a href="#" class="statistics"><span>Chey Developer</span></a></li> <?php echo feedCheydeveloper(); ?>

Y aquí como me está quedando a mí.

Si te gustó no olvides ayudarme a seguir creciendo compartiendolo en tus redes sociales favoritas. ¡Gracias!

Por: Unknown 12 ago 2014

Leer más

Fantástico template responsive para Blogger

¡Hola chicos y chicas!

Hoy os traigo un fantástico, por no decir genial, template responsive para Blogger.

Aquí una captura de pantalla:

Es muy elegante, fácil de configurar y muy completo.

Os hago algunas captura donde os muestro un poco más los detalles.

- Los post o artículos van ordenados por categorías.

- Trae un slider donde van rotando los títulos de la categoría que elijas.

- Formulario de contacto elegante en la página principal en español.

- Entradas relacionadas en cada post.

- Siguiente y anterior entre el final de la entrada y entradas relacionadas.

- Opción de comentar desde el blog o desde Facebook

¿Y qué más puedo decir de la plantilla?

Sólo que si la quieres ver funcionando, éste es el enlace de un blog donde la he instalado: Gym en casa

Y aquí donde la podeis descargar:

www.templateism.com


Si te gustó no olvides ayudarme a seguir creciendo compartiendolo en tus redes sociales favoritas. ¡Gracias!

Por: Unknown 31 jul 2014

Leer más

Caja flotante con suscripción a tu feed del blog

Si quieres tener una caja flotante de tu feed para recordar a tus lectores de que se pueden suscribir, es sencillo de hacer.

Nos vamos al diseño del blog, a modificar plantilla.

Dentro del código buscamos con CNTRL+F la etiqueta </head> y justo delante de ésta pegamos el siguiente código:

<style type='text/css'>
#anuncio {
position:absolute;
padding: 2px;
padding-top: 15px;
width: 280px; /* ancho del anuncio */
visibility: hidden;
z-index: 200;
top: 30px;
left: 30px;
}
#rss-mail {
/* color e imagen de fondo */
background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1u61ISWNQTDGLK33t4uzAKNv97dd78AmTjgyhMO3hqJXWIj1RFR_-vQgvWIWer6k0ZdRVuy5iPy7JhFhqPYI7Nuff_ryv0IX0Au_TjbNXVZ-EqGyK9rtB4dQYrIZnD4XtpEts3_U_67U/s320/pattern_blk_point.png);
border:2px solid #FF8000; /* borde */
height:70px; /* alto de la caja */
}
#rss-mail span {
color:#FFFFFF; /* color del texto */
font-size:12px;
font-weight:bold;
line-height:30px;
}
#rss-submit {
background:#FF8000; /* color del botón */
border:0px;
}
.rss-box {
height:13px;
margin-top:10px;
color:#6E6E6E;
font-size:12px;
width:135px;
}
</style>

<script type='text/javascript'>
//<![CDATA[
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 30 //set x offset of bar in pixels
var startY = 15 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("anuncio").style.visibility="hidden"
}

function staticbar(){
barheight=document.getElementById("anuncio").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("anuncio");
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
//]]>
</script>

Una vez hecho, buscamos la etiqueta </body> y justo delante de ésta pegamos el siguiente:

<div id='anuncio'>
<div id='rss-mail'>
<a href='Javascript:void' onClick='closebar(); return false'><img align='right' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUCH8iVJGCAcuWemVuZqBAFswfw52ZpWT6uE_UKy2pkgUfv4PAPShAzmQk8FbLvl08eIcaY1guxNqxGLEEu6H1ZJXkZhuzxLRk-FAwQwvW2GnsGai5QbZoJcB4NofosyjeadHc4G-C2jQ/s320/cerrar.png'/></a>

<span>Recibe las actualizaciones directo a tu correo</span><br/>

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBZ3cF1oVSO7McFt1o8f8ygB-6GyStoDuhx3RJtEN_-9l-iPh8FGga0EAbSgpGiBW2QZdZOl7-Z_B4d1vR_B7JvF8LHJEwuA9e8Tkc4za9fOubmHCwQgcASeMuAMAEO9OxvRaWDyXlXlA/s1600/rss-icono.png' style='padding:5px; float:left;'/>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=miblog&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='email' type='text/'/>
<input name='uri' type='hidden' value='miblog'/><input name='loc' type='hidden' value='es_ES'/><input id='rss-submit' type='submit' value='Suscribir'/></form></div></div>

Donde pone miblog, debemos poner el nombre de nuestro feed, por ejemplo el mío de este blog es: Aplicaciones---chey--- . Quedando como enlace de mi feed así:

http://feedburner.google.com/fb/a/mailverify?uri=Aplicaciones---chey---


El ejemplo de esta caja flotante la podeis ver en este mismo blog funcionando y queda más o menos así:

Si te gustó no olvides ayudarme a seguir creciendo compartiendolo en tus redes sociales favoritas. ¡Gracias!

Por: Unknown 30 may 2014

Leer más

Poner comentarios de facebook en tu blog de Blogger

Si quieres añadir comentarios de facebook a tu blog de Blogger, es muy sencillo, sólo tienes que seguir los pasos de más abajo.

Primero, para saber si es lo que estás buscando, puedes mirar el ejemplo de su uso en este blog:

concienciandoalmundo.blogspot.com.es
(Los comentarios de facebook están al final del post, justo arriba de los comentarios normales de blogger)

Ahora sí, vamos a implementarlo nosotros.

Vamos al panel de control de nuestro blog, a la pestaña plantilla, y al botón de "Editar HTML"

Ahora, dando un click dentro del código, pulsamos control+F y nos saldrá un cuadrado en blanco más o menos como el de la imagen. Pero sin nada escrito.

Ahora, en ese cuadrado buscamos la etiqueda <body> y justo debajo copiamos el siguiente código:

<!-- comentarios de facebook -->
<div id='fb-root'/>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = &quot;//connect.facebook.net/es_LA/all.js#xfbml=1&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>
<!-- fin comentarios facebook -->

Ahora, igual que antes, vamos a buscar

<b:include data='post' name='comments'/>
          </b:if>
        </b:if>

Cuando lo encontremos, justo debajo copiamos el siguiente código:

<!-- comentarios de facebook -->
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<fb:comments expr:href='data:post.url' num_posts='10' width='520'/>
  </b:if></div>
<!-- fin comentarios de facebook -->

Le damos al botón naranja de "Guardar plantilla" y ya podemos comprobar si nos ha funcionado.

Tiene que quedar algo así:

Si te gustó no olvides ayudarme a seguir creciendo compartiendolo en tus redes sociales favoritas. ¡Gracias!

Por: Unknown 29 abr 2014

Leer más

Autoblogging Software - Publicar artículos automáticamente en Blogger o Wordpress

¡Buenos días!

Hoy os voy a hablar del Auto Blogging Software. ¿Sabéis ya lo que es?

Para los que no lo sepan o no lo conozcan, es un programa que te permite publicar en tu blog de Blogger o de Wordpress de forma automática, que una vez esté configurado el programa, sólo tienes que mirar de vez en cuando cómo va publicando sólo los artículos cogidos de otras páginas y mirar como crecen tus ganancias. (Eso dicen)

Consiste en elegir uno (o varios) de tus blogs, y poner cada cuantos minutos quieres que publique un artículo (15 minutos, 30, 120...) e indicarle de que feed o rss de qué página quieres que coja dichos artículos.
Tiene integrado un traductor, por si quieres cojer un feed de una página en Inglés, y te lo publica ya traducido. O si quieres coger una en español, pero al "traducirlo" cambia las palabras a otros sinónimos para que sea contenido original y no se detecte como copiado.

Ayer lo estuve probando en uno de mis blogs de prueba. Y el resultado no me gustó mucho, ya que las tildes y caracteres "extraños" los coloca con un simbolito. Véase la imagen.

Yo ya lo he probado y he decidido que no me gusta. Además del tema ético (y polémico) de copiar contenido.

Aquí os dejo los enlaces donde lo podéis descargar y probar:

Enlace del autor: http://webmagnates.org/
Enlace para descargar:  https://mega.co.nz/

¿Lo conocías? ¿Lo has probado ya? ¿Qué opinión te merece?

Si te gustó no olvides ayudarme a seguir creciendo compartiendolo en tus redes sociales favoritas. ¡Gracias!

Por: Unknown 16 abr 2014

Leer más

Últimas entradas por etiquetas o categorías e imagen de miniatura - Blogger

A veces tenemos varias categorías en nuestro blog, como por ejemplo las mías, que tengo diseño web, programación, trucos de blogger...

Y queremos ordenarlas un poco a la hora de mostrarlas en portada o queremos mostrar sólo alguna en especial.

Pues para esto tenemos este truco para mostrar las últimas entradas de una etiqueta en concreto, y podemos usarla en el lugar de la página que queramos y tantas veces por categorías queramos.

Yo la uso por ejemplo, (a día de hoy y con el template que estoy usando ahora) en la columna central de la portada de mi blog. Quedando algo como esto:

En el cual estoy mostrando en el centro, mis últimas entradas escritas sobre Google.

Para hacer esto, tenemos que hacer algunos pasos:

1. Entra en Diseño | Edición de HTML y antes de ]]></b:skin> pega lo siguiente:

/* Últimas entradas por categorías
--------------------------------- */ 
img.label_thumb{
float:left;
border:1px solid #8f8f8f; /* Borde de las miniaturas */
margin-right:10px !important;
height:55px; /* Alto de las miniaturas */
width:55px; /* Ancho de las miniaturas */
}
.label_with_thumbs {
float: left;
width: 100%;
min-height: 70px;
margin: 0px 10px 2px 0px;
padding: 0;
}
ul.label_with_thumbs li {
padding:8px 0;
min-height:65px;
margin-bottom:10px;
}
.label_with_thumbs a {}
.label_with_thumbs strong {padding-left:0px;}

2. Luego antes de </head> pega este script:

<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul class="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzOh9T3C1nssXFqb3Qk-tpgFCeMBtUi_DuX5fPWe2txnTzoX0F4gK8cKtUZk5NDdGXFn9x7LyCS_kbFVcU4neNsVChEhL0vgAEoECkqIPcO-kgOXu60E21-SEtIP7nCNNONM_4vkyZt0M/';}
var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Ene";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Abr";monthnames[5]="May";monthnames[6]="Jun";monthnames[7]="Jul";monthnames[8]="Ago";monthnames[9]="Sep";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dic";document.write('<li class="clearfix">');if(showpostthumbnails==true)
document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}
else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}
var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+' | ';}
if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">Más »</a>';flag=1;;}
document.write(towrite);document.write('</li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('');}document.write('</ul>');}
//]]>
</script>

3.- Por último elige el sitio donde quieras que esté las últimas entradas, para esto entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript y ahí pega esto:

<script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 100;</script> 
<script type="text/javascript" src="/feeds/posts/default/-/Nombre-de-la-etiqueta?published&alt=json-in-script&callback=labelthumbs"></script>

Donde dice /Nombre-de-la-etiqueta/ en color rojo, debes poner el nombre de la etiqueta de la cual quieres que aparezcan las últimas entradas.

Una vez guardado, ya puedes ver como queda en tu blog.

¡Espero que os haya servido!

Si te gustó no olvides ayudarme a seguir creciendo compartiéndolo en tus redes sociales favoritas. ¡Gracias!

Por: Unknown 10 abr 2014

Leer más

Contar palabras y caracteres ONLINE

Si quieres contar palabras o caracteres de forma fácil, he encontrado la página ideal que lo hace de forma automática y ONLINE.

Sólo tienes que pegar el texto que quieras contar las palabras y pegarlo en recuadro y darle al botón "Contar palabras y caracteres".

Esto es muy útil para cualquiera, pero para nosotros en especial ya que deberíamos ponernos el reto de que cada entrada de nuestro blog o página tenga al menos 150 palabras para que sea un buen post y los usuarios se puedan interesar y se queden en nuestra página.

El enlace es este: CONTAR PALABRAS Y CARACTERES ONLINE

Yo especialmente, voy a guardar el enlace para que cada vez que escriba un post, (o cada vez que me acuerde) usarlo.

Espero que os sea útil ¡Un saludo!


Si te gustó no olvides ayudarme a seguir creciendo compartiendolo en tus redes sociales favoritas. ¡Gracias!

Por: Unknown

Leer más

¿Cómo ganar más dinero con los blogs? - Google Adsense

¿Cómo ganar más dinero con las páginas web y blogs?

Si te tienes un blog que quieres monetizar o una página web, y ya has probado que Google Adsense te arroja ganancias que son muy pocas o miseria te estarás haciendo algunas de estas preguntas.

¿Por qué hay gente que gana mucho dinero con sus páginas o blogs?
¿Se puede vivir de Adsense?
¿Cómo vivir de Adsense?
¿Cómo puedo ganar más dinero con mi blog o página?

Pues las respuestas a estas preguntas es sí y con mucho trabajo y esfuerzo.

No hay un regla exacta para ésto. Se puede tener suerte y pegar el pelotazo con una sola página. O con varias en poco tiempo. Pero no es lo habitual.

Más o menos, para que os hagais una idea de cómo ganas unos 100 (cien) euros o dolares al día con Adsense esto es lo que teneís que hacer o tener.

Tener entre 5 y 10 páginas o blogs. Tener en cada una de ellas unas mil entradas en cada uno. Que ninguna entrada sea copiada de otro sitio (o Google te puede penalizar de alguna forma). Que cada entrada tenga mínimo 150 palabras. Que los blogs tengan entre 1 y 2 años de antigüedad.

Tienes que hacerte a la idea de que esto no es llegar y hacerte rico. Tienes que pensar que todo lo que hagas hoy vas a recoger sus verdaderos frutos dentro de un año. Así que piensa que lo que no hagas hoy, no vas a ver sus frutos. Esfuérzate por lo que quieres. En esta vida no hay cosas fáciles para ganar mucho dinero (a no ser que tengas mucha suerte o sea una estafa)

Desde aquí te animo a que sigas luchando por lo que quieres y no decaigas.

¡Un saludo!

Si te gustó no olvides ayudarme a seguir creciendo compartiendolo en tus redes sociales favoritas. ¡Gracias!

Por: Unknown 9 abr 2014

Leer más

Configurar plantilla predefinida de Blogger

Hoy vamos a ver como configurar una plantilla predefina de Blogger para que esté a nuestro gusto y paresca un poco más profesional.

Para empezar tenemos que elegir una plantilla que más o menos nos guste.

Nos vamos a nuestro panel de control de Blogger, a la pestaña Plantillas y elegimos una.

Yo he elegido la más básica de todas para después configurarla.

Ahora nos iremos a Personalizar.

Y una vez adentro eligimos los colores que queramos, el ancho de la página, las columnas, el tipo de letra...

Otras personalizaciones:

Podeis ver como se hace un menú en esta entrada: Cómo poner un menu en Blogger
Colocar una caja flotante con las redes sociales como el de este blog aquí.
Cómo hacer un formulario de contacto como el de esta página aquí.

Si te gustó no olvides ayudarme a seguir creciendo compartiéndolo en tus redes sociales favoritas. ¡Gracias!

Por: Unknown

Leer más

Cómo poner un menu en Blogger

Bien, ahora vamos a crear un menú para nuestra plantilla de Blogger.

Nos vamos a diseño.

Y añadimos un gadget en la parte que queramos que esté nuestro Menú. Lo normal es que se ponga en la parte superior. Si no estáis seguros, podéis elegir cualquier parte y posteriormente cambiarlo.

Le daños a añadir un gadget.

Y buscamos HTML/Javascript

Le damos a +. Y se nos abrirá una ventana, en la cual escribiremos el siguiente código.

<ul class='menus menu-secondary'>

<li><a href='/'>Inicio</a></li>
<li><a href='http://tupagina.blogspot.com.es/search?q=menu1'>Menu1</a>
</li>
<li><a href='http://tupagina.blogspot.com.es/search?q=menu2'>Menu2</a>
</li>
<li><a href='http://tupagina.blogspot.com.es/search?q=menu3'>Menu3</a></li>
</ul>

Cambiando las palabras que están amarillas por el enlace de tu blog y por el nombre del menu que queramos, poniendo tantos item como queramos.

Si te gustó no olvides ayudarme a seguir creciendo compartiendolo en tus redes sociales favoritas. ¡Gracias!

Por: Unknown 8 abr 2014

Leer más

Formulario de contacto para Blogger

Hoy Vamos a ver de Como insertar un bonito Formulario de Contacto En Una Página de blog de Blogger.

El Formulario de contacto que insertaremos tendrá Una apariencia como esta:

Lo pueden ver en FUNCIÓNamiento en mi Propia page de contacto .

Estós son los pasos a Seguir:

1. Vamos a nuestro de Panel de Administración de blogger.
2. Vamos a Diseño y LUEGO le damos a Añadir gadget de un.

3. En La Ventana Que se nos abrira, le Damos una Más Gadgets y Buscamos Formulario de Contacto, lociones seleccionamos Y guardamos.

Ya Tienes tu Formulario de Contacto. Ahora Vamos A Darle Formato y a ponerlo en Una Sola página en concreto.

4. Ahora Damos clic en Plantilla y LUEGO en editar HTML.

5. Con El cursor Dentro Del Codigo HTML le Damos a control (CTRL) + F, y buscamos El siguiente Código:

]]> </ B: skin>

Encontremos de Cuando lo, copiamos justo arriba el siguiente Código:

#ContactForm1{

display:none;

}

#contact_wrap {

margin: auto;

width: 321px;

height: 380px;

padding: 25px;

border-radius: 1em;

border-top:1px solid #dbdbdb;

border-right:1px solid #b2b2b2;

border-left:1px solid #dbdbdb;

border-bottom:1px solid #9d9d9d;

background-color:#cccccc;

filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#f2f2f2', endColorstr='#cccccc');

background-image:-webkit-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);

background-image:-moz-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);

background-image:-ms-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);

background-image:-o-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);

background-image:linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);

box-shadow: 1px 1px 5px #ccc;

}

#contact_wrap h3{

color: #e8f3f9;

font-family:Georgia;

font-size: 20px;

font-style:italic;

font-weight:bold;

margin: 0 -36px 20px -36px;

padding: 12px;

text-align: center;

text-shadow: 2px 0 0 #1f4962;

-webkit-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;

-moz-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;

box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;

background-color: #3689b9;

position: relative;

}

#contact_wrap h3:before {

content: ' ';

position: absolute;

bottom: -10px;

left: 0;

width: 0;

height: 0;

border-style: solid;

border-width: 10px 0 0 10px;

border-color: #333 transparent transparent transparent;

}

#contact_wrap h3:after {

content: ' ';

position: absolute;

bottom: -10px;

right: 0;

width: 0;

height: 0;

border-style: solid;

border-width: 0 0 10px 10px;

border-color: transparent transparent transparent #333;

}

#ContactForm1_contact-form-name{

width: 270px;

height:auto;

margin: 5px auto;

padding: 10px 10px 10px 40px;

background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDpsdgb1SSTiTm0sgpPBU20C_MQUfyFIdC0zzqNRCN1dd8uox-8s5dUwuUQqqsWZJWkC_FzLHu9_dGuoVTUATIfl_IZWxoufbZAMpZc83uPK7ikWY9idAQOqIXz_Qx63cijv-ro_sq5rE/s1600/user.png)no-repeat 10px center;

color:#777;

border:1px solid #ccc;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;

box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;

}

#ContactForm1_contact-form-email{

width: 270px;

height:auto;

margin: 5px auto;

padding: 10px 10px 10px 40px;

background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimgHCg14LzALInpKcVuJo5CWm8c-ikbxjofWeQCJdrNvC9-mlu8HWuSUz5CZsFLsQeQBes796tITmoXypog6BnUavzE4LomT6kk8FEBiTRVV4_F5vP6KkqBq0U9qdXleVLlYhbOp2vRWA/s1600/pen.png)no-repeat 10px center;

color:#777;

border:1px solid #ccc;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;

box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;

}

#ContactForm1_contact-form-email-message{

width: 270px;

height: 150px;

margin: 5px auto;

padding: 10px 10px 10px 40px;

font-family:Arial, sans-serif;

background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMpHdfGkCDhwGvlii06f9dSRugAuhdDO1_-U48zlqq3djfjcQ8Kdiq9EZu-7-pLh037RnJKAeM0ugTvOZL5UdaJJWFM-kg03WmrwnXvJ5TGvV4doY9B3YF_T8t45ADqsUVg1F1jwC-1eA/s1600/msg2.png)no-repeat 10px 10px;

color:#777;

border:1px solid #ccc;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;

box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;

}

#ContactForm1_contact-form-submit {

width: 95px;

height: 30px;

float: right;

color: #FFF;

padding: 0;

cursor:pointer;

margin: 25px 0 3px 0 0;

background-color:#005a8a;

border-radius:4px;

text-shadow: 1px 0 0 #1f4962;

-webkit-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;

-moz-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;

box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;

background-color: #3689b9;

border:1px solid #194f6d;

}

#ContactForm1_contact-form-submit:hover {

background:#4c9bc9;

}

#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{

width: 320px;

margin-top:35px;

}

Guardamos Ahora y Plantilla.

6. Una Vez Guardado, le Damos un Páginas.

7. Ahora le damos clic a Página nueva y luego a Página en blanco.

Ahora debemos activar la opción editar html.

8. Pegamos el siguiente código:

<div id="contact_wrap"> <h3>Contactame</h3> <form name="contact-form"> <input id="ContactForm1_contact-form-name" name="name" placeholder="Nombre" size="30" type="text" value="" /> <input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" /> <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Mensaje" rows="5"></textarea> <input id="ContactForm1_contact-form-submit" type="button" value="Enviar" /> <div style="max-width: 222px; text-align: center; width: 100%;"> <div id="ContactForm1_contact-form-error-message"> </div> <div id="ContactForm1_contact-form-success-message"> </div> </div> </form> </div> <style type="text/css"> #comments, #blog-pager, .breadcrumbs, .post-footer{display:none} </style>

9. Le ponemos un título antes de publicar y guardamos.

YA puedes comprobar y ver tu formulario de contacto.

¡Un saludo!

Si te gusto no Olvides ayudarme a Seguir Creciendo compartiendolo En Tus Redes Sociales Favoritas. ¡Gracias!

Por: Unknown 7 abr 2014

Leer más