lunes, 28 de mayo de 2012

Blogger Templates - Blue Dream OPINTEMPLATES

Comparte
Template Premium Original
Magazine
Premium

Slider Activo
Dos columnas
Footer (Tres columnas) al pie
Ancho Fijo
Azul, gris-celeste
Califica 90%
Template Propio
To see how to adjust the template read the instructions using the translator on the sidebar.


Cómo instalar su nueva plantilla Blogger de OPintemplates?


1. Por favor, descargue la plantilla (Template) de su elección (zip) y luego extraiga (descomprima) el archivo.


Descargar plantilla (Template)


2. Entrar a Blogger con su identificación


3. En el panel, haga clic en Diseño → Edición de HTML


editar HTML


4. ¿Haga una copia de seguridad haciendo clic en Descargar plantilla completa


copia de seguridad


5. Haga clic en el botón Examinar ... y seleccione el archivo de la plantilla de favoritos que usted acaba de descargar y descomprimir (extensión : .XML) y a continuación, haga clic en el botón Subir


subir plantilla


6. Cuando haya un aviso preguntando si desea mantener sus Widgets, haga clic en el botón MANTENER WIDGETS


mantener widgets de la antigua plantilla


7. Reacomode la ubicación de sus WIDGETS en Diseño- Elementos de la página de acuerdo al nuevo diseño arrastrándolos con el mouse de una posición a otra.

Reacomodar


8. Listo. Disfrute de la nueva apariencia de su plantilla Blogger de OPintemplates.

9. Usted puede utilizar esta Plantilla o Template tanto para fines comerciales o privados en forma libre siempre y cuando no altere los créditos que se encuentran al pie de la misma. Usted puede reubicar los créditos con la finalidad de mejorar la estética pero no debe alterar el contenido de los mismos.
Las plantillas gratuitas de OPintemplates se encuentran protegidas por la Atribution Creative Commons 3.0 de validez internacional.
Para detalles más específicos acerca de la licencia, usted puede visitar la siguiente página:
http://creativecommons.org/licenses/by/3.0/

La gente de BTemplates ha retirado todos los enlaces y créditos menos los que les ha convenido, así que se hace necesario responder a quienes no entienden cómo ajustar esta plantilla.
Aquí les dejo algunas notas que pueden ser de utilidad.
No responderemos dudas a quienes bajaron el template desde BTemplates.

Ajustes:

0 - El Slider activo de este template viene preparado para mostrar un total de cinco post en seguidilla. Usted puede repetir la sección del script para agregar más pero le recomendamos que no lo haga pues la carga de la página puede ralentizarce.
En la plantilla tal como la entregamos, se repiten los primeros cinco post y los datos son tomados de su fuente RSS de Feed. Recuerde tenerla habilitada y desbloqueada.
Usted puede modificar el artilugio para que se muestren, por ejemplo, los post que corresponderían al mes pasado, a diez atrás, o la cifra que le resulte interesante y práctica.
Para adaptarla busque en la plantilla el código siguiente (repetido en cinco oportunidades) y modifique lo pintado en verde por el dato de su blog (su URL).
Lo marcado en rojo corresponde al post anteriormente mostrado
Lo marcado en amarillo al post que se mostrará en este paso de programa.

La secuencia deberá ser correlativa.

<script language='JavaScript'>
imgr = new Array();
imgr[0] = &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaqA098GJqAbjeeGqLKCQdl2hgUuK5LJdvGDqQxA8cCZqEM4bp3-CbhnZxHRmGs2XKYlkIlUdmxz7g9rw7b0OZb-Qye_DskSosMPEf2GtZ85lhfF6ZU5VEjHGeOl5pmu4tGutqqRGuRmdS/s1600/Have_Images_TEXT.png&quot;;
showRandomImg = true;
tablewidth = 940;
tableheight = 230;
cellspacing = 0;
borderColor = &quot;#&quot;;
bgTD = &quot;#12151c &quot;;
imgwidth = 400;
imgheight = 240;
fntsize = 26;
acolor = &quot;#fff&quot;;
aBold = true;
icon = &quot; &quot;;
text = &quot;Comments&quot;;
showPostDate = true;
summaryPost = 550;
summaryFontsize = 12;
summaryColor = &quot;#fff&quot;;
icon2 = &quot;  &quot;;
startposts = 0;
numposts = 1;
home_page = &quot;http://opintemplates-active-demo.blogspot.com/feeds/posts/default&quot;;
</script>

