티스토리 블로그를 운영하면서 '반응형' 스킨을 사용한지도 이제 꽤 오래된 것 같습니다. 결국은 돌고 돌아 지금 쓰고 있는 이 스킨을 제 입맛에 변화시켜 심플하게 사용중이에요~ 

그런데 상단에 보면 블로그 제목 바로 옆에 '검색창'이 있습니다. 

 

예전에, 똑같은 검색창을 블로그 하단부에 넣는 방법에 대한 포스팅을 했었는데.. 블로그마다 다르고 지극히 주관적인 생각이겠지만 검색창을 블로그의 아래쪽보다는 윗쪽에 두는 것이 훨씬 검색'확률'이 높아지더라구요. 

 

그리고 얼마전부터 사람들의 시선을 끌기위해서 검색창 위에 '사라지는 텍스트' 소스를 적용해보았는데..어떤 문구를 쓰느냐는 크게 의미는 없습니다. 문제는 예상못한 '단점'이 있다는 거죠 ㅠㅠ

 

검색창 위에 '사라지는 텍스트' 소스의 단점1

 

자..현재 '로렌과 오뚜막' 블로그의 상단을 보면 웹화면과 모바일 화면에서 검색창이 블로그 제목 오른쪽에 붙어있다는 것을 확인할 수 있을꺼에요. 

 

왜 그런지는 모르겠으나, 스마트폰에서 보는 검색창은 웹에서 보이는 것과 생김새가 조금 다르더군요.

 

이 검색창의 기본 소스는 예전에 올렸던 티스토리 블로그 본문하단에' 검색창' 넣는 방법을 참고하시기 바랍니다.

 

검색창 위에 '사라지는 텍스트' 소스의 단점2

 

위에 보이는 소스가 바로..html에 넣어주는 소스의 '원래' 모습입니다. 원래는 검색창위에 아무런 글자도 없었구요..검색버튼위에 '검색'이라는 글씨가 나오는 형태였죠.

 

검색창 위에 '사라지는 텍스트' 소스의 단점

평상시에는 보여지지만 검색창 위에 마우스 커서를 올려서 클릭을 하면 사라지는 소스는 아래에 첨부했으니 필요하신 분들은 받아가세요^^

 

검색창 위에 '사라지는 텍스트' 소스.txt
다운로드

 

검색창 위에 '사라지는 텍스트' 소스의 단점3

 

위에 보이는 화면에서 빨간색으로 줄이 그어진 부분이 '사라지는 텍스트'의 소스입니다. 삽입하는 위치는 기존 검색창소스의 'article_seach_field' 에 있는 'onkeypress'바로 앞부분이에요. 

 

value라는 부분에는 보여지게 할 텍스트를 동일하게 써야겠죠. 그리고 바로 밑에 있는 'article_seach_submit'에서는 검색버튼에 표시되는 글자를 변경할 수 있습니다. 

 

원래는 '검색'이라고 표시되었는데 '클릭'이라고 변경시켜 적용했었죠.

 

검색창 위에 '사라지는 텍스트' 소스의 단점4

 

그런데 이 소스를 적용후에는 곁으로는 괜찮아 보여서 만족스러웠지만..위와 같은 '단점'이 생기더라구요 ㅠㅠ 사람들이 검색창에 검색어를 넣고 검색을 해야 정상인데, 그러지 않는 사람들도 있나봅니다. 

 

제가 입력해둔 텍스트 그대로 검색을 하다니...'검색해보세요'라고 입력해뒀는데..검색수가 무려 25번이었네요. 

검색창 위에 '사라지는 텍스트' 소스를 적용하려고 하는 분들은 이런 단점도 생길 수가 있으니까 꼭 참고하세요~

그리드형