Customize Blockquote CSS

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