Instruções para reduzir largura do slide e subir a coluna ao lado dos posts recentes (solicitado por email)
Alterações no HTML
1) Localizar o código do slide no HTML
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='slide-wrapper'><div id='postslide'>
<script type='text/javascript'>
imgr = new Array();
imgr[0] = "http://4.bp.blogspot.com/_j4fpzU2AasM/StEneoD2ZoI/AAAAAAAABfI/WhN3tHhZEy0/s1600/noimage2.gif";
showRandomImg = true;
imgwidth = 590;
imgheight = 380;
summaryPost = 140;
startpost = 6;
numposts = 6;
home_page = "<data:blog.homepageUrl/>";
</script>
<script type='text/javascript'>
//<![CDATA[
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){document.write('<ul id="postslideContent">');j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;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;}}
if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";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;var item='<li class="postslideImage"><a href="'+posturl+'"><img src="'+img[i]+'" width="'+imgwidth+'" height="'+imgheight+'"/></a><span><a href="'+posturl+'">'+posttitle+'</a> <p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></span></li>';if(summaryPost==0){item='<li class="postslideImage"><a href="'+posturl+'"><img src="'+img[i]+'" width="'+imgwidth+'" height="'+imgheight+'"/></a><span><a href="'+posturl+'">'+posttitle+'</a></span></li>';}
document.write(item);j++;}
document.write('</ul>');}
document.write("<script src=""+home_page+"feeds/posts/default?max-results="+numposts+"&start-index="+startpost+"&orderby=published&alt=json-in-script&callback=showrecentposts"></script>");
//]]>
</script>
<div class='clear'/>
</div>
</div>
</b:if>
2) Recortar esse código do template e colar em um bloco de notas.
3) Alterar o código:
<b:section class='main' id='main-left' maxwidgets='1' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'/>
</b:section>
para:
<b:section class='main' id='main' maxwidgets='1' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'/>
</b:section>
</div>
4) Antes de
<b:section class='main' id='main' maxwidgets='1' showaddelement='yes'>
acrescentar o código:
<div class='main' id='main-left'>
5) Colar o código do slide entre
<div class='main' id='main-left'>
CÓDIGO DO SLIDE
<b:section class='main' id='main' maxwidgets='1' showaddelement='yes'>
6) Modificar no código do slide as medidas das imagens:
imgwidth = 590;
imgheight = 380;
Colocando as novas medidas desejadas, lembrando que as medidas das imagens devem ser menores do que as medidas que serão alteradas no container do slide.
7) Alterar o código:
<b:section class='main' id='main-right' maxwidgets='1' showaddelement='yes'>
modificando o maxwidgets='1' para maxwidgets='4' ou para o numero de widgets que você deseja colocar nessa coluna.
Alterações na CSS
1) Localizar na CSS o código do Slide:
/* Slide */
#slide-wrapper{
background:#fafafa;
border:5px solid #eee;
margin:0 0 10px 0;
padding:10px 0 10px 0;
width:628px}
#postslide{
height:380px;
margin:auto;
overflow:hidden;
position:relative;
width:590px}
#postslideContent{
position:absolute;
top:0;
width:590px}
.postslideImage{
display:none;
float:left;
position:relative}
.postslideImage span{
background-color:#000;
color:#fff;
display:none;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity:0.7;
opacity:0.7;
font-size:20px;
left:0;
bottom:0;
padding:20px 13px;
position:absolute;
width:590px}
.postslideImage span p{
font-size:12px;
line-height:1.6em;
padding:8px 20px 0 0}
.postslideImage a:link,
.postslideImage a:visited,
.postslideImage a:hover{
color:#fff}
2) Alterar as medidas em negrito mantendo a relação com as medidas colocadas para as imagens no código HTML do Slide.
3) Ajustar medidas de padding, posicionamento e tamanho de fontes, se necessário.
