☂ Chuva de HTML

Menu responsível: softy

2018-07-15T07:19:00.002-07:00

Ohayou!

Não tenham grande esperança para que este blogue volte a ficar ativo, mas volta e meia eu continuarei sempre a aparecer por aqui com tutoriais novos. Neste momento vim partilhar um menu que criei para um dos meus layouts mais recentes, um layout minimalista (falando nisso, tenho layouts para disponibilizar no [blue design]. É um modelo responsivo, suave, e que de qualquer forma podem personalizar se não gostarem do estilo.

Pŕevia: www

[créditos pelas imagens larguinhas: www]

Tutorial:

Num gadget HTML/Javascript, colem isto. As margens dentro do primeiro style servem para que possam posicionar o menu onde quiserem, e não se esqueçam de substituir o nome das páginas e os links(#).

<div class="menunav" id="myMenunav" style="margin: 0px 0px 0px 0px;">
<a href="#">Pagina 1</a>
<a href="#">Pagina 2</a>
<a href="#">Pagina 3</a>
<a href="#">Pagina 4</a>
<a href="#">Pagina 5</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">☰</a>
</div>

Agora abram theme» editar html

Procurem por </body> e em cima colem o seguinte bloco de código:

<script>
function myFunction() {
var x = document.getElementById("myMenunav");
if (x.className === "menunav") {
x.className += " responsive";
} else {
x.className = "menunav";
}
}
</script>

Agora, procurem por /b:skin e colem em cima o bloco seguinte. Se quiserem usar este modelo, têm de adicionar a fonte "Rambla"*Esta é a parte do css, o que significa que a podem alterar de modo a persoanlizar o modelo que querem, ou podem deixar como está se preferirem manter o modelo da pŕevia. Num caso ou noutro, não se esqueçam de creditar a base!

.menunav { /*menu responsivo*/
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNfpfSDSfzzhuzDrJK07D8ylsWCQ39zSdWt_yfmTY5Z9UKXmkDy9EK7dhX9oL9_OMSD8WGgGk0c_yN43j0__VLFGsDgo4rtBEc6684O4WXLMMS5RwbHwkJY-EqIdW7ZfOFMpemP-Bbcoo9/s1600/fundomarble1.jpg);
box-shadow: inset 0px 0px 20px rgba(147,148,138,0.5);
overflow: hidden;
height: 33px;
border-radius: 2px;
-webkit-transition-duration: .80s;
-moz-transition-duration: .80s;
-o-transition-duration: .80s;
transition-duration: .80s;
}
.menunav a {
border: 1px solid #131a19;
text-shadow: 1px 1px 0px #1e2625;
background: #272e2d;
box-shadow: inset 0px 0px 5px #1e2625, 1px 1px 3px rgba(0,0,0,0.4), inset 0px 0px 2px #777d7c;
border-radius: 2px;
float: left;
margin: 4px 2px 2px 4px;
display: inline-block;
color: #fff!important;
font-family: Rambla;
text-shadow: 1px 1px 3px #131a19!important;
text-align: center;
padding: 2px 10px 2px 10px;
font-size: 14px;
text-transform: lowercase;
outline: 1px solid transparent;
outline-offset: 0px;
-webkit-transition-duration: .80s;
-moz-transition-duration: .80s;
-o-transition-duration: .80s;
transition-duration: .80s;
}
.menunav a:hover {
background: rgba(212,150,129,0.4);
outline-offset: -6px;
outline: 1px solid #fff;
border: 1px solid transparent;
box-shadow: inset 0px 0px 10px rgba(212,150,129,0.9);
text-shadow: 1px 1px 3px #d49781!important;
margin: 0px 2px 0px 4px;
padding: 6px 10px 6px 10px;
-webkit-transition-duration: .80s;
-moz-transition-duration: .80s;
-o-transition-duration: .80s;
transition-duration: .80s;
}
.menunav .icon {display: none;}
@media screen and (max-width: 991px) { /* para ecrãs entre 0 e 991 px de largura, não mexer!*/
.menunav a:not(:first-child) {display: none;}
.menunav a.icon {
float: right;
display: block;
}
.menunav.responsive {position: relative;}
.menunav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.menunav.responsive a {
float: none;
display: block;
text-align: left;
}
}

* Para usar a fonte Rambla, devem procurar por <head> e colar em baixo:
<link href='https://fonts.googleapis.com/css?family=Rambla' rel='stylesheet'/>

E voilá, era tudo. Simples, certo? Vou tentar trazer mais modelos para menus responsivos em breve, porque há muita coisa que pode ser criada, e assim também me motivo mais a criar modelos originais para os meus próprios templates. Também vou tentar adaptar antigos menus famosos de outros blogs por aí de modo a que fiquem responsívos, obviamente dando os créditos pela inspiração.

Destaque na primeira letra do post

2017-08-24T07:18:00.002-07:00

No layout atual do Caixa de surpresas estou a usar um efeito que permite destacar a primeira letra do post, permitindo aumentá-la e ficar com alinhamento à esquerda, ou seja, a primeira linha começa a ser escrita a partir do topo da letra inicial, daí diferindo de como ficaria se aumentássemos apenas a fonte. É um efeito bastante intuitivo, mas eu tive a ideia graças ao antigo Cherry Bomb, agora chamado Jingimon: www. Aqui está o tutorial, personalizem como quiserem, vou também divulgar o meu modelo:

Prévia: www

Tutorial

Procurem por /b:skin e colem acima:

big {

font-size: 50px;

font-style: bold;

color: #ff1b72;

line-height: 30px;

float: left;

}

Se quiserem um modelo igual ao da prévia, aqui está o código: www - vale lembrar que têm de incorporar a fonte Berkshire Swash no vosso blog, procurando por <head> e adicionando em baixo:

<link href="Berkshire+Swash" rel="stylesheet" type="text/css">

Para adicionar, basta irem ao editor de texto da postagem, clicarem no editor de "HTML" que está por baixo do título do blog, procurarem pela primeira palavra do vosso texto e colocarem a primeira letra entre <big></big>, assim:

<big>O</big>lá! Hoje vamos falar sobre livros.

Já está ^^

Alterar a vírgulas dos marcadores por qualquer símbolo

2017-08-24T06:58:00.001-07:00

Com um bocado de sorte, terão tutoriais todos os dias até ao fim desta semana, pelo menos um por dia. O de hoje é bastante simples, e é daquelas coisas pequenas que fazem toda a diferença e que eu trataria de implementar mal começasse um novo layout: basicamente, vou ensinara a tirar aquela vírgula horrorosa que aparece a separar os marcadores/tags/etiquetas/assuntos do post, trocando-a por outro símbolo ao gosto. Créditos: www

Abra o código do HTML e use Ctrl + F para procurar por:

<span class='post-labels'>

Se procurar mais a baixo, verá uma vírgula, mude ela pelo símbolo que quiser e salve. Se não quiser que a vírgula fique ali, apague-a.

Se não sabe onde encontrar símbolos, entre neste site ou use apenas este ponto: •

Era isso!

Data em forma de calendário

2017-08-23T14:19:00.004-07:00

Este é um "efeito" que eu já queria ter aprendido há bastante tempo, mas só consegui encontrar um tutorial que funcionasse comigo recentemente, e portanto decidi trazê-lo. O tutorial é do Mundo Blogger, neste post vou dizer basicamente as mesmas etapas, mas irei apresentar-vos o meu modelo. Claro, podem alterar tudo o que vos apetecer. Apesar de isto se chamar "formato calendário", só se parece com um calendário porque o dia, mês e ano aparecem em linhas diferentes e só estão escritas as 3 letras iniciais do mês - o fundo só é um calendário se quisermos. De qualquer forma, eu acho bonitinho. Prévia: www

Parte que não afeta o código:

É importante que façam isto antes do resto. Só têm de ir às configurações do blog e escolher o formato de data apresentado na imagem. Pelo sim pelo não, eu verificaria se na postagem, em "Esquema", ficou igual, pois é suposto que fique.

Parte do código:

Primeiro, procurem por <head> e adicionem este código em BAIXO caso queiram a fonte Patrick Hand:

<link href="//fonts.googleapis.com/css?family='Patrick+Hand+SC' rel="stylesheet" type="text/css">

Localizem a linha </head> ou </head ... e colem ABAIXO:

<script>
function remplaza_fecha(d){
var da = d.split(' ');
dia = "<div class='fecha_dia'>"+da[0]+"</div>";
mes = "<div class='fecha_mes'>"+da[1].slice(0,3)+"</div>";
anio = "<div class='fecha_anio'>"+da[2]+"</div>";
document.write(dia+mes+anio);
}
</script>

Agora, localize este trecho procurando pela primeira linha:

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

Cole ABAIXO da terceira:

<a expr:name='data:post.id'/>

A seguir, procure pela expressão:

<h2 class='date-header'><data:post.dateHeader/></h2> OU <h2 class='date-header'><span><data:post.dateHeader/></span></h2>

Substitua-a por isto:

<div id='fecha'>
<script>var ultimaFecha = '<data:post.dateHeader/>';</script>
<script>remplaza_fecha('<data:post.dateHeader/>');</script>
</div>
<b:else/>
<div id='fecha'>
<script>remplaza_fecha('<data:post.dateHeader/>');</script>
<script>remplaza_fecha(ultimaFecha);</script>
</div>

Por fim, procurem por /b:skin e ACIMA adicionem isto, que corresponde à personalização do modelo:

#fecha { /*data do post no modelo atual*/
color: #88a0e3;
padding: 5px;
margin: 0px 0px 0px -50px;
float:left;
text-align:center;
border: 3px solid #88a0e3;
border-radius: 100px;
list-style:none;
display: block;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
#fecha:hover { /*data do post no modelo atual*/
color: #f2de7c;
border: 3px solid #fff3ad;
background: #fff;
-webkit-transform: rotateY(-360deg);
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.fecha_dia {
display:block;
font-size:18px;
line-height:16px;
font-family:'Arial';
letter-spacing:-1px
}
.fecha_mes {
font-size:14px;
line-height:12px;
font-family: Patrick Hand SC;
text-transform:uppercase;
display:block;
}
.fecha_anio {
font-size:9px;
line-height:8px;
display:block;
}

Prontinho ^^ Não tem problema se já tinham personalizado a data antes sem ser neste formato, pois a forma antiga será substituída e as linhas correspondentes a essa parte da edição ignoradas. Não alterem nada a não ser o último bloco de código, em que podem personalizar ao vosso gosto.

Comentários com google+ e blogger

2017-08-23T13:42:00.003-07:00

Ohayou, minna ^^

O tutorial de hoje é baseado num tuto do Bunny Crazy, só com ligeiras alterações para ficar um modelinho meu, ou seja este: www. O processo que vou mostrar é idêntico, mas o balãozinho atrás é uma imagem minha e vou explicar à minha maneira, assim como sugerir modelos de comentários que já publiquei aqui. O blogger, por omissão, apresenta sempre uma forma própria de comentar - algumas pessoas optam por colocar o modelo do google+, contudo, até agora sempre tinha julgado que necessariamente se tinha de optar por um ou outro. Contudo, graças ao tutorial da Wendy, descobri que dá para conjugar as duas formas, pelo que os leitores podem comentar pela maneira que lhes agrada mais - e agradar aos leitores é a melhor forma de fazer o blog crescer.

Prévia: www

Tutorial:

Procure por </head> e adicione em cima:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>

Agora procure por:

<b:include data='post' name='post'/>

E troque por:

<b:if cond='data:blog.pageType == "item"'>
<style>
#comments, #gplus-comments-visibility {display:none;}
.comments-icons {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBqcEpWqqM7khsdCMB5XLam9YTPG0aPYPzI5uiG4BsckNTjlCxHwDQ5LF0t9JjzG2XrMguUI_ivFPWXlVEhrJJNCSIs7ywyTnXPzrdlAY_be0fkqMIBinyI_I-KZqmpJAGT0nCjUYdS7M/s1600/000.png) no-repeat; border-radius: 5px; font-size: 20px; font-family: Berkshire Swash; color: #8a3e40; margin: 20px 0px -20px -10px;font-weight: bold; padding: 18px 15px 0; height: 70px; }
.comments-icons a img {vertical-align: middle;}</style>
<div class='comments-icons'>
Comentar com: <a class='show-hide-comments' href='javascript:void();' onclick='$("#gplus-comments-visibility").slideToggle();$("#comments").hide();'><img class='gplus-https://www.blogger.com/blogger.g?blogID=3224560834634523712#editor/target=post;postID=6080401536756351522;onPublishedMenu=allposts;onClosedMenu=allposts;postNum=0;src=linkicon' height='25' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPRjmyBUCKn95srTCHdIk6vGS06kGEkED33B2zsmdu_ozzxmWSLm2erE2YHNwH-g1kgnt8hplDmKNLNN0OzpopFfORvAMxSN6THkz3QlEmucUF3d4w-BpDJYYYVTyyATyHtZ4vFZkX5nnQ/s1600/google-plus-logo.png' width='25'/></a> ou <a class='show-hide-comments' href='javascript:void();' onclick='$("#comments").slideToggle();$("#gplus-comments-visibility").hide();'><img class='blogger-icon' height='25' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiiGHI7g7x-8lcZ5dTblElR4G2XtDlg6rZhT0h8pqgpMzgCn4IJNXMstgeyFhD9CzHxmp0jghZUzSa1qcrVE6eNFQKAcYQQ4byF3JkrgC6KQc8c6sXo-aTk93h-naYRKbC8VMXKXZlDtxb/s1600/blogger-logo.png' width='25'/></a>
</div>
<div id='gplus-comments-visibility'>
<div class='g-comments' data-first_party_property='BLOGGER' data-view_type='FILTERED_POSTMOD' data-width='745' expr:data-href='data:post.url'/>
</div>
</b:if>

Explicações:

Vai notar na prévia que quando se dirige ao fim do post, não aparece comentário nenhum. Isto porque mesmo para ver os comentários já feitos, é preciso selecionar se queremos visualizá-los com google+ ou blogger.
O que destaquei a itálico é a formatação do texto que permite escolher como se quer comentar, isto é, imagem de fundo, fonte, etc...
Em sublinhado, está a mensagem "comentar com", para o caso de quererem deixar a frase mais bonitinha.
O que está em negrito é a largura dos comentários em formato google +, que é a única coisa personalizável.
Os comentários em formato blogger têm de ser personalizados normalmente, aqui todos os tutoriais/modelos que publiquei até agora, do mais recente para o mais antigo: #uvas e laranjas #kawaii #roots #galaxy #delicate #pastel candies #inverted flower #too sweet
Mude a fonte, fundo e frase do "comente com" se quiser, credite o meu modelo se usar, se não credite o tutorial do Bunny Crazy por ser o original.

Era isso. Não tenho dúvidas de que funciona sempre.

Modelo para comentários #uvas e laranjas

2017-08-23T13:37:00.000-07:00

Sim, eu estou a despachar modelos para comentários antigos. O deste vez pode ser visualizado no meu blog abandonado, Forever Sapo, e é dos modelos mais complexos, embora para vocês não vá fazer diferença - só me deu trabalho a criar porque incluir animações. Chamei-lhe uvas e laranjas porque... as cores predominantes são roxo e laranja >.< Mas sintam-se à vontade para mudar as cores, assim como as fontes. Cá vai:

Prévia: www

Tutorial:

Procure por <head> e abaixo cole:

<link href='http://fonts.googleapis.com/css?family=Delius+Swash+Caps|Muli' rel='stylesheet' type='text/css'/>

Agora, acima de /b:skin insira o seguinte código:

#comments {
margin-top: 30px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc1uaCat4j5PmMpMdb_0NHSdl5QBQvtJL1wwrt6nd6Jn5PRPdxco60vzKY75LT7nYGqX3h-cItzk7F3Aqty0c2oS3fwW1FM6UWs7Q0NM8cZofuCyE8FqeECdCOcQkmrbM4S53PdaT6-40/s1600/010.png) repeat #edcced;
padding: 5px;
border-radius: 10px;
}
#comments .comment-author { padding-top: 1.5em;}
#comments h4,
#comments .comment-author a,
#comments .comment-timestamp a {color: #000000;}
#comments .comment-author:first-child {
padding-top: 0;
border-top: none;
}
.avatar-image-container {margin: .2em 0 0;}
#comments h4, #comments .comment-author a, #comments .comment-timestamp a { /*Texto "X comentários:"*/
color: #ca8acf!important;
text-shadow: 1px 1px 1px #fff, 3px 3px 0px #fff;
font-family: Delius Swash Caps;
font-size: 18px;
text-align: center;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
#comments h4:hover, #comments .comment-author a:hover, #comments .comment-timestamp a:hover {
letter-spacing: 2px;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
#comments a { /* fonte em geral*/
color: #9a6a9e;
text-align: justify;
font-family: Muli;
font-size: 14px;
}
.comments .comment-thread.inline-thread { /*enquadramento dos comentários de resposta*/
background: rgba(255,255,255,0.5);
outline: 1px dashed #fff;
outline-offset: 0px;
}
.comments .continue { /*borda a separar os comentários*/
border-top: 0px solid #cccccc;
}
.comments .comments-content .comment-thread ol { list-style-type:none; padding:0px; text-align:none;}
.comments .comments-content .inline-thread {padding: 0px;}
.comments .comments-content .comment-thread { margin: 8px 0px;}
.comments .comments-content .comment-thread:empty { display: none;}
.comment-replies{ margin-top: 1em; margin-left: 15px; }
.comments .comments-content .comment{ margin-bottom: 0px; padding-bottom: 0px; }
.comments .comments-content .comment:first-child{ padding-top: 16px; }
.comments .comments-content .comment:last-child{ border-bottom:0px; padding-bottom: 0px; }
.comments .comments-content .comment-body{ position: relative; }
.comments .comments-content .user{ font-style: normal; font-weight: normal; }
.comments .comments-content .user a{ font-weight: normal; text-decoration: none;
}
.comments .comments-content .comment-content { /*caixa de comentário*/
margin: -8px 0px 0px 36px;
border-radius: 0px 0px 5px 5px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPjD15HsILol2BYrIZGNkXrTQ-QnKbgqrfMnWj8_8BWY9xI7P9_pYMdHADG-9oFbaFLGa3SLgTVSZvQxmSJaxkE_3vpbx6Pt08F-sLGstv2gm52xk-iyFzONnKduoB5bf-JkcWvBcdhTU/s1600/navslide2b.png) repeat-Y #fff;
box-shadow: inset -3px 0px 0px #b880bd, inset 3px 0px 0px #b880bd;
padding: 5px 8px 5px 28px;
border-right: 0px solid #ff8b38;
border-left: 0px solid #ff8b38;
color: #9a6a9e;
text-align: justify;
font-family: Muli;
font-size: 14px;
text-shadow: none;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.comments .comments-content .comment-content:hover { /*caixa de comentário*/
box-shadow: inset -3px 0px 0px #b880bd, inset 3px 0px 0px #b880bd;
background-position: 0px -60px;
border-right: 3px solid #ff8b38;
border-left: 3px solid #ff8b38;
padding: 5px 5px 5px 25px;
color: #db8c53;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.comments .comments-content {
margin-bottom: 0px;
font-weight: normal;
text-align: justify;
padding-left: 10px;
}
.comments .comment .comment-actions a,.comments .comment .continue a { /*fonte do botão reply*/
text-align: center;
font-size: 11px!important;
text-decoration: none;
border-radius: 3px 3px 3px 3px;
background: #d39cd9;
box-shadow: inset 0px 0px 1px #c38dc9;
padding: 2px 4px 2px 4px;
text-decoration: none;
margin: 3px 0px 0px 40px;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.comments .comment .comment-actions a:hover,.comments .comment .continue a:hover { /*fonte do botão reply em hover*/
text-shadow: 1px 1px 1px #ffffff;
-webkit-animation: shadow 4s alternate infinite linear;
-moz-animation: shadow 4s alternate infinite linear;
-o-animation: shadow 4s alternate infinite linear;
-ms-animation: shadow 4s alternate infinite linear;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
@keyframes shadow {
0% {box-shadow: inset 0px 30px 0px #ff9d4d; -webkit-transform: rotate(0deg);}
25% {box-shadow: inset 600px 0px 0px #bc78c2; -webkit-transform: rotate(-2deg);}
50% {box-shadow: inset 0px -30px 0px #bc78c2; -webkit-transform: rotate(2deg);}
75% {box-shadow: inset -600px 0px 0px #ff9d4d; -webkit-transform: rotate(-2deg);}
100% {box-shadow: inset 0px 30px 0px #d39cd9; -webkit-transform: rotate(0deg);}
}
.comment-header { /*nome do autor do comentário*/
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTxNliJi4OKXc4zsJ7Sp-ui8-jE-kl2rZYC1rJpnnVaKZeCdmc556Yo-n0hEFb6Hyu2DK7xdJSroO9uhc7vgxkmJYGlTI8b9imbQWP6_H7axdhuk5M4UfxpxNAhQdDmKS0Ggrf0lXKOBA/s1600/coment1.png) no-repeat;
margin-bottom: 2px;
padding: 2px 5px 5px 5px;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.comment-header:hover { /*nome do autor do comentário*/
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxXuJkSrFmj2C1vytl8shitBDBEiTT-ETWpDQRKa-ZDF0lF4u0DojH33fkrMDuQXkznQeddQC1O3YtdykivGP5r_q9lmYfcOYKtvZn_Dr9RSUQN2xPYm5oKl-TGTVjbuFGP74xJaB45yU/s1600/coment1b.png) no-repeat;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.comment-header a { /*fonte do nome do autor*/
font-family: Delius Swash Caps!important;
font-size: 16px!important;
color: #fff!important;
text-shadow: 1px 1px 1px #77377d!important;
padding: 5px 5px 10px 35px;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.comment-header a:hover { /*fonte do nome do autor*/
text-shadow: 1px 1px 1px #d97325!important;
letter-spacing: 1px;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.comments .comments-content .datetime {background: rgba(255,255,255,0.5);}
.comments .comments-content .datetime a { /*data do comentário*/
font-size: 12px!important;
float: right;
font-family: Muli!important;
text-decoration: none;
color: #e3a7eb!important;
text-shadow: 2px 2px 0px #83358f, -2px -2px 0px #83358f, -1px 1px 0px #83358f, 1px -1px 0px #83358f!important;
margin-top: 2px;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.comments .comments-content .datetime a:hover { /*data do comentário em hover*/
color: #fff!important;
text-shadow: -2px 2px 0px #f7751e, 2px -2px 0px #f7751e, -1px -1px 0px #f7751e, 1px 1px 0px #f7751e!important;
letter-spacing: 2px;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.comments .comments-content .owner-actions {position:absolute;right:0;top:0}
.comments .comments-replybox {border:none;height:200px;width:100%}
.comments .comment-replybox-thread {margin-top:0}
.comments .comment-replybox-single {margin-top:5px;margin-left:48px}
.comments .comments-content .loadmore a {display:block;padding:10px 16px;text-align:center}
.comments .thread-toggle {cursor:pointer;display:inline-block}
.comments .comments-content .loadmore {cursor:pointer;max-height:3em;margin-top:0}
.comments .comments-content .loadmore.loaded {max-height:0;opacity:0;overflow:hidden}
.comments .thread-chrome.thread-collapsed {display:none}
.comments .thread-toggle {display:inline-block}
.comments .thread-toggle .thread-arrow {
display: inline-block;
height: 6px;
width: 7px;
overflow: visible;
margin: 0.4em;
padding-right: 4px;
}
.avatar-image-container { /*enquadramento do avatar*/
margin: 5px 3px 5px 5px;
border-radius: 3px;
padding: 3px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFt5rfUqkg7LbVFRzaVlwXMxFDprFfSuF2Lj3TDgMaAFhEe0Om4KiWaw3iNukz7XPl6UAlPgYkscyVtlqJv4mMD2V_okyqnopONCyw7ZybnKIr6FlX9bLj_uz49TaNGTWIUb92cHcpXZQ/s1600/fundo000.png) no-repeat;
box-shadow: inset 0px 0px 3px #707070, 0px 0px 3px #fff;
max-width: 35px;
max-height: 29px;
min-height: 29px;
min-width: 35px;
-webkit-transform: rotate(-35deg);
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.comments .avatar-image-container img { /*avatar também*/
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqbC3jXt98xtwnUCK4tDqV8V1R-F3oEuSwmZ4c9HivsQMrTIHor7Tw9LPauMxsoUtYeKPizYtpKId9Rlhs6dVzIsW1ffSKd_weBpQ-1B8MzbIFS_Eu1niWjutEbEXqOt2g6CfNHY91c8E/s1600/fundo0000b.png) no-repeat;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.avatar-image-container:hover { /*enquadramento do avatar*/
margin: 5px 3px 5px 5px;
outline: 6px double rgba(250,250,250,0.5);
-webkit-animation: mntd 2s alternate infinite linear;
-moz-animation: mntd 2s alternate infinite linear;
-o-animation: mntd 2s alternate infinite linear;
-ms-animation: mntd 2s alternate infinite linear;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.comments .avatar-image-container img:hover { /*avatar também*/
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
@-webkit-keyframes mntd {
20% {box-shadow:4px 4px 0px #c76fba, -4px -4px 0px #ff9447;}
40% {box-shadow:-4px 4px 0px #c76fba, 4px -4px 0px #ff9447;}
60% {box-shadow:-4px -4px 0px #c76fba, 4px 4px 0px #ff9447;}
80% {box-shadow:4px -4px 0px #c76fba, -4px 4px 0px #ff9447;}
100% {box-shadow:4px 4px 0px #c76fba, -4px -4px 0px #ff9447;}
}

Voilá ^^

Modelo para comentários #kawaii

2017-08-23T13:21:00.003-07:00

Eu não tenho qualquer assunto para dizer na intro, então estou só a enrolar e a tentar escrever frases longas. Já tinha este tutorial nos rascunhos há séculos, é só um modelinho típico de comentários, que eu achei particularmente kawaii e que nem sei em que layout usei. Espero que gostem ^^

Prévia

Tutorial

Procure por <head> e adicione em cima:

<link href='http://fonts.googleapis.com/css?family=Muli | Fredericka+The+Great' rel='stylesheet' type='text/css'/>

Agora, procure por: /*comments
Substitua toda a área própria pelo código seguinte:

#comments {background: transparent;padding: 15px;}
#comments .comment-author {padding-top: 1.5em;}
#comments h4,
#comments .comment-author a,
#comments .comment-timestamp a {color: $(post.title.text.color);}
#comments .comment-author:first-child {padding-top: 0;border-top: none;}
.avatar-image-container {margin: .2em 0 0;}
#comments h4, #comments .comment-author a, #comments .comment-timestamp a { /*Texto "X comentários:"*/
color: #76a4b0!important;
text-shadow: 1px 1px 1px #ffffff;
font-family: Muli;
font-size: 22px;
text-align: center;
margin-bottom: -13px;
margin-top: 5px;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
#comments h4:hover, #comments .comment-author a:hover, #comments .comment-timestamp a:hover {
letter-spacing: 2px;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
#comments a { /* fonte em geral*/
color: #bdbdbd;
text-align: center;
font-family: Fredericka The Great;
font-size: 13px;
}
.comments .comment-thread.inline-thread { /*enquadramento dos comentários de resposta*/
background: transparent;
}
.comments .continue { /*borda a separar os comentários*/
border-top: 0px solid #cccccc;
}
#comments {
margin-top: 30px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmmfYVK8gxv6_jqEwD9CttzRNAUgc1vd5OvYW6GtWDoGPPlFmEdCioTvNKQ1FLyawE_WvHi3aoEHzmpA4tT5xX2JyFqsPGsVNyuM9-WRRMCJctUb7-P9PClVN9Sg0KdkCMu2Tgm9KmD6o/s1600/flor1.png) repeat #ebebeb;
padding: 5px;
border-radius: 0px 0px 3px 3px;
}
.comments .comments-content {
margin-bottom: 0px;
font-weight: normal;
text-align: justify;
font-color: #cccccc;
}
.comments .comment .comment-actions a,.comments .comment .continue a { /*fonte do botão reply*/
display: inline-block;
font-family: muli!important;
font-size: 10px!important;
text-align: center;
color: #e38e88!important;
text-shadow: 1px 1px 1px #fff;
background: rgba(0,0,0,0.03);
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.15), 0px 1px 1px rgba(255,255,255,0.35);
margin: 6px 10px -5px 10px;
padding: 2px 3px 2px 3px;
border-bottom: 5px solid #fad8c8;
text-decoration: none;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.comments .comment .comment-actions a:hover,.comments .comment .continue a:hover { /*fonte do botão reply em hover*/
letter-spacing: 1px;
border-bottom: 5px solid #f5dcba;
color: #edad5a!important;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.comments .comments-content .comment-thread ol { list-style-type:none; padding:0px; text-align:none;}
.comments .comments-content .inline-thread {padding: 0px;}
.comments .comments-content .comment-thread { margin: 8px 0px;}
.comments .comments-content .comment-thread:empty { display: none;}
.comment-replies{ margin-top: 1em; margin-left: 15px; }
.comments .comments-content .comment{ margin-bottom: 0px; padding-bottom: 0px; }
.comments .comments-content .comment:first-child{ padding-top: 16px; }
.comments .comments-content .comment:last-child{ border-bottom:0px; padding-bottom: 0px; }
.comments .comments-content .comment-body{ position: relative; }
.comments .comments-content .user{ font-style: normal; font-weight: normal; }
.comments .comments-content .user a{ font-weight: normal; text-decoration: none;
}
.comments .comments-content .datetime a { /*data do comentário*/
font-size: 10px!important;
float: right;
font-family: muli!important;
text-decoration: none;
color: #fff!important;
text-shadow: 1px 1px 1px #8a8a8a;
margin-top: 3px;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.comments .comments-content .datetime a:hover { /*data do comentário em hover*/
letter-spacing: 1px;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.comment-content { margin: 0px 0px 8px; padding: 0px 5px;}
.comments .comment-block { /*caixa do comentário*/
margin-left: 55px;
position: relative;
background: #ffffff;
box-shadow: 0px 0px 5px #7e999e;
border-bottom: 5px solid #86b3ba;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.comment-header { /*nome do autor do comentário*/
background: #e8b674;
border: 3px solid #fff;
outline-offset: -3px;
outline: 1px dashed #f5dcba;
font-size: 12px;
padding: 5px 5px 5px 8px;
margin-bottom: 2px;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.comment-header:hover { /*nome do autor do comentário*/
background: #f2a399;
outline-offset: -6px;
outline: 1px dashed #fad8c8;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.comment-header a { /*fonte do nome do autor*/
font-family: muli!important;
font-size: 17px!important;
color: #fff!important;
text-shadow: 1px 1px 1px #e09f4a!important;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.comment-header a:hover { /*fonte do nome do autor*/
text-shadow: 1px 1px 0px #db6f6e!important;
color: #fff;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.comments .comments-content .owner-actions {position:absolute;right:0;top:0}
.comments .comments-replybox {border:none;height:200px;width:100%}
.comments .comment-replybox-thread {margin-top:0}
.comments .comment-replybox-single {margin-top:5px;margin-left:48px}
.comments .comments-content .loadmore a {display:block;padding:10px 16px;text-align:center}
.comments .thread-toggle {cursor:pointer;display:inline-block}
.comments .comments-content .loadmore {cursor:pointer;max-height:3em;margin-top:0}
.comments .comments-content .loadmore.loaded {max-height:0;opacity:0;overflow:hidden}
.comments .thread-chrome.thread-collapsed {display:none}
.comments .thread-toggle {display:inline-block}
.comments .thread-toggle .thread-arrow {
display: inline-block;
height: 6px;
width: 7px;
overflow: visible;
margin: 0.4em;
padding-right: 4px;
}
.comments .thread-expanded .thread-arrow{
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC) no-repeat scroll 0 0 transparent;
}
.avatar-image-container { /*enquadramento do avatar*/
margin: 5px 3px 5px 5px;
border-radius: 3px;
background: #fad8c8;
border: 6px dotted #fff;
outline-offset: -3px;
outline: 1px solid #86b3ba;
max-width: 50px;
max-height: 50px;
min-height: 50px;
min-width: 50px;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.comments .avatar-image-container img { /*avatar também*/
max-width: 50px;
max-height: 50px;
min-height: 50px;
min-width: 50px;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.avatar-image-container:hover { /*enquadramento do avatar*/
margin: 5px 3px 5px 5px;
border-radius: 5px;
background: #f5dcba;
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
transform: rotate(-5deg);
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.comments .avatar-image-container img:hover { /*avatar também*/
border-radius: 10px;
box-shadow: 0px 0px 1px #707070;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}

Personalizar mensagem de erro

2017-08-22T16:04:00.001-07:00

Trago o tutorial mais simples do século. Não terão sequer de mexer no html do blog, mas terão de editar a vossa própria imagem - a não ser que só queiram usar texto. O objetivo é criar uma mensagem de erro estilo "error 404", eventualmente acompanhado de instruções extra, para substituir a mensagem de erro padrão do blogger: "A página que estava a procurar no blogue não existe". Ficará algo assim: www

Vá a Definições» Preferências de pesquisa» Erros e redirecionamentos» Página não encontrada personalizada. Tal como está na imagem:

Agora, clique em editar, insira a sua imagem e mensagem segundo o exemplo que eu dou na blockquote mais em baixo. Recomendo que a mensagem contenha:

Imagem de error 404:

(exemplos meus)

Informação sobre o que aconteceu:

Não foram encontrados resultados para essa palavra-chave;
A url da página não existe;
O conteúdo que procura não existe neste blog;

Ajuda para prosseguir:

Experimente ver se a url da página está correta;
Talvez o que procura se encontre no mapa do blog;
Encontre informações sobre o blog na página SOBRE;
Comece por navegar pelo menu, talvez encontre o que procura;
Utilize a barra de pesquisa para encontrar resultados semelhantes;

Aqui um exemplo do que eu tenha nessa área:

<style type="text/css">
.status-msg-bg { background: #f8f8f8; }
.sidebar-wrapper, .page-header {}
.main-wrapper { margin-right: 0; }
.outer-wrapper { min-height: 0; }
.status-msg-border { border: 0 none; }
#mns {font-family: Muli; color: #7b4d80;}
#mns a{ text-decoration :none; cursor:pointer}
</style>
<div id="error-404" style="background: rgba(202,200,230,0.3); margin: -15px -35px 0px -35px; color: #b0715f;">
<center>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAXD35HHoHAIeysO6dWYF3kjELkLvCBQv1M_aGCZ6NQtWYGKlGPtbF0xf-rNYtsXfh73afezmxta1R5YmTdyyz2lP1wcdUpDwk1y8HEh9em53sTzpRNW3txOhWbOdckoqsuKXbtE5Lkes/s1600/error.png" /><br/>
Deve estar a ver o <b>mapa do tesouro</b> ao contrário. Utilize o menu para navegar, siga as sugestões da sidebar ou volte à <a href="http://caixinha-any.blogspot.pt/">página inicial</a>.
</center>
</div>

Era isso minna, espero ter ajudado. Não há como fazer asneira.

Como criar layouts responsivos

2017-08-18T04:49:00.001-07:00

Ohayou, minna! Mais vale tarde do que nunca, certo? Eu tinha prometido uma base responsiva e um tutorial a ensinar como fazer layouts assim, e cá está tudo, após o ler mais. O post deu bastante trabalho, pois muitos tutoriais que encontrei não funcionavam nas bases do blogger que eu usava, e nem tutoriais em inglês resolveram 100% o meu problema. Blogger é uma plataforma mesmo bizarra >.< Ainda há coisas que gostaria de aprender a fazer e, se entretanto descobrir, aviso, mas pelo menos o essencial já está.

Aviso que o tutorial é MUITO longo, tem imensas etapas, e todas são relevantes. Portanto, se não quiserem ter trabalho a modificar tudo, tudo o que afirmo aqui já está numa base 100% modificável que eu fiz - é semelhante às bases que eu dantes fazia onde dou permissão para alterarem por inteiro, com a diferença de que esta é responsiva. Só peço que creditem a base ou este tutorial. Aqui está: www

[OBS: O post não ensina a criar layouts, apenas a modificá-los de forma a deixá-los responsivos. Além disso, há layouts que serão particularmente difíceis de adaptar e terá de ser você a decidir como lidar com isso]

Ilustrações larguinhas de: [Explosive Unicorns]

Ativar a prévia:

Tema» Roda dentada em telemóvel» Sim» Predefinição» Personalizado

Tudo o resto será tratado na parte do HTML:

1. Usar "device width"

Procure por <head> e em baixo coloque:

<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>

É possível que alguns templates já tenham escrito dentro do content a expressão width=device-width. Se esse for o caso, não precisa fazer nada, pois é essa a palavra chave. É ainda possível que o código abaixo de <head> esteja originalmente assim:

<b:if cond='data:blog.isMobile'>

<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>

<b:else/>

<meta content='width=1100' name='viewport'/>

</b:if>

Se esse for o caso, pode substituir tudo pela única linha que eu dei na primeira blockquote.

2. Atualizar a tag do corpo

Procure por <body> e substitua a linha por:

<body expr:class='"loading" + data:blog.mobileClass'>

Se já estiver assim, melhor.

3. Decidir que gadgets mostrar

Indico que faça isto depois de já ter o layout pronto, com todos os gadget já inseridos. Depois, é uma questão de procurar para todos eles uma linha que se apresente no seguinte formato (em vez de ID-type aparecerá o id do seu gadget, como header, Navbar, HTML1...):...

<b:widget id='ID-type' locked='true' title='Widget-Title'/>

e tem de especificar se quer que o gadget apareça ou não, de forma a ficar com a linha de código assim:

<b:widget id='ID-type' locked='true' mobile='yes' title='Widget-Title'/>

As opções são:

mobile='yes' » apresenta em telemóveis/celulares e tablets
mobile='no' » só apresenta em computadores
mobile='only' » só apresenta em mobiles (celulares e tablets)

4. Tratar da parte .mobile

Aparentemente isto não dá problema noutras plataformas, é uma coisa chatinha dos modelos do blogger mesmo. O blogger tende a forçar uma aparência que corta os nossos posts para excertos em mobile, elimina sidebar, coloca umas setas laterais em vez de ler mais, e desporsonaliza a área de post (para mobile, ou seja, telemóveis e tablets, não em função do tamanho do ecrã). Eu mAtEI A CabeçA com esta parte, então digamos que me inspirei nestes [www www www] sites e acabei por fazer este código, que vocês devem inserir antes de /b:skin:

/*.mobile #sidebar-wrapper {display: none;} /*para remover a sidebar*/*/
body.mobile {
background-size: 100% auto;
}
body.mobile .AdSense {
margin: 0 -10px;
}
.mobile .body-fauxcolumn-outer {
background: $(mobile.background.overlay);
}
.mobile #header-inner {/*titulo do blog*/
margin-top: 15px;
margin-bottom: -10px;
margin-right: 0px;
margin-left: 0px;
width: 100%;
}
.mobile-post-outer{ /*caixinha dos posts*/
background: #ffffff;
padding: 10px 0px 10px 10px;
border-radius: 2px 2px 2px 2px;
box-shadow: 2px 2px 0px #d6d6d6;
}
.mobile-post-outer a { /*fonte dos posts*/
font-family: muli;
font-size: 16px;
color: #363636!important;
text-shadow: none;
padding: 0px;
box-shadow: none;
margin: 0px;
}
.mobile-index-contents {
color: #363636;
}
.mobile .tabs-inner .PageList .widget-content {
background: $(tabs.selected.background.color) $(tabs.selected.background.gradient) repeat scroll top center;
color: $(tabs.selected.text.color);
}
.mobile .tabs-inner .PageList .widget-content .pagelist-arrow {
border-$startSide: 1px solid $(tabs.selected.text.color);
}
.mobile-index-comment{display:none!important;}
html .mobile-index-contents .post-body{font-size:100%;}
.mobile-index-title {/*titulo do post para mobile*/
width:100%!important;
text-align: center;
font-family: Patrick Hand SC;
font-size: 22px;
color: #6e6e6e!important;
text-shadow: 0px 0px 0px #8f8f8f;
letter-spacing: 1px;
background: transparent;
padding: 5px;
margin: -5px 30px 0px -5px;
outline-offset: -5px;
outline: 1px dashed #e6e6e6;
}
.mobile .main-inner h2.date-header, .mobile .date-header span{ /*data do post para mobile*/
font-family: muli;
font-size: 10px!important;
color: #666666;
text-shadow: 1px 1px 1px #f8f8f8;
letter-spacing: 0px;
text-align: center;
padding: 2px 2px 2px 2px;
background: #b8b8b8;
border-radius: 2px 2px 0px 0px;
box-shadow: none;
}
.mobile-index-thumbnail img { /*imagem do post em mobile*/
width: 100%!important;
height: 100px!important;
text-align: center;
outline: solid 13px rgba(255, 255, 255, .5);
outline-offset: -13px;
}
html .mobile-index-arrow{ /*setinha de ler mais na lateral, pode compensar não mexer ou remover*/
color: #6e6e6e!important;
margin-top: -20px;
}
.mobile-index-thumbnail {
float: none;
margin: 0px;
padding: 0px;
}

Se quiserem que apareça a imagem com a forma original (o que eu indico se for uma imagem larguinha), eu faria também o que está no ultimo comentário de um dos fórums creditados acima, ou seja, procurem pela primeira linha deste bloco:

<b:if cond='data:post.thumbnailUrl'>
<div class='mobile-index-thumbnail'>
<div class='Image'>
<img expr:src='data:post.thumbnailUrl'/>
</div>
</div>
</b:if>

E substituam o trecho todo por este:

<b:if cond='data:post.thumbnailUrl'>

<div class='mobile-index-thumbnail'>

<div class='Image'>

<b:if cond='data:post.firstImageUrl'>

<img class='thumbnail' expr:alt='data:post.title' expr:src='data:post.firstImageUrl'/>

<b:else/>

<img alt='no image' class='post-image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5qyCxlYNvjqLvE2yDNlOp18EG1S9VfSICG5Z3EjTCM7zYNIATVUUObDdtGd1-R5VgZZ7svoUCLJK2XaG0NuAOu2sHO9xlFf4BfT1ak-44k2T5XVdt37SymJ6kmeUO05MyBMBKdk9cU-I/s1600/No-image-available-technohalf.png'/>

</b:if>

</div>

</div>

</b:if>

Se por outro lado preferirem uma imagem quadrangular na lateral, não façam esta troca de linhas. Apenas removam a propriedade da largura e altura da .mobile-index-thumbnail img e coloquem alinhamento à esquerda ou direita.

O resultado deverá ficar algo [assim], e vocês podem testá-lo no site [Mobile-Friendly Test].
Contudo, isso também pode ser usado para personalizar a sidebar. Aqui estão algumas soluções alternativas, apesar de darem consideravelmente mais trabalho (não recomendo a pessoas pouco confortáveis com código):

5. Usar breakpoints

Se quiserem características diferentes num mesmo elemento dependendo do dispositivo onde é mostrado, têm de repetir a personalização do elemento que querem dentro de chavetas que definem condições. Isto é, eu posso ter os meus gadgets, acima de /b:skin, definidos assim:

.sidebar .widget {
/* personalização dos gadgets para computadores */
}
@media screen and (max-width : 768px) {
.sidebar .widget {
/* personalização dos gadgets celulares*/
}
}

Essencialmente, é só copiar código inicial do seu lay, colar todo dentro das condições (e sim, pode personalizar vários elementos dentro das mesmas chavetas, embora também possa repetir as abrir e fechar as condições tantas vezes quantas quiser), cortar as partes que não quer, e personalizar ao seu agrado. Aqui estão as dimensões padrão, mas pode criar as suas próprias:

Para computadores com ecrãs maiores» @media (min-width:1200px) é o padrão, mas eu indicaria 1400px
Para tablets» @media (max-width:991px)
Para celulares/telemóveis» @media (max-width:767px)

Importante: as definições específicas só devem ser feitas após a definição padrão, isto é, as linhas de código equivalente a esta parte devem vir em baixo do resto.
» para visualizar os ajustes, é só ir ao blog e aumentar ou diminuir o zoom.

5.1. Personalizar o cabeçalho (se este for uma imagem)

Esta dica deriva da anterior, mas eu tenho umas recomendações extra.

#Primeira forma
Se tiver inserido um header no seu layout, através do esquema, pode simplesmente procurar/inserir o código respetivo do cabeçalho e definir como é que ele se deve comportar para cada largura. O melhor a fazer é obrigá-lo a ocupar a largura total do dispositivo, usando por exemplo a palavra "cover" (mais info sobre tamanhos: www). Ou seja:

Procure por/insira esta área acima de /b:skin:

#header-inner {

Para tablet e celular, personalize assim:

#header-inner { background-size: cover;}

Se não gostar do resultado, pode ainda fazer uma coisa diferente, que é definir o tamanho do cabeçalho através de percentagens e utilizar as margens para o deslocar para onde quiser. Algo deste género:

#header-inner {
margin-top: 0px;
margin-bottom: 0px;
margin-right: 0px;
margin-left: 0px;
background-size: 70%;
}

Lembrando que background-size ajusta através da largura, isto é, a imagem irá ocupar (no exemplo acima) 70% da largura do ecrã, e a altura será ajustada de maneira a preservar a proporção da imagem. Se o objetivo for deixá-la com uma dimensão específica, o ajuste pode ser feito através de pixels e manualmente - por exemplo, se eu quisesse que para telemóvel apenas uma parte do cabeçalho ficasse visível, podia aproveitar e deixá-la alta, como aqui» www. Poderia conseguir isso fazendo, por exemplo (dependendo da parte do cabeçalho que eu queria):

#header-inner {
margin-top: 0px;
margin-bottom: 0px;
margin-right: 0px;
margin-left: -300px;
background-height: 200px;
background-widht: 900px;
}

#Segunda forma
Se tiver um cabeçalho largura total, isto é, inserido de forma semelhante à que está [neste tutorial], provavelmente a intenção é que a largura ajuste de forma a ocupar sempre a largura total do dispositivo. Isso é muito simples de fazer. Basta escrever "background-size: contain;" no body {, ficando algo assim:

body, html {

height: 400px;

margin: 0px;

padding: 0px;

}

body {

font: $(body.font);

color: $(body.text.color);

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1FGEjX1g9oA6WyPDHPvsyyLsk-LSNcnIecGn6XoCOAR3NNCr27904apYqgBSA8GrXu9P-w9K8HlIgnEpGK8N-7Ux-WwXkAmk-PFqvycwd0_oPCnOgZ3ymvPhgjedpCh889gqSrLutXGE/s1600/head5.png) no-repeat ;

background-size: contain;

}

html {

background: url(https://www.transparenttextures.com/patterns/fake-luxury.png) repeat #f7f4e9;

}

E se o cabeçalho tiver vários componentes? Isso implicará que reposicione tudo através dos ids, para cada dimensão de ecrã. Ou seja, dará muito trabalho e eu recomendaria este post: www

5.2 Personalizar o menu

Outra dica que deriva da anterior. Há muitos modelos já feitos que são totalmente responsivos, e eu indico particularmente os destes links (o primeiro é um menu de topo, o outro link contém diversos menus): www | www. Contudo, se quiserem fazer o vosso próprio, essencialmente têm de fazer o que está neste tutorial: www.

Basicamente, isso mostra um menu onde os elementos estão alinhados horizontalmente numa navbar, mas que em ecrãs pequenos ficam ocultos num botão clicável. Dá para adaptar facilmente sem ser em navbars, pois o que interessa é a parte que fica oculta. Aqui está o meu modelo:

5.3 Personalizar as imagens

Ao redimensionar os elementos que contêm as imagens, isso não garante que as imagens por si serão redimensionadas também. Nesse caso, é preciso ir aos ids ou classes que queremos (assinalados respetivamente com a pontuação #algumacoisa e com .algumacoisa) e juntar a expressão a img. Algo assim (créditos a este post: www):

@media only screen and (max-width:768px) {
.headerright a img,.headerleft a img{
max-width: 75%!important;
margin-left: 0;
position: absolute; height:auto;
left: 30px;}
.post a img, .post img{max-width:95%; height:auto;}
#sidebar .widget-content a img , #sidebar .widget-content img { max-width:98%; height:auto;}
#lowerbar-wrapper a img , #lowerbar-wrapper img { max-width:98%; height:auto;}
}

Se essa solução não funcionar, originalmente as imagens já podem ser definidas de forma a ajustar à largura da área em que se inserem. Por exemplo, eu adiciono sempre um efeito à imagem inicial dos meus posts dos blogs principais, uma variação do [swap] - a única coisa que eu tive de alterar foi, no próprio efeito, definir a largura em percentagem. A parte chata em fazer isso é que obriga a adicionar manualmente um efeito a todas as imagens do post, no html do mesmo. A não ser que todas as suas imagens tenham a mesma dimensão e posicionamento originalmente, e nesse caso basta definir a largura em .post img {.

As áreas a serem personalizadas dependem do layout de cada pessoa, mas pelo menos a sidebar e o post têm um código igual em todos os templates e convém que recebam atenção. As suas áreas são #sidebar .widget-content e .post.

5.4 Definir área de posts e sidebar

Embora nenhum tutorial tenha funcionado a 100%, inspirei-me nestes posts: www | www | www
Eu só consegui resolver o problema em blogs que tenham a sidebar à direita - o que de qualquer forma é sempre boa ideia ter, para dar foco ao conteúdo dos posts. O que acontece é que, fazendo como eu, a sidebar será apresentada debaixo das postagens. Eu procurei por </b:template-skin> e acrescentei em cima isto:

@media only screen and (max-width:991px){
.main-inner .column-right-outer {
width: 104%;
margin-right: 0px;
margin-left: -25px;
}
.main-inner .column-left-outer {
width: 104%;
margin-right: -25px;
margin-left: 0px;
}
}

Na totalidade, essa área deve ficar algo assim, mas não posso prometer que funcione porque não sei como é a vossa base - por isso é que recomendo que usem a minha:

<![CDATA[
body {
min-width: $(content.width);
}
.content-outer, .content-fauxcolumn-outer, .region-inner {
min-width: $(content.width);
max-width: $(content.width);
_width: $(content.width);
}
.main-inner .columns {
padding-left: $(main.column.left.width);
padding-right: $(main.column.right.width);
}
.main-inner .fauxcolumn-center-outer {
left: $(main.column.left.width);
right: $(main.column.right.width);
/* IE6 does not respect left and right together */
_width: expression(this.parentNode.offsetWidth -
parseInt("$(main.column.left.width)") -
parseInt("$(main.column.right.width)") + 'px');
}
.main-inner .fauxcolumn-left-outer {
width: $(main.column.left.width);
}
.main-inner .fauxcolumn-right-outer {
width: $(main.column.right.width);
}
.main-inner .column-left-outer {
width: $(main.column.left.width);
right: 100%;
margin-left: -$(main.column.left.width);
}
.main-inner .column-right-outer {
width: $(main.column.right.width);
margin-right: -$(main.column.right.width);
}
@media only screen and (max-width:991px){
.main-inner .column-right-outer {
width: 104%;
margin-right: 0px;
margin-left: -25px;
}
.main-inner .column-left-outer {
width: 104%;
margin-right: -25px;
margin-left: 0px;
}
}
#layout {
min-width: 0;
}
#layout .content-outer {
min-width: 0;
width: 800px;
}
#layout .region-inner {
min-width: 0;
width: auto;
}
]]>

6. Esconder o que não interessa

Funciona segundo a lógica abaixo. Há uma grande probabilidade de ser desnecessário que façam alguma destas mudanças - eu pelo menos não achei que valesse a pena, tudo o que alteramos até agora já deve bastar. Só deixo aqui para o caso de alguém ter interesse em explorar mais:

<b:if cond="data:blog.isMobile"> //ou isMobileRequest=="true">

<b:else/>

</b:if>

7. Coisas a lembrar:

Hovers não funcionam em mobile, mas animações sim, caso interesse.
O motor de pesquisa da google dá preferência a sites responsivos, portanto eu trataria de adaptar pelo menos as primeiras dicas depressa.
Evite esconder certas áreas em mobile com "display: none;". Razão? www
Diferença entre breakpoints e .mobile? Os breakpoints dizem respeito apenas ao tamanho do dispositivo ou zoom, mas se este for reconhecido como mobile, o blogger disponibiliza a segunda versão, que é a que tem de ser ativada.

E era isso. Digam se funcionou convosco, há coisas que não posso garantir a 100% porque todas as bases do blogger são um pouco diferentes.

Personalizar a mensagem de cookies

2017-08-15T10:13:00.001-07:00

Ohayou, minna!

Sim, o blog está quase morto, mas isso não significa que eu não tenha alguns tutoriais úteis para vos trazer. Por exemplo, o próximo post será sobre... tã-dã, como tornar blogs DO BLOGGER responsivos! Será um post super extenso e que virá acompanhado de uma base, para quem não quiser personalizar tudo do zero. Deu muito trabalho a fazer, assim como a base, principalmente considerando que a maioria dos tutoriais - e eu procurei em diversas línguas - não estavam adaptados ao blogger, ou pelo menos não aos modelos base que o nosso nicho costuma usar. Então após muito esforço, posso afirmar que está quase tudo pronto, e que vos será bastante útil.

Por hoje, vou ensinar a modificar a mensagem de cookies que costuma aparecer no topo do blogger. Créditos e mais informação: www

Antes de tudo, porquê modificar e não remover? Porque removendo aumentaria as chances de o nosso blog ser banido. Só há 3 opções possíveis: ter a mensagem padrão que surge quando se remove a navbar, ter a mensagem encurtada que está incluída nas navbars automáticas do blogger, ou ter uma mensagem personalizada. Aqui está o meu modelo, podem modificar o que quiserem desde que creditem.

Tutorial

Procurem por:

/b:skin

Por BAIXO, insiram:

<script type='text/javascript'>
cookieOptions = { /*modifiquem a mensagem como quiserem*/
msg: "Aceite os cookies para isto desaparecer:",
link: "https://www.blogger.com/go/blogspot-cookies",
close: "aceitar",
learn: "info" };
</script>
<style>
.cookie-choices-info { /*caixinha que contém a navbar*/
z-index:999999!important;
background-color:rgba(0,0,0,0.5)!important;
text-shadow: none!important;
line-height: 10px!important;
border-bottom: 3px solid rgba(255,255,255,0.5)!important;
box-shadow: none!important;
padding:1px!important;
}
.cookie-choices-info .cookie-choices-text{ /*frase que antecede os botões*/
font-size:10px!important;
color:#dddddd!important;
line-height: 10px!important;
margin-top: -5px;
margin-bottom: -10px;
}
.cookie-choices-info .cookie-choices-button{ /*botões com as opções*/
background-color: #000000!important;
color:#fff!important;
text-shadow:none!important;
font-size: 9px!important;
border-radius: 2px!important;
box-shadow: 2px 2px 0px (0,0,0,0.5)!important;
padding:1px 4px 1px 4px!important;
text-transform: none!important;
}
</style>

Voilá ^^
Eu sei que este post é bastante deprimente e curto, mas foi só para abrir o apetite para o próximo ;)

Cursor do blog

2016-08-19T04:54:00.002-07:00

E aqui está mais um post. Esta coisa é tão básica que nem sei como é que não ensinei mais cedo - basicamente, ensino a personalizar o cursor/mouse do blog, através de 2 tutoriais diferentes e ambos simples, um que pode ser aplicado em qualquer área, e outro que só pode ser aplicado nos hovers dos links. Também trago diversos modelos, assim poupo-vos o esforço de procurar ou criar os vossos, a não ser que não gostem de nenhum dos que eu trouxe >.< Enfim, aqui vai.

Tutorial 1:

Basta colocar a linha seguinte, substituindo a url pelo link da imagem que quiser, ou, se não quiser usar um icon, pode antes usar um dos cursores padrão [daqui]:

cursor: url(http://media.tumblr.com/tumblr_m2wiy7v2eS1qfamg6.png), progress;

Essa linha pode ser colocada em diversas áreas no HTML do seu blog (após a chaveta/colchete de abertura). Por exemplo:

Modificando o cursor do layout todo: coloque na área .body, html { OU .main-inner{
No "negrito, itálico, sublinhado e tachado": coloque nas áreas b {, i {, u {, strike { (se não achar isso no HTML do seu blog, OU é porque ainda não [personalizou a área] OU porque no seu blog não tem espaçamento entre o b e a colchete.
Efeitos de imagens, comentários ou áreas específicas. Não vou sugerir nada aqui, porque basicamente dá para colocar o dito código em todo o lado.

Tutorial 2: [créditos]

Este tuto funciona de uma única maneira: o cursor fica ativo apenas quando se passa hover nos links, e é simples de aplicar. Basta colocar num gadget HTML/Javascript:

<style type='text/css'>HTML,BODY{cursor: url("URL DA SUA IMAGEM"), url("URL DA SUA IMAGEM"), auto;} A:hover{cursor: url(";URL DA SUA IMAGEM HOVER"), url("URL DA SUA IMAGEM HOVER"), auto;}</style>

Era isto, espero que tenham gostado. Eu não testei o segundo, mas imagino que funcione. Termino deixando vários icons possíveis, não fui eu que criei o molde, mas redimensionei-os para não serem aqueles icons gigantes. Podem mudar as cores, claro.

Menu pendente

2016-08-19T03:12:00.003-07:00

Tal como prometido, segundo post de hoje ^^ Os restantes demorarão um pouco mais a ser postados, ainda os estou a preparar, mas o que importa é que até ao fim do dia o blog receberá várias atualizações. Trago 4 modelos que utilizam uma imagem como fundo, mas sintam-se livres para colocar cor sólida e fazer as alterações que desejarem - o menu pedente é um menu que suporta vários links comprimidos/ocultos numa única barrinha, e que os mostra ao clica nela, apresentando-os na vertical. Enfim, a prévia está aí para mostrar. Não retirei o tutorial de exatamente lugar nenhum, apenas peguei [neste layout free] e usei Ctrl + U para ver a base, e inventei personalizações que ficariam feiosas se aplicadas diretamente no gadget HTML/javascript, como estavam no tutorial original. É por isso que acho razoável ficar com os créditos.

Prévia: www

Tutorial

Abra o HTML do seu blog e use Ctrl+F para procurar por /b:skin. Em cima, acrescente o código do modelo que desejar.

Modelo 1:

.pendente1 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI-zw_apMeJd1iiw9Heyag2g0izX70vG9pCBR9xQXK4NYNf0h_ZtVlEPuAEv6mTzFRGeK63yCVm3GJGcrLFOoy701F43T1w4DagzNte5z3I4SNdMHYCUQ8vBLDaafzKGSRC43XisxihUM/s1600/fundoa3.png) no-repeat;
border-radius: 5px;
border: 5px solid rgba(255,255,255,1.0);
box-shadow: none;
margin-top: 1px;
width: 100px;
height: 26px;
text-align: left;
color: #fff;
text-shadow: none;
font-size: 11px;
font-family: Muli;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.pendente1:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI-zw_apMeJd1iiw9Heyag2g0izX70vG9pCBR9xQXK4NYNf0h_ZtVlEPuAEv6mTzFRGeK63yCVm3GJGcrLFOoy701F43T1w4DagzNte5z3I4SNdMHYCUQ8vBLDaafzKGSRC43XisxihUM/s1600/fundoa3.png) no-repeat;
box-shadow: inset 0px 8px 0px #fff, inset 0px -8px 0px #fff;
color: #bd8ab8;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}

Modelo 2:

.pendente2 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAeI6OSWfKi0AqZvUWimK2DRIJkqEQvY1Fdswyw9-Ghs2XtuPukzl7jUC9OC0m-DmT9n-wrY170fxlD6bH5hA7DkDbVNVchaMI3QTiCcmm9INSl40aWaL3SdXymXo24aOlI1M21evhURk/s1600/fundoa1.png) no-repeat #bc78c2;
border-radius: 5px;
border: 5px solid rgba(255,255,255,0.4);
box-shadow: inset 0px 0px ;
margin-top: 1px;
width: 100px;
height: 26px;
text-align: left;
color: #fff;
text-shadow: none;
font-size: 11px;
font-family: Muli;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.pendente2:hover {
background-position: 0px -16px;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}

Modelo 3:

.pendente3 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_TaWZ3tZaaSyLb-41ly4oDAeWxdF8ePWJasRe2YkZ7_s2ftN6MqQIG99kZHGOt5B88l5vt7CYyu_U0Ykpj7ldn3UElYYQ_NCP5eLvNJSeMUmb1oorS-8fOdWtiiANYYQcSUKI0xt8LMY/s1600/fundoa2.png) no-repeat #ffa159;
border-radius: 5px;
border: 5px solid rgba(255,255,255,1.0);
box-shadow: none;
margin-top: 1px;
width: 100px;
height: 26px;
text-align: left;
color: #fff;
text-shadow: 1px 1px 0px #faa06b, -1px -1px 0px #faa06b;
font-size: 11px;
font-family: Muli;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.pendente3:hover {
background-position: 0px -16px;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}

Modelo 4:

.pendente4 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9yWsbXw8vDdMvD91gkE1I8t3Y2ruyKj-ULyXFx0_dvgrKpkFn9m3JTDQSFOTcoZu3DCvAN90exM1f67ufmLwQDh8quYdmVl_ZMfknDCcN6Kpul_Ld53-LyiqUh_0HnlapU-8jSbNPDhM/s1600/fundoa4.png) no-repeat;
border-radius: 5px;
border: 5px solid rgba(255,255,255,0.4);
box-shadow: none;
margin-top: 1px;
width: 100px;
height: 26px;
text-align: left;
color: #fff;
text-shadow: 1px 1px 0px #faa06b, -1px -1px 0px #faa06b;
font-size: 11px;
font-family: Muli;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.pendente4:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9yWsbXw8vDdMvD91gkE1I8t3Y2ruyKj-ULyXFx0_dvgrKpkFn9m3JTDQSFOTcoZu3DCvAN90exM1f67ufmLwQDh8quYdmVl_ZMfknDCcN6Kpul_Ld53-LyiqUh_0HnlapU-8jSbNPDhM/s1600/fundoa4.png) no-repeat;
box-shadow: inset 0px 8px 0px #fff, inset 0px -8px 0px #fff;
color: #faa06b;
text-shadow: none;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}

Agora, vá a "Esquema" e cria um gadget HTML/Javascript, colando dentro este código:

<div style="margin-top: 0px; margin-right: 0px; margin-left: 0px; margin-bottom: 0px;">
<form><select onchange="window.open(this.options[this.selectedIndex].value)"class="pendente1" name="links">
<option selected/>✎ TÍTULO
<option style="" value="LINK"/>NOME
<option style="" value="LINK"/>NOME
<option style="" value="LINK"/>NOME
<option style="" value="LINK"/>NOME
</select></form></div>

Basta trocar o nome do menu - mais concretamente, o número a negrito - pelo número correspondente ao modelo que escolheu. Se quiser usar ao mesmo tempo vários menus pendentes no mesmo gadget, é só repetir o código e usar as margens na primeira linha de cada conjunto para deslocar o menu para onde quiser.

Voilá.

Lightbox personalizada

2016-08-19T02:56:00.007-07:00

Ohayou, minna-san ^^ O blog não morrerá tão cedo, apesar das minhas ausências constantes, e caso alguém não tenha notado, sempre que eu volto trago mais de um tutorial de uma vez. Então, hoje faremos assim: vou ensinar a personalizar a lightbox, trarei alguns menus e efeitos, vou fazer um post que ensina a editar vídeos no SonyVegas, e se sobrar tempo ainda ensino a dominar perfeitamente os básicos.

Este tutorial é sobre a lightbox - tirei o tuto [daqui], mas eu juntei os vários códigos e coloquei as explicações no próprio, assim podem adicionar tudo de uma vez. Também fiz pequenas alterações no modelo, e podem ver o resultado [aqui] - sintam-se livres para mudar as cores. Quem precisar de botões diferentes, pode criar os seus, ou tirar destes links: www www

Ativando a lightbox

Vá em Configurações > Postagens e Comentários > Na parte de postagens, confira se está selecionado "Sim" na linha "Mostrar imagens com a Lightbox" , caso contrário, coloque sim e salve.

Personalizando o modelo

Vá em Modelo > Editar HTML > Use Ctrl+F para procurar por /b:skin e acrescente em cima:

.CSS_LIGHTBOX_BG_MASK { /*light box fundo*/

opacity: 0.8!important;

background-color: #301f36!important;

}

.CSS_LIGHTBOX_FILMSTRIP { /*light box barra de navegação*/

background: #603470!important;

box-shadow: inset -100px 0px 0px #3c164d, inset -200px 0px 0px #4e255e, inset 100px 0px 0px #3c164d, inset 200px 0px 0px #4e255e;

line-height: 0;

overflow: hidden;

position: relative;

width: 100%;

height: 60px;

}

.CSS_LIGHTBOX_BTN_CLOSE { /*light box botão fechar*/

cursor: url(http://media.tumblr.com/tumblr_m2wiy7v2eS1qfamg6.png), progress;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheQpBoE9Fut6bJX_NP7I27kyg3RqHyRH2eNpCpQWmswTA4In8pzXoWCM0O6iFRNVFu9mZ3uj2EDWVJSSrjML98EOcF1l1IF6urZCvDXcNsZFxvKf_5dtJXwiatbo3zocfEDoAPplYMzy4/s1600/botao1b.png) no-repeat !important;

width: 40px!important;

height: 40px!important;

top: 5px;

right: 5px;

position: absolute;

z-index: 100;

}

.CSS_LIGHTBOX_INDEX_INFO { /*light box texto que indica a imagem em que você está*/

color: #fff!important;

font-size: 12px;

line-height: normal;

min-height: 1em;

position: relative;

text-align: center;

top: 2px;

}

.CSS_LIGHTBOX_INDEX_INFO b {

color: #fff!important; /* cor do negrito, OPCIONAL, se não quiser apenas apague essa linha*/

text-shadow: 1px 1px 1px #4e255e;

}

.CSS_LIGHTBOX_SCALED_IMAGE_IMG { /*light box imagem*/

cursor: url(http://media.tumblr.com/tumblr_m2wiy7v2eS1qfamg6.png), progress;

outline: none!important;

position: relative;

padding: 5px;

border: 1px dashed #fff!important;

}

Era tudo. Simples, rápido e bonito.

Menu de natal

2016-01-25T08:24:00.004-08:00

Sim, eu sei que o natal já passou, e este menu baseia-se essencialmente em dois tutoriais que já postei aqui: o {push} e o {change}. Contudo, houve quem gostasse dele e me pedisse para trazer o modelo, pelo que o faço. Não darei grandes explicações - estão à vontade para mudar as imagens, e não se esqueçam de subtituir os títulos. Cada uma das imagens pode ser encontrada no código dos gadgets, e deve ser editada uma a uma. Tenham cuidado com as margens.

Prévia: www {no 2º gadget da sidebar}

Tutorial:

No HTML do blog, procure por /b:skin e adicione acima o seguinte código: www

Agora, vá a "esquema" e adicione num gadget HTML/Javascript:

<a href="/"><div class="change1"></div></a>

<div style="margin-left: 90px;">

<a href="/"><div class="puxa1"></div></a>

<a href="/"><div class="puxa2"></div></a>

<br/>

<a href="/"><div class="puxa3"></div></a>

</div>

<br />

<div style="margin-top: -15px;">

<a href="/"><div class="puxa4"></div></a>

<a href="/"><div class="puxa5"></div></a>

<br/>

<a href="/"><div class="puxa6"></div></a>

<div style="margin-left: 138px; margin-top: -93px;">

<a href="/"><div class="change2"></div></a>

</div></div>

Voilá. Gómen por este último post meio seco ;)

Menu "locão"

2016-01-25T08:07:00.003-08:00

Agora trago um menu com 2 modelos diferentes, e não me refiro à alteração de cores - refiro-me de facto à forma. O código original é um dos modelos, e se não me engano, é do {gnmh} - contudo, como não voltei a encontrá-lo, posto aqui de qualquer modo. Já a segunda versão foi criada quase que acidentalmente por mim, quando queria deixar a organização mais à minha maneira, e comecei a trocar "left: ---" por "margin-left: ---". A forma como o menu era revelado tornou-se distinta, e o meu menu "saltou" para a esquerda, mas a base é extremamente semelhante, como poderão ver na prévia. Além disso, é um excelente menu para economizar espaço, e ainda comporta imagem, portanto espero que gostem.

Abra o HTML do blog, e procure por /b:skin. Adicione acima um dos seguintes códigos

Modelo original: {código} {prévia}
Modelo alterado por mim: {código} {prévia}

Vá a "esquema". Cole num gadget HTML/Javascript o código que estiver de acordo com o modelo escolhido:

Modelo original: {www}
Modelo alterado por mim: {www}

Modelo para mensagens antigas, home e recentes

2016-01-25T07:26:00.005-08:00

Para segundo tutorial de hoje, trago algo totalmente exclusivo e que me deu um orgulho imenso de inventar: Um modelo totalmente mirabolante (~~mas alinhadinho, don't worry~~) para a navegação do blog. O tutorial será dividido em 3 passos simples, nos quais disponibilizo o próprio modelo que criei - caso queiram usar como base - e remeto para links de outros tutoriais. Sim, porque aqui eu misturei dois tipos de tutoriais para personalizar a navegação, e milagrosamente deu certo. A PRÉVIA está {aqui}, no canto inferior esquerdo.

1º passo: criar as imagens

Meus modelos: home | antigas | recentes

2º passo: substituir o texto pelas imagens criadas, seguindo {este} tutorial

Meu modelo: www

3º passo: ter cuidado com as margens e com as dimensões, a partir {deste} tutorial

Meu modelo: www

Sem nada a acrescentar, só têm de fazer substituições

Dropdown raro

2016-01-25T07:15:00.000-08:00

Há quanto tempo não postava aqui, não era? Bem, creio que irá compensar, pois embora não vá conseguir deixar muitos tutoriais prontos hoje, já comecei a adiantar várias deles, a sua maioria relativa a menus e afins. Anyway, o que trago hoje é um menu dropdown - daqueles em que cada aba contém vários sublinks - extremamente peculiar e distinto. Fica colocado no topo do blog, como se fosse parte da navbar, e tem imensos hovers, para além de que as sub-abas surgem com um desalinhamento propositado. Já vão ver na prévia. Eu achei a base do tutorial [aqui: www] mas tive de modificar muita coisa e descobrir por conta própria onde colocar os códigos, então agradeceria que me creditassem. E de qualquer forma, achei este menu magnífico para quem tem muitas páginas para organizar mas gosta de economizar espaço.

Prévia: www
Tutorial:

Procure por </head> e cole abaixo:

<style> /* Menu Dropdown */
.cf:before,.cf:after {content: " ";display: table;}
.cf:after {clear: both;}
.cf {*zoom: 1;}
.menu,.submenu {margin: 0px;padding: 0px;list-style: none;}
.menu { /*tudo o que diz "menu" refere-se à parte da navbar que está sempre visível*/
margin-left: 150px;
width: 800px;
}
.menu > li {
width: 200px;
height: 21px;
margin-top: -5px;
background: #5b6a7a;
float: left;
position: relative;
transform: skewX(25deg);
text-align: center;
}
.menu a { /*fonte do menu visível*/
display: block;
color: #fff;
text-shadow: 1px 1px 1px#3c4b59!important;
text-decoration: none;
font-family: Delius Swash Caps;
font-size: 14px;
margin-bottom: -2px;
}
.menu a:hover {
text-shadow: 1px 1px 1px #fff!important;
color: #a68374;
}
.menu li:hover {background: #855d4e;}
.menu > li > a {transform: skewX(-25deg);padding: 5px 15px 5px 30px;}
.submenu { /*O que diz "submenu" refere-se à parte pendente, que só é mostrada em hover*/
position: absolute;
width: 100px;
transform: skewX(-25deg);
transform-origin: left top;
}
.submenu li {
background-color: #566575;
position: relative;
overflow: hidden;
}
.submenu > li > a {padding: 4px 4px 4px 60px;}
.submenu > li::after {
content: '';
position: absolute;
top: -125%;
height: 100%;
width: 100%;
box-shadow: 0 0 30px #2e3d4d;
}
.submenu a {text-shadow: 1px 1px 1px #3c4b59!important;}
.submenu a:hover {text-shadow: 1px 1px 1px #fff!important; color: #a68374;}
.submenu > li:nth-child(odd){transform: skewX(-25deg) translateX(0);}
.submenu > li:nth-child(odd) > a {transform: skewX(25deg);}
.submenu > li:nth-child(odd)::after {right: -50%;transform: skewX(-25deg) rotate(3deg);}
.submenu > li:nth-child(even){transform: skewX(25deg) translateX(0);}
.submenu > li:nth-child(even) > a {transform: skewX(-25deg);}
.submenu > li:nth-child(even)::after {left: -50%;transform: skewX(25deg) rotate(3deg);}
.submenu,.submenu li {opacity: 0;visibility: hidden;}
.submenu li {transition: .2s ease transform;}
.menu > li:hover .submenu,.menu > li:hover .submenu li {opacity: 1;visibility: visible;}
.menu > li:hover .submenu li:nth-child(even){transform: skewX(25deg) translateX(15px);}
.menu > li:hover .submenu li:nth-child(odd){transform: skewX(-25deg) translateX(-15px);}
.bar_top { / * Fundo da barrinha do menu, navbar* /
width: 100%;
height: 28px;
background: #566575;
border-bottom: 4px solid #fff;
}
.bar_topd {
width: 900px;
margin: 0px auto;
}
</style>

Agora vá a "Esquema", e adicione num gadget Html/Javascript o seguinte código:

<div style="width: 1365px; margin-right: -700px; margin-left: -95px; margin-top: -95px; position: fixed;">
<div class='bar_top'>
<div class='bar_topd'>
<ul class="menu cf">
<li>
<a title="TOOLTIP">NOME-PRINCIPAL</a>
<ul class="submenu">
<li><a href="/" title="TOOLTIP">NOME</a></li>
<li><a href="/" title="TOOLTIP">NOME</a></li>
<li><a href="/" title="TOOLTIP">NOME</a></li>
<li><a href="/" title="TOOLTIP">NOME</a></li>
</ul>
</li>
<li>
<a title="TOOLTIP">NOME-PRINCIPAL</a>
<ul class="submenu">
<li><a href="/" title="TOOLTIP">NOME</a></li>
<li><a href="/" title="TOOLTIP">NOME</a></li>
<li><a href="/" title="TOOLTIP">NOME</a></li>
<li><a href="/" title="TOOLTIP">NOME</a></li>
</ul>
</li>
<li>
<a title="TOOLTIP">NOME-PRINCIPAL</a>
<ul class="submenu">
<li><a href="/" title="TOOLTIP">NOME</a></li>
<li><a href="/" title="TOOLTIP">NOME</a></li>
<li><a href="/" title="TOOLTIP">NOME</a></li>
<li><a href="/" title="TOOLTIP">NOME</a></li>
</ul>
</li>
<li>
<a title="TOOLTIP">NOME-PRINCIPAL</a>
<ul class="submenu">
<li><a href="/" title="TOOLTIP">NOME</a></li>
<li><a href="/" title="TOOLTIP">NOME</a></li>
<li><a href="/" title="TOOLTIP">NOME</a></li>
<li><a href="/" title="TOOLTIP">NOME</a></li>
</ul>
</li>
</ul>
</div></div>
</div>

Pequena explicação:

Mude os links assinalados pela barrinha "/" e as maiúsculas
Se não tiver tantas subclasses do menu, apague cada linha de <li> até </li>. Cuidado para não apagar mais nada.

Disse e repito, façam as modificações que quiserem quanto às cores e margens. Oh, podem ainda optar por mudar de fonte, mas caso queiram usar a que já aí está, caso não a tenham adicionada ao vosso HTML, procurem por <head> e abaixo colem:

<link href='http://fonts.googleapis.com/css?family=Delius+Swash+Caps' rel='stylesheet' type='text/css'/>

Jaa!

Fazendo o blog crescer

2015-12-27T07:40:00.001-08:00

Feliz Natal atrasado! O FS está repleto de postagens natalícias, se quiserem dar uma olhada.

Anyway, este é dos posts mais trabalhosos que já fiz, tanto por ser extenso e exigir bastantes explicações, como por ter necessitado de imensa pesquisa. Trago imensas dicas, ferramentas e sites/páginas para ajudar os blogs a crescer - não de um dia para o outro, claro, mas mesmo assim é uma ajuda - e para dar um ar um pouco mais profissional e consciente ao que fazemos. O artigo está dividido em 6 partes e é cada uma maior que a outra, portanto ficaria feliz se adicionassem isto aos vossos favoritos e fossem consultando constantemente, pois fi-lo para ser algo prático e útil. Já sabem onde clicar.

Ter um bom blog

Eu já dei algumas dicas para tratar do assunto em vários posts, mas aproveito para relembrar os mais importantes:

Relativamente ao design» Dicas para ter um bom layout | Começar a criar um layout | Ter bons recursos/ferramentas/geradores | Dicas para aprender HTML mais depressa |
Relativamente ao conteúdo» Como fazer postagens com conteúdo | Inspiração para postagens |

Páginas para divulgação

Eu já dei, creio, que ótimas dicas para divulgar o blog {aqui}. Esse post indica erros a evitar, a maneira "certa" de se aproximar e divulgar o blog, alguns lugares mais básicos onde ir comentar e outras pequenas dicas nem tão relacionadas ao assunto, que aprofundarei neste post. Então, após saber dessas regrinhas, vim trazer mais páginas onde a divulgação pode ser feita - não esquecendo que estas páginas também são ótimas para conhecer blogs novos.

Mas, primeiro!, tenho algumas coisas a sugerir: é importante saber que cada rede social tem um horário de maior atividade, e que é por essa altura que a divulgação deve ser feita - os horários podem ser conferidos aqui: www. Além disso, quem quer ter sucesso na divulgação deve acompanhar a popularidade das redes sociais e os avanços tecnológicos, pelo menos, ter uma conta e saber postar em todas estas redes: Facebook, Google+, LinkdIn, Twitter, Tumblr, Pinterest e YouTube.

Páginas do facebook PORTUGUESAS» bloggers portugueses | bloggers portugueses 2 | blogger PT | blogs de Portugal | bloggers de Portugal |
Páginas do facebook BRASILEIRAS» chá com blogueiros | blogueiros elite | blog up | blogs que interagem | divulga teu blog | eu amo meu blog | kaorii.com | liga blogosfera | bgs | blogueiras que se ajudam de verdade | blogueiros e blogueiras por amor | ORGblogando | blogueiros da baixada santista | irmandade das blogueiras | inspiration | união das blogueiras geeks |
Grupos do G+ » www | www | www | www | www | www |
Sites próprios/blogagem coletiva» rotaroots (facebook) | liga blogosfera | blogotomia | blogs up | bloglove |
Só aglomerando» blogs portugal | blogueiras otomes | blogging |

Parecerias (e afiliados)

Bah, não é que alguma vez eu tenha fechado parceria com empresas - porque aqui em Portugal elas não parecem interessadas e blogs não são grandemente valorizados, e nesse caso mesmo que eu pudesse não aceitaria colocar publicidade no meu blog em troca de alguma fama. Já com afiliados dou-me bem melhor, pois isso consiste apenas em fechar amizade com algum blog, que nos reserva um espacinho no gadget de afiliados e com o tempo talvez acabe falando de nós - é algo muito mais profundo. But anyway, aqui estão algumas dicas úteis na hora de fechar parcerias:

Saber o tipo de parceria que está a fazer» E como há muitos, eu recomendo {este post} mega completo a explicar os comprometimentos envolvidos.
Formalismo» nada de fazer pedidos por redes sociais ou chatbox, o ideal é enviar um email (embora eu não entenda o porquê da ofensa, considera-se que se o contacto não for estabelecido por email, se está a demonstrar falta de profissionalismo). A escrita deve ser sem erros nem abreviaturas, clara e directa, nem demasiado extensa nem demasiado curta. E tudo deve ficar assente, incluindo uma boa apresentação.
Enviar um midia kit» Já vou explicar em quê que isso consiste, é uma forma de fornecer dados à empresa. Se não tiver um mídia kit, responda às perguntas que listarei adiante em forma de texto. Relativamente aos dados, seja sincera quanto a eles e mantenha-os atualizados.
Qualidade e afinidade com a empresa» ou seja, não basta ter um blog com conteúdo e design de qualidade, tem de se relacionar com a empresa de algum modo. Se não, porquê que ela escolheria o seu blog em vez de outro? Não se esqueça de, no email, responder a essa mesma questão e tentar convencer a empresa a escolhê-la.
Aceitação» se a proposta for rejeitada, não fique implorando. É importante saber aceitar que o seu blog não era o que a empresa tinha em mente. Tente outras.

O que NÃO fazer: contactar com a empresa pelo facebook» "Oi, podia enviar um produto para eu resenhar no meu blog?"

Um mídia kit

Um mídia kit é um conjunto de informações sobre o blog que é útil na hora de o divulgar e apresentar a empresas, etc... Praticamente um currículo. Pode ser enviado em vários formatos (como pdf/ppt, slide, ou página do blog), deve ser sincero, claro e atual, ter um design condizente com os layouts do blog e responder a uma série de perguntas, sempre dizendo de onde é que os dados foram retirados. Muitas vezes, para não ficar sobrecarregado de texto, cria-se um infográfico para expor as informações - eis um modelo base em psd: www. Que informações são essas:

Identificação do blog» Ou seja, o logo/cabeçalho correspondente ao layout do momento, uma descrição ao estilo elevator pitch (www) e o seu nome.
Identificação da dona» Seu nome, idade e contacto. Possivelmente um link para a página do about me.
Estatísticas mensais ou totais do blog» a plataforma blogger conta com as suas próprias visualizações, então deve ser desconsiderada. O melhor site para providenciar essas informações é o {google analytics}, e aqui um guia sobre como trabalhar com ele: www. Há ainda o {clicky}, o {market samurai} e o {quantcast}. Quase todos os dados indicados aí são bons e devem comparecer no kit.
Dados de fragmentação» indique como anda a interação entre o público e o seu blog (como o número de comentários que costuma receber) e qual a faixa etária, género e informações demográficas (região, etc...) desse público. É importante que haja uma certa coincidência entre o público-alvo do blog e da empresa. Dica: compile alguns elogios que os leitores fazem do seu blog. E veja {aqui} como complementar a pesquisa de público.
Um texto sobre o blog» Porquê que criou o blog, assuntos, estilo de escrita e história (data de criação e desenvolvimento) dele são algumas das coisas a ser indicadas. Não tem de ser realmente em texto pode ser algo mais topicalizado.
Estatísticas das redes sociais» caso as tenha, e convém ter, pois algumas empresas só gostam de divulgar nelas devido ao sucesso que têm. As estatísticas mais importantes são relativas ao número de seguidores, mas não só. Não testei, mas aqui uma lista de ferramentas que ajudam controlar a atividade em redes sociais: www
Clipping» Caso já tenha sido divulgada algures, incluindo numa revista ou na imprensa, esse é o local certo para colocar. São basicamente dados de mercado. É válido mencionar quem já anunciou no seu blog, ajuda a dar credibilidade.
Que tipo de publicidade aceita no blog» isto não é algo tão numérico, mas mais uma questão de conversar com a empresa para escolher o tipo de publicidade. Alguns exemplos: publipost, banner (durante x meses), publivídeo, publieditorial, resenha, mídias patrocionadas, sorteios, concursos... Achei uma boa explicação sobre cada algures {neste post}.
Motivos que levam a empresa a escolher o seu blog» dá para compreender a questão da concorrência, certo? Bem, faça um discurso bonito e certeiro para convencer a empresa a escolher o seu blog e não qualquer outro, pois o seu É MELHOR para divulgar a marca.

Seja ativa

Crie um cartão de visita» algo a oferecer sempre que alguém se mostra interessado no blog, e que dá para levar para todo o lado. Contém o nome e endereço do blog, uma frase chave, nome da autora e redes sociais.
Uma boa planificação» Convenhamos que {esta lista} de blogger planners pode ser útil a quem gosta de se organizar, e especialmente a quem ama artigos de papelaria. Há quem poste de forma bem espontânea, na verdade, mas qualquer coisa acerca do blog que exija ser lembrada e organizada fica bem em formato papel. Poste com uma boa frequência, mas não todos os dias.
Tenha um horário para responder» não deixe as pessoas a falar para o boneco. Especialmente em blogs grandes, é necessário ter um horário para responder a emails, aks, comentários e afins... A propósito dos emails, aqui está um pouco sobre criar uma caixa de emails poderosa: www
Participe em joguinhos/games, sorteios, concursos» Hoje em dia talvez nem se faça tanto, mesmo assim preste atenção a qualquer tipo de atividade em que possa comparecer. Ajuda na divulgação e geralmente ainda dá direito a prémios adoráveis.
Participe em awards, contests, avaliações e prédios de blogs» Tenho aqui uma lista deles, que vou atualizando conforme surgirem, mas não removo os que forem desativados pois funciona também como um memorial: www
Tente um agregador» embora a taxa de rejeição do seu blog também aumente e haja uma lista de consequências indicadas {aqui}, a verdade é que aumentam as visualizações de um modo ou outro, e são grátis. Uma estratégia desesperada mas válida, e estou a indicar porque, embora nunca tenha usado, não acho justo pessoas que usaram mas depois pararam dizer aos outros para não usar também, já que parte do crescimento dos blogs delas se deveu a isso, quer seja um método correto quer não. Aqui uma pequena lista: www
Redes sociais» Use-as para divulgar o blog e interagir mais facilmente. Já dei dicas em cima.
Interessado em dinheiro?» Há aqui uma série de dicas sobre ganhar lucro com o crescimento do blog, voltados para a promoção do blog» www. Não se esqueça de ir anotando ganho e despesa num blogger planner ou coisa do género.
Tenha {feed}, {bloglovin} e {disqus}» Há muitas blogueiras, especialmente as que aderem ao wordpress, que acompanham as novidades dos seus blogs favoritos através desses dois sites, então é bom se querem mais visualizações.
Use {SumoMe}» Eu nem sou a maior adepta, mas é um bom site para estar a par das estatísticas e atrair visualizações, como explicado {aqui}. É grátis e fica escondido no cantinho do próprio blog, para usarmos sempre que quisermos.
Sabe o que é SEO?» Basicamente, é uma forma de colocar os seus posts as buscas do google por bom uso de palavras-chave, incluindo na nomeação de imagens. Mais dicas aqui: www
Responda a tags» Tags, memes, selinhos, whatever... são tudo nomes para uma série de perguntinhas que são repassadas entre blogs. As minhas aqui: www
Trave amizade» especialmente com pessoas que tenham os mesmos gostos que você, e com outras também. Laços sinceros são uma das coisas mais belas da blogosfera e se as outras pessoas sentirem apreço pelo seu blog, de certeza que divulgarão por espontânea vontade ;)

Um domínio

Um domínio é, basicamente, uma forma de remover a terminação "blogspot.pt" da url dos nossos blogs. Deve ser comprado, mas também pode ser ganho em concursos ou sorteios, e deve ser hospedado em sites próprios como encontram no final {deste post}. Há ainda sites onde é possível obter {domínio grátis}, mas depois não reclame da propaganda.

Porquê ter um domínio? Fica mais bonito esteticamente, dá um ar profissional, encurta a url, e facilita a aparição do blog em motores de busca. Só não se esqueça de, após trocar, modificar todos os posts antigos em que recomendou algo do seu blog para que o link não fique cortado.

Era tudo por hoje, façam bom uso ;)

Tooltip com efeito hover

2015-12-11T12:56:00.002-08:00

Segundo e último tutorial de hoje, ok?

Achei este tutorial num blog que credito pouco à frente, e embora tenha adaptado grande parte das explicações, a Melodie merece reconhecimento porque eu NEM SABIA que era possível a tooltip ter hover, ninguém usa, embora faça todo o sentido. Eu tenho usado muito nos meus layout ultimamente, acho que fica engraçado, e decidi dar uma ajudinha a divulgar este efeito giríssimo. Sem mais delongas...

Como colocar a tooltip normal

Procure por </body> e cole em cima:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js'/>

<script src='http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js' type='text/javascript'/>

<script>(function($){$(document).ready(function(){$("[title]").style_my_tooltips(); });})(jQuery);</script>

Agora, procure por /b:skin e cole em cima o seguinte código:

#s-m-t-tooltip {

background: #444;

color: #eee;

font-family: calibri;

font-size: 9px;

letter-spacing: 1px;

border: 0px solid #fff;

border-radius: 0px;

text-transform: uppercase;

line-height: 11px;

text-align: center;

display: block;

padding: 10px 15px 10px 15px;

margin: 20px 10px 0px 10px;

z-index: 999;

}

» Nota: É habitual a primeira linha ter, em vez do que está escrito, isto: div#qTip { «

Disponibilizarei modelos em breve, por enquanto contentem-se em usar os que já há noutros blogs.

Efeitos hover [esta parte foi inteiramente tirada daqui: www]

O interessante aqui é que você pode criar o seu próprio efeito, desta forma seu tooltip ficará ainda mais original. Mas, se você não está com paciência para pensar em algo funcional, deixo cinco exemplo bem bonitinhos que a Melodie criou:

Efeito "Zoom continuo": Prévia.
Efeito "Repercussão": Prévia.
Efeito "Giro vertical": Prévia.
Efeito "Giro horizontal duplo": Prévia.
Efeito "Vai e volta": Prévia.

[Eu novamente a falar]

Os códigos, na própria prévia devem ser colocados acima de /b:skin .
Explicando: o que realmente interessa para adicionar o efeito hover, é adicionar -webkit-animation: ToolRebote 1.5s; na parte da personalização da tooltip, e depois a área correspondente a @-webkit-keyframes ToolRebote {

Aqui estão quatro linhas que acho que devem colocar na personalização da tooltip, antes de fechar a chaveta (as duas últimas são extremamente importantes. Embora nos modelos disponibilizados pela Melodie tenham "display: block; ", é importante que fique "display: none;"):

margin: 2px;
padding: 4px 8px 5px 10px;
display: none;
position: absolute;

Espero que tenham gostado ^^

Menu fixo retrátil (menu escondido)

2015-12-11T12:34:00.001-08:00

Eu realmente poderia ter passado muito tempo sem postar, simplesmente deixando acumular tutoriais, mas não é que milagrosamente estou a conseguir não o fazer?

O que trago hoje são dois modelos para um menu fixo retrátil, acompanhado de menus e um efeito engraçadinho para não deixar isto tão oco. O primeiro modelo é uma adaptação nem tão modificada (a não ser pelos extras) do "menu escondido", que podia ser achado aqui e sei lá porquê que agora a página está a dar erro [créditos]: www. Portanto, o primeiro modelo tem espaço para texto, coisa que o segundo, no topo do blog, não tem, mas o segundo é feito por mim e integra o menu colchete e o fundo é editado como imagem, então usem a imaginação ;)

Tutorial:

Na lateral do blog {preview}
Procure por /b:skin e cole em cima o seguinte código: www

Cole num gadget HTML/Javascript, de preferência acima da área de post: www

No topo do blog {preview}
Procure por /b:skin e cole em cima o seguinte código: www

Cole num gadget HTML/Javascript, de preferência acima da área de post: www

Notas

1} É necessário adicionar a fonte "Muli" ao seu blog, ou então modifique como entender. No seu blog, procure por <head> e cole em baixo:

<link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'/>

2} Caso esteja a usar algum lay free, é possível que seja complicado adicionar gadgets. Há sempre uma outra opção. Cumpra a primeira linha do modelo do tutorial que escolheu normalmente. Depois, procure por </head> e cole em baixo o código da segunda linha respetivo ao modelo escolhido. Voilá.

3} Se pegar um dos modelos daqui, mesmo que modifique (~~à vontade para isso~~), credite pelo menos a base. Nem que seja pela parte do gadget, já que em "lateral do blog - parte html" mal há diferenças entre o blog do qual peguei.

Espero que tenham gostado. Qual dos modelos preferiram?

Geradores e sites úteis para blogueiras

2015-12-09T10:33:00.000-08:00

Ora, vamos lá começar: alguém sabe o que são geradores?

Também conhecidos por generators, são sites que ajudam quem trabalha com html por providenciarem combinações de cores, bordas, margens, e coisas do género. São basicamente uma ferramenta útil para quem não percebe muito de html ainda, ou tem preguiça de estar a pensar, mas não quer depender demasiado dos modelos disponibilizados por outras blogueiras, preferindo criar algo só seu. Pessoalmente, eu dou explicações sobre os "básicos" - porque sim, geradores ajudam a dar conta só disso - no blog, como podem ver pelo {mapa} usando Ctrl + F para procurar pela área "básicos". O que trago é uma lista de geradores ordenados por função que eu mesma testei e que acredito que poderão gostar. Aliás, não só trago geradores como uma lista infinita de sites úteis, fazendo os devidos comentários. E eu aposto que vocês vão adorar esta lista gigante ;)

Tabelas de cores» {em Java e HTML} {Java e HTML 2} {Só em HTML} {Hexadecimal e RGB + explicação}

Desses, o meu favorito é o último, sendo que explica bem a diferença entre os códigos por nome, hexadecimal (ou HTML) e em RGB (ou Java).

Tabelas de símbolos» {alguns dos mais úteis} {bem organizado} {com 4000 caracteres, mas inútil}

A melhor das tabelas é a segunda, por estar bastante completa e com uma organização impecável - aliás, é o mesmo site da minha tabela de cores favorita. O único defeito é os símbolos estarem grandes demais, mas mesmo assim, nada que não possamos modificar.

Sites de Resources» {Subtle patterns} {Transparent textures} {Lost & Taken} {Color trends} {Freepik} {Flaticon} {DesignOn} {Creative Bloq} {Concentrics} {Tukut} {Repper Patterns} {Freepik}

Padrões, brushes, texturas, icons... Todos esses sites têm uma especificidade. Devo ainda dizer que, embora não tenha colocado o Deviantart nesta lista, ele é uma fonte inesgotável de utilitários. O transparent textures é incrível por disponibilizar montes de texturas das quais podemos mudar a cor. O designOn não se destina tanto a disponibilizar coisas, mas mais a inspirar, o Concentrics permite criar o próprio fundo com circulos concêntricos, e o Repper permite criar padrões com mosaicos a partir de uma imagem. Sem dúvida o meu site favorito é o Creative Bloq - deixei o link para um post em específico, mas naveguem por todo ele: tem indicações e partilha de material, postagens com ideias e novidades sobre o mundo do webdesign...

Sites para criar Infográficos» {Piktochart} {Visually} {FluxVFX} {Visualize} {Infogr.am} {Creatly} {Gimp} {Photoshop (download grátis)}

Eu poderia falar sobre qual é o meu favorito, mas peguei todas as recomendações da lista seguinte, já bem explicada por si só: www. Anyway, eu testei o primeiro e adorei-o, realmente recomendo para quem gosta de deixar a informação com um formato leve, é útil mesmo para trabalhos escolares.

Sites de imagens» {Listas}

Uma vez que decidi dividir isso em 3 categorias, criei uma lista paralela num blog que utilizo destinado apenas a organizar coisas. A maioria desses sites tem mesmo muita qualidade, principalmente os das suas primeiras categorias, para não falar da organização fenomenal com todas as imagens bem classificadas. Destaco o primeiro site de fotografias pois, para além de dar fotos todas das mesmas dimensões, dá a palete de cores correspondente. Os sites de animes também são muito bons.

Geradores de paletes» {Paletton}{Design seeds}{Color Palette Ideas}{Disco}{Color Palette generator} {Color Trends} {Coird}

Eu adoro o primeiro, porque permite num único botão modificar toda a palete que já fizemos - por exemplo, tirando igualmente a saturação a todos os elementos escolhidos - e mantendo sempre a maneira como combina. Também dá imediatamente o código html para as cores e é muito simples de usar, além de permitir visualizar layouts modelo nas tonalidades escolhidas. Assim como muitas outras coisas (adicionar cores complementares, fazer conjuntos e subconjuntos entre mais de uma cor...), vão explorando. PORÉM, o segundo será sempre o meu amorzinho por permitir escolher paletes retiradas de imagens, sendo que você pode procurar por cor dominante, por tema da imagem ou outros critérios. O terceiro site também é bem prático. Já os outros dois sites são úteis por estabelecerem paletes a partir de uma imagem.

Geradores de códigos» {Tudo} {CSS border radius} {Mapeadores de imagens} {Tooltip com seta}

O primeiro é assustadoramente grande, assustadoramente completo, e assustadoramente útil para quem não percebe mesmo nada de HTML ou até mesmo para quem percebe. Até bases de layout permite fazer, com "molduras" e tudo! O segundo é só um gerador de bordas que muita gente recomenda.

Editores de imagens» {Pixlr editor} {Pixlr omatic} {Waifu2x} {PhotoCat} {PicMonkey} {XiuXiu} {Fotor} {Pablo} {Canva} {Skitch} {Gimp} {Photoshop (como baixar)} {Canva }

Eu uso o pixlr para fazer muitos dos meus layouts, em vez do Photoshop, e garanto que funciona. Quanto ao Waifu2x, ele só permite fazer uma coisa: tirar a pixelização feiosa das imagens, e eventualmente ampliá-las - não faz milagres, mas quase, e já me foi assustadoramente útil. Os restantes são mais editores de fotografias free e com efeitos bonitinhos, embora todos eles tenham as suas limitações. E SHOUT OUT PARA O CANVA, porque essa pérola permite editar tudo e mais alguma coisa a partir de modelos previamente já incríveis - sim, dá grande liberdade criativa e podemos hospedar as nossas imagens, mas quão bom é poder aproveitar bases para power points, capas para facebook, currículos ou muitas outras coisas já com as dimensões certas e modelos tão lindos e profissionais que quase dão medo de alterar?

Domínio e hospedagem» {hostgator} {prelude hosting} {brasilserv} {e-consulter} {nuvem} {domainr} {criar shortlink} {mediatemple}
Bem que eu achei o design do primeiro link horroso, mas o site é recomendado. Já o segundo é amável, até porque tem em "Blogs" postagens com recomendações raras e muito boas. E ouvi dizer que o MediaTemple é bastante fiável também. Os dois últimos links são ferramentas úteis para descobrir qual o domínio ideal e como criar shortlinks.

Fontes» {Googlefonts} {Popular fonts} {Adobe wedge} {Dafont} {Free fonts} {Handpicked} {Families} {FontStruct} {UrbanFonts}
O primeiro link não leva diretamente ao google fonts, mas sim ao guia que fiz de como aplicar as fontes diretamente no html. Quanto ao resto, não testei nenhum site, mas que as letras são realmente elaboradas e fofas, lá isso são.

Ferramentas» {recomendações do Sernaiotto - vá à parte das ferramentas, e não só} {este post} {Buscar conteúdo duplicado} {Ver links cortados} {Melhores horários por postar} {Verificar PageSpeed} {Verificar PageSpeed 2} {Link Counter por página} {Configurar aparição no google (para wordpress)} {Saber a fonte dos acessos} {Saber o tamanho de letra ideal para o blog} {WeTransfer - transferir ficheiros grandes por link} {Piq - Criar qualquer desenho em pixel art} {Piskel - Criar gifs em pixel art}
Não há nada a dizer, faça bom uso disto pois é bem necessário.

Páginas do blog com layouts diferentes entre si

2015-12-08T11:45:00.000-08:00

Este é provavelmente o último tutorial de hoje, e já postei uns quantos.

Usei recentemente um tuto que permitia dar às várias páginas do blog um layout diferenciado. Tive de procurar imenso para conseguir achá-lo, pois a maioria que encontrava explicava apenas o que eram as páginas e como funcionavam, e ainda tentei organizar e acrescentar as minhas próprias coisas - ou seja, permiti que essa diferença se desse ao nível do fundo, da área de postagem, e ainda ocultar a sidebar. Claro, isso significa ter trabalho duplo a editar o layout, mas pessoalmente eu até achei prático e simples. A segunda parte do post, mais explicativa, retirei de um site, então está creditada lá.

Prévia: www

» se repararem, ao clicar numa das páginas (como a 1ª), o layout muda em relação ao da home

Tutorial

Abra o html do seu blog. Use Ctrl + F e procure por

<b:if

Acima, cole (isto é para o layout das páginas, não se esqueça do resto do layout!):

<b:if cond='data:blog.pageType == "static_page"'>

<style>

html { /*fundo do blog*/

background: #cf8980;

}

#main { /*fundo da área de postagem*/

width:1320px;

margin: -60px 0px 20px -615px;

background: #a8b9bd;

border: 5px solid #a8b9bd;

margin-bottom: -100px;

}

#sidebar { /*sidebar. Ela foi removida, mas pode optar apenas por personalizá-la*/

display:none;

}

</style>

E se você quiser uma diferença mesmo entre as próprias páginas?

É muito simples, basta trocar a primeira linha do código acima pela linha correspondente [créditos por esta parte: www]:

<b:if cond='data:blog.pageType == "static_page"'>

↑Foi o que usei. O que colocar aqui vai afectar somente, e todas, as páginas estáticas.

<b:if cond='data:blog.pageType == "archive"'>

↑O que colocar aqui só afecta as páginas que mostram arquivos.

<b:if cond='data:blog.pageType == "index"'>

↑O que colocar aqui afecta todos os demais tipos de páginas.

<b:if cond='data:blog.pageType != "item"'>

↑O que colocar aqui afecta todos os tipos de página, menos as das postagens.

<b:if cond='data:blog.url == data:blog.homepageUrl'>

↑O que se colocar aqui só vai afetar a página inicial.

<b:if cond='data:blog.pageName == "Contacto"'>

↑O que colocar aqui vai afectar somente a página com o título exatamente como está escrito no código, ou seja ao decidir utilizar esta condicional deve escrever onde está a negrito como está no titulo da página.

<b:if cond='data:blog.url == "http://revistinhadigital.blogspot.com.br/p/equipe.html"'>

↑Funciona como na condicional acima, mas utilizando o endereço da página em vez do título.

Pode parecer um tutorial extenso, mas na realidade é simplíssimo.

Texto em degradê

2015-12-08T11:29:00.000-08:00

Sinceramente? Eu não achei o tutorial para este efeito, adicionado em textos, em lado nenhum.

Mas achei um blog, o Black Words, que andava a usá-lo e ainda usa no título das postagens, e eu decidi tomar a liberdade de o codificar, creditanto claro a autora pelo tuto que permite colocar degradê no texto. Simplesmente usei Ctrl + U no blog dela e procurei pela área respetiva. Já vão ver a prévia, e eu vou ensinar a colocar o efeito noutras áreas para além do título da postagem, de uma forma rápida e simples.

Prévia:

Exemplo

h3.post-title {

border-bottom:1px solid #ccc;

text-align:left;

padding-left:20px;

color: #4f4f4f;

letter-spacing:2px;

font-family: 'Lato', sans-serif;

font-size:20px;

text-transform:uppercase;

background: -webkit-linear-gradient( left, #248F8D, #8d3855, #5C4F79);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

}

h3.post-title a {

color: #4f4f4f;

letter-spacing:2px;

font-family: 'Lato', sans-serif;

font-size:20px;

text-transform:uppercase;

background: -webkit-linear-gradient( left, #248F8D, #8d3855, #5C4F79);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

}

h3.post-title a:hover {

background: -webkit-linear-gradient( left,#5C4F79, #8d3855,#248F8D);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

}

Tutorial

Abra o HTML do seu blog.
Estas são as linhas que de facto importam, e que devem ser colocadas dentro das {} de cada área:

color: #4f4f4f;

background: -webkit-linear-gradient( left, #248F8D, #8d3855, #5C4F79);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

E que áreas são essas? Qualquer uma que tenha texto, como:

h3.post-title a
.post-footer
.post-outer
.sidebar .widget
.sidebar .widget h2
.footer-wrapper
...

Já agora, no exemplo que eu dei, é necessário adicionar a fonte Lato ao HTML do blog. Procure por <head> e adicione em cima:

<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>

Foi fácil de entender, não foi? Eu já testei e funciona, espero que tenham gostado ^^

Scroll automático

2015-12-08T11:17:00.000-08:00

Oh meu deus, acabei de notar que tinha publicado este post sem querer! [~~estou a editar 9/12, e publiquei acidentalmente ontem~~].

Bem, pelo menos o tutorial estava perceptível, mas explicações nem vê-las. Nem introdução o post tinha >.< Bom, scroll automático é basicamente uma maneira de fazer passar o conteúdo de uma caixinha (gadgets, postagem) automaticamente, pois esse conteúdo é grande demais para caber no espaço e assim está sempre em movimento. Quando a pessoa faz over em cima do conteúdo, este pára de mexer e é possível ler/clicar com calma no que contém. Mais ou menos o que tenho no gadget "Lost" deste blog.

Meu resultado final

{lembrando que eu usei margens um pouco diferentes, e que isto deve ser adicionado num gadget HTML/Javascript}

<div style="margin-left: -5px; margin-top: 0px; margin-right: -5px; margin-bottom: 0px;">
<div class="tags">
<marquee direction="left" scrollamount="4" width="100%" behavior="slide" onmouseover="this.stop()" onmouseout="this.start()">
O QUE VOCÊ QUISER, TIPO MENU, LINKS, TEXTO...
</marquee>
</div></div>

Para entender (desconstrução em partes)

1) A parte principal do código é esta:

<marquee direction="left" scrollamount="4" width="100%" behavior="slide" onmouseover="this.stop()" onmouseout="this.start()">

O QUE VOCÊ QUISER, TIPO MENU, LINKS, TEXTO...

</marquee>

2) Lembro que, para você ajustar as margens dessa área, pode, por exemplo, enuadrar o código anterior dentro deste (mude os valores conforme quiser):

<div style="margin-left: -5px; margin-top: 0px; margin-right: -5px; margin-bottom: 0px;">

CÓDIGO ANTERIOR

</div>

3) Isso pode ainda ser personalizado, por exemplo, eu adicionei no meu html acima de /b:skin o código seguinte:

.tags {background: #fff;}

E, antes e depois do primeiro código do gadget (respetivamente), inseri ainda

<div class="tags">

<div>

Organização:

(Código 2 (código 3 (código 1) ) )

Mais uma vez, gómen pelo acidente!

Modelo para comentários #small planet

2015-12-08T11:15:00.000-08:00

Hoje parece que estou incansável, mas na verdade, estou apenas a postar tutoriais que tenho guardados há imenso tempo >.< Desta vez trago um novo modelo para comentários, que usei num layout free chamado Small Planet, que podem pegar como base e editar à vontade ~~(com os devidos créditos)~~. Eu pessoalmente considero-o muito fofo, pela fonte, bordas e outline, além de que as cores são bem suaves, mesmo que vocês as possam mudar. Aproveitem ^^

Prévia:

Tutorial

Procure por <head> e adicione em cima:

<link href='http://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'/>

Agora, procure por: /*comments
Substitua toda a área própria pelo código seguinte:

#comments { /*fundo da área de comentários*/
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglmIrdl6ZcfcBdpsWuQ1J22yXxCVvCgE9l6wSMcXneUtvArqPH9LtwUuS8ahkn98w6P5BPsE2Dag3rYlfNv2BpI_22PIXPJA6loJYp8IviPwDIvcH14i7v3bmVbCPh60JFikEx9ucdYjPi/s1600/forumfundocorcinza20b.png) repeat;
padding: 5px;
}
h4 { /*texto X comentários*/
padding: 5px;
background: #ebe5da;
text-align: center;
font-size: 13px;
outline-offset: -4px;
outline: 1px dashed #c9bead;
}
.comments .comment-block { margin-left: 70px;}
.comments .comments-content .comment-content { /*caixa de comentários*/
margin-top: -5px;
position: relative;
background: #edebc7;
border: 1px solid #ffffff;
padding: 10px;
color: #9c985c;
font-size: 11px;
border-radius: 5px;
-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;
}
.comments .comments-content .comment-content:hover { /*caixa de comentários*/
background: #f4f5e4;
border-radius: 20px;
-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;
}
.comment-header { /*título do autor*/
color: #807569;
padding: 5px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiC4pi-H8BAchXwOJKZiDQQvk-EBDkVshS_yC4pZKJGRmrYvy71nWsFNa0fGX9qHuhPicRxqNFbcY07DUT5FdgkC2plRnSDhFLMHSn0YwMOy4TFBLuc7Td4tkw4JJ3suBUOc1Nlga6XezS/s1600/Have+Things.png);
outline-offset: -4px;
outline: 1px solid #fff;
border: 1px solid #b0a496;
}
.comment-header a {
color: #807569 !important;
font-size: 20px;
font-family: Amatic SC;
font-weight: normal;
text-shadow: 1px 1px 1px #fff;
}
.comment-header a:hover {color: #a89d76 !important;}
.comments .comments-content .datetime a {
font-size: 10px !important;
float: right;
line-height: 16px;
font-family: muli;
}
.comments .comment .comment-actions a { /*botões de responder*/
padding-right: 5px;
float: right;
font-size: 14px;
color: #b39794 !important;
font-weight: normal;
text-shadow: 1px 1px 1px #fff;
background: #fff;
padding: 1px 5px 1px 5px;
}
.comments .comment .comment-actions a:hover {
font-style: normal !important;
text-decoration: none;
}
.comments .continue a { /*botão de adicionar comentário*/
font-size: 12px;
color: #cfcc93 !important;
font-weight: normal;
text-shadow: 1px 1px 1px #ffffff;
-moz-text-shadow: 1px 1px 1px #ffffff;
float:left;
padding:3px !important;
margin-right: 10px !important;
}
.comments .continue a:hover {
font-style: normal !important;
color: #c7b0ad !important;
text-decoration: none;
}
.comments .avatar-image-container { /*avatar*/
max-width: 50px;
max-height: 50px;
min-height: 50px;
min-width: 50px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiC4pi-H8BAchXwOJKZiDQQvk-EBDkVshS_yC4pZKJGRmrYvy71nWsFNa0fGX9qHuhPicRxqNFbcY07DUT5FdgkC2plRnSDhFLMHSn0YwMOy4TFBLuc7Td4tkw4JJ3suBUOc1Nlga6XezS/s1600/Have+Things.png);
padding: 5px;
outline-offset: -3px;
outline: 1px dashed #c9bead;
}
.comments .avatar-image-container img{
max-width: 50px;
max-height: 50px;
min-height: 50px;
min-width: 50px;
}

Só isto. Oh, alguém aqui gosta de Web comics? A Camii retornou das cinzas com indicações muito boas: www

☂ Chuva de HTML

Menu responsível: softy

Pŕevia: www

Tutorial:

Destaque na primeira letra do post

Prévia: www Tutorial

Alterar a vírgulas dos marcadores por qualquer símbolo

Data em forma de calendário

Parte que não afeta o código:

Parte do código:

Comentários com google+ e blogger

Prévia: www

Tutorial:

Explicações:

Modelo para comentários #uvas e laranjas

Prévia: www

Tutorial:

Modelo para comentários #kawaii

Prévia

Tutorial

Personalizar mensagem de erro

Imagem de error 404:

Informação sobre o que aconteceu:

Ajuda para prosseguir:

Como criar layouts responsivos

Ativar a prévia:

Tudo o resto será tratado na parte do HTML:

1. Usar "device width"

Personalizar a mensagem de cookies

Tutorial

Cursor do blog

Menu pendente

Prévia: www

Tutorial

Lightbox personalizada

Ativando a lightbox

Personalizando o modelo

Menu de natal

Prévia: www {no 2º gadget da sidebar} Tutorial:

Menu "locão"

Modelo para mensagens antigas, home e recentes

Dropdown raro

Prévia: wwwTutorial:

Fazendo o blog crescer

Tooltip com efeito hover

Como colocar a tooltip normal

Efeitos hover [esta parte foi inteiramente tirada daqui: www]

Menu fixo retrátil (menu escondido)

Tutorial:

Notas

Geradores e sites úteis para blogueiras

Páginas do blog com layouts diferentes entre si

Prévia: www

Tutorial

Texto em degradê

Prévia:

Exemplo

Tutorial

Scroll automático

Meu resultado final

Para entender (desconstrução em partes)

Organização:

Modelo para comentários #small planet

Prévia:

Tutorial

Prévia: www

Tutorial

Prévia: www {no 2º gadget da sidebar}

Tutorial:

Prévia: www
Tutorial: