Oito lindos templates para Blogger


Hanging
Gamma Ray
Smoky
Black Power
Demo  |  Download
Kids Style
 
Night Sky
Abrasive
BCute
Obs: estes templates não foram criados ou convertidos por mim. Qualquer dúvida entrem em contato com os respectivos autores.

[ ... ]

Ícones gratuitos para Twitter

[ ... ]

Brushes para Photoshop - Papel

[ ... ]

Gadget de Posts Rotativos

Encontrei no Blog Doctor um gadget muito interessante que mostra todos os posts do blog como um pequeno slide. Você pode ver uma demostração aqui neste blog de testes, na sidebar.

Eu fiz algumas modificações no estilo original e disponibilizo aqui duas versões: uma com 250px de largura para usar na sidebar e uma com 580px de largura para usar na coluna dos posts.

O gadget mostra todos os posts do blog, do último publicado ao primeiro, e exibe o título do post, autor, data e um pequeno resumo do texto.

Gadget com 580px largura

Gadget 250px de Largura
 

Copei todo o código do gadget escolhido, vá em Layout, Adicionar Elemento de Página e escolha HTML/JavaScipt e cole o código, fazendo as seguintes modificações:

<script src="http://www.google.com/jsapi/?key=PUT_AJAX_KEY_HERE" type="text/javascript"></script>
  <script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>

<script type="text/javascript">
 function showGadget() {
 var feeds = [
 {title:'title',url:'http://MYBLOG.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999'},
        ];

 new GFdynamicFeedControl(feeds, 'feedGadget',
 {numResults : 1000, stacked : true, title: "BLOG_TITLE ~ Random Posts."});
    }
 google.load("feeds", "1");
 google.setOnLoadCallback(showGadget);
 </script>
<div id="feedGadget">Loading...</div>

  • Onde está AJAX_KEY_HERE deve ser colocada a chave da API de pesquisa AJAX, que você obtém clicando aqui. Concorde com os termos e condições, coloque a url do seu blog e copie o número fornecido e cole no local indicado;
  • Onde está MYBLOG coloque o nome do seu blog;
  • Onde está BLOG_TITLE ~ Random Posts. coloque o título que preferir para o gadget.

[ ... ]

Ícones RSS

Ícones RSS de uso livre. Para fazer o download clique na imagem.



















 


[ ... ]

Customizando o gadget slide II

Expliquei anteriormente como aumentar o tamanho do slide do Blogger usando CSS e apesar de ter funcionado para mim, parece que algumas pessoas não conseguiram obter o mesmo resultado. Continuei pesquisando sobre o assunto e encontrei uma outra maneira de redimensionar e dar algum estilo para o gadget. O resultado pode ser visto aqui (é o primeiro slide, com borda rosa). O Google AJAX Feed API forneceu o código completo que carrega do slide no blog e com isso é possível fazer algumas modificações:

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
    <script src="http://www.google.com/uds/solutions/slideshow/gfslideshow.js"
 type="text/javascript"></script>
    <style type="text/css">
      #picasaSlideshow {
        width:  250px;
        height: 200px;
        margin-bottom: 5px;
        padding: 5px;
        border: 5px solid #000;
      }
    </style>
    <script type="text/javascript">
    google.load("feeds", "1");
    function OnLoad() {
      var feed  = "Coloque aqui a URL do FEED";
      var options = {
        displayTime:2000,
        transistionTime:600,
        numResults : 8,
        scaleImages:true,
        maintainAspectRatio : false,   
        fullControlPanel : true,
      };
      var ss = new GFslideShow(feed, "picasaSlideshow", options);
    }
    google.setOnLoadCallback(OnLoad);
    </script>
<div id="picasaSlideshow" class="gslideshow"><div class="feed-loading">Loading...</div></div>
<a href="http://templatesparanovoblogger.blogspot.com/2009/07/customizando-o-gadget-slide-ii.html">Custom Slideshows.</a>

Copie este código, vá em Layout e clique em Adicionar Elemento de Página. Escolha entre as opções o gadget HTML/JavaScript e cole o código, salvando-o e arrastando para a sidebar ou para qualquer outra parte em que desejar mostrar o slide no blog (sobre os posts, em crosccol, abaixo dos posts, footer, etc).

O que deve ser modificado no código:

O primeiro a fazer é obter a url do feed do album que pretende exibir. Se for um album do Picasa, a url deve se apresentar desta maneira:

