terça-feira, 1 de março de 2016

Widget latest post blogger

widget-ultimos-post-blogger

Hoje vamos compartilhar esse tutorial para exibir uma lista de links para postagem por etiqueta, isso é muito util e também ajuda a manter seu publico alvo conectado então para inserir isso no seu Blogger siga o tutorial abaixo:


Faça login no Blogger no menu 
procure por modelo então >> Editar/HTML/Java/Script 
Com as teclas combinadas CTRL+F busque por </head> e logo acima disso 
copie e cole o seguinte código.

<style type='text/css'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
.post {
margin:.5em 0 1.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:1.0em;
height:50px;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:20px;
font-family:Tahoma,Georgia,Century gothic,Arial,sans-serif;
font-weight:normal;
line-height:1.4em;
color:#cc6600;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:#cc6600;
font-weight:normal;
}
.post h3 strong, .post h3 a:hover {color: #333333;}
.post-body {display:none;}
.post-footer {display:none;}
.comment-link {display:none;}
.post img {display:none;}
.post blockquote {display:none;}
.post blockquote p {display:none;}
h2.date-header {display:none;}
.post-labels {display:none;}
.post-rating {display:none;}
</b:if>
</style>

Agora altere o seguinte código <b:include data='post' name='post'/> por 

<b:if cond='data:blog.homepageUrl == data:blog.url'> <b:if cond='data:blog.pageType != &quot;item&quot;'> <a expr:href='data:post.url'> <div style='padding:6px 0 6px 5px;border-right:1px solid #ccc;border-bottom:0px solid #ccc;margin-bottom:0px;background:;color:;'> <data:post.title/></div></a> <b:else/> <b:include data='post' name='post'/> </b:if> <b:else/> <b:include data='post' name='post'/> </b:if>

ou 

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<div style='padding:5px 0 5px 10px;box-shadow:5px 6px 2px #808080;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;margin-bottom:2px;color:#00ACEE;text-shadow: 1px -1px 0px #E0E0E0;font-size:20px;'>
<data:post.title/></div></a>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

O segundo código acima é o código que faz a exibição de uma lista de títulos pós como ilustração acima, mas sem a data ou a hora da publicação. Para adicionar texto Última Mensagem além ícone RSS, adicione o seguinte código sob o código <div id = 'main-wrapper'>

<h2 style="background:url(http://2.bp.blogspot.com/-R47EHosIpq0/T1j_-WTQBFI/AAAAAAAAFxk/guY5A6IBT2k/s1600/icon_rss.jpg) no-repeat 3px 10px;margin:0;letter-spacing:-.001em; padding:8px 0 8px 25px;  font:bold 13px Arial;color:#07327c; text-transform:uppercase;overflow:hidden;">Latest Post</h2>


CSS acima de ]]></b:skin>  

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

ou 

<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
.post-body, .post-footer, .jump-link,
.post-timestamp, .reaction-buttons,
.star-ratings, .post-backlinks,
.post-icons, .date-header{display:none;}
</b:if>
</b:if>
</style>


Agora mude <b:include data='post' name='post'/>  por 

<!--Post Titles Only-->
<b:if cond='data:blog.pageType != "item"'>
<h3 class='title-only'><a expr:href='data:post.url'><data:post.title/></a></h3>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<!--Post Titles Only-->

salve e pronto 

Créditos: Contho

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post

Nenhum comentário:

Postar um comentário

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner