28.6.15

Agendas de outros blogs


Olá ^^ Sim, cá estou de novo, e agora vim trazer alguns tutoriais que adoro ver, mesmo usando tão pouco. Fiz recentemente um post com modelos exclusivos de agendas, mas os que trago hoje são de certa forma reblogados e tirei, por ordem, dos blogs The moon reverse, Garotas no mundo HTML e Kawaii world. PORÉM, antes que reclamem, eu alterei algumas coisinhas para ficarem mais organizadinhos e menos "cópia", nada que torne os modelos irreconhecíveis, mas para mostrar um mínimo de trabalho. Achei boa ideia fazer isto pois estes modelos são bastante conhecidos, ou já foram e é uma pena deixá-los cair em desuso, então aproveitei para reunir todos num lugar só e com um CSS mais uniforme, mais semelhante. Também podem ser usados facilmente como status ou menu, isso é com vocês. Espero que gostem, mesmo assim demorei um bom tempo a fazer este post. [NOTA] As minhas previews do TMV ficaram um bocado afastadas (ao visualizar vão perceber), mas ficam direitinhos num gadget.

PS: Caso ainda não tenha adicionado a fonte silkscreen ao seu html, comece por adicionar o código seguinte acima de /b:skin
@font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }


TMV - modelo1» preview (leram o aviso na intro?)
Cole o seguinte código acima de /b:skin: www
Num gadget HTML/Javascript, cole:
<center>
<div class="agenda"><a title="Título do tooltip">DATA</a></div>
<div class="agenda2"><a title="TEXTO DO TOOLTIP">TEXTO</a></div>
<div class="agenda"><a title="Título do tooltip">DATA</a></div>
<div class="agenda2"><a title="TEXTO DO TOOLTIP">TEXTO</a></div>
<div class="agenda"><a title="Título do tooltip">DATA</a></div>
<div class="agenda2"><a title="TEXTO DO TOOLTIP">TEXTO</a></div>
</center>

TMV - modelo 2» preview (leram o aviso na intro?)
Cole o seguinte código acima de /b:skin: www
Num gadget HTML/Javascript, cole:
<center>
<div class="agenda"><a title="Título do tooltip">DATA</a></div>
<div class="agenda2"><a title="TEXTO DO TOOLTIP">TEXTO</a></div>
<div class="agenda"><a title="Título do tooltip">DATA</a></div>
<div class="agenda2"><a title="TEXTO DO TOOLTIP">TEXTO</a></div>
<div class="agenda"><a title="Título do tooltip">DATA</a></div>
<div class="agenda2"><a title="TEXTO DO TOOLTIP">TEXTO</a></div>
</center>

GNMH - modelo1» preview
Cole o seguinte código acima de /b:skin: www
Num gadget HTML/Javascript, cole:
<div class="agenda">?/? - TEXTO</div>
<div class="agenda">?/? - TEXTO</div>
<div class="agenda">?/? - TEXTO</div>
<div class="agenda">?/? - TEXTO</div>

GNMH - modelo2» preview
Cole o seguinte código acima de /b:skin: www
Num gadget HTML/Javascript, cole:
<div class="agenda">
<a href="LINK">00 - TEXTO</a>
<a href="LINK">00 - TEXTO</a>
<a href="LINK">00 - TEXTO</a>
<a href="LINK">00 - TEXTO</a>
</div>

GNMH - modelo3» preview (use os gifs em baixo ou outros)
Cole o seguinte código acima de /b:skin: www
Num gadget HTML/Javascript, cole:
<agenda><img src="GIF" /> <a href="LINK"><agenda2> 00 </agenda2></a>TEXTO </agenda>
<agenda><img src="GIF" /> <a href="LINK"><agenda2> 00 </agenda2></a>TEXTO </agenda>
<agenda><img src="GIF" /> <a href="LINK"><agenda2> 00 </agenda2></a>TEXTO </agenda>
<agenda><img src="GIF" /> <a href="LINK"><agenda2> 00 </agenda2></a>TEXTO </agenda>
  


GNMH - modelo4» preview
Cole o seguinte código acima de /b:skin: www
Num gadget HTML/Javascript, cole:
<center><div class="agenda2"><div class="agenda"><center>
<a href="LINK">00 - TEXTO</a>
<a href="LINK">00 - TEXTO</a>
<a href="LINK">00 - TEXTO</a>
<a href="LINK">00 - TEXTO</a>
</center></div></div></center>

KW - modelo1» preview
Cole o seguinte código acima de /b:skin: www
Num gadget HTML/Javascript, cole:
<div class="agenda"> 00 - TEXTO </div>
<div class="agenda"> 00 - TEXTO </div>
<div class="agenda"> 00 - TEXTO </div>
<div class="agenda"> 00 - TEXTO </div>

KW - modelo2» preview
Cole o seguinte código acima de /b:skin: www
Num gadget HTML/Javascript, cole:
<center>
<a href="LINK" class="agenda">00 - TEXTO</a>
<a href="LINK" class="agenda">00 - TEXTO</a>
<a href="LINK" class="agenda">00 - TEXTO</a>
<a href="LINK" class="agenda">00 - TEXTO</a>
</center>

KW - modelo3» preview
Cole o seguinte código acima de /b:skin: www
(troque o primeiro background que aparece pela url do seu botão)
Num gadget HTML/Javascript, cole:
<div class="agenda2"><span class="title">00 -TEXTO<a class="agenda" href="LINK"></a></span></div>
<div class="agenda2"><span class="title">00 -TEXTO<a class="agenda" href="LINK"></a></span></div>
<div class="agenda2"><span class="title">00 -TEXTO<a class="agenda" href="LINK"></a></span></div>


As 2 últimas ilustrações foram tiradas daqui: www. Espero que tenham gostado do post!

Sem comentários:

Enviar um comentário