구글 블로그(blogger) 태그 클라우드 꾸미기 #2

태그 클라우드 꾸미기#1에 간단한 transition 호버 효과를 추가해봤습니다. transition 효과는 그림이나 글로는 설명하기 힘든 부분이 있으므로, 데모 블로그를 먼저 보시기 바랍니다.

데모 보기

 .label-size * {   
 color:#2580a2;  
 padding: 3px;   
 margin: 2px;   
 font-size:11px;   
 border:1px solid #2580a2;   
 border-radius:0px;   
 display:block;   
 float:left;   
 text-decoration:none;   
 background:#ffffff;   
 -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;  
 }   
   
 .label-size *:hover {   
 text-decoration:none;   
 background:#000000;  
 color:#dbdbdb;  
 }  

transition 효과만 추가한 것이므로, 기본적인 설정 방법은 #1의 방법과 같습니다. 추가된 부분에 대해서만 따로 설명을 드리면,

그림1

<그림1>에서 보시는 바와 같이, 박스 안의 폰트 색상은 [맞춤설정 → 고급] 의 '링크 색상'과 '방문한 링크 색상'으로 설정합니다. 이 부분을 제외한 나머지는 코드에서 직접 본인의 템플릿에 맞게 수정하시면 됩니다.

그림2

코드는 [대시보드 → 템플릿 → 맞춤설정 → 고급 → CSS추가] 에, 또는 HTML 편집 모드에서

 ]]></b:skin>  

코드 바로 앞에 붙여넣으시면 됩니다.