http://picasaweb.google.fr/data/feed/base/user/NAME/
albumid/NUMBER?kind=photo&alt=rss&authkey=KEY&hl=en

como obter a url do feed do album do Picasa

Você poderá exibir albuns do Flickr, Photobucket, Tinypic, ImageShack...bastando copiar e colar a url do feed no local indicado no código.

O que está em destaque na cor verde é o que você pode alterar em relação ao tamanho, bordas e espaçamento do slide.

Para alterar o número de imagens a serem exibidas, modifique o número neste trecho:

numResults : 8

Para controlar o tempo de transição das imagens :


displayTime:2000,

Para que haja um link na imagem que leve ao album original, acrescente (justo após displayTime:2000, nos códigos em azul):

linkTarget : google.feeds.LINK_TARGET_BLANK,

Por padrão, a transição das imagens faz uma pausa quando se coloca o cursor do mouse sobre uma imagem. Você pode modificar isso acrescentando a seguinte linha:

pauseOnHover : false

Para mostrar miniaturas das imagens em tamanho médio, acrescente:

thumbnailSize : GFslideShow.THUMBNAILS_MEDIUM

Para mostrar miniaturas em tamanho pequeno:

thumbnailSize : GFslideShow.THUMBNAILS_SMALL

Para mostrar o Painel de Controle com ícones pequenos (o painel aparece quando se passa o cursor do mouse sobre o slide), acrescente estas linhas, nesta ordem:

fullControlPanel : true,
fullControlPanelSmallIcons : true,

Para saber mais, visite a página do Google AJAX Feed API

[ ... ]

Sobre moderação nos comentários

Quando você comenta em um blog, está deixando o seu cartão de visitas, está causando sua primeira impressão. As pessoas irão te procurar ou não, levar à sério ou não, dependendo do que exibe o seu cartão. Quando um leitor usa o formulário de comentários aqui no TNB para choramingar, eu não dou mais atenção. Por que gente que choraminga não tenta, não batalha, não se esforça.

Ultimamente é tão raro ler um comentário interessante, que eu acabo publicando todos, muitas vezes sem ler mais do que as tres primeiras palavras. Estou deixando para que um leitor ajude o outro e fico assistindo.

Eu vou explicar novamente para vocês: eu sou uma dona de casa de 36 anos que um belo dia descobriu o que eram os blogs (e poucos dias antes nem sabia ligar um computador) e passou a criar dezenas deles, só para ver como funcionavam, só para entender como se consegue alterar uma fonte, uma cor, uma imagem. Sem fazer uma única pergunta, a quem quer que seja, li (e continuo lendo) dezenas de tutoriais, mensagens em fóruns, apostilas e afins. Quando quero saber algo, pergunto ao Todo Poderoso e ele nunca, mas nunca mesmo, me deixa na mão.

Eu não fiz nenhum curso nesta vida que possa ser de alguma utilidade na hora de customizar um template. Nem inglês eu falo! Se quero aprender algo uso tradutor, a lógica, a tentativa e erro. E quando descubro algo, por mais simples que seja, venho aqui contar para vocês. Às vezes me empolgo, ensino algo e depois vejo que existe maneira mais fácil, volto aqui, edito o texto, tiro ele do ar, o que for. Mas eu não guardo para mim informação nenhuma e não tenho medo de admitir que errei, me equivoquei, o que seja. Eu não tenho 'uma imagem a zelar', eu não quero alcançar nada, eu não desejo nada além de dividir informação. Repito: sou apenas uma dona de casa, mãe de uma garotinha de 3 anos, que adora passar horas na internet e fuçar códigos. Só. Mais nada.

