September 29, 2014

Coluna horizontal abaixo do cabeçalho do blog com postagens recentes


   Olá, hoje estarei ensinando como colocar uma coluna com as postagens recentes abaixo do cabeçalho, já vi muitos blogs usando esse recurso porém não sei ao certo se é exatamente igual ao que eu estarei ensinando nessa postagem creio que seja diferente, talvez, não sei. confira a Preview, vou tentar explicar como funciona esses "quadradinhos". Essa coluna de postagens recentes funciona a base de uma única categoria, ou seja você vai escolher uma certa categoria que você usa em suas postagens e vai colocar no código que em breve vamos usar e assim que publicar essa postagem e usar a categoria sua postagem irá ficar em destaque abaixo do cabeçalho dentro da coluna, enfim  sei que a minha breve explicação fracassou então vamos começar o tutorial.

1. Procure por </header> no html do seu blog nota): pra quem não sabe header é a tag responsável pelo cabeçalho do blog e nós queremos que a coluna dos quadradinhos fique abaixo do cabeçalho então devemos colar o nosso código acima da chave que fecha </header> simplificando:  cole acima de </header> o código abaixo


<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div id='carousel'>
<div class='container'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label1+&quot;?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script>  
<div class='clear'/>
</div>
</div>
<script type='text/javascript'>
(function($) {     $(document).ready(function(){
$(&quot;#carousel .container&quot;).jCarouselLite({
    auto:4000,
    scroll: 0,
    speed: 800,  
    visible: 4,
    start: 1,
    circular: true,
    });
    })})(jQuery)   </script>
</b:if>


2. Agora procure por </head> e cole acima dela o seguinte código


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='https://masolis-javascript.googlecode.com/svn/trunk/carousellite.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg";
showRandomImg = true;



aBold = true;

summaryPost = 140;
summaryTitle = 25;

numposts1 = 5;
label1 = "New";

function removeHtmlTag(strx,chop){
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);
}
}

s = s.join("");
s = s.substring(0,chop-1);
return s;
}
function showrecentposts(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
document.write('<ul>');
for (var i = 0; i < numposts1; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}

for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}

if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}

var daystr = day+ ' ' + m + ' ' + y ;
var trtd = '<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="145" height="145" class="alignnone" src="'+img[i]+'"/></a></div><p><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></p></li>';

document.write(trtd);
j++;
}
document.write('</ul>');
}
//]]>
</script>


Detalhe: Modifique a palavra "New" localizada ao lado de "label1 = " do codigo acima pela categoria correspondente a das postagens que você quer que apareça nos quadradinhos.

3. E por fim  localize   ]]></b:skin>  e logo acima cole  o código abaixo

#carousel{
width:970px;
height:210px;
position:relative;
left:10px;
display:block
}
#carousel .container{
position:absolute;
left:9px;
width:940px;
height:210px;
overflow:hidden;
border-radius: 6em 2em 1em 1em;
border-top: solid 3px #fff;
border-bottom: solid 3px #fff;
background:url(http://i.imgur.com/LUH96Pd.jpg) repeat center
}
#carousel ul{width:100000px;position:relative;margin-top:10px
}
#carousel ul li{
background:#fff url(#) repeat-x top;
display:inline;
float:left;
text-align:center;
font-weight:700;
font-size:.9em;
line-height:1.5em;
border:1px solid #ccc;
width:145px;
height:150px;
margin:0 20px 0px 0px;
padding:4px;
}
#carousel ul li:hover{
filter:alpha(opacity=75);
opacity:.75;
}
#carousel ul li a.slider_title{
color:#999;
font-family:cuprum;
font-size:15px;
text-transform:uppercase;
text-decoration:undernone;
display:block;
margin-top:13px
}
#carousel ul li a.slider_title:hover{
color:#333
}
#carousel a.img{
width:145px;
height:100px;
display:block;
background:#fff;
margin-top:0
}


                   Entendendo o código acima (só modifique se for realmente necessário.)

width:970px; troque pela largura do seu layout 
height:210px; troque pela altura que preferir 
background onde está a imagem (http://i.imgur.com/LUH96Pd.jpg) troque pela imagem que desejar no trecho abaixo onde está width:940px; também modifique pela largura que ficar melhor no seu layout e a altura onde está  height:210px; também troque para alinhar corretamente a coluna dos quadradinhos. E esse foi o primeiro tutorial do Revolucionou espero que gostem e se houver dúvidas deixe nos comentários terei todo o prazer em responder. :D

COMENTE COM O FACEBOOK
0 COMENTE COM O BLOGGER

No comments:

No comments:

Post a Comment