Tutorial de Blockquote personalizada:
Você sabe o que é Blockquote? Se não, é isso:
Oi, eu sou uma Blockquote (:E ela serve para vários blogs de tutoriais, para pequenas citações de texto, etc. Eu vou usá-la até mesmo nesse tutorial de como colocá-la, mas como podem ver, ela dá um toque muito lindo no blog, e existe vários tipos de Blockquotes
Sou a Blockquote da IsaE tem várias outras, mas a que vou ensinar é a do blog, mesmo.
Procure pelo seguinte código:
]]></b:skin>Quando achá-lo, cole acima dele:
@font-face { font-family: "Pf Arma Five"; src: url('http://static.tumblr.com/k0eee68/E0hmo3mkj/pf_arma_five.ttf'); }blockquote {font-family: Pf Arma Five;font-size: 8px;color: #FFF;text-shadow: 0 1px 0 #58362A;letter-spacing: 1px;text-align: left;border-left: 2px solid #58362A;border-right: 2px solid #58362A;background: #C89D6F;padding: 1px;padding-left: 10px;border-radius: 2px;-webkit-transition-duration: .100s;-webkit-transition: all 0.4s ease;-moz-transition: all 0.4s ease; -o-transition: all 0.4s ease;transition: all 0.4s ease; }blockquote:hover {font-family: Pf Arma Five;font-size: 8px;color: #fff;text-shadow: 0 1px 0 #000000;padding-left: 13px;letter-spacing: 1px;text-align: center;background: #58362A;border-left: 2px solid #58362A;border-right: 100px solid transparent;padding: 1px;-webkit-transition-duration: .100s;padding-left: 13px;-webkit-transition: all 0.4s ease;-moz-transition: all 0.4s ease;-o-transition: all 0.4s ease; transition: all 0.4s ease;}
Código grande, mas é super fácil, espero que tenham gostado!
Aviso:
Logo, logo eu disponibilizarei um template, e postarei um aviso, mas atenção: o template pode conter uma coisa chamada HTML/Java Script, que você tem que adicionar através do próprio blog, não vem com o HTML, então, se o template tiver HTML/Java Script, eu vou avisar, então leia até o final (:
É isso, beijos!
Totais créditos ao Birthday Cake pelo tutorial de Blockquote.