Se eu consigo mudar a cor de uma fonte, qualquer um consegue. De olhos fechados, se bobear. Então, quando alguém vem aqui aos berros gritando pelo amor de deus me salva, eu não vejo com bons olhos. Por que eu também não sabia mas descobri...estudando.
Se houvesse uma escassez de informação sobre html e css na internet, eu compreenderia o desespero. Mas com a quantidade absurda de informação que existe, como posso ficar solidária com este desespero infundado?
Tudo é para ontem, é desesperado, é pelo amor de deus.  Se fulano não consegue descobrir, com tanto tutorial que existe, como mudar a imagem do cabeçalho ou como alterar um link, melhor não ter blog. É sério. Por que para ter um blog - com um template personalizado, como todo mundo quer - sem colocar a mão no bolso, é necessário ter no mínimo vontade de aprender. Tem que estudar. Aqui eu já coloco tanta informação mastigada, ilustrada, com flechinha apontando: é aqui ó! Mas se a pessoa não tem nem a pachorra de usar o formulário de busca, eu é que tenho que ir lá no blog dela, fazer por ela?
Não, claro que não. Se eu fosse atender todos os pedidos que chegam diariamente, eu nem dormia mais! Quer dizer que além de fazer os tutoriais, além de disponibilizar os templates gratuitamente, tenho também que ver o blog de cada um que comenta aqui e apontar (ou fazer pela pessoa que é o que a maioria dos 'desesperados' querem) onde deve modificar, apagar, incluir? Não tem nem cabimento...

Coisas do tipo 'me ajuda, por favor, não sei mais o que fazer!' já cansaram. Todas às vezes que fui conferir o problemão do sujeito era alguma coisa muito simples que o próprio tutorial respondia. A pessoa não lê o texto, passa os olhos por cima e pensa 'putz, que trabalheira!' e aí deixa um comentário pedinte esperando que eu faça por ela. Se fosse minha intenção fazer consertos pra todo mundo, nem criava os tutoriais.

Outra coisa que não respondo mais: a pessoa baixa aqui um template gratuito e depois quer que eu ensine ela a modificar ele ao seu gosto. Se eu fizer isso com cada um que baixa o template, no fim das contas eu terei feito uns 3000 templates gratuitos, não? Por que um adorou mas quer mudar a imagem, outro achou lindo, mas quer o menu mais pro lado...assim não dá, né? Quer mudar o template, pode mudar! Leia aqui e nos blogs que recomendo os tutoriais que ensinam passo-a-passo como modificar seu template e seja feliz!

Por isso, à partir de hoje a moderação vai ser séria. Não publicarei mais comentários sobre questões específicas de cada blog (como eu mudo a fonte do meu template? como altero a cor do meu menu?). Para isso leiam os tutoriais. Só publicarei questões mais abrangentes, que podem interessar vários usuários (por exemplo: como posso modificar o gadget de lista de blog? como posso aumentar o slide do Blogger? etc). Também não publicarei mais pedidos de alteração em templates nem perguntas inúteis, que já estão respondidas no tutorial. Comentários completamente vazios  idem, como 'num entendi', 'naum consegui'. Como alguém pode realmente pensar que um comentário assim é útil para alguma coisa?

Óbvio que comentários que visam fazer propagandas de blogs e pedidos de parceria, correntes e besteiras do tipo, jamais serão publicados.

Ajudar, eu sempre continuarei ajudando: com os tutoriais detalhados, os templates customizados, as indicações de links úteis e interessantes. Com todas as horas que dedico por dia  testando, fuçando, lendo, errando e acertando, para vir aqui dividir a informação com vocês. Mais que isso, sinceramente não dá. 

E se você quer mesmo um template customizado com 'a sua cara' mas não quer mexer com códigos, simples: contrate alguém para lhe ajudar. Pelo que sei, a Mamanunes, o Paulo, a Elke , o Compulsivo e outros, aceitam pedidos de encomendas. Só não vale por preço no trabalho alheio: cada qual sabe quanto vale seu tempo e seus esforços.

É isso.

[ ... ]

Links para o final de semana

[ ... ]

Problema com os ícones de edição rápida

A Juliana do Dicas Blogger tocou no assunto e então percebi que havia algo errado quando recebi emails do Blogger, como se eu tivesse solicitado uma nova senha. Imediatamente fiz algumas mudanças para me proteger e depois de ler o post da Juliana decidi retirar todos os ícones de edição rápida dos meus blogs. O que está acontecendo é que o ícone da ferramenta que aparece junto a cada widget que se coloca no blog, e que deve ser visível apenas para o administrador, está aparecendo para os leitores e pelo visto alguns tiveram a idéia de clicar neles e tentar entrar em minha conta. Acredito que seja isso, ou o Blogger não iria me enviar emails como se eu tivesse perdido minha senha.

Pelo que ando lendo no Twitter, não são todos os blogs que estão sendo afetados por este erro mas, de qualquer maneira, é melhor previnir do que remediar. Por isso, deixo aqui a sugestão de duas maneiras para tornar invisível o ícone de edição rápida.

Primeira sugestão:

