Mostrando entradas con la etiqueta Trucos. Mostrar todas las entradas
Mostrando entradas con la etiqueta Trucos. Mostrar todas las entradas

martes, 9 de abril de 2013

Agregar paginación en blogger


Colocar paginacion en blogger

Esta es una herramienta estupenda para poder navegar en todas las paginas de nuestros blogs. Les permite a nuestros seguidores navegar en el blogs como si fuera un libro. Ya que ordenando las paginas de los post mas nuevos asta los mas antiguos y de esta forma los usuarios naveguen pro fundamente en los post del Blog. quien no a Visitado YouTube, esta pagina utiliza una paginación semejante a esta.


Para agregar la paginación a tu blogs, ve a Diseño, a Añadir Gadget, HTML/Javascript y pega lo siguiente:

<style type='text/css'>
#blog-pager{height: 28px;
    padding: 10px 0 0;
overflow:hidden;
text-align:center;
}
.showpageArea a {text-decoration:underline;
font-size: 16px;
       text-align: center;}
.showpageNum a {font-size:16px;text-decoration:none;border: 1px solid #cccccc;margin:0 5px;padding:5px;}
.showpageNum a:hover {border: 1px solid #cccccc;background-color:#cccccc;}

.showpagePoint {font-size:16px;text-decoration:none;border: 1px solid #cccccc;background: #216FD9;margin:0 5px;padding:5px;color:#ffffff;}

.showpageOf {text-decoration:none;padding:5px;margin: 0 5px;}
.showpage a {text-decoration:none;border: 1px solid #cccccc;padding:5px;}
.showpage a:hover {text-decoration:none;background: #cccccc;}
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#333333;}</style>


<script style='text/javascript'>var pageCount=7;
var displayPageNum=5;var upPageWord="Anterior";var downPageWord="Siguiente";</script>
<script style='text/javascript' src='http://netoopscodes.googlecode.com/svn/netoops-page-nav-v2.js'></script>

Color Rojo: Numero de Entradas a mostrar
Color Azul: Numero de Paginas a Mostrar

Ve las siguiente imagen, donde explico como donde agregar en Gadget.

Colocar Paginacion en blogger


Guarda los Cambios y listo.

miércoles, 20 de marzo de 2013

Entradas Relacionadas para blogger con CSS



Hace ya mucho tiempo salio el script que nos permite ver las entradas relacionadas en nuestro blogs, es mas ya en varias planillas ya viene instalada.

En esta ocasión les explicare como colocar esta opción en nuestro blogs, por si te interesa y aun no lo tienes, a diferencia de los demás tutoriales que e visto, yo le agregare un toque personal con CSS, espero que te guste.

Primero entra a Diseño > Edición de HTML y haz un respaldo de tu plantilla por si no obtuvieras los resultados esperados.


Después pega antes de ]]></b:skin> los estilos:

/*Entradas Relacionadas por Tutoblogger*/
#related-posts {
float : left;
width :auto;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;

}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
color : #069;
padding: 7px 30px 0 0;
text-align:center;
width: 475px;
font-size : 18px;
font-weight : normal;
margin : 5px -20px 0 0;
padding : 0 0 5px;
border-bottom: 3px solid #069;
}
#related-posts a {
color : #054474;
font-size : 11px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : -25px 0 0 0;
padding : 30px 0 0 0;
border-left: 3px solid #069;
}
#related-posts li:hover {
margin-left: 40px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
#related-posts ul li {
display : block;
background : #f0eeee;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}


Luego con los artilugios expandidos busca la etiqueta ]]></b:skin> y justo debajo de ella pega lo siguiente:

<script type='text/javascript'>
//<![CDATA[

var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();

function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}

function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}

function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}

function printRelatedLabels() {
var cuantosPosts = 0;
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
var dirURL = document.URL;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
if (relatedUrls[r] != dirURL) {
document.write('<li><a href="' + relatedUrls[r] + '" title="Post relacionado: '
+ relatedTitles[r] + '">' + relatedTitles[r] + '</a></li>');
}
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
cuantosPosts++;
if (cuantosPosts == 5) {
break;
}
}
document.write('</ul>');
}

//]]>
</script>
Ahora busca esta línea:
<b:loop values='data:post.labels' var='label'>
Y justo antes del siguiente </b:loop> pega esto:
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name +
"?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10"'
type='text/javascript'/>
</b:if>
Ya sólo busca esta línea:
<div class='post-footer-line post-footer-line-3'
Y pega debajo de ella lo siguiente:

 <b:if cond='data:blog.pageType == &quot;item&quot;'><div id='related-posts'>
<div class='post-footer-line post-footer-line-4' id='relpost'>
<h2>Entradas relacionadas:</h2>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</b:if></div>
</div></b:if>

Guarda los cambios y listo. los cambios los podras ver unicamente en las entradas.

Muy Importante:

Cada entrada debe tener minimo una etiqueta y que las etiquetas se muestren en el post para que las entradas relacionadas funcionen.
 
Info: sacado de una planilla de johnytemplate

lunes, 18 de marzo de 2013

botones de Ir Arriba e Ir Abajo con un efecto de deslizamiento para Blogger



