블로거에서 인용 상자의 class id는 'blockquote'입니다. 고로 인용 상자의 스타일을 설정하려면 다음의 코드를
.post blockquote {
원하는 스타일을 직접 입력
}
[대시보드 → 템플릿 → 맞춤설정 → 고급 → CSS추가] 에 삽입해주거나, 또는 HTML 편집 모드에서
]]></b:skin>
코드 바로 앞에 직접 삽입해주면 됩니다. 물론, 저 상태 그대로 삽입해선 안되고, 코드 중간의 '원하는 스타일을 직접 입력' 부분에는 스타일 설정 코드가 들어가야 합니다.
어떻게 꾸미느냐는 블로거의 자유이고 또 가능한 스타일이 너무도 많기 때문에 일일이 말씀드릴 수는 없습니다만, 기존 블로거 유저들이 공유하고 있는 인용상자 스타일은 구글에서 'blogger blockquote css' 'blogger blockquote style' 등으로 검색하여 쉽게 찾을 수 있습니다. 예로써 활용하실 수 있도록 몇가지 샘플들을 아래에 첨부합니다. (괜찮은 디자인의 인용상자 스타일을 보게되면, 따로 모아서 나중에 다시 포스팅하도록 하겠습니다.)
! 이 글에는 스타일 설정이 적용되어 있으므로, RSS 피드로만 보실 경우 아래의 스타일 설정이 나타나지 않을 수 있습니다.
인용상자에 마우스를 올렸을 때 점진적으로 색상을 변화시켜 동적인 효과를 주었다.
.post blockquote {
width: 75%;
margin:auto;
padding: 15px;
border: 1px solid #dbdbdb;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.post blockquote:hover {
background: #000000;
color: #C1C1C1;
}
인용상자에 마우스를 올렸을 때 그림자가 생성되도록 하였다.
.post blockquote {
width: 75%;
margin:auto;
padding: 15px;
border: 1px solid #dbdbdb;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.post blockquote:hover {
box-shadow: 10px 10px 10px #2580a2;
}
"문제를 해결하는 힘은 새로운 정보를 얻는 데서 오는 것이 아니라, 이미 오래 전부터 알고 있던 것을 체계적으로 정리하는 데서 온다." - 비트겐슈타인
.post blockquote {
width: 75%;
margin:auto;
border-left: 4px solid #ccc;
color: #a5a4a4;
font-style: italic;
padding-left: 15px;
}
"문제를 해결하는 힘은 새로운 정보를 얻는 데서 오는 것이 아니라, 이미 오래 전부터 알고 있던 것을 체계적으로 정리하는 데서 온다." - 비트겐슈타인
.post blockquote {
width:75%;
margin: auto;
padding: .5em 1em;
border-left: 5px solid #fce27c;
background-color: #f6ebc1;
}
"문제를 해결하는 힘은 새로운 정보를 얻는 데서 오는 것이 아니라, 이미 오래 전부터 알고 있던 것을 체계적으로 정리하는 데서 온다." - 비트겐슈타인
.post blockquote {
width:65%;
margin: auto;
background: url(이미지 주소) no-repeat;
color: #a5a4a4;
font-style:italic;
padding: 30px;
}