Posts Relacionados Usando Apenas HTML e CSS

Posts Relacionados Usando Apenas HTML e CSS

1. Acesse seu Modelo - Editar HTML e marque Expandir Modelos de Widgets.
2. Procure por </head> Quando encontrar cole ACIMA dele:

copiar sourceprint?

01	<!--Related Posts Start -->

02	<style type='text/css'>

03	#related-posts {

04	float:center;

05	text-transform:none;

06	height:100%;

07	min-height:100%;

08	padding-top:5px;

09	padding-left:5px;

10

}

11	#related-posts h2{

12	font-size: 1.6em;

13	font-weight: bold;

14	color: #fcc;

15	font-family:  "Verdana";

16	margin-bottom: 0.75em;

17	margin-top: 0em;

18	padding-top: 0em;

19

}

20	#related-posts a{

21	color:#fcc;

22

}

23	#related-posts a:hover{

24	color:#fcc;

25

}

26	#related-posts  a:hover {

27	background-color:#fee;

28

}

29

</style>

30	<script src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/>

31	<!--Related Posts-->

Vamos entender:

• #related-posts = personalização do título;

• float:center = posicionamento;

• font-size: 1.6em = tamanho da fonte;

• font-weight: bold = texto negrito;

• color: #fcc = cor do texto; - consulte a tabela de cores.

• font-family:  "Verdana" = tipo da fonte;

• background-color:#fee = cor de fundo quando passa o mouse; pode trocar por imagem deixando assim: background:#fee url(URL DA IMAGEM) repeat;- aqui no Reino Kawaii tem muitos backgrounds fofos para vocês!!

Aplique os estilos da forma que quiser. Se quiser que as postagens relacionadas apareçam quando o leitor abrir a postagem e não na home do seu blog, acrescente o código anterior neste aqui:

copiar sourceprint?

1	<b:if cond='data:blog.pageType == &quot;item&quot;'>

2	CODIGO ANTERIOR AQUI

3

</b:if>

3. Procure por <div class='post-footer'> e cole ABAIXO dele ou <div class='post-footer-line post-footer-line-1'> e cole ACIMA dele:

copiar sourceprint?

01	<!--Related Posts Start-->

02	<div id='related-posts'>

03	<b:loop values='data:post.labels' var='label'>

04	<b:if cond='data:label.isLast != &quot;true&quot;'>

05

</b:if>

06	<b:if cond='data:blog.pageType == &quot;item&quot;'>

07

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>

08	<script type='text/javascript'>

09	var currentposturl=&quot;<data:post.url/>&quot;;

10	var maxresults=5;

11	var relatedpoststitle="Posts Relacionados:";

12	removeRelatedDuplicates_thumbs();

13	printRelatedLabels_thumbs();

14

</script>

15

</div>

16	<div style='clear:both'/>

17	<!--Related Posts-->

Em que:

• O número 5 se refere a quantas miniaturas de postagens serão mostradas;

• E o texto "Posts Relacionados:" vai aparecer como título e pode ser alterado. 

Novamente, se você configurar para aparecer apenas quando o leitor clicar na postagem, não se esqueça de deixá-lo assim: 

copiar sourceprint?

1	<b:if cond='data:blog.pageType == &quot;item&quot;'>

2	CODIGO ANTERIOR  QUE VAI NO POST-FOOTER AQUI

3

</b:if>

O resultado será algo semelhante ao meu:

Simples não é? Há outra forma disso ser feito, mostrando apenas links e textos sem imagens, que você pode conferir aqui: Posts Relacionados sem imagens.
E no Candylland existem 2 modelos prontos também: Modelo 1:::::: Modelo2.


http://reinokawaii.blogspot.com.br/2013/01/posts-relacionados-com-html-e-css.html