Tutorial - Botão leia mais com imagem

Postado Por: Nayan Baizek - Freelancer

Esse tutorial me ajudou muito   pra botar aqui no  blog . 
Créditos : Create pro . 




Entre no painel do Blogger, clique em design e, depois, em editar HTML.




Marque a caixa expandir modelos de widgets e procure por:



    <data:post.body/>




Substitua a linha <data:post.body/> por:




    <b:if cond='data:blog.pageType != "item"'>

    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>

    <div expr:id='"summary" + data:post.id' style='display:none;'><data:post.body/></div>

    <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
    <div style="clear:both" align='right' class='rmlink'><a expr:href='data:post.url'>Leia mais »»</a></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>








Agora vá no CSS do template e antes da tag ]]></b:skin> cole este código:


    .rmlink {

    font-size: 100%;

    float: right;

    margin-right: 30px;
    margin-top: 10px;
    font-weight: bold;}
    .rmlink a {
    font-style: normal;
    font-weight: bold;
    font-variant: small-caps;
    font-family: Arial,Sans-Serif;
    color: #24618e; /*Cor do Link*/}
    .rmlink a:visited { color: #649dc7;}/*Cor do link depois de clicado*/
    .rmlink a:hover { color: red;} /*Cor do link ao passar o mouse em cima*/












Procure então pela tag </head> e cole este outro código embaixo dela:




<!-- JavaScript Posts Resumidos-->

<!--

/*****************************************************

Auto-readmore link script, version 4.0 (for blogspot)
(C)2009 by Anhvo
Homepage:  http://vietwebguide.com
Please dont remove this copyright or change it into your own
******************************************************/
-->



<style type="text/css">

.thumbnailimg IMG {

max-width:150px;

  width: expression(this.width > 150 ? 150: true);
  max-height:120px;
  height: expression(this.height > 120 ? 120: true);



}

.thumbnailimg {

float:left;

padding:0px 10px 5px 0px;
}
</style>
<script type='text/javascript'>
var thumbnail_mode = "no-float" ;
var classicMode = false ;
var summary_noimg = 50;
var summary_img = 40;
var indent = 3;
</script>
<script  type='text/javascript'>
//<![CDATA[
function stripHtmlTags(s,max){return s.replace(/<.*?>/ig, '').split(/\s+/).slice(0,max-1).join(' ')}



function getSummaryLikeWP(id) {

       return document.getElementById(id).innerHTML.split(/<!--\s*more\s*-->/)[0];

}




function getSummaryImproved(post,max){

  var re = /<.*?>/gi

  var re2 = /<br.*?>/gi

  var re3 = /(<\/{1}p>)|(<\/{1}div>)/gi
  var re4 = /(<style.*?\/{1}style>)|(<script.*?\/{1}script>)|(<table.*?\/{1}table>)|(<form.*?\/{1}form>)|(<code.*?\/{1}code>)|(<pre.*?\/{1}pre>)/gi



  post = post.replace(re4,'')

  post = post.replace(re3,'<br /> ').split(re2)




  for(var i=0; i<post.length; i++){

   post[i] = post[i].replace(re,'');

  }

var post2 = new Array();
for(var i in post) {
 //if(post[i]!='' && post[i]!=' ' && post[i] != '\n') post2.push(post[i]);
 if(/[a-zA-Z0-9]/.test(post[i])) post2.push(post[i]) ;



}





var s = "";

var indentBlank = "";

for(var i=0;i<indent;i++){

 indentBlank += " ";
}
if(post2.join('<br/>').split(' ').length < max-1 ){
  s = post2.join(indentBlank +' <br/>');
} else {
 var i = 0;
 while(s.split(' ').length < max){
  s += indentBlank + ' ' + post2[i]+'<br/>';
  i++;
 }
}  
return s;
}




function createSummaryAndThumb(pID){

var div = document.getElementById(pID);

var content = div.innerHTML;

if (/<!--\s*more\s*-->/.test(content)) {
 div.innerHTML = getSummaryLikeWP(pID);
 div.style.display = "block";
}
else {



var imgtag = "";

var img = div.getElementsByTagName("img");

var summ = summary_noimg;

if(img.length>=1) {
 if(thumbnail_mode == "float") {
  imgtag = '<span class="thumbnailimg"><img src="'+img[0].src+'" /></span>';
  summ = summary_img;
 } else {
  imgtag = '<div class="thumbnailimg" align="center"><img src="'+img[0].src+'" /></div>';
  summ = summary_img;
 }
}



var summary = (classicMode) ? imgtag + '<div>' + stripHtmlTags(content,summ) + '</div>' : imgtag + '<div>' + getSummaryImproved(content,summ) + '</div>';




div.innerHTML = summary;

div.style.display = "block";

}

}
//]]>
</script><!-- Fim JavaScript Posts Resumidos-->


OBS: Para Botar uma imagem invés  de  leia mais  

Procure por :

leia mais  e substitua  esse trecho :
<a expr:href='data:post.url'>Leia mais »»</a>

Por:
<a expr:href='data:post.url'><img border='0' src='Url de sua imagem'/></a>






Sem comentários »

0 comentários:

Postar um comentário