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

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

태그 클라우드 꾸미기 1에 간단한 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의 방법과 같습니다. 추가된 부분에 대해서만 따로 설명을 드리면,

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

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

]]></b:skin>  

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

이상 구글 블로그(blogger) 태그 클라우드 꾸미기를 알아 보았습니다.