Blockquote merupakan sebuah elemen HTML untuk menyajikan ulang sebagian isi web secara utuh pada halaman yang sama tetapi dalam bentuk block dan terpisah. Untuk membuat teks dalam bentuk blockqoute sangat mudah pada Blogger, kita hanya perlu block teks yang ingin menggunakan elemen blockquote ini, lalu memilih menu quote pada halaman edit postingan.
Seperti yang kita ketahui, blockquote bawaan itu terbilang anta dan bentuk nya sama dengan blockquote bawaan lain. Tetapi kita dapat merubah nya dengan bantuan kode CSS yang akan kita input ke dalam template blogger.
Ada dua buah kode CSS Blokquote yang akan saya share dan masing masing itu berbeda tampilan nya. Seperti yang tadi saya bilang, untuk merubahnya kita hanya perlu menambahkan sebuah kode CSS ke dalam template blog kita agar tampilan blockquote nya dapat berubah.
CARA MENGGANTI TAMPILAN BLOCKQUOTE BLOGGER
Tampilan Blockquote 1
Langkah Pertama : Login ke blogger menggunakan akun kalian, kemudian masuk ke blog kalian. Pada dashboard pilih Template > Edit HTML.
Langkah Kedua : Cari kode </head> dengan cara mengkombinasikan tombol CTRL + F, setelah ketemu copy kode dibawah ini kemudian paste tepat di atas kode </head>.
<style>
.post blockquote {
background:#f9f9f9;
border-left:6px solid #ccc;
font-family: Georgia, serif;
margin:1.5em 10px;
padding:.5em 10px;
quotes:"\201C""\201D""\2018""\2019";
}
.post blockquote:before {
color:#ccc;
content:open-quote;
font-family: cambria, Georgia;
font-size:4em;
line-height:.1em;
margin-right:.25em;
vertical-align:-.4em;
}
.post blockquote p {
display:inline;
}
.post blockquote cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 10px;
}
</style>
Kemudian simpan template lalu buat sebuah posting dengan menggunakan menu quote, dan lihat hasil nya.
Tampilan Blockquote 2
Langkah Pertama : Seperti pada langkah di atas, yang pertama adalah login ke dalam blogger kemudian masuk ke edit template. Cari kode </head>, Pastekan kode di bawah ini tepat di atas kode tersebut.
<style>
.post blockquote{
font-family: Georgia, Times, "Times New Roman", serif;
font-size: 16px;
border-top: solid 2px #dddddd;
border-left: solid 2px #dddddd;
border-right: solid 2px #dddddd;
border-bottom: solid 2px #dddddd;
margin: 1em 0px;
padding: 1em 1em;
font-family: Georgia, Times, "Times New Roman", serif;
font-style: italic;
font-size: 1em;
min-height: 60px;
}
.post blockquote:before {
display: block;
float: left;
content: "\201C";
font-size: 100px;
margin-right: 10px;
color: #fff;
background-color: #03C9A9;
padding: 15px 12px 5px 8px;
width: 50px;
height: 50px;
line-height: 90px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.post blockquote cite {
position: relative;
display: block;
text-align: right;
margin-top: 5px;
color: #999;
}
</style>
Jika kalian sudah menerapkan kode pertama, silahkan ganti dan jangan memasukkan kedua kode tersebut ke dalam 1 template. Nah terakhir silahkan dilihat hasil blockquote nya, semoga bermanfaat.
EmoticonEmoticon