En esta ocasión le traigo un tutorial que espero que les guste,
aprenderemos como colocar dos botones; una para poder ir arriba y otro para poder ir abajo,
que seran de gran utilidad para nuetros que nuestros lectores, que les facilitar mucho ver el contenido de nuestras
entradas cuando aveces son demaciado lagas.

Para esto usaremos jquery, por lo tanto,
Si usas Scriptaculous podrías tener complicasiones, al final les dejare a solucion.


Veamos entonces cómo poner los botones de Ir Arriba e Ir Abajo con un efecto de deslizamiento usando jQuery.
Lo primero es entrar en la Edición HTML y pegar antes de ]]></b:skin> los estilos:

    /* Botones de Ir arriba e Ir abajo con jQuery
    ----------------------------------------------- */
    .nav_up{
    padding:7px; /* Distancia entre el borde y el ícono */
    background-color:white;
    border:1px solid #CCC; /* Color del borde */
    position:fixed;
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNZPtukToWS5EVyk1vxmRD_Zef5pGOspmAZz5Wd2e5MveYViGopAFzQLeEh5lAK1qYSXiLHe6WhB6A32VOEt8oViXJFJpo93XnEzHuQnuaXohxOoC8cuSCte1se3Mkx-wT09uW6LZyX8U/s16/arrow_up.png) no-repeat top left;
    background-position:50% 50%;
    width:20px; /* Ancho del botón */
    height:20px; /* Alto del botón */
    bottom:10px; /* Distancia desde abajo */
    right:30px; /* Cambiar right porleft si se quiere a la Izquierda */
    white-space:nowrap;
    cursor: pointer;
    border-radius: 3px 3px 3px 3px;
    opacity:0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
    }
    .nav_down{
    padding:7px; /* Distancia entre el borde y el ícono */
    background-color:white;
    border:1px solid #CCC; /* Color del borde */
    position:fixed;
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijQom_hkvZ3EtNeWv4atahkOWobKTonjqZThavO6_Eacd9nCSrsSeRBR_-NSwefh1rkO_8OuzmO29vzZDDITICcfiq94Vrtgx2sT3OU0e7MliTiWJW3ZnkFt_Vq3wyGilygihcEYx5cek/s16/arrow_down.png) no-repeat top left;
    background-position:50% 50%;
    width:20px; /* Ancho del botón */
    height:20px; /* Alto del botón */
    bottom:10px;
    right:70px; /* Cambiar right porleft si se quiere a la Izquierda */
    white-space:nowrap;
    cursor: pointer;
    border-radius: 3px 3px 3px 3px;
    opacity:0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
    }

Luego antes de </body> pega este código:

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
    <div class='nav_up' id='nav_up' style='display:none;'/>
    <div class='nav_down' id='nav_down' style='display:none;'/>
    <script>
    //<![CDATA[
    (function(){var special=jQuery.event.special,uid1='D'+(+new Date()),uid2='D'+(+new Date()+1);special.scrollstart={setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})();
    $(function() {
    var $elem = $('body');
    $('#nav_up').fadeIn('slow');
    $('#nav_down').fadeIn('slow');
    $(window).bind('scrollstart', function(){
    $('#nav_up,#nav_down').stop().animate({'opacity':'0.2'});
    });
    $(window).bind('scrollstop', function(){
    $('#nav_up,#nav_down').stop().animate({'opacity':'1'});
    });
    $('#nav_down').click(
    function (e) {
    $('html, body').animate({scrollTop: $elem.height()}, 800);
    } );
    $('#nav_up').click(
    function (e) {
    $('html, body').animate({scrollTop: '0px'}, 800);
    } );});
    //]]>
    </script>

Y listo. Todo lo que esta de color puedes modificar al estilo que quieras,
desde las posiciones de los botones, bordes y otros.


De antemano les conete que su usaban escriptaculos tendian complicaciones, para eso
ver la siquiente entrada.

Via: Ciudad blogger

jueves, 14 de marzo de 2013

Principales Condicionales de Blogger



Todas estas técnicas de mostrar los elementos de cierta forma sólo en determinadas páginas se logra con los códigos condicionales de Blogger.
Las condicionales son códigos que indican dónde debe ejecutarse algo y dónde no. Es decir, condiciona una orden.
De esta forma podemos hacer que un script, un video, una imagen, un gadget, un mensaje, un truco, estilos, etc. se muestre sólo en la portada del blog, o sólo en las entradas, o sólo en las páginas estáticas, o sólo en las listas de archivos, o en una entrada específica.

Usarlos es sencillo, sólo hay poner al inicio del elemento que queremos condicionar el código que específica y condiciona dónde se mostrará, y al final de este el cierre de la etiqueta.

Mostrar /ejecutar un elemento sólo en la portada del blog


<b:if cond='data:blog.url == data:blog.homepageUrl'>
...Aquí va el código del elemento...
</b:if>

Mostrar /ejecutar un elemento sólo en las entradas individuales


<b:if cond='data:blog.pageType == &quot;item&quot;'>
...Aquí va el código del elemento...
</b:if>

Mostrar /ejecutar un elemento sólo en las páginas del archivo del blog


<b:if cond='data:blog.pageType == &quot;archive&quot;'>
...Aquí va el código del elemento...
</b:if>

Mostrar /ejecutar un elemento sólo en las páginas estáticas


<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
...Aquí va el código del elemento...
</b:if>

Mostrar /ejecutar un elemento en una entrada específica o etiqueta específica


<b:if cond='data:blog.url == &quot;URL de la entrada o etiqueta&quot;'>
...Aquí va el código del elemento...
</b:if>


Por lo contrario también podemos especificar que se muestre en todas partes excepto en un lugar específico.

Mostrar /ejecutar un elemento en todas las páginas MENOS en la portada del blog


<b:if cond='data:blog.url != data:blog.homepageUrl'>
...Aquí va el código del elemento...
</b:if>

Mostrar /ejecutar un elemento en todas las páginas MENOS en las entradas individuales


<b:if cond='data:blog.pageType != &quot;item&quot;'>
...Aquí va el código del elemento...
</b:if>

Mostrar /ejecutar un elemento en todas las páginas MENOS en las páginas del archivo del blog


<b:if cond='data:blog.pageType != &quot;archive&quot;'>
...Aquí va el código del elemento...
</b:if>

Mostrar /ejecutar un elemento en todas las páginas MENOS en las páginas estáticas


<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
...Aquí va el código del elemento...
</b:if>

Mostrar /ejecutar un elemento en todas las páginas MENOS en una entrada específica o etiqueta específica


<b:if cond='data:blog.url != &quot;URL de la entrada o etiqueta&quot;'>
...Aquí va el código del elemento...
</b:if>

En donde dice ...Aquí va el código del elemento... se agrega lo que se desea condicionar, por ejemplo el script, el código del truco, o los estilos.
Por ejemplo, para que la sidebar tenga un color de fondo diferente sólo en la portada del blog se usaría este código antes de </head> lo siguiente:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
#sidebar-wrapper {
background: #0080FF;
}
</style>
</b:if>

