유용한 정보/블로그
다음과 네이버가 퓨전한다면?? 블로그 스킨, 포털 사이트 메인 따라잡기!
닉쑤
2010. 8. 18. 06:24
얼마전에 블로그 스킨을 손 봤습니다. 블로그 타이틀 부분인데요. 원래는 하늘에 구름이 떠다니는 깔끔한 그림이었습니다. 하지만 뭔가 아쉽더라구요~ 뭐랄까... 공간을 더 알차게 활용하고 싶은 마음? ^^; 그래서 확 바꾸기로 마음먹었습니다!!
<이전 타이틀 이미지>
▼
▼
▼
<이번에 바꾼 타이틀 이미지>
짜란~ 처음에 바꿔놓고 혼자서 만족스러워가지고 흐믓해 했었지요. ㅋ 그리고 이웃 분들이 칭찬한마디씩 해주시니 더 기분이 좋네요.ㅋㅋㅋ 변신 성공-ㅅ-V 그리고 제가 '재주'가 있으시다고 하시는 분도 계셨는데... 움찔; 찔끔; .... -ㅅ-; 그래서 이렇게 제 타이틀의 비밀아닌 비밀을 공개합니다. -ㅅ-;; 이번에는 제 블로그 타이틀을 포털 사이트의 메인과 한번 비교해서 보시겠습니다.
으흠................. -ㅅ-;
눈치 채셨나요? ㅎㅎㅎㅎㅎㅎㅎㅎㅎ
네, 다음과 네이버가 퓨전했습니다. 제가 원래 짜집기를 좀 잘 하거든요..
대학교 때 레포트도... 쿨럭; -ㅅ-;
그럼 어떤 것들이 섞였는지 아래를 한 번 보시죠. 원래 포털 사이트 이미지랑 비교해 보세요. ^^:
<
>
아주 잘 섞었지 않습니까? 갑자기 중국 짝퉁 명품이 생각나는군요. -ㅅ-;; ㅎㅎㅎㅎㅎ
1. 색깔
저도 나름 포토샵, 일러스트레이터, 플래시 조금 가지고 놀아봤지만, 색깔이 제일 어려운 부분인데요. 다음 로고의 색깔이 이쁘기 때문에 스포이드로 쪽 빨아서 쓰니깐 딱 좋네요. ㅋ 역시 색깔만 잘 써도 확연히 다른 결과가 나오니... 이런식으로 많이 활용해야겠습니다. ㅎㅎ 웹상에서 사용되는 색깔은 저작권이 없지 않나요? ㅎㅎ 그리고 메이플 잎은 평소에 파비콘 쓰던 이미지인데 아주 깔끔하게 어울리네요. 흐믓.. ㅋ
2. 검색창
검색창의 크기나 모양은 네이버가 더 마음에 들어서 포토샵에서 그대로 겹쳐놓고 그렸습니다. 다음은 모양도 타원형이고 개인적으로 마음에 들지 않더군요. 하지만 색깔이 역시나 마음에 들어서, 네이버 검색창 모양에 다음 검색창의 색깔을 입혔습니다. 네이버도 깔끔하지만 파란색 계통이 더 시원하고 마음에 드네요. ㅎ
3. 메뉴
본문이랑 사이드바랑 합치면 총 폭이 포털 보다 블로그가 더 크더군요. 크기를 포털크기 기준으로 만들어서 블로그에 적용하니조금 공간이 남아 보이긴 하지만 가운데로 맞추니 균형감이 나쁘지 않네요. 역시 메뉴모양은 네이버랑 비슷하게 만들고 색깔은 다음껄 가져왔지요. 그런데 스포이드가 정확하게 안 맞아떨어지는지... 다음 메뉴가 제 메뉴보다 조금 더 가볍고 밝아 보이네요. ㅎ 그래도 나쁘지 않아 만족합니다. 아, 메뉴만들면서 느낀건데... 완전 귀찮더군요. ㅡㅡ; 메뉴 버튼 하나마다 폭이 다르니 포토샵에서 캔버스 사이즈 조절해서 저장해줘야 되니... 처음엔 그냥 길게 만들어서 잘라 썼는데, 버튼 이미지 테두리에 어두운 색깔이 끼더라구요. 똑같은 색깔의 메뉴들이 깔끔하게 연결안되고, 더러워 보이더라구요. 쩝..그래서 일일이 다 캔버스 조정해서 하니... 귀차니즘.. 아놔. ㅎㅎ 메뉴 버튼 만들기가 이렇게 귀찮은줄 처음 알았네요. ㅎ
4. 광고
검색창 밑에 구글 애드센스 단위링크를 하나 넣었는데요. 다음이나 네이버에서는 인기 검색어를 넣어놓지만 저는 광고를 넣어봤지요. ㅋㅋ 하지만... 몇일 안됐지만 아무도 안 누르는... ㅎㅎ 그냥 달아놓은거니까 한달정도 놔둬보고, 나중에 다른 쪽으로 활용해봐야겠습니다. ㅎ
5. html, css 소스 코드
제가 스스로 코딩할 능력은 안되기 때문에... 티비님이 공개하신 스킨팁에서 다 배워왔지요. ㅎㅎㅎ -0-; 저는 이미지 바꾸고, 구글 애드센스 넣고, 검색창에 글자 미리 넣어놓는거 밖에... ㅎㅎ 어짜피 그림바꾸고, 위치 조정하는게 전부이기 때문에 티비님 블로그 팁 보시면 아주 쉽게 따라하실 수 있습니다. 그리고 티비님의 스킨 팁에는 티비님이 쓰시는 mono스킨에 대한 종합적인 팁이 있기 때문에, 혹시 초보분들이나 스킨을 뭘로 할지 고민이신 분들은 따라하시면 아주 좋습니다. 무작정 따라하기만 해도 되거든요. ㅋ 응용하시면 더 좋겠지만요. 다시 한 번 티비님께 감사를.. (__ )
티비님의 검색창,메뉴 꾸미기 팁 [바로가기]
아, 검색창에 미리 글자 넣어두는 코드는 juo님 블로그 갔다가 사용하고 계시길래 소스보기 해가지고 배워왔습니다. 단순히 '검색'이나 'Search'라고 써놔도 상관없겠지만, 저 처럼 하고 싶은 말, 알리는 말 써놔도 좋을거 같네요. ^^
주오님 스킨 관련글 [바로가기]
[검색창에 미리 글자 넣기]
<s_search>
<label for="search">search</label>
<!--
<input type="text" name="" value="" onkeypress="if (event.keyCode == 13) { }"/>
-->
<input type="text" name="" value="검색어를 입력하세요..." class="inputText no-textField" onKeyPress="if (event.keyCode == 13) { try{window.location.href='/search/' + document.getElementsByName('search')[0].value.replaceAll('%', '%25'); return false;}catch(e){} }" onblur="if (this.value == '') {this.value = '검색어를 입력하세요...';}" onfocus="if (this.value == '검색어를 입력하세요...') {this.value = '';}" />
<input value="검색" type="button" onclick="" class="submit"/>
</s_search>
</div>
<
>
=> 노란색 부분이 티비님의 원래 코드입니다. 그리고 분홍색이 수정할 코드입니다. 저처럼 주석처리 하시거나 삭제하신후 분홍색 부분을 붙여넣으시면 됩니다. 검색창에 들어갈 내용은 보라색으로 칠해놓은 '검색어를 입력하세요..' 이 부분입니다. 세군대 모두 똑같이 넣으셔야 됩니다.
[구글 단위링크 광고 원하는 위치에 넣기]
<div style="width:468px;height:15px;border:0px solid #d5d5d5; border-right:0px; position:relative; left:331px; top:37px;">
<!-- 애드 -->
구글 광고
<!-- 애드 -->
</div>
<
>
=> 보시다시피, <div> 하나 만들어서 스타일에 position값 넣어주시면 화면 속 원하는 위치에 넣으실 수 있습니다. 처음엔 어떻게 하는지 몰라서 한참 헤맸었는데요. 그냥 검색창 넣듯이 하면 되는군요. ㅎㅎ 그리고 position값을 absolute 로 하시면 모니터 해상도에 따라 위치가 달라지기 때문에 relative로 해주셔야 됩니다. 그러면 상대적으로 위치가 저절로 조절되더군요. left 값은 왼쪽기준으로 얼만큼 떨어져있는지를 나타내고, top 값은 화면 상단에서부터의 거리입니다.
▦ 마치며...
성공적인 퓨전을 시작으로 앞으로도 유명 사이트들을 참고해서 이쁜 타이틀을 종종 만들어 봐야겠습니다. 혹시나 소스 코드 필요하신분은 댓글 남겨주세요. 저랑 똑같은 위치에 안하실꺼면 소스코드는 그닥 필요가 없을거 같아서 생락했으니까요. 당근 이미지도 제 블로그 기준이니 필요없으실테고.. 그래도 필요하시면 알려주세요. ^^
아, 블로그에 새로운 걸 시도하실때는 테스트 블로그에서 미리 해보시고 원래 블로그에 적용하시는게 좋은거 같습니다. 스킨 바꾸다가 잘못되서 날라가버리거나 하면 큰일이니까요. ㅎ 티스토리는 하나의 계정에 3개까지 블로그 개설이 가능해서 테스트용 블로그 하나 만들어서 원래 블로그랑 스킨 똑같이 입혀놓고 테스트 하니 정말 편하고 안전하더군요. ㅋ 이번에 처음 해봤는데 앞으로 애용할거 같아요. ^^;
오늘도 읽어주셔서 감사합니다. 좋은하루 되세요~ ^^