10 Estilos de Blockquotes Personalizados no Blogger

Escolha seu estilo! Combine com suas páginas! Destaque algo importante de sua postagem com 10 estilos fantásticos de personalizar o blockquote em seu blog.

Navegando pela Web entre muitas e muitas páginas você outrora se depara com uma parte de uma publicação de certo site com um visual muito diferente. Cores, estilos, bordas, imagens, etc. e fica admirando como a criatividade foi longe e pensa como foi possível destacar aquele trecho para que ficasse tão interessante.

Muitos já conhecem a forma de fazer isso, mas ainda buscam a personalização perfeita. Você que ainda não conhece lhe apresentamos o “Blockquote”.

O que é o blockquote?


" Em HTML (HyperText Markup Language) a tag blockquote é usada para indicar a citação de uma grande parte de texto de outra fonte. Usando o estilo HTML padrão da maioria dos navegadores da web, ela vai recuar a margens direita e esquerda tanto no visor e na forma impressa, mas isso pode ser substituído por CSS (Cascading Style Sheets). " (Wikipedia)

<blockquote>CONTEÚDO</blockquote>

Falando mais popularmente, o blockquote no blog é uma área de texto deslocada para a direita que serve para destacar algo (textos, códigos, citações etc). Como exemplo podemos citar que utilizamos aqui no Pro Developer para destacar os códigos dos tutoriais publicados afim de se diferenciar das demais áreas da postagem e você possa notar que aquele código é que deva ser inserido em seu template.


Como utilizar o blockquote no blog


>> Dentro da postagem escolha o trecho que ficará com o blockquote e selecione-o.

>> Agora, clique no botão "Citação".


>> Publique sua postagem normalmente.


Aplicando o estilo ao blockquote em seu blog


>> Acesse seu blogger, vá em "Modelo" e depois "Editar HTML".
>> Clique no código do template, pressione "CTRL+F" e pesquise por ]]></b:skin>
>> Logo ACIMA da tag encontrada, cole o código do blockquote desejado.
>> Clique em "Salvar Modelo".

A seguir estão os 10 estilos para personalizar o blockquote de seu blog. Escolha o seu, seguindo o tutorial e tudo ficará perfeitamente como mostrado nas imagens.

