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:
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:
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):
/*.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;
}
<b:if cond='data:post.thumbnailUrl'>E substituam o trecho todo por este:
<div class='mobile-index-thumbnail'>
<div class='Image'>
<img expr:src='data:post.thumbnailUrl'/>
</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.<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>
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)
» 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:
#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:
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:
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: wwwbody, 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;}
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.
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:
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){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:
.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;
}
}
<![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">
<!-- conjunto de linhas que apresentam o que é para aparecer em mobile-->
<b:else/>
<!-- conjunto de linhas que apresentam o que é para aparecer no desktop -->
</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.
Tentei mudar o theme base e não deu (não a nova base disponibilizada por vc), e sim a antiga, sempre os códigos que coloco nunca combinam um com o outro, eu estava tão animada em modificar o theme base e ter meu blog do meu jeitinho <3
ResponderEliminarPorém acabou que não consegui, porque os códigos pareciam entrar em conflito (sempre que eu colocava um o outro sumia, ai eu tentava consertar e piorava mais), e olha que sei de HTML, sei pouco, porém eu sei...
Poderia me dar dicas do que posso estar fazendo de errado exatamente?
I want to let the world know about Doctor AKHERE the Great spell caster that brought back my husband to me when i thought all hope was lost. Doctor AKHERE used his powerful spell to put a smile on my face by bringing back my man with his spell, at first i thought i was dreaming when my husband came back to me on his knees begging me to forgive him and accept him back and even since then he loves me more than i ever expected so i made a vow to my self the i will let the World know about Doctor AKHERE because he is a God on earth. Do you have problems in your relationship ? have your partner broke up with you and you still love and want him back ? Do you have problem with your finance ? or do you need help of any kind then contact Doctor AKHERE today for i give you 100% guarantee that he will help you just as he helped me. Doctor AKHERE email is: AKHERETEMPLE@gmail.com or
ResponderEliminarcall/whatsapp:+2349057261346