구글 블로그(blogger) 인용 상자 꾸미기

블로거에서 인용 상자의 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;  
 }