Posteamelo

Blogger

Antes de aprender a editar un blogger

, seleccionando la plantilla que más nos guste y saber como aplicar widgets empezaremos a editar nuestro blog, yo les voy a enseñar como dejar un blogger algo así la plantilla original de ese blog (Sencillo-Simple) Es algo así.

Primero les voy a enseñar como poner una barra de separación en la sidebar (La que esta marcada con rojo).

✎Clickear plantilla-edición html-<b:skin>···</b:skin>
✎Apretamos CTRL+F y buscamos la linea :


 .fauxcolumn-right-outer .fauxcolumn-inner {

✎Remplazamos


.fauxcolumn-right-outer .fauxcolumn-inner {

  border-left: 1px solid $(body.rule.color);

}

✎Por el siguiente código :


.fauxcolumn-right-outer .fauxcolumn-inner {

  border-left: 1px solid $(body.rule.color); /* Tamaño del borde NazaTipsblog */

border-color: #610B38; /* Color del borde NazaTipsblog */

background: #610B38; /* Color del fondo */

}

✎Si no queremos un color de fondo para nuestra sidebar simplemente borramos esta parte de nuestro código :


background: #610B38; /* Color del fondo */

Y solo nos quedara el borde, sin el fondo en la sidebar.

Ahora les voy a enseñar como centrar, agrandar, colorear las pestañas y achicar o agrandar los bordes de las paginas o labels de blogger

✎Clickear plantilla-edición html-<b:skin>···</b:skin>
✎Bajamos y buscamos ]]></b:skin>
✎Antes de ]]></b:skin> pegar el siguiente código :


/* Menú de páginas

----------------------------------------------- */

<center>#PageList1 {

width: 100%;

border: 1px solid #FE2EF7; /* Color del borde del menú */

background-color: #FE2EF7; /* Color de fondo */

}

#PageList1 ul li a {

color: #FE2EF7; /* Color de los enlaces */

text-decoration: none;

font-weight: bold;

padding-right: 20px;

background: transparent url(http://2.bp.blogspot.com/_dsEG33PDaHw/S3GaMp5QZEI/AAAAAAAAAIg/sQHkDct7T44/s320/vertical.gif) center right no-repeat;

}

#PageList1 ul li a:hover {

color: #8A084B; /* Color del texto al pasar el mouse */

position: relative;

left: 1px;

top: 1px;

}

#PageList1 ul li a {font-size:20px;}; /* Tamaño del texto de las pestañas */

}</center>

✎Nosotros podemos variar el color de cada parte del texto cambiando los codigos hexadecimales del codigo anterior por el codigo hexadecimal que ustedes elijan. Con la tabla hexadecimal de colores :

http://html-color-codes.info/codigos-de-colores-hexadecimales

Ahora les enseñare a centrar las pestañas de las paginas o labels de blogger :

✎ Ir a Plantilla

✎Personalizar

✎ Avanzado

✎ Añadir CSS

Y copiar esto al principio de la cajita :


.PageList {text-align:center !important;}

.PageList li {display:inline !important; float:none !important;}

✎Clickear plantilla-edición html-<b:skin>···</b:skin>
✎Apretamos CTRL+F y buscamos esta linea :


