mr Jones
Muitos blogs
apresentam esse recurso de apresentar o título da postagem ao invés do tradicional postagem mais antiga e postagem mais recente.
Hoje neste
artigo, vou mostrar como substituir os links de posts mais antigos / mais
recentes Com títulos de postagens no blogger.
Em primeiro lugar,
faça login em seu blog do Blogger ,
vá para Template >>Tema >> Editar HTML >> pesquisar a tag
</ head> e acima dela adicionar o jQuery caso não esteja previamente
instalado:
<Script type = "text / javascript"
src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">
</ script>
|
Após esse
procedimento, vá até a tag </body>
e cole acima dela esse código:
<b:if cond='data:blog.pageType ==
"item"'>
<script type="text/javascript">
$(document).ready(function(){
var newerLink =
$("a.blog-pager-newer-link").attr("href");
$("a.blog-pager-newer-link").load(newerLink+"
.post-title:first", function() {
var newerLinkTitle = $("a.blog-pager-newer-link").text();
$("a.blog-pager-newer-link").html("<h4>Artigo
Recente</h4>" + newerLinkTitle);
});
var olderLink =
$("a.blog-pager-older-link").attr("href");
$("a.blog-pager-older-link").load(olderLink+"
.post-title:first", function() {
var olderLinkTitle =
$("a.blog-pager-older-link").text();
$("a.blog-pager-older-link").html(
"<h4>Artigo Anterior</h4>"+
olderLinkTitle );//rgt
});
});
</script>
</b:if>
|
Salve. Os
títulos das postagens recentes e antigas já estarão aparecendo, porém você pode
deixar algum estilo para eles.
Segue uma sugestão:
#blog-pager {
text-align:middle;line-height: 1.6em;width:600px;
font-family:
'Raleway', sans-serif; background: #e4e4e4 ;
font-size: 17px;
font color: #303030;
float: center;
color:
$feedlinksColor;
}
#blog-page h3 {
font-weight: bold; border-botton: 1px
solid #888;
}
#blog-pager a {color:
#000000; }
#blog-pager a:hover
{color: $mainHoverLinkColor}
.blog-pager-newer-link
{background-color:transparent !important; padding: 0 !important;}
.blog-pager-older-link
{background-color:transparent !important;padding: 0 !important;}
#blog-pager-newer-link
{padding:5px;font-size:90%;width:240px;text-align:left;background: #e4e4e4 ;}
#blog-pager-older-link
{padding:5px;font-size:90%;width:250px;text-align:left;background: #e4e4e4 ;}
|
Após salvar,
tudo já estará funcionando corretamente.
navegação,postagens,títulos no post
