블로그 사이드바를 내맘대로! - 아이콘 달기

blogtip posted by Ann_


드디어드디어!!! 블로그를 전면 개편했어요!
스킨을 직접 만들려고 이리저리 머리 굴렸었는데...
우연히 제가 원하는 스탈의 스킨이 있어서 그냥 이걸 소스 수정해서 사용하기로 했죠..ㅎㅎ

우선 스킨이 깔끔하니 너무 이쁘네요..
html을 여기저기 들쑤시면서 수정한 저의 작품(50%만..ㅎㅎ)에 감탄하는 중입니다..





오래전부터 제일 추가하고 싶었던 '트위터, 다음뷰 구독, 즐겨찾기 추가, RSS' 아이콘을 드디어 사이드바 맨 위에 달게되어서 너무 좋아요..헤헤..

아이콘 크기가 다 같았으면 좋았을텐데...좀 아쉬운감이 있네요..
어쩔 수 없어요...트위터나 다음뷰는 각각 해당 사이트에서 소스를 퍼온거거든요..ㅠ^ㅠ


뭐...어쨌든!

사실 아이콘 4개를 어떻게 이쁘게 정렬할 수 있을까 하다가 생각해낸게 표로 작업하는거였어요..
제가 html을 자유자재로 수정할만큼의 능력자가 아니므로 블로그 글쓰기에서 작업을 했답니다..ㅎㅎ

우선..표를 열 4, 행 2로 만들었어요.





테두리 색과 굵기는 그대로 두세요....왜냐면...굵기가 0으로 지정이 안되더라구요^^;;;
오른쪽 위에 있는 HTML 박스에 체크하면





요런 어지러운 테그가 잔뜩! 있을거에요..ㅎㅎ
여기서 1px라고 되어있는 것을 전부 0px으로 바꿔주시면 테두리 굵기는 0으로 지정이 되구요~
&nbsp;<- 이걸 지우고 아이콘 테그 및 글씨를 넣어주면 되요^^

그리고 표 크기를 수정하고 싶으시면

TABLE style="BORDER-COLLAPSE: collapse" cellSpacing=1 cellPadding=1 width=718 bgColor=#ffffff

이 테그에서 width를 수정해주세요..저는 사이드바를 300으로 지정했으므로 표도 300으로 수정하였어요^^


아이콘은 위에서 언급했듯이 각각 사이트에서 가져왔어요..
트위터 아이콘은 트위터 미국 홈페이지 아랫쪽 Goodies를 클릭하시면 아이콘 및 위젯을 가져올 수 있구요~(소스 포함)
다음 뷰는 다음뷰 홈페이지나 공식 블로그에서 가져오실 수 있으세요^^(역시 소스 포함..ㅎㅎ)

즐겨찾기 테그는

<a href="javascript:window.external.addfavorite ('블로그주소', '블로그제목');"><img src="아이콘주소"></a>

이렇게 쓰시면 되요^^



마지막으로..
저는 맑은고딕을 너무너무 좋아하는데 가독성을 따졌을땐 썩 좋은 글꼴은 아니라서 블로그 전체에 사용하지 못하는 것이 너무 슬퍼요..
대신..아이콘 밑에 적은 글씨는 맑은고딕으로 포인트 주었어요..ㅎㅎ

<SPAN style="FONT-FAMILY: 맑은 고딕">내용</SPAN>

밑줄 그은 부분에 맑은 (한칸 띄고) 고딕 이라고 적어주되요
(혹여 소스가 없다면 </TD> 앞에 이 소스 통째로 넣어주세요^^)


오목조목 테그 수정이 다 되었다면

<div id="sidebar"> ← 사이드바 시작하는 부분

다음에 아이콘 표 테그를 붙여주시면 끝~~


하아..이 두서없는 설명이란..

혹시 궁금하신점 있으시면 댓글이나 방명록에 남겨주세요^^

저작자 표시 비영리 변경 금지
크리에이티브 커먼즈 라이선스
Creative Commons License