colocar leia mais com imagem giratoria

um efeito muito bonito para colocar em seu blog, este tutorial ensina como colocar um Hack leia mais personalizado com botões para redes sociais, para dar aquele toque de beleza em seu blogger, antes de tudo é bom dizer que sempre tem aquele template que não vai funcionar o efeito devido a incompatibilidade, sempre faça uma copia de seu template por segurança antes de começar, e vamos ao tutorial.













veja uma demostração do efeito aqui


Para colocar hack leia mais basta acessar o Painel do Blogger, ir em Modelo, clicar em Editar Html, , procurar e pela tag </head> e antes dela colar o código a seguir.

Dicas aperte CTRL+F digite e </head> assim facilitara sua busca no template

<!-- Hack Leia Mais by http://slidertemplates.blogspot.com.br/ -->       
<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;       
summary_noimg = 300;       
summary_img = 280;       
img_thumb_height = 100;       
img_thumb_width = 110;       
</script>       
<script type='text/javascript'>       
//<![CDATA[       
function removeHtmlTag(strx,chop){       
if(strx.indexOf("<")!=-1)       
{       
var s = strx.split("<");       
for(var i=0;i<s.length;i++){       
if(s[i].indexOf(">")!=-1){       
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);       

---

Agora procure pela tag ]]></b:skin> e acima dela cole o seguinte código.

.post-body {
    padding: 0 0 10px 0;
}
.thumb-post img {
padding: 4px;
margin:0 0 0 15px;
width: 72px;
height:72px;
background: #fff;
border: 3px solid #008ABD;
-webkit-border-radius: 50px;
-moz-border-radius: 50px; border-radius: 50px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.post:hover:hover .thumb-post img {
border: 3px solid #cccccc;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);
}
     

---

Marque  Expandir modelos de widgets procure por <data:post.body/> e substitua a tag encontrada pelo código abaixo.

<div class='post-body entry-content'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<style>
.readmore{margin-bottom:0px;float:right}
.readmore a{color:#fff;background:#666666;padding:8px 14px;display:inline-block;font-size:12px;line-height:15px;text-decoration:none;text-transform:uppercase;}
.readmore a:hover{color:#fff;background:#CCCCCC;text-decoration:none}
</style>
<div style='background-color: #eeeeee;border: 1px solid #ccc;margin-top:2%;height:31px;box-shadow: 0px 0px 8px 0px #ccc;-moz-box-shadow: 0px 0px 8px 0px #ccc;-webkit-box-shadow: 0px 0px 8px 0px #ccc;'>
<div style='padding-left:5px;padding-top:5px;float:left'><a class='twitter-share-button' data-count='horizontal' data-via='pbloggeroficial' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></div>
<div style='float:left;padding-top:5px;'><script src='//connect.facebook.net/pt_BR/all.js#xfbml=1' type='text/javascript'/>
<div>
<fb:like action='' colorscheme='light' expr:href='data:post.url' font='arial' layout='button_count' send='true' show_faces='false'/>
</div></div>
<div style='float:left;padding-top:5px;'><g:plusone expr:href='data:post.url' size='medium'/></div>
<div class='readmore' style='float:right'><a expr:href='data:post.url'><b>Leia Mais</b> &#8594;</a>
</div></div>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div> 

você pode modificar algumas coisas como cores e tamanho da imagem ex:  para modificar tamanho da imagem procure por width: 72px;
height:72px;

---