Botão leia mais p area posts

Boas tardes a todos, venho trazer um tutorial do botão LEIA MAIS ...
Podem vêr na imagem acima o botão abaixo da imagem  .
Visualize online ;  ENTRE AQUI...

Antes de tudo faça uma cópia do seu template...

Vamos colocár o css entre em modelo e depois editar html .
Procure este código ...


]]></b:skin>

 Agora acima dele coloque este meu código:

}
.leia-mais{
float: right;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s;letter-spacing:1px;
border:solid 1px #ff8f85; -moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background: #b9cafd; color: #000 !important;
display:inline-block;
font-family:arial;
font-size:12px;
font-weight:bold;
padding:1px 14px;
margin-top: 10px;
}
.leia-mais a {
color:#ff8f85;
}
.leia-mais:hover {
background: #f9e1e9; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222 ;
}

Vamos colocar o script procure este código;


]]></b:skin>

E abaixo dele cole este meu:

<!-- Resumo do Post -->
<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 280;
summary_img = 200;
img_thumb_height = 130;
img_thumb_width = 610;
</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);
}
}
strx =  s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) { if(thumbnail_mode == "float") {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
} else {
imgtag = '<div style="padding:5px" align="center"><img style="max-width:'+img_thumb_width+'px; max-height:'+img_thumb_height+'px;" src="'+img[0].src+'" /></div>';
summ = summary_img;
}
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Vamos colocar html  procure este código;

<div class='post-body entry-content' expr:id='"post-body-" + data:post.id'>

 E abaixo dele cole este meu codigo:

 <b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'>
<data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<div class='leia-mais'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a></div>
</b:if>
</b:if>

 E foi esta partilha que trouxe ,alguma dúvida disponha sempre...Até mais...

Botão leia mais p area posts

► 1

► botões dicas vários

► Cartita