1 - Usted puede modificar el logotipo colocado por cualquiera de su preferencia cambiando las direcciones marcadas en rojo .La imagen deberá tener similares dimensiones
#header {
padding:40px 0 0 500px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_5_xVB6YCY8ERakuWawe7-XIJJnbZwIZbiY9lr8duP2UH8ihxLqa03I5lSQ8AQHLv1PkO3wXIfPKygfhGRN0ucWuyjPsp6nQaosHq-MyP276agovVfyv_v4lld3o2HadHVsFQOGlij_Q/s100/blueorigin%252520.png)no-repeat;
position:absolute;
left:0;
height:78px;
top:45px;
}

2- El título del blog aparece en forma automática como bajo relieve sin necesidad de introducir una imagen dada. El logo se puede cambiar de manera sencilla. También lo puede reemplazar por una imagen escrita


Para cambiar el color de letra del título coloque el código de color HTML reemplazando el que se marca en rojo

#header a {
color:#000;
text-decoration:none;
}

Si desea cambiar el color de la descripción bajo el título reemplace el código en rojo

#header .description {
font-size:13px;
font-weight:bolder;
color:#000;
text-shadow:2px 2px 2px #333;
text-transform:uppercase;
}

3- Usted puede cambiar los enlaces de la barra de menú buscando y reemplazando estos datos por los de su elección.

<!-- begin top menu -->

<div class='clearfix' id='topMenuCont'>

<ul class='clearfix'>

<li><a class='home' expr:href='data:blog.homepageUrl'>
Home</a></li>
<li><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Posts RSS'>Posts RSS</a></li>
<li><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;' title='Comments RSS'>Comments RSS</a></li>
<li><a href='http://www.opintemplates.blogspot.com/' title='Blogger'>OPINTEMPLATES</a></li>

</ul>
</div>

<!-- end top menu -->

4- Se proveen enlaces directos a su cuenta de Twitter, Facebook y para la suscripción vía RSS. Usted solo debe introducir su dirección de servicios en los campos marcados en rojo. La dirección de su Feed RSS es automática.

<!-- social links -->
            <ul id='socialLinks'>


<li><a href='#' title='Twitter'><img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibqtaVgyqPvj1esFekN7B_nHKxPkfFyQRjrQiFVpSLwETaz1IQGymDmLmRtITMa_gliT8Q1ZiS7NkJRLdIrRWMPZhrvxe2IHj9ZxKChuAZx56CSZig0nTATmOsD_s1GDL3KynuRA0uEF0t/'/></a></li>                               

<li><a href='#' title='Facebook'><img alt='Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijsHIiHO7AF34sX3EcXRqD7wxTAyZ8q6uKjjNi3eXoVOst0bBHJr0suB0lPrf30hMz-dnMqMD-FORFiVEDpUNh0Lo1-K_hGAAFeJRP_5i6Gj4oAvvaCdqiytfKQdhqVivUDL0xCWpCRi58/'/></a></li>              

<li><a class='rssTag' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Posts RSS'><img alt='Feeds' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsXZdr1QfXYio3W-OUfAQqkZkfmZfxa0JRSZI3jLgErbjOQEu0_DlGydmiPKSCCZ12-2e8RnlmdUNxR_2qThInkXXvUxMUGFQZfM8bq4MYxR8zZDINCPp8TT5uoEQcnly8WE3Js0fD9zbx/'/></a></li>

            </ul>

<!-- end social links -->


5-Se incluye paginación numérica para lo cual deberá respetar los siguientes datos:
La cifra marcada en rojo debe coincidir con la cantidad de post que se muestran por página. (consultar Escritorio-Configuración-Formato-Mostrar un máximo de X post en la página principal)
La cifra marcada en verde corresponde a la cantidad de paginaciones que se harán y que se verá como una mayor o menor cantidad de botones al pie de página.

<!--Page Navigation Starts-->
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=3;
var upPageWord =&#39;&#171;&#39;;
var downPageWord =&#39;&#187;&#39;;
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v2.js' type='text/javascript'/>
<!--Page Navigation Ends-->

6- Esta plantilla viene preparada para ampliar cualquier presentación a un tamaño customizado. El widget de Presentación ahora puede ser ampliado para que se luzca mucho más. Usted puede modificar el tamaño cambiando los valores de ancho y largo marcados en rojo en este código.

.slideshow-container {
 width: 250px !important;
 height: 140px !important;
}

7- El área de comentarios cuenta con una imagén de fondo ante ausencia de Avatar y otra para el caso de comentarista anónimo. Los campos se han ampliado al máximo para su comodidad.

