Box Com Avaliação Com Estrelas e Redes Sociais No Final das Postagens

Nesta postagem compartilho com vocês mais uma box personalizada que ficará no final das suas postagens ou até mesmo no inicio das postagens facilitando assim a visibilidade para os visitantes. Como vocês podem ver há avaliação com estrelas na box.

Veja uma demonstração:
http://dicashotteste2.blogspot.com.br/

Para colocar em seu blog...

Entre em "Moledo" - "Editar HTML" e procure pela tag

<data:post.body/>

Caso você queira colocar a box no final das postagens, cole ABAIXO dela o código; e se você quiser que a box fica no início das postagens cole ACIMA dela.

Obs.: Você irá encontrar 4 tags iguais, geralmente a correta é a segunda, mas caso não seja, tente em todas elas.

<style>
.DicasHotP {
background: #F3F3F3;
border: 1px solid #DDD;
max-width: 650px;
width: 600px;
padding: 10px;
border-radius: 5px;
margin: 0 auto;
text-align: right;
direction: rtl;
text-shadow: none;
    height: 250px;
}
  .DicasHotP p {
float: right;
background: #F0F0F0;
border: 1px solid #DDD;
padding: 3px;
border-radius: 5px 5px 5px 0;
margin: 0;
    font: 700 15px arial,tahoma;
color: #1177B1;
text-shadow: 1px 1px #FFF;
    width: 200px;
}
#DicasHotBoxBanner {
float: right;
clear: both;
margin: 0;
width: 200px;
padding: 5px 3px 0 0;
height: 230px;
border-left: 5px solid #DDD;
}
#BlogDicasHotAvalie {
float: right;
width: 360px;
margin: 0 20px 0 0;
font: 13px tahoma,arial;
color: #333;
    line-height: 20px;
padding: 0;
}
  #BlogDicasHotAvalie span {
float: right;
clear: both;
text-shadow: 1px 1px #FFF;
}
  #BlogDicasHotAvalie p {
float: right;
width: 90%;
margin: 20px 0 0 0;
padding: 3px;
}
  #BlogDicasHotAvalie a {
    float: right;
font: 700 12px tahoma,arial;
color: #007AFF;
text-decoration: none;
border-right: 1px dotted #999;
border-left: 1px dotted #999;
margin: 0 10px;
padding: 0 5px;
}
#RedesSociaisBox a {
border: 0 !important;
margin: 0 !important;
padding: 5 !important;
}
  #RedesSociaisBox a img {
border-radius: 10px;
}
</style>
<div class='DicasHotP'>
  <p>Publicidade</p>
  <div id='DicasHotBoxBanner'>
    <a href='LINK DO BANNER'><img src='http://www.cursos24h.net.br/banners/gif4/200x200.gif'/></a>
  </div>


<link type="text/css" rel="stylesheet" href="http://static.graddit.com/css/graddit.css" />
<b:if cond='data:blog.pageType != &quot;static_page&quot;'><div expr:id='"labels_" + data:post.id' style='display: none; visibility: hidden;'><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><data:label.name/>,</b:loop></b:if></div>Avalie: <div expr:id='data:post.id' class='ffbs_rate'>{[[&#39;&lt;img src=&quot;http://static.graddit.com/img/star.png&quot;/&gt;&#39;]]}</div><div expr:id='&quot;ffbs_stats_&quot; + data:post.id' class='ffbs_stats'></div><script type='text/javascript' expr:src='&quot;http://www.graddit.com/rate/eng/5/&quot; + data:post.id + &quot;?id=&quot; + data:post.id + &quot;&amp;stats=ffbs_stats_&quot; + data:post.id + &quot;&amp;labels=labels_&quot; + data:post.id + &quot;&amp;info=info-&quot; + data:post.id + &quot;&amp;info_delay=2&amp;url=&quot; + data:post.url + &quot;&amp;class_star=ffbs_star_img&amp;class_star_set=ffbs_star_img_set&amp;class_star_vote=ffbs_star_img_vote&amp;views=yes&amp;votes=yes&amp;average=yes&quot;'></script></b:if>


  <div id='BlogDicasHotAvalie'>
    <span>Editar </span>
    <span>Editar </span>
    <span>Editar </span>
    <span>Editar </span>
    <span>Editar </span><a href=''>http:dicashot.blogspot.com/</a>
    <div id='RedesSociaisBox'><p>Compartilhe </p>
      <a href='https://facebook.com/dicashot'><img src='https://jetara.googlecode.com/files/facebook232311.png'/></a>
      <a href='https://twitter.com/DicashotBlogger'><img src='https://jetara.googlecode.com/files/twitter131.png'/></a>
      <a href='https://youtube.com/'><img src='https://jetara.googlecode.com/files/youtube1455.png'/></a>
      <a href='https://feedburner.com/'><img src='https://jetara.googlecode.com/files/rss1314.png'/></a>
    </div>
  </div>
<div style="text-align: right;">
<span style="font-size: xx-small;">Widget by <a href="http://dicashot.blogspot.com/box-com-avaliacao-com-estrelas-e-redes.html" target="_blank">DicasHot</a></span></div>

</div>

A parte destacada de rosa, refere-se ao banner, caso você não queira apenas colocar uma imagem, cole o código, por exemplo do adsense e cole na parte destacada de rosa.

Tendo calado o código, basta salvar e pronto!

Carregando atualizações...

Box Com Avaliação Com Estrelas e Redes Sociais No Final das Postagens

DESTAQUES DO MÊS