La morocha pechocha me hache el bocho

¿Ya vió a la pechocha de hoy? Bueno, listo, no se engolosine.


Hoy traigo una plantilla estreno y , aunque usted no lo crea, ya sé que no le interesa cambiar la suya, yo solo le vengo a mostrar lo producido para que le pegue una miradita y me dé su opinión.


En realidad me puse a pensar sobre el porque uno se pone a hacer cosas gratis aquí en la red y las deja a disposición de quienes pasan a mirar su blog. La respuesta no deja de ser muy simple y se la expongo con un ejemplo. ¿Se acuerda cuando se reunía con amigos en torno a una fogata y había uno que siempre traía una guitarra? ¿Se acuerda? Bueno yo hago lo mismo que aquel amigo que todos teníamos. Toco de oído, solo conozco unos pocos acordes, tal vez tres canciones, desafino como mono enjaulado y no le puedo mantener el ritmo ni identificar una simple nota, pero le pongo empeño y me gusta compartir con los amigos en torno a la misma fogata.


A ver, cante conmigo...


La particularidad de este template llamado Active Slider, es justamente la función del slider.


Si deja de mirar un poquito el escote de la morocha un segundo le explico. El "Slider" o "Deslizador" de fotografías es ese recuadro que tienen algunos blogs en su parte superior y por donde pasan usualmente cuatro o cinco fotografías elegidas que al clickear sobre las mismas lo llevan a un destino, post o nota relacionada. En el BlogOPin.ar tengo en pequeño un Slider más inteligente y decidí mejorarlo e instalarlo en una plantilla de mi diseño. ¿Por qué es más inteligente? Si usted es visitante frecuente al blog habrá notado que el slider aparecen los post viejos, más precisamente con un desfasaje de diez, lo cual le da una segunda oportunidad a los lectores para que le peguen una miradita a cada uno de ellos. Para que sea una aplicación "liviana" de cargar le recomiendo que solo le defina cinco post y lo ponga con un retraso que corresponda con el inicio de la próxima página del blog ya que éste es de tipo Magazine y tiene unos cinco post por página. De esta forma las fotos nunca serán las mismas y cambiarán en la medida que usted publique nuevas entradas. Mejor aún, junto a la foto hay un resumen del post y una tecla para ir directamente hasta él.


Listo, ya le conté todo, ahora paso a la parte técnica que si a usted no le interesa se puede saltear con todo mi agradecimiento por haber leído hasta aquí... o por mirar a la pechocha...

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/AVvXsEjbEtWVVCkFpvAGZbqAakaHEguZJ_1lO2py166CPFlpjL8so6vIOKqrhyhH0w7emI-go26a-1hFVipudQayZTOWEMqo89XeenRxzLQKkeB3T-yDkleoZ-hsaa5X88vxzkyqSxPWutXF7JiD/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/AVvXsEiatR_ycbyRMVPA1ApgLdqaroTNBJc4E4Zadg7eJhhMB-rW76jN5JKv4oTxTrfH-hkcZAhFeeAovQYWNtR5Ek6lTKPINcj_C3pXditr3nnxjWtffhijLijw4Pi-6z6OTgoeiF4cMpHnTOA/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/AVvXsEjdKsOejOmjofrhkcMfwTSmpHS-TXUdnwNsxYtS8o4qe_NwaY-EZoJs2ko69zH6usyeTmstnVzkSkaUm6pBM54gVDp7P7lztTC_fjo61mJDXCMMTePsyulB5-yy5E9CKtiIwTTGl-E17UVB/'/></a></li>                               

<li><a href='#' title='Facebook'><img alt='Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZgl3EISHQg6FiKGutEZsqPnfkMBZXNxCqfFZQ6II9nK2nGvWX56zZz5JwmUoOIUaXdGrVqBbDcQqi-eYrtEulkWFOR8f2pszxh56531j8Jp77hHU-kQqjC9ko8OPN5yV_sJbvVcYajrBv/'/></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/AVvXsEhUqP-jfpaH39VC-6WhvkffwaX-55d6CGLBc8jqyWxVMvQGN2HZCTbErgnv8WlURQtDRQ0p73jc4caohQ74WcsePL4W5GDhk_9yxndkXXaxYIzFqGgttzQ2rw4p-Az_BkJ6uGX08CouhIxA/'/></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>
               
<img alt='Tweet this!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwA-_4utKyHYVNMtqqYArNcRyeOOPBlI7M1w25b6N98vc1UkHs2bcZCdEtF68iYe_e1uFoZ3ZV-_-1k5T_PL1yghBc4dRxQtlF-0IIE5aLCvI25wZAJeHKf0OZM4tfFmsXfOy4PWXFFmyb/'/></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/AVvXsEjQe_pyd-gQCxObVQQuxyVv9FqcJ7KoPtK8PUCdCSTuoFuFHuTj6OQlu1HaQboSGGR-jm3LguAJ-nTc9f-a6E_8EGUCJtwsRRU-fWyiSMu_EYYpVovU9VPCNZI4heElCqX_j1uDSMQijJT6/'/></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/AVvXsEjmAqSQ5LjkNCXSc5e_hqEQveANJKkK5BkHszB6nEFxJMnJ2uQoAGR4QECiWgsg5Phkm-EtnX3UMZOiOtIOeWTXjxcTNzBYdWA7Dfo2uMjqBcHBUJAJeeBYnSnuZRodCuhlIebPjX7jJJEo/'/></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/AVvXsEhcIXAZ_yZAccpkCBULRUlOU4hR1MDn4lT74bd7p76oOUgB7pHvNQKBEcPOMrAhj2fPLcz0qFvR1XHoYuQrf8Qn-B3T7b7ytTTtt71P1UElwRI-6BTG-_FQv2DIIeIK3S09dIowQki8GwjI/'/></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/AVvXsEiSlYyNIOix8gpPByZAqDJrGvYAIJYCJT2aloeQSs-vSagmK3zUbHRDycNK29rl_MxY_m1XawZ_N2rfoZXQEVSoH5JmO30NutN7NUECpevJhRKWUoSriTok6qxPl1dSQttMCZ2jhob5zohM/'/></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/AVvXsEgdrurtqyO6YH5i_Qm4GynXhVs0vqu-D3_K30cQWj4vhI8YrdsXRyrL3yskgcGntd5YrDbe6WUQkqPCBp9HWkT9lVRipUPs0LWI-IYJFz9eEWrxTGj3Byj6VCgpe_t02n73qabFr8S_tCOn/s1600/opt.png' rel='shortcut icon' type='image/x-icon'/>
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdrurtqyO6YH5i_Qm4GynXhVs0vqu-D3_K30cQWj4vhI8YrdsXRyrL3yskgcGntd5YrDbe6WUQkqPCBp9HWkT9lVRipUPs0LWI-IYJFz9eEWrxTGj3Byj6VCgpe_t02n73qabFr8S_tCOn/s1600/opt.png' rel='icon' type='image/x-icon'/>
Listo. A disfrutarla.

Taluego