8- El área de escritura se ha ampliado al máximo para su comodidad.
9- Si usted ha ingresado a un post en forma predeterminada, automáticamente se abandona la paginación numérica y se pasa a la estandart en este caso con iconos mucho más atractivos.


10- Se han habilitado los iconos para compartir junto con el Google +1 para que sus lectores lo voten y promuevan.

11- Si las redes sociales mínimas propuestas por blogguer no le alcanzan aquí puede modificar o agregar sus propios iconos acompañados con el enlace correspondiente. Usted puede tambien cambiar el texto de invitación para compartir modificando el texto marcado en rojo:
<!-- Social Sharing Icons -->

        <div class='social'>
       
<strong>Share this article:</strong>
               
<a href='javascript:(function(){TwitThisPop=window.open(%22http://twitthis.com/twit?url=%22+encodeURIComponent(location.href)+%22&amp;title=%22+((document.title)%20?%20encodeURIComponent(document.title.replace(/^s*|s*$/g,%27%27))%20:%20%22%22),%20%22TwitThisPop%22,%20%22width=600,%20height=500,%20location,%20status,%20scrollbars,%20resizable,%20dependent=yes%22);%20setTimeout(%22TwitThisPop.focus()%22,%20100);%20})()'><img alt='Tweet this!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-TPQ4ZVhmxyr-ahLQ00lDXRai0yW44h0XFSmZJGvdQvl72fEAODoGUtiHobp7hSjhOtAYsmO70KeCmG-SuKOPNG7DNHA5aNl3iTuw00LI37l6TGa9LMDxg3Xx8ByiNozww6IVUHuq8dBD/'/></a>               
               
<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='StumbleUpon.'><img alt='StumbleUpon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM1UcZACdGuXqhWPHag2o1Ca0oNWwrF1eJfLdpFaG1xzQ796TXQboYC3g99D1rr8Z1b-niW3UUqqnqP64o3XfPJOqwjETpqbLl4DeLJ_yLejB5VTtnV-S16VpD-J51KRdwo6fMOilqKZ8E/'/></a>
               
<a expr:href='&quot;http://digg.com/submit?phase=2url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Digg this!'><img alt='Digg This!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc5wM1PH0JmwRtLqbi8-vm7BW2RWShttFvyKv-JBFGru11d1a1vldkcariZWz0mi3tyelpOivFQf9efpJYAc-XleUg32zScBQij4P8un8IGMWp6E4zyrm6TumEow1mmYzoi0UTpzO_dfTh/'/></a>               
               
<a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Bookmark on Delicious' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgve64VDZnxri-D-TuW-YUKtrVZjhPO-0Wyz2CytdBy8h4zaNgpSxP4XD53KtwaKiG63AsZ7Fl_00sVjs1euq7dVZ8VQ874N1zw7u7EoERgeiKqpJ_yuIpUxUFQaZMtWROA4socF-hgisLA/'/></a>
               
<a expr:href='&quot;http://www.facebook.com/share.php?u=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Facebook'><img alt='Share on Facebook' id='sharethis-last' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq0qEcJuQ1FevVqwejqLbeO85vCSuji_JTiGbbl4ag2xHUXTS0sRkGDzHYBg8MIYCw8POI1bMGFNc367gnK717hGA3t3c4ZL_KISMXexY591hFT1b9quYtZ9JFJQiGBp3w6GpCc1GDQm1A/'/></a>
               
            </div>
       
        <!-- end Social Sharing Icons -->
12- Finalmente el archivo viene con nuestro logo de OPINTEMPLATES como Favicon (el pequeño símbolo que aparece en las legüetas de arriba en los navegadores) Para colocar el de su elección debe reemplazar el código marcado en rojo por la dirección de una imagen de 16px por 16px de tamaño que lo represente y sea de su agrado.
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdmnBMp7usUoIEUW19CJlYPK6rrIIaUxpF2TaEEJWujsorCzM3ruIXpDiOHeI_NRkD4G1nsoxmDwDR3eF0gJtGnOSHQXGO-8GKIi2yBowi0HJspS-wBfWuSzHRoeqvYllodzPVxEx2nGL6/s1600/opt.png' rel='shortcut icon' type='image/x-icon'/>
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdmnBMp7usUoIEUW19CJlYPK6rrIIaUxpF2TaEEJWujsorCzM3ruIXpDiOHeI_NRkD4G1nsoxmDwDR3eF0gJtGnOSHQXGO-8GKIi2yBowi0HJspS-wBfWuSzHRoeqvYllodzPVxEx2nGL6/s1600/opt.png' rel='icon' type='image/x-icon'/>
Listo. A disfrutarla.
OPINTEMPLATES

