Existe um blog na web com o nome de Thesis Tutor que possui excelentes dicas para personalizar o tema Thesis.
Uma das que mais me chamou atenção é como colocar ícones sociais no blog e fixa-los de forma a que acompanhem sempre a página. Esta possibilidade permite que botões como o Twitter, o RSS ou outros que pretendam possam estar sempre presentes enquanto o visitante efectua a leitura ou a navegação pelo blog.
Assim sendo, hoje vou colocar as dicas do Thesis Tutor com algumas dicas que podem ser utilizadas para adaptarem ao vosso blog.
CUSTOM_FUNCTIONS.PHP
function social_iconz() {
?>
<div id="feedback">
<a href="http://twitter.com/username" id="twitter">Twitter</a>
<a href="http://facebook.com/username" id="facebook">Facebook</a>
<a href="RSS Feed URL" id="rss">RSS Feed</a>
<a href="MAIL FEED" id="email">Email</a>
</div>
<?php
}
add_action('thesis_hook_after_html','social_iconz');
CUSTOM.CSS
.custom #feedback {
background: transparent;
width: 3.2em;
position: fixed;
top: 40%;
left: 0.25%; }
.custom #feedback a {
display: block;
text-indent: -9999px;
height: 32px;
outline: none; }
.custom #feedback #twitter {
background: url('Url da imagem do Twitter') no-repeat 0 -32px; }
.custom #feedback #twitter:hover {
background-position: 0 0; }
.custom #feedback #facebook {
background: url('Url da imagem do Facebook') no-repeat 0 -32px; }
.custom #feedback #facebook:hover {
background-position: 0 0; }
.custom #feedback #rss {
background: url('Url da imagem do RSS') no-repeat 0 -32px; }
.custom #feedback #rss:hover { background-position: 0 0; }
.custom #feedback #email {
background: url('Url da imagem do RSS Email') no-repeat 0 -32px; }
.custom #feedback #email:hover { background-position: 0 0; }
EXTRA
Como podem verificar os botões que estão acima representados são para o Twitter, Facebook, RSS Feed e Email Feed, contudo podem personalizar conforme pretenderem. O principio é sempre o mesmo tanto no que toca ao código de CSS como o relativo ao html.
Assim sendo, se pretenderem adicionar o Dihitt ou o Orkut, simplesmente criem duas linhas de css como por exemplo:
.custom #feedback #dihitt {
background: url('Url da imagem do Dihitt') no-repeat 0 -32px; }
.custom #feedback #dihitt:hover {
background-position: 0 0; }
e adicionem a linha html no custom_functions.php onde pretenderem que apareça.
VIDEO THESIS TUTOR.
IMAGENS DOS ICONS
- Twitter – http://www.dinheiropt.com/wp-content/uploads/2010/02/twittericon.png;
- Facebook – http://www.dinheiropt.com/wp-content/uploads/2010/02/facebookicon.png;
- RSS Feed – http://www.dinheiropt.com/wp-content/uploads/2010/02/rssicon.png;
- Email Feed – http://www.dinheiropt.com/wp-content/uploads/2010/02/emailicon.png.
Até já…
