Suatu hari, saya merasa bosan dengan quote di blogspot yang hanya menjorok ke dalam. Oleh karena itu, saya pun mencari kode CSS nya untuk kustomisasi. Kode CSS itu saya temukan dari tulisan Customizing Blockquote Style in Blogger/Blogspot Without Background Image. Ada salah satu tampilan yang menarik hati saya, yaitu yang memiliki tanda " yang mengapit tulisan.
Kode yang tertera di tulisan tutorial itu adalah:
.post blockquote { padding: 10px 15px; margin: 5px 40px; /* border: 1px solid #E1E1E1; */ /* background-color: #F6F6F6; */ border-left: 4px solid #18B888; font-size: 15px; font-family: Times; } .post blockquote:before { content: "\201C"; color: #353535; font-family: Times; font-size:50px; font-weight: bold; line-height:0px; vertical-align:middle; } .post blockquote:after { content: "\201D"; color: #353535; font-family: Times; font-size:50px; font-weight: bold; line-height:0px; vertical-align:middle; padding:15px 0px 0px 5px; }
Hasilnya seperti ini:
Custom blog quote, diambil dari tulisan Monetize Blog vs Santuy Blog Taruih Baraja |
Kemudian saya sesuaikan dengan keinginan saya menjadi:
.post blockquote { padding: 15px 15px; margin: 10px 40px; background-color: #f3f3f3; text-align: justify; } .post blockquote:before { content: "\201C"; color: blue; font-size:50px; font-weight: bold; line-height:0px; vertical-align:middle; padding: 10px; }
Hasilnya seperti ini:
Custom blog quote, diambil dari tulisan Monetize Blog vs Santuy Blog Taruih Baraja yang telah diperbaharui |
Sekian, semoga bermanfaat.
No comments:
Post a Comment
Jangan sungkan untuk meninggalkan komentar