Clique em Expandir Modelo de Widget, procure pelo seguinte trecho de código e o apague:

<b:include name='quickedit'/>

Este código deve se repetir tantos forem os widgets que você tenha na página. Use o Ctrl+F para encontrar com maior facilidade.

Segunda sugestão:

Acrescente no CSS , antes de body{  o seguinte trecho:
.item-control a, .item-action a {display:none;}

Ao acrescentar esta linha, todos os ícones ficam invisíveis mas o ícone de enviar postagem por email também (aquele envelope no final do post), como bem observou o @luanfr no Twitter. Então, para que o ícone de enviar postagem fique visível, clique em Expandir Modelo de Widget e procure este trecho:
<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' height='13' src='http://www.blogger.com/img/icon18_email.gif' width='18'/>
</a>
</span>
</b:if>

Apaguem o que está em vermelho.Feito isso o ícone de enviar post por email ficará visível ao leitor, normalmente.

Como expliquei acima, não são todos os blogs que estão apresentando este problema, pelo menos por enquanto. Também desconheço o motivo pelo qual os ícones ficaram visíveis, tanto no meu blog quanto no da Juliana (e em outros). De qualquer maneira, enquanto não descobrimos mais sobre o assunto, fica a dica.

Recomendo que leiam o post da Juliana sobre o assunto

[ ... ]

Sobre problema nos comentários



Aviso para quem baixou os templates Pet Shop, Astra e Beauty!



Tanto aqui no TNB quanto nos templates em que instalei o hack para emoticons nos comentários, surgiu um problema em que o formulário de comentários não aparece, ou aparece apenas depois de recarregar a página. Muito provavelmente o problema está relacionado à este hack. Acredito que instalei de maneira errada, pois ele funciona perfeitamente no blog onde o encontrei (Vagabundia). Estou aqui quebrando a cabeça tentando encontrar a solução e assim que souber onde errei, passarei para vocês a correção. Até lá, retirei o hack deste blog e dos templates Pet Shop, Beauty e Astra e coloquei novos links para download do código sem os emoticons. Quem já baixou este templates, por favor, pelo menos por enquanto, retirem o hack dos emoticons.

No final do código do template, antes da tag </body> há um script que deve ser apagado, semelhante a este:

<b:if cond='data:blog.pageType == "item"'>
<script src='url do js' type='text/javascript'/>
<script type='text/javascript'>
emoticonComentario();
</script>
</b:if>

Apaguem este código todo, depois cliquem em expandir modelo de widget e encontrem o seguinte trecho, que também deve ser apagado:

<p style="margin: 0pt auto; padding: 0pt; width: 485px;">
<img src="url da imagem"/>
</p>

Para todos os que seguiram o tutorial para instalar o hack dos emoticons nos comentários, peço que o retirem por enquanto, também.

Peço desculpas pelo transtorno.Assim que encontrar uma solução, publicarei aqui para vocês.

[ ... ]

Customizar o gadget Slide

Quando vi a primeira vez o gadget de slide do Blogger, fiquei toda animada achando que exibiria alguns dos meus albuns de maneira decente mas o que acabou aparecendo na minha sidebar foi isso:


Isso é um slide. Minúsculo. Decepcionante. Tirei do blog.

Mas como sou teimosa, tornei a colocar e comecei a tentar maneiras de transformar aquilo que o Blogger me apresentava, nestes slides que estão em meu blog de testes.

O primeiro é gigante e foi inserido dentro da div crosscol. O segundo tem a largura de main-wrapper e foi inserido acima desta coluna. O terceiro está na sidebar, muito maior que o padrão do Blogger.

Não é possível fazer muita coisa para customizar o slide, além de redimensioná-lo e colocar uma borda para destacá-lo. Pelo menos até agora, não descobri o que mais é possível fazer.

Para redimensionar o slide, acrescente este código no CSS (clique em Editar HTML e acrescente o código em qualquer local antes da tag ]]></b:skin> ):

#Slideshow1 .slideshow-container {
width: 980px;
height:480px;
margin: 10px auto 10px;
padding:0 0 0;
border: 10px solid #000;background: #000}

.slideshow-container a img{position:absolute;top:0;left:0;width:100%; height:100%}

Em width você deve determinar a largura do seu slide, em height a altura. Margin como se apresenta aqui, centraliza o widget  e dá uma distância de 10px para cima e para baixo. Em border você determina a largura e cor da borda. Em .slideshow-container a img width e height devem ser 100% ou a imagem não ocupará toda a largura e altura que você determinou para o slide.