Estilo 01
.post blockquote {
margin : 0 20px;
padding: 10px 20px 25px 20px;
background : #9FCFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGOyeieFOMupFVWvsgVcw8IKk11zOVCRPIPq4Pf_sUBwiThuhhQaUA7cqNBzqD99kvq4h8SRjDDe7Vf7vPH60XxVAvGWyELRF-qxOg8bgsFuWtSwtq1Y2wxpqLSWOxjwgYslvHcaWJOz4/s400/block22.gif) no-repeat right bottom;
font: bold .9em "comic sans ms", arial, Helvetica,verdana, Georgia;
color : #484848;
border: 5px dashed #fff;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}

Estilo 02
.post blockquote {
background: #F3F3F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdV1a-gpZDNTTRpdEDZ7h2FjX80_NQvN5eBqxJRdCDNhK2MrVzACitAH5Pit8n-2cN3O1Qyf1mGecDQpLeYNZOQxvkN7SkCRsZRAqPKBLTQkvlpMJkfCURFCdBPuik_WIYyrMiRq2cai4/s1600/comma-side-orange1.gif) ;
background-position:;
background-repeat:repeat-y;
margin: 0 20px;
padding: 20px 20px 10px 45px;
font-size: 0.9em;
font: italic 1.2em Georgia, "Times New Roman", Times, serif;
}
.post blockquote p {
margin: 0;
padding-top: 10px;
}

Estilo 03
.post blockquote {
margin : 0 20px;
padding: 70px 20px 20px 20px;
background : #E7E5DC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiZIJBGvc2u6bXZqUWFBgFR1Zx4SrkHEgIPwdKlcjJWXtiaA24kuGYcmscuvE-pJU657GXpmey3l7kz7VgLU36u8BI98WNw-hwoPxkysvvyXAngJTnYl6dZmgF7aAzyY533IfjEuMIq4M/s1600/block333.gif) no-repeat top;
font: normal 1em "comic sans ms",Helvetica, Courier,"Times New Roman", Times, serif;
color : #000000;
border-bottom : 7px solid #FF0000;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}

Estilo 04
blockquote {
margin : 0 20px;
padding: 60px 30px 40px 20px;
background : #F1F8FE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvJ-ocrS43lItBLosSkFdQycKovSAt2SZiYXAmT8KhavxvMXLMrwLudRLPRtRluloiVAMph2_rzXM6fan_kiLZ9OT0lWWpTGN1HXqide96h3AaahKutIIYtjvIT3nzSp7Nir51_vpo13I/s400/owl.png) no-repeat 350px 5px;
font: normal .9em "comic sans ms", Courier,"Times New Roman", Times, serif;
color : #000;
border-left: 8px dotted #DAB547;
}
blockquote p {
margin: 0;
padding-top:10px;
}

Estilo 05
.post blockquote {
background: #484B52 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVHfe2Tp8xoc9Ja5Na1adbSUvj25dzb_r8ya7UQbYXKccalJd6Yqt8KALuDw66nUq72rE630oCluog7KvTFWlbe4fMkkjU6LwS1AOQzua_KJc739KpwCzR4aWZNbF-ZouPypKIp-d_hyw/s1600/green-black-side.gif) ;
background-position:;
background-repeat:repeat-y;
margin: 0 20px;
padding: 20px 20px 20px 50px;
color:#C7CACF;
font: normal 0.9em Helvetica, verdana, serif, Georgia, "Times New Roman";
}
.post blockquote p {
margin: 0;
padding-top: 10px;
}

Estilo 06
blockquote {
 border-right: 10px solid #A020F0;
border-left: 10px solid #A020F0;
background-color: #f5f2f3;
padding: 10px; font-size: 12px;
color: #000;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
box-shadow: inset 0 0 15px #ecebeb, 0 0 5px #d2d1d3;
}
blockquote:hover {
 border-right: 30px solid #00BFFF;
border-left: 30px solid #00BFFF;
color: #000;
box-shadow: inset 0 0 15px #ecebeb, 0 0 5px #d2d1d3;

Estilo 07
.post blockquote {
margin : 0 20px;
padding: 20px 60px 80px 20px;
background : #FEE4E3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgISCeYUXese-I5VNDq3rXYp9VwOk5LxZqxT8HA-GwULZotomfstnIr6mBjhSvoUUdx7I-BmSNwB_fupPjalZ6uruDsaDnBdH1smPI2xj0n69OndKaZZFzHLY80nJ7GQVCk1aUUCvnpuAo/s1600/angular-right.png) no-repeat bottom right;
font: bold italic 1em  Georgia, verdana, Helvetica,  "Times New Roman", Times, serif;
color : #000;
border: 1px solid #DDD;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}

Estilo 08
.post blockquote {
margin : 0 20px;
padding: 70px 20px 20px 40px;
background : #E4EAFE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQgQIM9H9Yk9futlOOxG_262-cdOg7XBHl_uJRu5F2ouz_zV4PB7WRASOKywalu8YvTvERTRkIK-IYAJ8eMIkMShxJ2TjS6iUYveaqqO6a4sXC0DL1EGjfzv-XRIylGf9JMq6VFhzbbkI/s1600/angular-purple1.png) no-repeat top left;
font: bold 1em Helvetica, verdana, Georgia, "Times New Roman", Times, serif;
color : #000;
border-bottom : 5px solid #435388;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}

Estilo 09
blockquote {
margin : 0 20px;
padding: 60px 30px 40px 20px;
background : #f4f4f4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2Xuc_ZZ6W63HkG9WXSe_nO2O7aob6xkLWI_2hwByeaMGjhd3mgakfPdBkXBsoOyV1JT9vh7FiGqaNIu4KYrZbFzTQOB2C6btZj-9DIf60rn2DaFQH60-mD57DSgEy1mBIygwMQKT8Ykk/s1600/blockquote-html5.png) no-repeat 5px 5px;
font: normal 1.1em "comic sans ms", Courier,"Times New Roman", Times, serif;
color : #000;
border-left: 8px dotted #b10202;
}
blockquote p {
margin: 0;
padding-top:10px;
}

Estilo 10
blockquote {
color:rgb(255,150,100);
font-family:georgia, serif;
font-size:16px;
line-height:1.2;
padding:24px 60px;
margin-bottom:18px;
border:solid 1px rgb(220,220,220);
position:relative;
width:400px;
}
blockquote:before,
blockquote:after {
position:absolute;
width:48px;
height:48px;
content:".";
font-size:0;
}
blockquote:before {
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin7swEJqEVzOZ53WVhXO3rJni7RIchiabKdFWJULU93tcw_1je9Aia_noUFpaUT-TZBJj4-oUZl77Qu-XL9j-lMgEkNcOLFeiWO_YoxZQjwMoiWRzmvM6EY_imNjdRdDn5pLX9vPhBf9Y/s1600/uoHCjSK.png');
top:0;
left:0;
}
blockquote:after {
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpCUYW57vS_JFVRTSs_LrC0jxHK9BnCTL8Ql6ekDG_qDgSyPWDQzLjMrcXVUu_9KDoeN668CwUZepNcekoxhnSDo1vZpAYZ-S421kIJb1M9zsZ9IkcIxFyEBnufsVqi-sYwMMWbbakkvE/s1600/m3HnqqU.png');
bottom:0;
right:0;
}

Logo após a realização do tutorial com o código desejado, todas as vezes que selecionar algo em suas postagens e utilizar o botão "Citação" tal área ficará com a configuração que você escolheu através desse artigo.

Deixe seu comentário, pois ele é a motivação para nosso trabalho.

Comentários

 
Copyright ©2015 Canal Do MatheusBR Todos os Direitos reservados | Designed by Sinistro de BTN