다음 위젯을 적용하다보면 블로그 스킨과 어울리질 않아서 좀 망설여지는 경우가 있습니다. 요번에 스킨을 바꾸면서 저 역시 느꼈던 부분인데요.
그럴때 사용하면 편리한 기능이 바로 HTML 소스퍼가기 입니다. 간단히 말해서, 드래그앤드랍 방식이 아닌 HTML 소스를 직접 받아와서 원하는 위치와 스타일을 적용하는 기능이지요.
사진출처: 위젯뱅크 화면캡춰
이를 티스토리의 사이드바에서 이용할 때는 HTML 배너출력 이라는 항목을 이용하면 됩니다.
사용중인 사이드바에 HTML 배너출력 항목을 추가하고, 소스부분에 위에서 가져온 코드를 입력하면 됩니다. 이때, 코드 앞뒤에 다른 태그를 추가로 삽입하여 원하는 디자인을 구축할 수 있습니다.
참고로, 사이드바 설정은 관리자->스킨->사이드바 설정 에서 하실수 있습니다.
다음은 적용한 결과 입니다. 두개의 라운드 시계가 삽입되어 있는데요, 위쪽이 HTML 소스와 HTML 배너를 이용한 것이구요, 아래쪽은 단순 퍼가기 후에 사이드바에서 드래그앤드랍으로 붙인 것입니다.
위쪽 시계에는 다른 사이드바 항목들과 일체감을 주기위해 스킨에서 제공하는 배경 및 테두리를 붙였습니다. 첨에 아래 시계처럼 단순 붙이기를 한 후에는 뭔가 어울리지 않는 듯 보여서 좀 이상했는데, 위처럼 하고 나서 보니 다른 항목들과 일체감을 가지게 되어서 한결 자연스러워진 느낌이 드네요..
참고로, HTML 배너출력을 붙이면 기본적으로 아래와 같은 HTML 형태로 사이드바 항목이 만들어 집니다.
<div class='module module_plugin'>
<!-- 사용자가 입력한 코드 -->
</div>
따라서, 디자인을 정확하게 맞춰주기 위해서는 module과 module_plugin이라는 클래스에 대한 스타일값을 스타일시트(관리자->스킨->HTML/CSS편집->style.css)에 추가해 주어야 합니다.
그외에 HTML 소스퍼가기를 이용하면 사이드바가 아닌 곳에도 위젯을 붙일 수 가 있습니다. 이때는 스킨파일(관리자->스킨->HTML/CSS편집->skin.html)의 원하는 위치에 복사해간 코드를 추가해 주면 됩니다.
'IT 이야기 > 블로그 & HTML' 카테고리의 다른 글
| 자주 안보는 목록은 드롭다운박스로 바꾸자 (10) | 2009/02/19 |
|---|---|
| HTML 태그의 `title` 속성 활용하여 공간을 효율적으로 사용하기 (9) | 2009/02/19 |
| 위젯 적용시에 스타일 바꾸기 - HTML 소스퍼가기 (4) | 2009/02/18 |
| 스킨 변경 및 적용 완료: Life Is Mono (Light) (13) | 2009/02/17 |
| 메타사이트 추천, RSS 구독 버튼 by Krang (8) | 2009/02/05 |
| 이용중인 메타 블로그들 (0) | 2009/02/04 |
댓글을 달아 주세요
사이드바가 개별로 분리디자인된 스킨은 디자인을 통일시켜주려면 저런걸 해야되서 불편하지요 ;ㅁ;
그르게요... 이뻐서 좋긴 했는데, 덕분에 삽질좀 했네요..
자유롭게 가져다 붙이기에는 디자인이 단순한게 편하긴 하죠.. ^^
그런데 파이어폭스에서 댓글이 안보이네요 ;;; 스킨 뭐가 잘못된 걸까요...
인터넷 익스플로러는 잘 보이는 것 같은데...
헉... 감사합니다.
덕분에 심각한 뻑 하나 잡았네요...
아마 스타일시트를 해석하는 방식이 FF와 IE가 서로 달랐나 봅니다. 에궁..
글꼴 설정을 바꾸면서 뭔가가 충돌이 났던거 같네요.
암튼 지금은 잘 됩니다. ^^