Template - Códigos Básicos

Me disseram na ask que eu plagiei o blog de alguém. O próprio dono reclamou, mas estava no anônimo. Acho que era apenas para irritar, mas se souberem se foi verdade, poderiam me dizer para que eu pudesse creditar sabe-se lá o que?

Yoi, anjos :3

Eu sempre tenho muita coisa para dizer nas introduções, mas como não quero que fique grande, fico apagando o tempo todo o que digito, e escrevo só uma parte. Acabo escrevendo só besteiras, sabe. Ontem eu fui no cinema com a minha amiga (na hora de ir embora, nos perdemos uma da outra). Eu tinha a intenção de já comprar meu ingresso para The Sea of Monsters, mas não estava vendendo ainda :c Ah, comecei a ler Harry Potter :3 Por e-book ;w;'

Uma das dicas que eu recebi, foi dar dicas de como fazer um template. Gostei muito dessa ideia, então preparei um post que espero não ser tão grande quanto acho que é com muitos tutoriais. Espero que a postagem seja útil. Se eu catei algum código de algum blog, os créditos estão no final, claro.


1 // Blockquote em hover

Vá em Modelo > Editar HTML e procure por ]]><. Feito isso, cole acima dessa tag o seguinte código:
blockquote { background-color: #f0f0f0; /* Background */ border-right: 10px solid #000; /* Cor da borda */ border-left: 10px solid #000; /* Cor da borda */ letter-spacing: 2px; font-size: 8px; font-family: silkscreen; color: #000; /* Cor da fonte */ text-align: center; -webkit-transition-duration: .0s; padding: 3px; } blockquote: hover { background-color: #f0f0f0; border-right: 2px groove #aaaaaa; /* Cor, tamanho e tipo da borda hover */ border-left: 2px groove #aaaaaa; /* Cor, tamanho e tipo da borda hover */ letter-spacing: 0px; font-size: 8px; font-family: silkscreen; text-align: center; color: #000; /* Cor da fonte hover */ -webkit-transition-duration: .37s; } @font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }

2 // Centralizar título das postagens

Vá em Modelo > Editar HTML e procure pela tag h3.post-title { e abaixo dela, cole:
text-align: center;
3 // Post-footer personalizado

 Seguindo o mesmo processo de Modelo > Editar HTML, procure novamente por ]]>< e acima da tag, cole:
@font-face { font-family: "pixel"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); } .post-footer-line-1 { border-top: 1px dotted #aaaaaa; /* Tamanho, cor e tipo da borda */ border-bottom: 1px dotted #aaaaaa; /* Tamanho cor e tipo da borda */ text-align: center; /* Alinhamento */ font-family: pixel; font-size: 8px; } post-footer-line-2 { border-top: 1px dotted #aaaaaa; /* Tamanho, cor e tipo da borda */ border-bottom: 1px dotted #aaaaaa; /* Tamanho, cor e tipo da borda */ text-align: center; /* Alinhamento */ font-family: pixel; font-size: 8px; }

4 // Tooltip personalizado

Realize novamente o processo de Modelo > Editar HTML e procure por ]]><. Feito isso, cole acima da tag o código a seguir. Edite como quiser.
div#qTip { margin: 3px; padding: 6px 10px; border-right-width: 2px; border-bottom-width: 2px; display: none; color: #000; background: #cfc8d7; font-family: pixel; font-size: 8px; text-align: left; position: absolute; z-index: 1000; box-shadow: inset 0 0 4px #937b99, 0 0 4px #937b99; text-transform: uppercase; pacity: 0.9; -webkit-transition: all 0.2s linear; moz-transition: all 0.2s linear; o-transition: all 0.2s linear; }

5 // Faixinha nos gadgets
Esse é um dos três modos de colocar faixinha nos gadgets, e de longe o mais fácil de todos. Vá em Modelo > Editar HTML. Clica naquela famosa primeira setinha, e pesquise por /* Mobile
Agora, antes de body.mobile, cole o código a seguir, e o edite.
.sidebar .widget h2 { background: url (insira aqui o URL da faixinha) no-repeat left; /* Dependendo de onde sua faixinha será ancorada, mude left para right */ text-align: center; /* Troque se quiser o título alinhado de outra maneira */ margin-top: -2px; margin-left: -19px; margin-bottom: 0px; padding: 15px; width: 150%; overflow: hidden; }
 Os margins são a parte mais chata. Vá alterando os números e visualizando, até que a faixinha esteja posicionada da maneira que você quiser.