Se você pretende acrescentar mais de um slide, repita o código, mudando apenas #Slideshow1 para #Slideshow2.

Mas Ariane, eu não quero um slide enorme em todas as páginas do meu blog, só na home, comofas?

Depois de inserir o slide e fazer as modificações, clique em Expandir Modelo de Widget e encontre este trecho, acrescentando o que está em vermelho:

<b:widget id='Slideshow1' locked='false' title='Apresentação de slides' type='Slideshow'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<div class='slideshow-container' expr:id='data:widget.instanceId +   &quot;_slideshow&quot;'>
<span class='slideshow-status'>Loading...</span>
</div>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Pronto, o slide vai aparecer apenas na primeira página.

Há novidades sobre este assunto! Por favor, leia também: Customizar gadget slide II

[ ... ]

Personalizando o gadget Perfil

Nos templates do Blogger o gadget  Perfil se apresenta da seguinte maneira:

 Se clicarmos na imagem escolhida ou no link Visualizar meu perfil completo, somos levados à página padrão do Blogger para o perfil do usuário:


Podemos alterar o gadget do Perfil não só em sua aparência, mudando fontes, cores e colocando uma imagem diferente da que está gravada no perfil, como podemos ainda criar uma nova direção para ele, por exemplo, para uma página do próprio blog, onde podemos apresentar um perfil mais completo.

Perfil único autor - trocando a imagem

É possível exibir no blog uma imagem diferente da imagem escolhida para a página Perfil e isto se torna bastante interessante quando se tem vários blogs e se deseja empregar uma imagem diferente para cada um deles.
Hospede a imagem escolhida no site de sua preferência (eu uso o TinyPic) copie a url fornecida (Direct Link for Layouts), depois vá em Editar HTML e clique em Expandir Modelo de Widget. Óbviamente você já deve ter acrescentado em sua página o gadget Perfil. Procure por este trecho do código (tecle Ctrl + F para encontrar com maior facilidade):

<b:if cond='data:photo.url != &quot;&quot;'>
<a expr:href='data:userUrl'><img class='profile-img' expr:alt='data:photo.alt' expr:height='data:photo.height' expr:src='data:photo.url' expr:width='data:photo.width'/></a>
</b:if>

Apague o que está em vermelho e no lugar de data:photo.url  cole a url da imagem que você hospedou. Visualize e se estiver aparecendo a nova imagem, salve.

Para alterar o destino do link e imagem do gadget Perfil

A página do perfil do Blogger não é lá muito charmosa, por isso, você pode criar um post bem caprichado falando de você, seu trabalho, o que for, e fazer com que o gadget Perfil leve o leitor até este post. Primeiro crie o texto falando sobre você e antes de publicar, clique no link Opções de Postagens e programe uma data no passado, para que o post não apareça na primeira página do blog, como mostra a imagem abaixo:


Publique seu post, vá até a página Editar Postagens e você verá uma lista com todos os seus posts publicados. Ao lado de cada post existem dois links: Editar e Visualizar. Clique com o botão direito do mouse sobre Visualizar ao lado do post que corresponde ao seu perfil e copie a url do mesmo (isto seve inclusive para colocar o link de um post no menu horizontal - muita gente me pergunta isso!), como mostra a imagem abaixo:


Volta a página Editar HTML, clique em Expandir Modelo de Widget e torne a encontrar aquele trecho do código:

<b:if cond='data:photo.url != &quot;&quot;'>
<a expr:href='data:userUrl'><img class='profile-img' expr:alt='data:photo.alt' expr:height='data:photo.height' expr:src='data:photo.url' expr:width='data:photo.width'/></a>
</b:if>

Apague o que está em vermelho e no lugar de data:userUrl cole o link do seu post, que você copiou na página Editar Postagens. Isso fará com que a imagem leve ao texto.

Para que o link Visualizar meu Perfil Completo leve ao post que você criou, procure mais abaixo o trecho:

<a class='profile-link' expr:href='data:userUrl'><data:viewProfileMsg/></a>
</b:if>

Novamente apague o que está em vermelho e no lugar de data:userUrl coloque o link do seu post. Para mudar a mensagem Visualizar meu perfil completo por qualquer outra chamada, apague o que está em verde e coloque no lugar outra frase/palavra.

