Halo!
Masih seputar desain, tapi kali ini Abang tidak membahas tentang desain grafis, melainkan Abang akan share Cara Desain Blockquote Style Pada Blogger.
Blockquotes biasanya digunakan untuk menunjukkan kutipan dari sebagian besar teks dari sumber eksternal atau menyoroti kutipan seseorang, atau hal penting yang ingin di tonjolkan.
Banyak para blogger menggunakan Blockquotes agar artikel pada blog mereka lebih menarik pembaca. Biasanya setiap platform sudah memiliki style default untuk Blocquotes, namun kita perlu memodifikasi style tersebut agar sesuai dengan template kita.
Jadi pada kesempatan ini Abang akan coba share bagaimana cara menyesuaikan style Blockquotes pada Blogger, dan Abang sediakan kode CSS yang bisa kalian pakai untuk menyesuaikan style blocquotes pada blog kalian.
Cara Menggunakan Blocquotes Pada Blogger
Blok teks yang ingin di ubah menjadi blockquotes lalu klik tanda petik "
Cara Menambahkan Kode CSS Blocquotes
Blogger Dashboard >> Template >> Edit HTML lalu letakkan kode berikut tepat diatas kode ]]></b:skin> atau </style> "tekan CTRL+F untuk mencari kode"
STYLE 1
/* CSS Blockquotes Abang*/
.post-body blockquote{background:#03C9A9;position:relative;padding:55px 20px 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:#03C9A9}
.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)}
.post-body blockquote a,.post-body blockquote a:hover {color:#fff;}
.post-body blockquote a,.post-body blockquote a:visited,.post-body blockquote a:link,.post-body blockquote a:link:hover{color:#fff}
*:focus {outline:0!important;}STYLE 2
/* CSS Blockquotes Abang*/
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;
}
blockquote:before {
display: block;
float: left;
content: "\201C";
font-size: 100px;
margin-right: 10px;
color: #fff;
background-color: #6591c2;
padding: 15px 12px 5px 8px;
width: 50px;
height: 50px;
line-height: 90px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
blockquote cite {
position: relative;
display: block;
text-align: right;
margin-top: 5px;
color: #999;
} Kemudian Save Template Kalian
Baca Bismillah sebelum berkomentar EmoticonEmoticon