terça-feira, 19 de abril de 2016

Auto read more com CSS3

auto-read-more-blogger


Hoje vamos mostrar como criar  um read more auto no Blogger isso é quando temos artigos na página principal com uma breve introdução onde o leitor precisa fazer uma ação ao clique  para ser levado para a página interna do artigo usando auto read more com botão CSS3 é uma experiencia unica onde vai aumentar views no seu blog e também facilitar a vida do visitante para adicionar isso no seu Blogger siga os passos abaixo:


Adicionando Auto Read more no blogger

Faça login no blogger
no menu procure por modelo então >> Editar  HTML/JavaScript
com as teclas combinadas CTRL+F busque por </head>  copie o código abaixo e cole antes disso.

<!-- Auto Readmore -->
<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 450;
summary_img = 300;
img_thumb_height = 180;
img_thumb_width = 300;
</script>
<script type='text/javascript'>
//<![CDATA[
// <!-- Summary Posts with thumbnails -->
// <!-- -->
 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 20px 5px 0px;margin:0 0 0 0 !important;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
                                                summ = summary_img;
                                } else {
                                                imgtag = '<div style="padding:0 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>

Agora encontre esse código <data:post.body/>  então substitua isso por

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<p><b:if cond='data:blog.pageType != &quot;item&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>
<span class='jump-link' style='float:right'><a expr:href='data:post.url'>Read more...</a>
</span></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if></p>
</b:if>


Adicionando CSS3 Botão read more

Procure por ]]></b:skin>  e antes disso copie e cole o seguinte código

.jump-link a {
background-color: #EEE;
background-image: -webkit-gradient(linear, left top, left bottom, from(#EEE), to(#CCC));
background-image: -webkit-linear-gradient(top, #EEE, #CCC);
background-image: -moz-linear-gradient(top, #EEE, #CCC);
background-image: -ms-linear-gradient(top, #EEE, #CCC);
background-image: -o-linear-gradient(top, #EEE, #CCC);
background-image: linear-gradient(top, #EEE, #CCC);
border: 1px solid #CCC;
border-bottom: 1px solid #BBB;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
color: #333 !important;
font: bold 12px Arial, Verdana, sans-serif;
line-height: 1;
padding: 5px 10px;
text-align: center;
text-shadow: 0 1px 0 #EEE;
display: inline-block;
margin: 20px 5px 0;
}
.jump-link a:hover {
background-color: #dddddd;
background-image: -webkit-gradient(linear, left top, left bottom, from(#dddddd), to(#bbbbbb));
background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);
background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);
background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);
background-image: linear-gradient(top, #dddddd, #bbbbbb);
border: 1px solid #bbb;
border-bottom: 1px solid #999;
cursor: pointer;
text-shadow: 0 1px 0 #ddd;
text-decoration:none;
}
.jump-link a:active {
border: 1px solid #aaa;
border-bottom: 1px solid #888;
-webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
-moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
-ms-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
-o-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
}

Modifique as cores em destaque para não ficar igual.

Salve e pronto.

Créditos: Bloggerspice
NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post

Nenhum comentário:

Postar um comentário

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner