Naerro's Drawer

티스토리에서 새로 선 보인 스킨으로 갈아 탔습니다.
저도 대세를 쫓아서 3단 스킨으로 바꾸게 되었는데요. 바꾸고 난 후 블로그 포스팅 타이틀 부분이 뭔가 허전하게 느껴 지더군요. 그래서 예전에 사용하던 바(Bar) 타입의 시계를 블로그 포스팅 타이틀 부분에 넣어 보면 괜찮을거 같다는 생각에서 시계 설치 작업을 했습니다. 많은 블로거들께서 구글 애드 센스, 다음 애드 클릭스, 올블로그 올블릿 같은 것들을 설치 하셔서 그것들이 어떤 포스트를 읽더라도 항상 표시되게 해 놓으셨습니다.
전 파워 블로거가 아니라서 그런것들은 설치 하지 않았지만 시계는 항상 표시되었으면 좋겠다는 생각에 포스트 타이틀 부분에 시계를 설치 하게 되었습니다.
혹시라도 '타이틀 부분의 시계 설치 방법'을 궁금해 하시는 블로거 분들과 공유 하고자 글을 작성 해 봤습니다. 그림이 많아서 포스트 내용이 좀 길듯 합니다

제가 하려고 하는 작업은 위 그림의 빨간 박스 부분에 시계를 삽입하려고 합니다.
그럼 시작 하도록 하겠습니다.

Ctrl + O 를 눌러서 'www.clocklink.com' 입력 또는 제 블로그 포스트 타이틀에 설치 되어 있는 시계 부분에 마우스를 가져다 놓고 클릭하면 시계 위젯을 제공해 주는 사이트로 이동을 하게 됩니다.


시계 위젯 제공 사이트로 이동을 하게 되면 위의 그림에 보이는 Gallery 탭을 선택합니다.

다른 페이지로 이동을 하게 되면 페이지 중간 부분에 위의 그림과 같은 부분이 있습니다. 어떤걸 선택 하는지는 아시겠죠? Digital 이라고 되어 있는 빨간 박스 부분을 선택 합니다. 그러면 페이지가 아래와 같이 바뀝니다.

물론 Clocklink 라는 이 사이트에서 제공해 주는 시계 위젯은 위의 그림보다 많습니다. 그러나 제 개인적으로 위의 그림에서 보이는 바와 같이 바(Bar) 타입의 시계를 선호해서요. 바(Bar) 타입이 포스트 타이틀 부분에 설치해도 어울릴거 같기도 하고요. 전 하단 왼쪽 부분에 있는 Name: 5003 모델로 설치 하기로 하고 View HTML tag 라는 버튼을 클릭 했습니다.

시계 위젯의 색상, 시간대, 크기, 날짜 형식, 시간 형식을 선택할 수 있게 되어 있군요.
각 항목을 선택하게 되면 그에 따라서 소스가 자동적으로 생성이 됩니다.
'<script src=' 이라고 되어 있는 중간 부분의 소스를 처음 끝까지 마우스로 드래그 한 후 복사를 합니다.
소스가 손에 들어왔으니 이제는 그 소스를 설치 하는 일만 남았네요.

소스를 삽입할 위치를 선택해야 합니다.
일단 자신의 블로그에 로그인 한 후 '관리자 > 스킨 > HTML/CSS  편집' 으로 이동을 합니다. 그러면 자신의 블로그 소스를 볼 수 있는데요....여기서 skin.html 이라고 되어 있는 부분의 소스 중 '<div class="article_info">' 라고 되어 있는 부분을 찾습니다. 위의 그림에 나온 빨간 박스 부분을 보시면 블로그 포스트의 타이틀과 생성 일자, 그 포스트가 속한 카테고리가 화면에 표시 되도록 되어 있는 부분 입니다. 즉, 아래 그림으로 보이는 부분의 소스인거죠.

그 다음은 아까 복사한 소스를 붙여 넣기 할 차례 입니다.
붙여 넣기를 할때 복사한 시계소스의 앞 뒤쪽으로 '<span class="clock"> 복사한 소스 </span>' 의 형태로 붙여 넣기를 합니다. 붙여 넣기 작업이 된 후에는 아래 그림처럼 보이게 됩니다.

위의 그림을 클릭하셔서 크게 보신 후 정확한 위치에 붙여 넣기를 하세요.중요합니다.
붙여 넣기 후 페이지 맨 밑에 있는 '미리보기' 버튼을 눌러서 시계 위젯이 원하는 위치에 표시 되는지 확인 합니다.


흠..시계가 표시가 되기는 하지만 제가 원하는 위치에 있지는 않는 군요.
전 타이틀 오른쪽 끝부분에 표시되기를 원했는데 말이죠.
그렇다면 여기서 'skin.html' 이 아닌 그 아래쪽에 있는 'style.css' 를 편집해야 할 차례 입니다.
'style.css' 를 편집 하기 귀찮으시면 '&nbsp;'를 아주 많이 입력해서 시계 위젯을 오른쪽으로 이동시켜도 되기는 합니다만 전 'style.css'를 편집하는걸 권합니다. 그게 소스 관리가 편하거든요.^^
역시 '관리자 > 스킨 > HTML/CSS 편집'으로 이동을 한 후 'skin.html' 의 아래쪽에 있는 'style.css' 창으로 갑니다.

한 숨 좀 돌리고요....^^ 휴~~~~~~~~~~~~~~~~~

아까 시계위젯 소스를 'skin.html' 부분에 삽입 작업을 할 때 소스 앞 뒤로 '<span class="clock">.....' 이라고 한 후 시계 소스를 입력 하신걸 기억 하실 겁니다. 그 소스 부분을 잘 보시면....
'<div class="article_head">...<div class="article_title">...<div class="article_info">' 이런 부분이 우리가 설치한 '<span class="clock">...'부분을 둘러 싸고 있는게 보이실 겁니다.
이게 일종의 부모 자식 같은 관계인 겁니다. 즉 맨위에 있는 "article_head" 부분의 속성을 그 밑에 있는 "article_title" 이 상속을 받고 "article_title" 부분에서 새로 정의된 속성은 그 밑으로 전해진다고 생각하시면 됩니다.

각설하고...새로 붙여 넣기한 '<span class="clock">....' 라는 것의 속성만 정의 하면 시계가 원하는 위치로 갈겁니다. 'style.css'에서 "article_head" 라는 부분을 찾아보면 아래 그림 처럼 보입니다.


위의 그림과 같은 부분 밑에 빨간 박스가 쳐져 있는 곳의 내용을 타이프 합니다.
'style.css' 에서 찾아서 하셔야 됩니다.
'.article_head .article_title .artitle_info .clock {float:right:}' 이렇게 말입니다. 각 글자 앞에 있는 점('.')을 빼지 마시고 다 입력하세요. '{float:right;}' 이 부분이 그 앞쪽에 나열된 이름을 가지고 있는 것을 '오른쪽'으로 정렬 하기를 원한다는 부분입니다.
타이프를 다 하셨으면 '미리보기' 버튼을 누르셔서 확인해 보세요.


시계 위젯이 약간 밑으로 쳐져 있기는 하지만 (솔직히 나란히 정렬시키는 방법은 모르겠어요..ㅠㅠ) 제가 원했던 위치에 표시가 되는군요..^^
시계 위젯이 원했던 위치에 표시가 되므로 '저장하기' 버튼을 누르고 블로그 본문으로 이동하시면 됩니다.

포스트 내용이 엄청 길어 졌네요.
제가 글재주나 말재주가 별로 없어서요.
끝까지 읽어 주셔서 감사합니다. 즐거운 블로깅 하세요.^^

관련글
[map] - 티스토리 블로그에 파비콘 적용이 안되는 경우
[map] - 올블로그(allblog)의 올블릿(allblet) 설치 방법
[map] - 블로그에 시계를 설치해 보세요.
[map] - 유니세프 배너 달기 (부제:네트웍 배너 달기)
[map] - 서울시 문화행사 위젯을 달았습니다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.