블로거(blogger) 동적뷰 검색바에 확장 효과 주기

그림1

그림2

동적뷰의 검색바를 클릭하면 검색바의 길이가 확장되는 효과를 주는 CSS 코드입니다.

 #header input#search{-moz-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}  
    
 #header input#search:focus{width:450px;}  

코드 삽입 위치는 [대시보드→템플릿→맞춤설정→고급→CSS추가] 입니다. 2번째 줄은 검색바를 얼마나 길게 확장할지를 설정해주는 코드입니다. '450px' 대신 자신이 원하는 수치를 입력해 줍니다. 코드의 출처는 Ishan 이라는 해외 블로거입니다.


주의.

1. 본 코드는 제가 직접 작동 여부를 시험해본 후 올리는 것입니다.
2. 그러나, 독자분들께서는 코드 적용 전 템플릿을 꼭 백업해두시기 바라며,
3. 또한 만일의 경우를 대비해 테스트용 블로그에서 시험을 해본 후 적용하실 것을 추천합니다.