Templates Blogger / Sweet Elisa

Si, tiene razón, ya he tocado fondo como buen pescado y recurro a cualquier ardid para atraer lectores a post que no tienen gracia. Al menos mis lectores masculinos no presentarán queja, pero las féminas..., bueno, deberán saber disculpar.

Resulta que uno suple lo poco inteligente con mucho empeño y es así que he terminado una plantilla para Blogger que puedo recomendar sin peros y que me resulta tan atractiva como la señorita de marras.

Lo bueno es que ya al tener un código basado en Blogger pero depurado y propio, puedo seguir realizando otros diseños sobre la misma implementación. Así que agárrense que se vendrá una seguidilla de templates o plantillas para todos los gustos (que coincidan con el mío,claro).

Como por lo general donde las publico me las copian y se las llevan a sitios impensados, ahora en la misma demo se podrán descargar los archivos necesarios (las demo no suelen tocarlas y siempre hacen referencia a ellas). Para los distinguidos lectores de este blog las plantillas se publicaran como primicia antes que en cualquier otro lado. ¿Cómo que no le interesa un pito?. Cada vez que publique una será acompañada de una foto de una señorita muy mona...¿ahora sí?

No, para las chicas no habrá fotos de ningún macho cabrío. Lo lamento.

Si llegaron hasta aquí no les cuesta nada pegarle una mirada a la plantilla, a la que podrán acceder pulsando el botón demo de aquí abajo. Si les llegara a gustar y ya que de todas formas debí escribir un detalle de cómo modificarla, más abajo encontrarán algunas características especiales y la forma de adaptarlas a su criterio. Ojalá la pechocha les guste tanto como a mí.

1- 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.

Para cambiar el logo deberá colocar la URL de la imagen de su elección reemplazando la selección en rojo. La imagen deberá tener similares dimensiones (100px por 100px)

#header {
padding:20px 0 0 97px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfuOHlEZ7VpDs5x5eJsS3OtvD7WiqPKMyZTPnOYxrZW4PhSk0HMH20CkfqGMOS4eyhratI-HvchT6Mc0tZfL3i20sg0K99sdKW8UasIBNWW1rGEvTc5TFVw84NAj6mGouqh6mtHUIlnfWd/)no-repeat;
position:absolute;
left:0;
height:78px;
top:45px;
}

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;
}

2- 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 -->

3- 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/AVvXsEhANKNcbyuPptWn_xi2XBXArt3_8CKDovpp9aunhS9SdDqQTBax0JNI7XyAsGoMjC4ZZTQ_MQeilMEqg5ulbthzuOpXJfxBH8_Rahv3-Te8mqzpXNp2KFrQLuV6CYFvA20Zo3AuH8Y-dhwh/'/></a></li>                               

<li><a href='#' title='Facebook'><img alt='Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioKijG3mxs4PHflY4C1KE0Hl3rKEl_rXFiyTA_FPBUuRHAbWnMM1UounXProHWD2fVfUr93tp0v9p7zKmAAJ2g1fUZEGy2N9bcV_i3G4UDpUISJ803PzQ0PzJOPdO1Aq3uNzaJhofVQf4h/'/></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/AVvXsEixjFyz5RLa4RzilY2aL7UIwKms_ZaQAnkyaun7CI1b1G1PcMcGMMqn7cls4zXcYWCQosykVMACFCZrfVfWT6dhB_O7y4pHm1us9Wg9wj3vy2Ey3VUWA0S_v1XsXutF9Fy4PZvEtgd7e4T9/'/></a></li>

            </ul>

<!-- end social links -->

4-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=2;
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-->

5- 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;
}

6- 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.

7- El área de escritura se ha ampliado al máximo para su comodidad.

8- 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.

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

10- 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/AVvXsEiYexrtGSKpnt6ZCVQpm5hI6TrOS98VEwdhUK6xQ7QorivPnldrqXYoVS2he6QPR8JUwcEKPPw8hxqYjgMsO1lxlylqjVq_bErXK5qRFeqOssoLus_7dunkxcTt7kqRKR0MlXam7fn6eWjB/'/></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/AVvXsEiMoIkXaouXzpDb4oglXPkV3u3_5je7R0KQsBbTlnN2B8uj3GIzGvC6tqDTg-rrx9NRtaY05j4xgvtu7o58EDXLSkkoDGmHd7ZPj_vhp84pbbemSsLAdCuchw6CpIXmnW0sHSfpbomRuP86/'/></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/AVvXsEgHz6BzbsQ_THCEib7CPdUXF5Ig8Gv_Q3cRK3WtVGK4jtX9QtSDMsB9nw6OLwctwF0XDWcyEg6d-nJhhvn662FTwbSDLMdd7wsIMCCF-cLswJSzB6TODrehWQlQ8KW3MSf9ECuV2xniHaKV/'/></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/AVvXsEjIrSlQWGobfFilt_C6d7gmy6iQHubk3VLTwYoywwjsgH8IvCrBw1vO10V0iC8kA_g6YUwgE_bPcfhKmZrl7q-iwcJ7BixVC9XM8kS6Ko7B3IGWUDVlLJFquWY5oLveZ2EetUl9fa_L8ia7/'/></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/AVvXsEgKdhKMHNSYRoWXLjJiBFqd82AC8adDwft22YDGMSXGalxODstOub1PONLBzDHazmGzEEzGUmjjUWOp0ozKFXqau9eARv-HyTm-eHCmB21F6Hz8ebmmXWVShTDwpm191rZ-gd3i8whjgMn7/'/></a>
               
            </div>
       
        <!-- end Social Sharing Icons -->

11- 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/AVvXsEiMt64HP8qoiVYmm9wIgjHw3CBAfAL4SLc-Gv2S3bgnUTRHURSzQLtKFFAwZCzUS-IXiGf9FmbUBGNPhbk0JVBUT0Pq9zHi7_-E3OAS2aPfime3b0W-V1rUNCWX_T4UHzqoXRZUgh9i8Zmm/s1600/opt.png' rel='shortcut icon' type='image/x-icon'/>
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMt64HP8qoiVYmm9wIgjHw3CBAfAL4SLc-Gv2S3bgnUTRHURSzQLtKFFAwZCzUS-IXiGf9FmbUBGNPhbk0JVBUT0Pq9zHi7_-E3OAS2aPfime3b0W-V1rUNCWX_T4UHzqoXRZUgh9i8Zmm/s1600/opt.png' rel='icon' type='image/x-icon'/>


Listo. A disfrutarla.