3 Modelos/Efeitos para título do post

Olá, docinhos! Tudo bom? Estou estudando aqui os meus textos de Ciências, também estou com muito medo daquela prova, pois a professora disse que era muito difícil, tô grudada no caderno; pois não quero tirar 8, na minha prova de Matemática também tirei 8, na de português, em que tudo qualquer matéria. '-' (⇀‸↼‶) Quero tirar dez, caramba!
Então trouxe alguns modelos para títulos de post, eu acho que já vi algum desses efeitos em blogs. Mas, só sei que, foi eu que criei o código inteirinho. Queria creditar, mas não me lembro, acho que foi o efeito num menu de tags. Por favor se souberem digam ai em baixo, nos comentários.

Efeito Inverted Preview ~♥

Vá em Modelo, editar HTML, e pesquise pela tag:

 /* Posts

Em baixo dessa tag, vai estar mais ou menos, os seguintes códigos:

h3.post-title {
  margin-top: 20px;
}
h3.post-title a {
  font: $(post.title.font);
  color: $(post.title.text.color);
}
h3.post-title a:hover {
  text-decoration: underline;
}

Substitua pelo seguinte:

h3.post-title {
border-style: solid;
border-width: 1px;
border-left-width: 1px;
border-right-width: 1px;
border-color: #bebebe;
text-align: center;
}
h3.post-title a {
font-family: "Trebuchet MS''; font-size: 20px;
letter-spacing: 4px;
color: #000000;
}
h3.post-title a:hover {
text-decoration: none;
color: #c3c3c3;
letter-spacing: -23px;
-webkit-transition-duration: .80s;
} 

Obs: Dependendo de larguras de todo blog, e o título, vai ultrapassar. Então, coloque outro código no h3.post-title a:hover { do letter-spacing: -23px para os px que vão dar certinho por exemplo 18px por ai, acho que é um tamanho bom.

Efeito Tight Preview ~♥.

Seguindo os mesmos passos do tutorial anterior, substitua pelo seguinte código no h3.post.title {, h3.post.title a{, h3.post.title a: hover { :

h3.post-title {
border-style: solid;
border-width: 1px;
border-left-width: 1px;
border-right-width: 1px;
border-color: #bebebe;
text-align: center;
}
h3.post-title a {
font-family: "Trebuchet MS''; font-size: 20px;
letter-spacing: 4px;
color: #000000;
}
h3.post-title a:hover {
text-decoration: none;
color: #c3c3c3;
letter-spacing: -4px;
-webkit-transition-duration: .80s;
}

Efeito Separate Preview ~♥

Seguindo os mesmos passos do tutorial anterior, substitua pelo seguinte código no h3.post.title {, h3.post.title a{, h3.post.title a: hover { :

h3.post-title {
border-style: solid;
border-width: 1px;
border-left-width: 1px;
border-right-width: 1px;
border-color: #eee;
text-align: center;
}
h3.post-title a {
font-family: "Trebuchet MS''; font-size: 20px;
letter-spacing: 4px;
color: #bebebe;
}
h3.post-title a:hover {
text-decoration: none;
color: #c3c3c3;
letter-spacing: 4px;
-webkit-transition-duration: .80s;
}

(Desculpem o post muito grande shausash)