Cosas para el Blog

Inicio » Entradas. Condicionales

Mostrando entradas con la etiqueta Condicionales. Mostrar todas las entradas

Entradas Resumidas solo Titulo

11 de octubre de 2023

Insertando este condicional en la plantilla nos permitirá mostrar solo los títulos de nuestras entradas en la pagina de inicio del blog de Blogger, sin JavaScript.

Vamos al HTML de nuestra plantilla, presionamos Ctrol+F, nos aparecerá el buscador allí pegamos:

<data:post.body/>

lo reemplazamos por

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

Luego obtenemos una vista previa de su plantilla para verificar que todo esté correcto para guárdela.

Así solo visualizaremos en la pagina de inicio de nuestro blog de Blogger, solo el títulos de las entradas; logrando que la carga de la pagina sea más rápida.

Ocultar los elementos de post-footer

23 de enero de 2015

Para ocultar los elementos de post-footer en la portada del blog ir a

Diseño ►Edición HTML ►Presionar Ctrl + F, en el buscador pegar

</head>

encima añade este bloque

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type="text/css">
.post-footer {
display: none;
}
</style>
</b:if></b:if>

►Para finalizar presionamos Vista Previa y si todo esta bien guardamos la plantilla.

Así se abran ocultado los datos del post-footer en la portada del blog en Blogger.

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

16 de enero de 2015

Hay Gadgets de Blogger que podemos eliminar para hacer la carga más ligera, hay otros Gadgets en el blog que son necesarios para el blog y no queremos eliminarlos, así que lo que haremos será Mostrarlos y que solo se ejecuten en las páginas estáticas, y cuando el visitante entre a la portada este no estará.


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

Sólo hay que localizar el gadget y agregar lo que esta en rojo, en este ejemplo utilizo el código de un LinkList1.

<b:widget id='LinkList1' locked='false' title=' ' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "static_page"'>
<b:if cond='data:title'>
<h2><data:title/></h2></b:if>
<div class='widget-content'> <ul>
<b:loop values='data:links' var='link'> <li>
<a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:if>
</b:includable>
</b:widget>

La primera linea que agregamos va justo después de <b:includable id='main'> y la segunda parte justo antes de </b:includable>

Esto lo haremos con cada uno de los gadgets que queremos esconder, aunque tienen un código distinto, sólo hay que guiarse por los datos que he dado.
De esta forma los gadgets se mostrarán solo en las paginas estáticas de nuestro blog, pero en las entradas se ocultarán.

Reemplazar los links Entradas antiguas por el título de la entrada.

12 de enero de 2015

Para reemplazar los links Entradas antiguas, Entradas mas recientes por el título de las entrada en Blogger ir a

Plantilla → Copia de seguridad de su plantilla ►Haga clic en "Editar HTML"
Buscar

<data:post.body/>

debajo pegar

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<ul class='blog-pager'>
<li class='next'>
<b:if cond='data:newerPageUrl'>
<i class='fa fa-chevron-right'/><a class='newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' rel='next'/>
<b:else/>
<i class='fa fa-chevron-right'/><a rel='next'><strong>Siguiente</strong> <span>Usted esta viendo la Publicación más Reciente </span></a>
</b:if>
</li>
<li class='previous'>
<b:if cond='data:olderPageUrl'>
<i class='fa fa-chevron-left'/><a class='older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' rel='previous'/>
<b:else/>
<i class='fa fa-chevron-left'/><a rel='previous'><strong>Anterior</strong> <span>Usted esta viendo lo Último Publicado</span></a>
</b:if>
</li>
</ul>
<script type='text/javascript'>
//<![CDATA[
(function($){
var newerLink = $('a.newer-link');
var olderLink = $('a.older-link');
$.get(newerLink.attr('href'), function (data) {
newerLink.html('<strong>Siguiente</strong> <span>'+$(data).find('.post h3.post-title').text()+'</span>');
},"html");
$.get(olderLink.attr('href'), function (data2) {
olderLink.html('<strong>Anterior</strong> <span>'+$(data2).find('.post h3.post-title').text()+'</span>');
},"html");
})(jQuery);
//]]>
</script>
</b:if></b:if>

El texto resaltado con color puede ser sustituido por el texto que desee.

buscar

<b:includable id='nextprev'>

aparecera un codigo similar a este

