CSS box Blockquote keren

css-blockquote keren blogger


Hoje vamos compartilhar como fazer blockquote de forma mais estilosa isso serve para que possamos ajudar o visitante fornecendo uma dica para que ele se atente em ler muito utilizado em templates para fazer citações no corpo do texto é um widget elegante para adicionar isso siga os passos abaixo


Adicionando Css Blockquote keren no blogger 

faça login no blogger va no menu tema então editar HTML com as teclas combinadas CTRL+F busque por ]</head>e logo acima disso copie e cole o seguinte código:

<style type='text/css'>
/*Blockquote Catatan*/
.post-body blockquote {
    text-align: left;
    background: #6591c2;
    position: relative;
    display: block;
    padding: 55px 20px 20px;
    color: #fff;
    margin: 10px 0;
    border-radius: 3px;
}
.post-body blockquote:before {
    position: absolute;
    content: 'Catatan';
    background: rgba(255,255,255,1);
    right: 3px;
    left: 3px;
    top: 3px;
    padding: 5px 20px;
    display: block;
    font-weight: 700;
    border-radius: 3px 3px 0 0;
    color: #6591c2;

}
.post-body blockquote:after {
    position: absolute;
    content: '\f027';
    right: 10px;
    bottom: 5px;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    font-size: 160%;
    color: rgba(255,255,255,.6);
}
</style>

Agora se desejar pode adicionar font awesome acima de </head> 


<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>


salve e pronto 

Ao escrever um post só clicar em citação para depois ver isso ativo conforme figura abaixo 

blockquote blogger 2017 widget




Click to comment