Para alterar o estilo do gadget Perfil

Agora que alteramos a imagem e a direção do link  do Perfil, podemos alterar também o estilo que ele apresenta. Para isso, procure no código o seguinte trecho do CSS:

/* Profile
----------------------------------------------- */
.profile-img {
  float: $startSide;
  margin-top: 0;
  margin-$endSide: 5px;
  margin-bottom: 5px;
  margin-$startSide: 0;
  padding: 4px;
  border: 1px solid $bordercolor;
}

.profile-data {
  margin:0;
  text-transform:uppercase;
  letter-spacing:.1em;
  font: $postfooterfont;
  color: $sidebarcolor;
  font-weight: bold;
  line-height: 1.6em;
}

.profile-datablock {
  margin:.5em 0 .5em;
}

.profile-textblock {
  margin: 0.5em 0;
  line-height: 1.6em;
}

.profile-link {
  font: $postfooterfont;
  text-transform: uppercase;
  letter-spacing: .1em;
}

Em .profile-img podemos fazer todas as alterações na imagem do gadget, inclusive alterar o tamanho e a largura do mesmo. Antes de alterar o tamanho da imagem, certifique-se da largura da sua sidebar e de qualquer alteração em .sidebar .widget (se o seu template conter esta especificação). Como estou usando um template Mínima para meu exemplo, o que fiz foi alterar a largura de #outer-wrapper para 960px e a largura da sidebar para 280px, possibilitando os valores para a imagem, que coloquei como segue abaixo:

.profile-img {
  float: $startSide;
  margin: 13px;
  padding: 2px;
  width: 240px;
  height: 220px;
  border: 5px solid #9EAF65}


Em .profile-data eu posso fazer alterações no estilo para o meu nome e a localização informada no gadget (São Paulo, Brazil). Aqui você pode altarar o estilo e cor da fonte.

Em .profile-datablock está contida a imagem e o texto que a acompanha. Você pode determinar aqui uma cor ou imagem para o background, ou borda, por exemplo.

Em .profile-textblock acrescente os estilos para o texto que se apresenta, alterando a cor da fonte, tamanho, etc.

Em .profile-link você acrescenta os estilos para o link Visualizar meu perfil completo. Para ter mais liberdade de modificar os estilos para este link (como posicionar ao centro ou dentro de .profile-textblock, volte ao trecho que modificamos anteriormente:

<a class='profile-link' expr:href='data:userUrl'><data:viewProfileMsg/></a>
</b:if>

substitua todo este trecho por:

<div class="profile-link">
<a href="url do post com o perfil">Meu Perfil Completo</a></div>

Para colocar o link dentro da área de .profile block (pois se você acrescentar um background o link ficará fora dele), recorte este trecho e cole onde se apresenta:

<b:if cond='data:aboutme != &quot;&quot;'><dd class='profile-textblock'> <data:aboutme/></dd></b:if>

<div class='profile-link'><a href='http://templatebasic.blogspot.com/2009/06/quem-sou.html'>Meu Perfil Completo</a></div>

</dl>    
</b:if>

No meu exemplo eu alterei todo o código desta maneira:

/* Profile
----------------------------------------------- */
.profile-img {
  float: $startSide;
  margin: 13px;
  padding: 2px;
  width: 240px;
  height: 220px;
  border: 5px solid #DEDCC5}

.profile-data {
  margin:0;
  text-transform:capitalize;
  letter-spacing:0;
  font-size:13px;
  color: #262B15;
  font-weight: bold;
  line-height: 1.6em;
  text-align:center;
}

.profile-datablock {
  margin:10px auto 10px;
  background: #84875a;
  border: 5px solid #DEDCC5

}

.profile-textblock {
  margin: 0 0 0;
  padding: 6px 10px;
  line-height: 1.4em;
  color: #F4F3EC
}

.profile-link {
  font-size: 13px;
  text-transform: capitalize;
  text-align:center;
  padding: 4px 0px;
  letter-spacing: 0;
  color: #fff;
}

.profile link a:link, .profile-link a:visited{color: #fff}
.profile link a:hover{color: #820000; text-decoration:none}

E o resultado foi este :


Uma outra idéia, usando um background fixo:


Agora é com a criatividade de cada um :)

No próximo tutorial explicarei como dar estilo ao gadget quando há mais de um autor no blog.

[ ... ]