구글 블로그(blogger) 태그 목록 꾸미기 #1

블로거에서 태그 가젯을 추가한 후 표시 방법을 '목록'으로 설정하면, 라벨(태그)을 목록 형식으로 볼 수 있습니다. 아래에 소개되는 코드는 태그 목록에 마우스 커서를 갖다대면 태그가 부드럽게 우측으로 이동하는, 간단한 동적 효과를 내주는 코드입니다. CSS의 동적인 효과는 그림이나 글로는 설명하기 힘든 부분이 있으므로, 데모 블로그를 통해 확인하시기 바랍니다.

데모 보기

 #Label1 li a {  
 padding-left:0px;  
 -moz-transition: all .2s ease-in-out;  
 -ms-transition: all .2s ease-in-out;  
 -webkit-transition: all .2s ease-in-out;  
 -o-transition: all .2s ease-in-out;  
 transition: all .2s ease-in-out;  
 }  
   
 #Label1 li a:hover {  
 text-decoration:none;  
 padding-left:15px;  
 }  

코드 설명

태그 가젯은 복수 생성이 가능하므로, widget id는 반드시 Label1이 아닐 수도 있습니다. 코드를 입력하실 때, widget id 자리에는 원하는 태그 가젯의 widget id를 입력해야 합니다.

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

 ]]></b:skin>  

코드 바로 앞의 자리입니다.

! 코드 적용 전 템플릿을 반드시 백업해두시기 바랍니다.
! 백업한 템플릿으로 테스트용 블로그에서 충분한 테스트를 마친 후 적용하시기 바랍니다.
! 다음 브라우저에서 작동되는 것을 확인하였습니다 : 익스플로러(IE10), 파이어폭스, 크롬