Teste de short url de Retweet

Testando botão retweet sem tweetmeme e short url com domínio do blog

Modificações no Tema Zélia

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] = &quot;http://4.bp.blogspot.com/_j4fpzU2AasM/StEneoD2ZoI/AAAAAAAABfI/WhN3tHhZEy0/s1600/noimage2.gif&quot;;
showRandomImg = true;
imgwidth = 590;
imgheight = 380;
summaryPost = 140;
startpost = 6;
numposts = 6;
home_page = &quot;<data:blog.homepageUrl/>&quot;;
</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.

Title com Permalink no título do Post

<div class='post hentry'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='&quot;link para &quot; + data:post.title'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url' expr:title='&quot;link para &quot; + data:post.title'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

Vestibulum cursus

Proin nisi libero, eleifend non, dictum sit amet, posuere quis, eros. Ut eleifend. In leo. Etiam dictum, libero id vestibulum cursus, erat nisl tempus ipsum, sit amet pretium ligula est eget arcu. Phasellus viverra dictum orci. Suspendisse scelerisque sapien vel diam. Sed sed orci ac est molestie dictum.

'Sed augue. Morbi blandit elementum ante! In semper sagittis tortor. Praesent elementum convallis est. Nullam sit amet libero sit amet erat fermentum facilisis. Phasellus placerat tristique dui.'
— Lorem ipsum blandit.

Mauris ante ante, ultrices ac, volutpat sed, blandit condimentum, ligula. Mauris suscipit. Aenean dapibus dignissim quam. Etiam venenatis, enim sit amet commodo ultricies, libero mauris sollicitudin odio, eget porta justo tellus lobortis elit. Quisque ipsum. Duis enim.

Lorem ipsum

Mauris ante ante, ultrices ac, volutpat sed, blandit condimentum, ligula. Mauris suscipit. Aenean dapibus dignissim quam. Etiam venenatis, enim sit amet commodo ultricies, libero mauris sollicitudin odio, eget porta justo tellus lobortis elit. Quisque ipsum. Duis enim.