Cara Membuat Blockquote Responsive dan Keren

Halo Teman Teman Blogger Indonesia! Kembali lagi bersama Wiki Farm yang sekarang akan berbagi Tutorial Cara Membuat Blockquote Responsive dan Keren Terinspirasi dari Arlina Design.

Blockqoute adalah sebuah fitur yang diberikan oleh Blogger di postingan, bisa berupa sebuah catatan yang bisa mengingatkan pembaca saat membaca sebuah artikel anda. Yuk kita simak cara membuatnya.

Cara Membuat Blockquote Responsive dan Keren

1. Buka Blogger Kamu
2. Pilih Tema, Lalu Edit HTML
3. Tempatkan Kode dibawah ini tepat di atas kode </head>
4. Lalu Simpan Templatenya.

<
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: 'Note';
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);
}

Cara Penggunaan Blockquote

1. Buka Blogger
2. Buat Entri Baru
3. Klik Icon Quote di samping kanan Icon Bullet
4. Tulis Sesuatu
5. Klik Pratinjau dan lihatlah