<div class='blog-pager' id='blog-pager'>
   <b:if cond='data:newerPageUrl'>
     <span id='blog-pager-newer-link'>
     <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
     </span>
   </b:if>
   <b:if cond='data:olderPageUrl'>
     <span id='blog-pager-older-link'>
     <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
     </span>
   </b:if>
   <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
   <b:if cond='data:mobileLinkUrl'>
     <div class='blog-mobile-link'>
       <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
     </div>
   </b:if>
</div>
<div class='clear'/>

Encerrar este código dentro de los códigos condicionales como se muestra a continuación:

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
código
</b:if></b:if>

quedando así

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a> </span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a> </span>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:if cond='data:mobileLinkUrl'>
<div class='blog-mobile-link'>
<a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
</div>
</b:if>
</div>
<div class='clear'/>
</b:if></b:if>

Pegar debajo de

<head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

Nota: si ya tiene Jquery en la plantilla no ponerlo nuevamente

]]></b:skin>

arriba de este pegar

/*blog.page
-------------*/
.blog-pager {
border-top: 2px dashed #ddd;
border-bottom: 2px dashed #ddd;
margin-bottom: 10px;
overflow:hidden;
padding:0px;
}
.blog-pager li.next {
float: right;
padding:0px;
background:none;
margin:0px;
}
.blog-pager li.next a {
padding-left: 24px;
}
.blog-pager li.previous {
margin:0px -2px 0px 0px;
float: left;
border-right:1px solid #ddd;
padding:0px;
background:none;
}
.blog-pager li.previous a {
padding-right: 24px;
}
.blog-pager li.next:hover, .blog-pager li.previous:hover {
background:#333333; /*fondo al pasar el cursor*/
}
.blog-pager li {
width: 50%;
display: inline;
float: left;
text-align: center;
}
.blog-pager li a {
position: relative;
min-height: 77px;
display: block;
padding: 15px 46px 15px;
outline:none;
text-decoration:none;
}
.blog-pager li i {
color: #ccc;
font-size: 18px;
}
.blog-pager li a strong {
display: block;
font-size: 20px;
color: #ccc;
letter-spacing: 0.5px;
font-weight: bold;
text-transform: uppercase;
font-family:oswald,
sans-serif, arial;
margin-bottom:10px;
}
.blog-pager li a span {
font-size: 15px;
color: #666;
font-family:oswald,Helvetica, arial;
margin:0px;
}
.blog-pager li a:hover span,
.blog-pager li a:hover i {
color: #ffffff; /* color del texto al pasar el cursor*/
}
.blog-pager li.previous i {
float:left;
margin-top:15%;
margin-left:5%;
}
.blog-pager li.next i {
float: right;
margin-top: 15%;
margin-right: 5%;
}
.blog-pager li.next i, .blog-pager li.previous i ,
.blog-pager li.next, .blog-pager li.previous{
-webkit-transition-property: background color;
-webkit-transition-duration: 0.4s;
-webkit-transition-timing-function: ease-out;
-moz-transition-property: background color;
-moz-transition-duration: 0.4s;
-moz-transition-timing-function: ease-out;
-o-transition-property: background color;
-o-transition-duration: 0.4s;
-o-transition-timing-function: ease-out;
transition-property: background color;
transition-duration: 0.4s;
transition-timing-function: ease-out;
}
.fa-chevron-right {
padding-right:0px;
}

Ampliar las entradas y ocultar la sidebar en las páginas estáticas

13 de diciembre de 2014

En esta entrada mostrare como lograr que las entradas independientes o páginas estáticas tengan un ancho mucho mayor al de las entradas normales y que la sidebar (barra lateral) se oculte.Ver ejemplo aquí.

Diseño ►Edición HTML ►Presionar Ctrl + F, en el buscador pegar

</head>

Encima añade este bloque:

<b:if cond='data:blog.pageType == "static_page"'>
<style type='text/css'>
#main-wrapper {
float: center;
width: 1000px;
}
#sidebar-wrapper {
visibility: hidden;
display: none;
width: 0px;
}
</style>
</b:if>

El main-wrapper (la zona de las entradas) tendrá un ancho de 1000 píxeles.

La barra lateral (sidebar-wrapper) estará oculta (visibility: hidden; display: none;) y con un ancho de 0 píxeles (width: 0px;).

Guarda la plantilla para terminar.