Saudações, blogueirinhxs de plantão!
Eu já contei milhares de vezes que eu sou orgulhosamente um bloogueiro Old School que adora falar dos bons e velhos tempos da blogosfera - mau de velho. Antes, a parte da Blogosfera da qual eu venho - fan sites e mídia (crítica, entrevistas, monitoração e os próprios tutoriais) - tinha que fazer seus próprios designs que eram trocados com uma certa frequência, e por mais que existissem os incríveis blogs de design, alguns de nós estávamos em contato constante com os códigos HTML. Afinal, ser blogueiro vai além de escrever num site.
Por isso, eu decidi trazer os cinco tutoriais essenciais que todo blogueiro old school já usou diretamente dos bons e velhos Cherry Bomb e dos outros milhares de blogs com Kawaii no nome e deixar com que a nostalgia tome conta de nossos corações.
Dois backgrounds no Blog:
1. Vá em modelo > Editar HTML.
2. Aperte Ctrl+F e procure por body { Você irá encontrar um código assim:
body {font: $(body.font);color: $(body.text.color);background: $(body.background);}
3. Apague tudo e coloque no lugar este código:
body, html {height: 300px;margin: 0;padding: 0; }body {font: $(body.font);color: $(body.text.color);background: url("URL do 1º background") repeat; }html {background: url("URL do 2º background") repeat; }
Altere o número em negrito (300) pela altura em pixels do primeiro background. Depois é só substituir as URLs das duas imagens nos locais indicados.
Elite de Afiliados:
- Elite igual ao do Kawaii World: Para esta, o processo é simples: Crie um novo gadget HTML/JavaScript e cole o código:
<style>Substitua a URL, o nome do Blog e a abreviação para se encaixar com a do seu afiliado. O resultado deverá ser como a imagem abaixo:
@font-face { font-family: "wish"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }
#afiliados5{
background-color: #fff5f7;
width: 23px;
height: 10px;
font-family: wish;
font-size: 8px;
float: left;
padding: 2px 0 6px 0;
text-align: center;
margin-left: 5px;
margin-bottom: 4px;
color: #f8c0cd;
line-height: 13px;
border: 1px solid #fcd7e0;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
return: false;
}
</style>
<a href="http://www.kawaii-world.net/" title="Kawaii World" id="afiliados5">KW</a>
<a href="http://www.kawaii-world.net/" title="Kawaii World" id="afiliados5">KW</a>
<a href="http://www.kawaii-world.net/" title="Kawaii World" id="afiliados5">KW</a>
<a href="http://www.kawaii-world.net/" title="Kawaii World" id="afiliados5">KW</a>
<a href="http://www.kawaii-world.net/" title="Kawaii World" id="afiliados5">KW</a>
<a href="http://www.kawaii-world.net/" title="Kawaii World" id="afiliados5">KW</a>
<a href="http://www.kawaii-world.net/" title="Kawaii World" id="afiliados5">KW</a>
<a href="http://www.kawaii-world.net/" title="Kawaii World" id="afiliados5">KW</a>
<a href="http://www.kawaii-world.net/" title="Kawaii World" id="afiliados5">KW</a>
<a href="http://www.kawaii-world.net/" title="Kawaii World" id="afiliados5">KW</a>
<a href="http://www.kawaii-world.net/" title="Kawaii World" id="afiliados5">KW</a>
<a href="http://www.kawaii-world.net/" title="Kawaii World" id="afiliados5">KW</a>
- Elite de Afiliados com hover: Siga os mesmos passos da anterior, mas o código é o seguinte:
<a href="URLDOBLOG" target="_blank"> <img src="URLDAIMAGEM 1" onmouseover="this.src='URLDAIMAGEM 2'; return true" onmouseout="this.src='URLDAIMAGEM 1'"></a>
Coloque os links do afiliado e das imagens nos locais indicados e você deverá ter uma elite que quando você passa o mouse por cima, a imagem muda. Mas é claro, que você precisa de duas imagens diferentes para funcionar.
- Elite de Afiliados com Efeito Opacidade: Siga os passos já indicados anteriormente e troque o código pelo seguinte:
<a href="URLDOBLOG" none;="" target="_blank" text-decoration:="" title="NOMEDOBLOG"><img class="borderimage" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" src="URLDAIMAGEM " style="opacity: 0.5;" /></a>Substitua os links e os nomes onde indicado pelas informações do seu afiliado e a imagem.
- Elite de afiliados simples: Sem nenhum efeito, somente as imagens.
<a href="URLDOBLOG" target="_blank"><img class="none" src="URLDAIMAGEM" target="blank" title="NOMEDOBLOG" /></a>
Menu no topo do blog:
O meu tutorial favorito era do One Direction Forever, mas, infelizmente, ele já não existe mais. Contudo, este tutorial do blog Dream Photographer é similar.
Primeiro, vamos configurar a aparência do menu e colocá-lo na HTML do blog. Para tal, vá até Modelo e Editar HTML. Aperte CTRL+F e procure pela tag ]]></b:skin>. Acima dela, cole o código:
.menutopo { z-index: 333; position: fixed; top: 0px; left: 0px; right: 0px; height: 25px;padding:18px; color: #fff; background-color: #000; font-size: 18px; text-align: center;font-family: 'Calibri'; text-transform: uppercase; }
.menutopo a { color: #fff!important; margin-right: 20px; }
.menutopo a:hover { text-decoration:underline }
.menutopo img { margin-top: -3px; align:right; width: 35px; margin-left: 5px; float: right;}
Color: #fff - Cor da fonte (Os dois "color" tem que ser da mesma cor)
Background-color: #000 - Cor do fundo
Fonte-size: 18px - Tamanho da fonte (Alterar o numero,s em apagar o "px")
Font-family: 'Calibri' - Nome da fonte (Se não conhecer muito nomes, no Word tem os nomes)
text-transform: uppercase - Texto maiúsculo
Text-decoration: underline - Texto sublinhado (quando passa o mouse) / para tirar, é só no lugar de underline colocar none.
Padding: 18px; - Tamanho em volta. Mude o numero para deixar mais fino ou mais largo.
Agora, vá para Layout e crie um novo gadget HTML/JavaScript e cole o seguinte código:
<div class="menutopo">
<a href="/"> Início </a>
<a href="LINKAQUI"> TÍTULO </a>
<a href="LINKAQUI"> TÍTULO </a>
<a href="LINKAQUI"> TÍTULO </a>
</div>
LINKAQUI você vai colocar o link desejado, e em TÍTULO o nome que vai aparecer. Para mais categorias, basta adicionar mais <a href="LINKAQUI"> TÍTULO </a>.
Nivo Slider:
Apenas para os amantes de slides, assim como eu. O Nivo, contudo, não é automático, você tem que manualmente editar o que aparece nele.
Comece por introduzi-lo no HTML do blog, indo em Modelo e Editar HTML. Aperte CTRL+F e procure pela tag <head/> e cole abaixo o seguinte código:
<style type="text/css">
/* <![CDATA[ */
#w2bSlideContainer {position: relative;display: block; top:0px; left:0px; right:0px;/*Ajuste as posição do slide*/}
#w2bNivoSlider { position:relative;
width:640px !important; /*largura do slide*/height:300px !important; /*Altura do slide*/
background: #fff url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYeCY89HFHw3llt_sgY5HhLDpsAL_QNwuOUI41VAiHGJmEn9d3Lh33cqQq1vADamgilpkA2Zw8wQOF5eIq0CD5WEvEVIH4zuHcQxiRe7Sw79quXiPj_GmbK61zpnAgbH44aoypgT9lDp4d/s1600/w2bLoader.gif") no-repeat 50% 50%;
margin: 20px auto 35px;
border: 3px solid #000;/*Coloque borda se quiser*/ }
#w2bNivoSlider img {position:absolute; top:0; left:0; display:none}
.nivoSlider {position:relative;width:100%;height:auto;}
.nivoSlider img {position:absolute;top:0;left:0}
.nivo-main-image {display:block!important;position:relative!important;width:100%!important}
.nivoSlider a.nivo-imageLink {position:absolute;top:0;left:0;width:100%;height:100%;border:0;padding:0;margin:0;z-index:6;display:none}
.nivo-slice {display:block;position:absolute;z-index:5;height:100%;top:0}
.nivo-box {display:block;position:absolute;z-index:5;overflow:hidden}
.nivo-box img {display:block}
.nivo-caption {padding: 5px;
font-family: Arial,sans-serif;position:absolute; /*Fonte da legenda*/Font-size: 14px; /*Tamanho da fonte da legenda*/background:#000; /*Cor de fundo da legenda*/color:#fff; /*Cor do texto da legenda*/-ms-filter:"alpha(opacity=80)";filter:alpha(opacity=80);opacity:.8; width: 630px;/*Largura da legenda*/ z-index:8;}
.nivo-caption p {padding:2px;margin:0}
.nivo-caption a {display:inline!important}
.nivo-html-caption {display:none}
.nivo-directionNav a {position:absolute;top:45%;z-index:9;cursor:pointer;display:block;width:30px;height:30px;
background: url("URL_IMG_SETA") no-repeat;text-indent:-9999px;border:0}
.nivo-prevNav {left:10px}
.nivo-nextNav {background-position:-30px 0!important;right:10px}
.nivo-controlNav {position:absolute;left:0;right:0;bottom:-35px;text-align:center}
.nivo-controlNav a {position:relative;z-index:9;cursor:pointer;display:inline-block;width:22px;height:22px;
background:url("URL_IMG_BULLETS") no-repeat;text-indent:-9999px;border:0;margin-right:3px}
.nivo-controlNav a.active {font-weight:bold;background-position:0 -22px}
/* ]]> */
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://static.tumblr.com/y66747w/9hlmdpcpa/nivoslider.js' type='text/javascript'/>
<script type='text/javascript'>
/* <![CDATA[ */
jQuery(document).ready(function($) {
$('#w2bNivoSlider').nivoSlider({
effect : 'random',
slices : 10,
boxCols : 8,
boxRows : 4,
animSpeed : 500,
pauseTime : 4000,
startSlide : 0,
directionNav : true,
directionNavHide : true,
controlNav : true,
keyboardNav : false,
pauseOnHover : true,
captionOpacity : 0.8
});
});
/* ]]> */
</script>
Faça as adaptações nos locais indicados para que o Slider fique como você quer. Cole o link das imagens das setas e das bolinhas que servem como controle. Aqui vão alguns modelos que vocês podem usar:
Agora, vá para Layout, crie um novo gadget HTML/JavaScript, cole o código abaixo e posicione-o no local que você quer que o slide apareça.
<div id="w2bSlideContainer">
<div id="w2bNivoSlider">
<a href="LINK_DO_SLIDE_1"><img src="URL_DA_IMAGEM_1" title="LEGENDA DA IMAGEM 1"/></a>
<a href="LINK_DO_SLIDE_2"><img src="URL_DA_IMAGEM_2" title="LEGENDA DA IMAGEM 2"/></a>
<a href="LINK_DO_SLIDE_3"><img src="URL_DA_IMAGEM_3" title="LEGENDA DA IMAGEM 3"/></a>
<a href="LINK_DO_SLIDE_4"><img src="URL_DA_IMAGEM_4" title="LEGENDA DA IMAGEM 4"/></a>
</div>
</div>
Faça as substituições nos locais indicados. Se quiser mais imagens no slide, então é só colar mais linhas <a href="LINK_DO_SLIDE"><img src="URL_DA_IMAGEM" title="LEGENDA DA IMAGEM"/></a>.
Marquee para sisters ou publicidade:Este tutorial é para colocar os banners que vão de um lado para o outro.
Este é mais um tutorial muito fácil. Tudo o que você precisa fazer é ir até Layout e criar um novo gadget HTML/JavaScript e colar o seguinte código:
<marquee direction="left" scrollamount="4" width="100%" behavior="alternate" onmouseover="this.stop()" onmouseout="this.start()"> <a href="LINK DO BLOG" title="NOME DO BLOG"><img src="LINK DA IMAGEM" class="hero" /></a></marquee>
Infelizmente, o marquee já é um código bem antigo que alguns já consideram obsoleto, por isso, eu recomendo que você não faça mudanças no código ao mudar a direção em que as imagens se movem de horizontal para a vertical, pois isso causará uma sidebar alongada. O link entre as tags de abertura e fechamento são para sisters, mas você pode trocar pelo código que o blog te fornecer, caso você use como publicidade.
Não se esqueçam de comentar quais desses tutoriais você já usou. Você é um blogueiro old school? Há quanto tempo está na Blogosfera? Até mais, xoxo :)