Eso haría que la barra lateral tenga un color de fondo azul en la portada pero cuando se esté en cualquier otra página cambie al color normal que tiene la plantilla.

De esta forma condicionamos la forma que se verá el blog según la página donde se esté.
Como mencioné antes se puede hacer para un sin fin de cosas, desde un simple estilo hasta condicionar todo un contenedor como la sidebar.

martes, 28 de febrero de 2012

Como personalizar los bloques entrecomillados de blogger


Nota: para buscar algún código en especifico mas facil y rapido presiona "Ctrl +F" 

Tabulaciones realmente una manera muy agradable para diferenciar algunos de los contenidos del resto. Y también es una buena forma de impresionar a los usuarios mediante el uso de un estilo fresco para el presupuesto

En este post me he dado a los diferentes estilos de blockquotes procedentes de distintas fuentes sólo comprobar los estilos.
La forma de usarlo es encerrando el texto entre <blockquote> y </blockquote> o usando el ícono de entrecomillado que se encuentra en el editor de entradas comillas
Para personalizar estos bloques entrecomillados entra en Diseño > Edición de HTML y busca esto:

blockquote {
..............
..............
..............
}
Y sustitúyelo por esto: 


Nota;
Es posible que en algunas plantillas no empiece el código como

blockquote {
sino como


.post blockquote {

y tal vez en otras no esté ninguno de los dos, si es así sólo agrégalo los siguientes códigos:

Estilo 1



Código

blockquote {margin: 1em 3em; color: # 999; border-left: 2px solid # 999; padding-left: 1em;}

Estilo 2


Código

blockquote {margin: 1em 3em; padding: .5 em 1em; border-left: 5px sólida # fce27c; background-color: # f6ebc1;} blockquote p {margin: 0;}

Estilo 3


codigo

blockquote {margin: 1em 2em; border-left: 1px dashed # 999; padding-left: 1em;} blockquote p: first-letter {float: left; margin: 0.2 0.3 em em em 0,1 0; font-family: "Monotype Corsiva "," Apple Chancery ", la fantasía; font-size: 220%; font-weight: bold;} blockquote p: first-line {font-variant: small-caps;}


A diferencia de otras citas este estilo tiene una opción de la primera letra en negrita.

Estilo 4


Código


blockquote {
background-color: # 666;
color: # FFF;
font-weight: bold;
padding: 10px;
-Moz-border-radius: 5px;
-Webkit-border-radius: 5px;}
Estilo 6


Código

blockquote {
background-color: # 666;
color: # FFF;
padding: 15px;
margin: 1em 40px;
-Moz-border-radius-topLeft: 15px;
-Webkit-border-top-left-radius: 15px;
-Moz-border-radius-topright: 15px;
-Webkit-border-top-derecha-radio: 8px;
-Moz-border-radius-bottomleft: 15px;
-Webkit-border-bottom-left-radius: 15px;}



Los blockquotes anteriores se proporcionan por CSSNewbie

Descripcion en imagenes con efecto deslizante usando css

Una forma de agregarle mas estilo a nuestras imágenes y hacer que nuestro blogs sea mas profesional, es poniendo una pequeña descripc...