6 // Leia mais personalizado

Vá em Design > Editar HTML, procure por ]]>< e acima do trecho, cole o seguinte código:
.jump-link { text-align: left; /* posicionamento do leia mais */ margin-top: 5px; /* espaço que fica entre o leia mais e a postagem */ } .jump-link a { padding: 4px; /*acolchoamento entre o fundo e o texto */ color: #000000; /* cor do texto */ background: #dfdfdf; /* cor do fundo */ font-family: verdana; /* tipo de letra */ -moz-border-radius:  6px; /* bordas arredondas */ -webkit-border-radius:  6px;  /* bordas arredondas */ border-radius: 6px;  /* bordas arredondas */ }

Eu selecionei apenas estes códigos, acho que é apenas o básico mesmo. Espero que seja útil. c: Acho que ainda hoje volto trazendo alguma coisinha básica. Um utilitário, ou a segunda aula do idioma japonês, mas isso apenas se eu não começar o novo layout do blog. Esse já está me enjoando. Aliás, amanhã começam Os Jogos Vorazes. Com isso eu digo as aulas, porque é algo muito semelhante q

Créditos: Kawaii World, pelo leia mais personalizado,
Dazzle, pelo tooltip personalizado, 
e Cute Ayumi pelas faixinhas nos gadgets.

19 comentários:

  1. Hallo sou nova por aqui e já estou apaixonada pelo blog cute Mayu-san!! :3

    Bem, se avisaram por anonimo e não disseram nada é porque deve ser mesmo para irritar e não é verdade :s infelizmente andam aí muitos que falam apenas para irritar... bem espero que não voltem a incomoda-la

    São todos tutos bem explicados e super uteis para um lay super lindo e cute! :3 adorei!!

    Bem, Mayu.. espero que possamos ser boas amigas por aqui ^^-

    Kissu ~♥ || Pankax&Pankadax

    ResponderExcluir
    Respostas
    1. Mesmo? Obrigada, Rafa *wwww* Acho que não. O afiliado Josh recebeu 23 asks com isso, deve ser só besteira mesmo. Também espero /o/ Realmente? Obrigada, anjo *wwww* Que bom que gostou ^uu^

      Também espero <3 Chu, chuchu-chan c:

      Excluir
    2. Sim!! *-* 23? serio?? o.o não consigo compreender porque razão fazem isso...

      Que bom! Isso significa que o seremos ^^- Kissu <3

      Excluir
  2. Aaaawn, seu blog está tão cute, tento o máximo passar por aqui para ver as postagens.. mas está dificil .-.
    Pois é, adoro o conteudo daqui <3

    Debate, participa ?



    Chu :3

    ResponderExcluir
    Respostas
    1. Também não estou com o tempo que queria para poder passar por aí, no seu blog =/ Verdade? Muito obrigada, isso me alegra tanto *ooooo*

      Chu, chuchu-chan c:

      Excluir
  3. *O* Não acredito que tenhas plagiado ninguém >< Ignora, ou espera que te saiam do anónimo u-u' Provavelmente essa acusação é mentira :/
    Óptimos tutoriais *----* Com certeza que vai ajudar alguém *-*

    Kiss~

    from Niik ll Letter of Pain (perfil)

    ResponderExcluir
    Respostas
    1. Espero que não voltem a perturbar na verdade, pois se está no anônimo e não deixou link, ou a pessoa está em falta de inteligência, ou é apenas uma mentira deslavada. Sério? Obrigada, Niiki *-* Espero que venha ser útil, sim /o/

      Chu, chuchu-chan c:

      Excluir
  4. TIIIIIIIIIIIIA MAYUUUUUU ♥
    Eu também escrevo muita coisa.. Mas acho que a maioria não lê. ;-;
    Ah, esses tutos são ótimos. São o 'essencial' para um layout, ajuda bastante :)
    Com muito carinho, Isa
    sonhosde-primavera.com

    ResponderExcluir
    Respostas
    1. TIIIIIIA ISAAAAAAAAAA ♥ Verdade... acho que só você lê mesmo, ao que se parece q Eu também acho, embora tenham faltado muitas coisinhas cujas não pude lembrar no momento :c Espero que ajude, sim /o/

      Chu, chuchu-chan <3

      Excluir
  5. Acho que todos esses códigos acima são essenciais pra um blog, ADOREI! ~

    maiira-t.blogspot.com.br || Pink Sweetness

    ResponderExcluir
    Respostas
    1. Espero, na verdade, que isso seja útil para alguém. Obrigada, Mily c:

      Chu, chuchu-chan ・▽・

      Excluir
  6. Isso é super legal para iniciantes, assim tem noção de como fazer um bom Lay.

    semprefuiestranha.blogspot.com | SEMPRE FUI ESTRANHA

    ResponderExcluir
    Respostas
    1. Espero que seja realmente, pois foi pensando neles que fiz este post c:

      Chu, chuchu-chan ^^

      Excluir
  7. Os iniciantes aprovam, AUHSUAH' Sério, é legal isso, para pessoas que não tem nem noção de como fazer um layout, os códigos acima, são essenciais para um blog.
    Kisses~
    Bittersweet

    ResponderExcluir
    Respostas
    1. UAEHAUEHUA Nhaw, espero que seja útil para os iniciantes *w*

      Chu, chuchu-chan c:

      Excluir
  8. Acho que essa acusação foi: ele te plagiou e quer jogar a culpa para você.
    Sou nova aqui >w<
    Seguindo~

    ResponderExcluir
    Respostas
    1. Tipo, sei que o plágio é algo muito chato e tal, mas eu ficaria feliz se fosse plagiada. Afinal, fiz algo que foi bom o suficiente para alguém querer pegar e tentar levar os elogios por ela. Eu tentaria resolver as coisas, dizer que eu quem fiz, mas fico feliz de ter levantado essa hipótese. Obrigada, Miyuki *-* Ah, seja bem-vinda, leitora *uuuu*

      Chu, chuchu-chan ・▽・

      Excluir
  9. Eu também fazia muito isso, mas ultimamente tenho tido necessidade de assunto pras introduções dos meus posts porque gosto de fazer dois parágrafos gordinhos, sabe? Mas ultimamente têm estado tão vazios... e.e'

    Sério que você não assistiu TSOM ainda? Cara, sem querer me exibir, mas eu assisti em 3D pouco menos de uma semana depois de estrear. E cara, como você é semi-deusa de carteirinha, achei que você seria a primeira a comprar o ingresso de todo o mundo ><' Sempre me interessei por HP, tipo, saber mais sobre a história, sobre o que fala, mas nunca tive uma vontade forte de ler, nem assistir.

    Sou louca por esses tutoriais rápidos sem muita enrolação, porque tem blogs que enrolam muito pra ensinar como criar um gadget, que é muito fácil. Já conhecia todos, menos o de faixinha nos gadgets, que sempre me enrolo na hora de fazer e o de Tooltip, que eu não sei o que é HEUEHEUH'

    Kissus, amei a postagem *3*
    True Tears ~ perfil

    PS: Eu queria conversar com você no FB sobre um projeto, mas nunca encontro você online, você mudou de conta ou qualquer coisa assim?

    ResponderExcluir
    Respostas
    1. Entendo. É horrível, não vou mentir ;-;
      Na verdade, eu assisti no dia da estreia. Eu fiz essa postagem dias e dias antes, e no dia pensei que já estava vendendo os ingressos. Só para garantir que eu conseguiria mesmo, sabe? q Eu gosto da história, acho super interessante, mas não quero mentir: está sendo uma leitura entediante.

      Eu acho muito mais simples. Se a pessoa enrola muito até para fazer um gadget, quem está tentando aprender também vai se enrolar, e isso não é um sinal legal. /apanha/ Tooltip é aquele balãozinho escrito algo quando você, por exemplo, pousa o cursor do mouse em cima de uma imagem de afiliados. Vai amostrar o nome do blog, sabe? O balãozinho é o tooltip :3

      Chu, e obrigada, chuchu-chan <3

      Resposta do P.S. (?): Não mudei, mas admito que não tenho entrado com tanta frequência. Vou te chamar no bate-papo c:

      Excluir