.tabs-inner .section:first-child ul {

✎Encontraremos un código algo así :


.tabs-inner .section:first-child ul {

  margin-top: -$(header.border.size);

  border-top: $(header.border.size) solid $(tabs.border.color);

  border-left: $(header.border.horizontalsize) solid $(tabs.border.color);

  border-right: $(header.border.horizontalsize) solid $(tabs.border.color);

}



.tabs-inner .widget ul {

  background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;

  _background-image: $;



  border-bottom: $(tabs.border.width) solid none(tabs.border.color);

Remplazamos ese código por este :


.tabs-inner .section:first-child ul {

  margin-top: -none(header.border.size);

  border-top: none(header.border.size) solid $(tabs.border.color);

  border-left: none(header.border.horizontalsize) solid $(tabs.border.color);

  border-right: none(header.border.horizontalsize) solid $(tabs.border.color);

}



.tabs-inner .widget ul {

  background: none(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;

  _background-image: none;

  border-bottom: none(tabs.border.width) solid none(tabs.border.color);

✎Ahora apretamos CTRL+F y buscamos esta linea :


border-$endSide:

✎Encontraremos un código como este :


border-$startSide: $(tabs.border.width) solid $(content.background.color);]



  border-$endSide: $(tabs.bevel.border.width) solid $(tabs.border.color);

✎Y lo remplazamos por este:


border-$startSide: none(tabs.border.width) solid none(content.background.color);



  border-$endSide: none(tabs.bevel.border.width) solid none(tabs.border.color);

✎Clickear plantilla-edición html-<b:skin>···</b:skin>
✎Apretamos CTRL+F y buscamos esta linea :


http://2.bp.blogspot.com/_dsEG33PDaHw/S3GaMp5QZEI/AAAAAAAAAIg/sQHkDct7T44/s320/vertical.gif

✎Encontraremos un código algo así :


background: transparent url(http://2.bp.blogspot.com/_dsEG33PDaHw/S3GaMp5QZEI/AAAAAAAAAIg/sQHkDct7T44/s320/vertical.gif) center right no-repeat;

✎Y lo remplazamos por este:


background: transparent url(http://www.2eso.info/sinonimos/wp-content/uploads/2013/05/blanco.jpg) center right no-repeat;

Ahora les voy a enseñar a como cambiar la fuente del titulo de las entradas de blogger.

Primero buscamos la fuente que más nos gusté en : http://www.google.com/fonts/
✎Clickeamos en la flecha hacia la derecha de la fuente que mas nos guste

Luego nos llevara a una página como esta :

○Bajamos un poco y nos encontraremos con un link. Copiamos el link vamos a blogger y abrimos
✎Plantilla-edición html.
✎Apretamos CTRL+F y buscamos <head> justo debajo de <head> pegamos el código que conseguimos en http://www.google.com/fonts/ .

Nos quedará algo así :


<head>

    <link href='http://fonts.googleapis.com/css?family=NOMBRE DE LA FONT QUE COPIASTE' rel='stylesheet' type='text/css'/>

✎Volvemos a nuestro blog y hacemos click derecho en el titulo de alguna de nuestras entradas y clickeamos en inspeccionar elemento.

✎Ahora hacia la derecha de la pestaña que se nos abre bajamos y buscamos las fuentes de nuestro blog en mi caso sera Waiting for the Sunrise,Helvetica,Sans-serif .

✎Nos dirigimos de nuevo a Plantilla-edición html.

✎Apretamos CTRL+F y pegamos el nombre de nuestras fuentes que acabamos de copiar en el paso anterior. Y pegamos esas fuentes en el recuadro que se nos abre al apretar CTRL+F
El código que encontremos sera algo así (Tiene que empezar con .post-title ) :


.post-title{color:#FF0000;font-family:Waiting#for#the#Sunrise,Helvetica,Sans-serif;font-size:22px;font-weight:bold;line-height:22px;margin:0 0 8px;padding:0;text-transform:none;}

✎Ahora antes de la primera fuente ponemos el nombre de la fuente que elejimos en google fonts si yo use la fuente Oswald el código ahora me quedará así :


.post-title{color:#FF0000;font-family:Oswald, Waiting for the Sunrise,Helvetica,Sans-serif;font-size:22px;font-weight:bold;line-height:22px;margin:0 0 8px;padding:0;text-transform:none;}

✎Clickeamos en guardar plantilla y en hora buena tendremos la fuente que hemos elegido en google fonts en los títulos de las entradas de nuestro blog !

Ya tenemos los labels/páginas, la fuente y la sidebar. Ahora les voy a enseñar como poner un banner.

✎Ir a plantilla-Edicion html.
✎Apretamos CTRL+F
✎Buscamos


<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Encontraremos un código parecido a este :


<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

        <b:widget id='Header1' locked='true' title='Hilando La Vida. (cabecera)' type='Header'>···</b:widget>

</b:section>

Remplazamos el código que encontramos por este :


<center><a href=''><img alt='' src='LINK DE TU BANNER' title='Hilando La Vida'/></a></center>

A mi me quedo algo así :

Imagen en grande ↓↓

Ahora les voy a enseñar como poner el boton ''Leer más'' o continuar leyendo automatico.

✎Clickear plantilla-edición html
✎Apretamos CTRL+F y buscamos esta linea : <data:post.body/>
✎Buscamos un código parecido a este :


 <b:if cond='data:blog.metaDescription == ""'>

      <!-- Then use the post body as the schema.org description,

          for good G+/FB snippeting. -->

      <div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='description articleBody'>

        <data:post.body/>

        <div style='clear: both;'/> <!-- clear for photos floats -->

      </div>

✎Debido a la cantidad de ''<data:post.body/>'' que se encuentran en Plantilla-Edición Html el código tiene que ser algo así :


<b:if cond='data:blog.metaDescription == ""'>

      <!-- Then use the post body as the schema.org description,

          for good G+/FB snippeting. -->

      <div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='description articleBody'>

        <data:post.body/>

        <div style='clear: both;'/> <!-- clear for photos floats -->

      </div>

✎Remplazamos <data:post.body/> por el siguiente código código : (Primer código)


<b:if cond='data:blog.pageType != "item"'>

<b:if cond='data:blog.pageType != "static_page"'>

<div expr:id='"summary" + data:post.id' style='font-size:13px; text-align:justify;'><data:post.body/></div>

<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>","<data:post.url/>");</script>

<span class='rmlink' style='float:right'><a expr:href='data:post.url'>Leer más...</a></span>

</b:if></b:if>

<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>

✎El código total nos quedaría algo así :


<b:if cond='data:blog.metaDescription == ""'>

      <!-- Then use the post body as the schema.org description,

          for good G+/FB snippeting. -->

      <div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='description articleBody'>

        <b:if cond='data:blog.pageType != "item"'>

<b:if cond='data:blog.pageType != "static_page"'>

<div expr:id='"summary" + data:post.id' style='font-size:13px; text-align:justify;'><data:post.body/></div>

<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>","<data:post.url/>");</script>

<span class='rmlink' style='float:right'><a expr:href='data:post.url'>Leer más...</a></span>

</b:if></b:if>

<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>

        <div style='clear: both;'/> <!-- clear for photos floats -->



      </div>

✎Ahora antes de </head> pega lo siguiente: (Segundo código)


<script type='text/javascript'>

img_thumb_width = 400; // Ancho de la imagen en miniatura

  img_thumb_height = 400; // Alto de la imagen en miniatura

summary_txt = 1050; // Número de los caracteres que tendra el resumen. tipsnazablog

</script> 



<script type='text/javascript'> 

//<![CDATA[

// Script original de Anhvo, modificado por ciudadblogger.com

function removeHtmlTag(strx,chop){

if(strx.indexOf("<")!=-1)

{

var s = strx.split("<");

for(var i=0;i<s.length;i++){

if(s[i].indexOf(">")!=-1){

s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);

}

}

strx = s.join("");

}

chop = (chop < strx.length-1) ? chop : strx.length-2;

while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;

strx = strx.substring(0,chop-1);

return strx+'...';

}

function createSummaryAndThumb(pID, pURL){

var div = document.getElementById(pID);

var imgtag = "";

var img = div.getElementsByTagName("img");

if(img.length<=0) {

imgtag = '<span style=float:left; padding:0px 10px 5px 0px;><a href="'+ pURL +'"><img src="http://lh6.ggpht.com/_dsEG33PDaHw/TSJuyxzIKkI/AAAAAAAAAgU/GP7fRmaI-5A/thumbnail.png" width="'+img_thumb_width+'px" /></a></span>';

summ = summary_txt;

}

if(img.length>=1) {

imgtag = '<span style=float:left; padding:0px 10px 5px 0px;><a href="'+ pURL +'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px"/></a></span>';

summ = summary_txt;

}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';

div.innerHTML = summary;

}

//]]>

</script>

*******************NOTA 1********************

En el segundo código que hemos agregado veremos al inicio dos códigos:

summary_txt = 410; indica el número de caracteres que tendrá el resumen.
img_thumb_width = 120; es el ancho que tendrán las imágenes en miniatura.
img_thumb_width eigth = 400 es el alto que tendrán las imágenes en miniatura.

*******************NOTA 2********************

En donde dice ''Leer mas...'' en el primer código podemos cambiarlo por una imagen remplazando ''Leer mas...'' por el siguiente código :


<img src="URL de la imagen" border="0" />

Ya falta cada ves menos para terminar nuestro blogger, les voy a enseñar como poner un borde al rededor del blogger.

✎Clickear plantilla-edición html-<b:skin>···</b:skin>
✎Apretamos CTRL+F y buscamos la linea :


.content-outer {

✎Debajo de ella nos encontraremos un código similar a este :

✎Remplazamos el código anterior por el siguiente :


border-right: 3px solid #fdb8b6; /* Color y tamaño de la linea derecha */

border-left: 3px solid #fdb8b6; /* Color y tamaño de la linea izquierda */

border-top: 3px solid #fdb8b6; /* Color y tamaño de la linea superior */



border-bottom: 3px solid #fdb8b6; /* Color y tamaño de la linea inferior */

Nota:

Ustedes pueden elegir el color que quieran aquí : http://html-color-codes.info/codigos-de-colores-hexadecimales y remplazarlo por el que tiene mi código


( #fdb8b6 )

Ya estamos dejando nuestro blogger como este les voy a enseñar como poner un Favicon a nuestro blogger.

1.Sube tu imagen a esta pagina : favicononline.es
2.Elige el tamaño del favicon, puede ser de 16x16 o 32x32 píxeles.
3.Espera un momento y descarga tu favicon.
4.Renombramos el favicon descargado por este nombre : favicon.ico

Ahora subimos nuestro favicon.ico a Google Sites.

Vamos a Plantilla-Edicion HTML.
Apetamos CTL+F y buscamos esta linea :


<b:include data='blog' name='all-head-content'/>

Justo arriba de esa linea pegamos este código :


<link href='URL del favicon.ico' rel='shortcut icon' type='image/x-icon'/>

<link href='URL del favicon.ico' rel='icon' type='image/x-icon'/>

Donde dice 'URL del favicon.ico' ponemos el link de nuestro favicon.ico que subimos a Google Sites.
En mi caso el código quedaría algo así.

Si no se actualiza el favicon.ico espera un rato o

Como poner el widget de Facebook y que aparezca, si lo buscas en Internet pueden aparecer muchos resultados pero el widget quizás el widget no aparezca en la sidebar.
Primero entra a Facebook Developers .
Ahí agrega la URL de tu página de Facebook, selecciona el ancho del gadget, color del tema, si deseas mostrar los avatares, la actividad reciente y la cabecera del gadget.
Ya que lo tengas listo da click en Get Code.

Aparecerá un código para copiar; copia el código que está debajo de iframe.
Luego entra en Diseño | Añadir gadget | HTML/Javascript y ahí pega el código que copiaste.
Con eso ya tienes el Fanbox en tu blog.

Si no nos carga al principio del código agregen esté código :


<div class='likeboxwrap'>

Y este al final del código :


</div>

Ahora les voy a enseñar como poner una Radio Flash en su Blogger.

✎Vamos a y buscamos la Radio que más nos guste.

Copiamos alguna de las direcciones de la Radio que mas nos gusto a veces solo ahí una dirección si ahí mas de una dirección de radio elijan al azar la dirección.

✎Clickeamos en Diseño.
✎Añadir gadget-HTML/JAVASCRIPT
✎Y pegamos el siguiente código :


<embed height="55" type="application/x-shockwave-flash" width="250" src="http://player.wavestreamer.com/cgi-bin/player2.swf" flashvars="skin=http://player.wavestreamer.com/cgi-bin/kleur/kleur.swf&title=Live Stream&type=sound&file=DIRECCIÓNDELA RADIOQUEMASNOSGUSTO/;s.mp3&13142580629&duration=99999&id=scplayer&autostart=false"></embed>

✎Con ese código ahí que apretar el botón Play para que empiece la Radio, si quieren que la Radio empiece automáticamente donde dice ''false'' sin las comillas cámbienlo por ''true'' sin las comillas.

Como sacar los bordes de las imágenes de tu blogger y poner imágenes en los títulos de tus Gadgets/Widgets.
1.Quitar el borde de las imágenes

2. Poner una imagen como titulo de un gadget.

✎Ir a plantilla-Edicion html.
✎Apretamos CTRL+F
✎Buscamos un código parecido a este :


<b:widget id='Image1' locked='false' title='TITULO DE TU GADGET' type='Image'>···</b:widget>

Clickeamos en los ··· del código y el código nos quedara algo así :


<b:widget id='Image1' locked='false' title='TITULO DE TU GADGET' type='Image'>···</b:widget>

<b:includable id='main'>···</b:includable>

</b:widget>

Clickeamos nuevamente los ··· del código y el código se nos expandirá.

Al expandirse el código buscamos una linea parecida a esta :


<h2 class='title'><data:title/></h2>

Y remplazamos esta linea :


<data:title/>

Por esto :


<img src="URL DE TU IMAGEN"/>

El código nos quedaría algo así:


<h2 class='title'><img src="URL DE TU IMAGEN"/></h2>

3º) Guarda la plantilla para terminar.

WordPress

En wordpress no podemos hacer una gran web ya que para editar el HTML ahi que pagar y cuando pagas cada sección del blog wordpress esta dividida en FTPs y hace que sea muy dificil, igual wordpress ofrece plantillas gratis muy buenas yo les voy a enseñar como hacer que un blog wordpress quede así: Es muy fácil nada que ver con lo de blogger esto no sera tan difícil. Después de tener nuestro propio Wordpress y si no quieren que quede tan normal tendremos que elegir una plantilla.
Vamos a : http://NOMBREDETUBLOG.wordpress.com/wp-admin/themes.php
Buscamos la plantilla que más nos guste y clickeamos en ''Activar''

Listo ahora tenemos una plantilla en nuestro blog de Wordpress.

Ahora voy a enseñarles como instalar Widgets en su WordPress.
Nos dirigimos a http://NOMBREDETUBLOG.wordpress.com/wp-admin/widgets.php
Y arrastramos el el widget que queremos a la barra lateral

Como cambiar el titulo de nuestro blog de WordPress.
Vamos a http://NOMBREDETUBLOG.wordpress.com/wp-admin/options-general.php

http://i.imgur.com/HGz8Fu9.png

En donde dice Titulo del Sitio ponemos el titulo que queres que tenga nuestro banner y el ''title'' de nuestro WordPress y en donde dice Descripción corta ponemos el subtitulo que queres que diga nuestro banner.

Como poner labels o páginas en nuestro WordPress.
Vamos a http://NOMBREDETUBLOG.wordpress.com/wp-admin/edit.php?post_type=page
clickeamos en ''Añadir una nueva página'' y ponen lo que ustedes quieran en esa página.

Entradas más antiguas en WordPress.
Vamos a http://NOMBREDETUBLOG.wordpress.com/wp-admin/options-reading.php
Y en donde dice Número máximo de entradas a mostrar en el sitio ponemos la cantidad de entradas que queres que se muestren en el inicio de tu WordPress.

Los tutoriales de como poner determinada cosa son míos o sacado de distintas fuentes debido a los cambios de blogger, las imágenes que dicen en el banner ''Tips para el blog'' es de un sitio mio, muchas cosas no se encuentran en Internet debido a los cambios de blogger. Puntuar no cuesta nada Si tienen una duda de su Wordpress o Blogger me pueden preguntar y veo si los puedo ayudar.

Muchas veces por los emoticones de taringa en ves de que aparesca

Que es la parte de un código aparece la carita

Nada más tienen que remplazar la carita por esto :

Crear y editar un blog con Blogger y Wordpress :)

Posts Relacionados

Dejá tu comentario

Autor del Post