9 comentarios:

  1. I could not detect the fault on his blog. It may have been modified code. I recommend reloading the template on a test blog. Perhaps the fault has been the previous template.
    Luck.

    ResponderBorrar
  2. Buenas tardes, mi pregunta es sobre el tamaño del dibujo de la entrada. Es decir, yo hago una entrada en la que empiezo con una fotografia a tamaño pequeño y alineada a la izquierda, pero esa fotografia sale muy grande en la visión general y en el slider superior también muy grande y pixelada.
    Puedes ayudarme?
    Gracias y un saludo.

    ResponderBorrar
  3. La pixelación de las imágenes tiene que ver con su tamaño original y el que en definitiva es utilizado en la plantilla. Por ejemplo, si usted cuenta con una imagen que originalmente tiene 100 x 100 pixels y lo muestra en un slider a un tamaño de 500 x 500 pixels, es evidente que se pixelará de una manera que resultará muy molesta.
    En este tipo de plantillas hay que tener en cuenta las dimensiones de la imagen más grande que se mostrará y utilizar esas medidas como parámetro para las imágenes usadas en las entradas.
    De esta manera se evita la deformación y la pixelación de las imágenes.
    Para esta plantilla le recomiendo usar imágenes de aproximadamente 400 por 250 px como tamaño mínimo.

    Que la disfrute con felicidad.

    ResponderBorrar
  4. En primer lugar gracias por la rapida respuesta. Me gustaría que miraras el blog que estoy haciendo (http://cursatrencamoles.blogspot.com.es/) Las fotos de la pagina inicial y la del slider son enormes, en cambio cuando entras en la entrada es un tamaño normal. De echo el tamaño original es mayor al que tu me has comentado. Puedo reducir el tamaño de las fotografias de la pagina principal y del slider?
    Muchas gracias por ayudarme.

    ResponderBorrar
  5. La primer imagen tiene un tamaño original de 142 x 200 pixels mientras que la segunda es de 320 x 289 pixels.
    Por formato y tamaño es lógico que se vean mal en el slider y en la miniatura de imagen (resumen del post)
    Para que sus imágenes se vean bien deberán ser como mínimo de 400 (ancho) x 250 (altura) pixels. Es decir un rectángulo alargado hacia los lados.
    Dentro del post usted podrá modificar el tamaño en que se muestra a su placer y voluntad (tan pequeño como quiera usando las proporciones "Pequeño", "Medio", "Grande", Extra Grande" y "Tamaño Original" ) pero en el slider y en las miniaturas de resumen se verá todo bien y proporcionado.
    Toda plantilla se puede adaptar a los gustos particulares de cada usuario, pero en mi caso no realizo adaptaciones a pedido, razón por la cual la plantilla es tal como usted la ha recibido, aunque puede modificarla a su antojo tanto como usted desee...

    Un abrazo.

    ResponderBorrar
  6. Estimado amigo, para colocar una fotografía como fondo lo mejor es seguir el tutorial de Ciudad Blogger que figura en este enlace http://ciudadblogger.com/2009/02/cambiar-color-de-fondo-por-una-imagen.html
    Si la idea es que ocupe la totalidad de la pantalla en forma automática es mejor aplicar lo indicado en este otro tutorial
    http://ciudadblogger.com/2012/08/hacer-que-la-imagen-de-fondo-del-blog-cubra-toda-la-pantalla.html
    Yo podría indicarle otras plantillas que se adaptarían mejor a lo que está planeando, pero si le gusta ésta puede modificarla a su gusto.

    Un saludo y la mejor suerte

    ResponderBorrar
  7. Muchas gracias nuevamente, tema solucionado. Ahora tengo otra duda. Si hago una entrada de texto bastante larga, aunque el texto tenga varios parrafos, es decir, utilizo el INTRO y hago salgos de línea, en la pagina principal, sale todo junto y pegado. Hay forma de modificar eso? No queda muy estetico porque me junta titulos con descripciones. Gracias por ayudarme, no sabes como te lo agradezco.

    ResponderBorrar
  8. Lo que se muestra en la página principal es un resumen que economiza espacio y está acotado en cuanto a sus medidas. Hacerlo de otra forma alteraría la visión de conjunto.

    Un abrazo.

    ResponderBorrar