캐나다 워킹홀리뎅/생활정보 페이지
캐나다 Hello, Canada!
캐나다 Hello, Canada!




얼마전에 블로그 스킨을 손 봤습니다. 블로그 타이틀 부분인데요. 원래는 하늘에 구름이 떠다니는 깔끔한 그림이었습니다. 하지만 뭔가 아쉽더라구요~ 뭐랄까... 공간을 더 알차게 활용하고 싶은 마음? ^^; 그래서 확 바꾸기로 마음먹었습니다!!



<이전 타이틀 이미지> 



<이번에 바꾼 타이틀 이미지>



짜란~ 처음에 바꿔놓고 혼자서 만족스러워가지고 흐믓해 했었지요. ㅋ 그리고 이웃 분들이 칭찬한마디씩 해주시니 더 기분이 좋네요.ㅋㅋㅋ 변신 성공-ㅅ-V  그리고 제가 '재주'가 있으시다고 하시는 분도 계셨는데... 움찔; 찔끔; .... -ㅅ-; 그래서 이렇게 제 타이틀의 비밀아닌 비밀을 공개합니다. -ㅅ-;; 이번에는 제 블로그 타이틀을 포털 사이트의 메인과 한번 비교해서 보시겠습니다. 










으흠................. -ㅅ-;
눈치 채셨나요? ㅎㅎㅎㅎㅎㅎㅎㅎㅎ

네, 다음과 네이버가 퓨전했습니다. 제가 원래 짜집기를 좀 잘 하거든요.. 
대학교 때 레포트도... 쿨럭; -ㅅ-;

그럼 어떤 것들이 섞였는지 아래를 한 번 보시죠. 원래 포털 사이트 이미지랑 비교해 보세요. ^^:



< >

아주 잘 섞었지 않습니까? 갑자기 중국 짝퉁 명품이 생각나는군요. -ㅅ-;;  ㅎㅎㅎㅎㅎ 




1. 색깔
저도 나름 포토샵, 일러스트레이터, 플래시 조금 가지고 놀아봤지만, 색깔이 제일 어려운 부분인데요. 다음 로고의 색깔이 이쁘기 때문에 스포이드로 쪽 빨아서 쓰니깐 딱 좋네요. ㅋ 역시 색깔만 잘 써도 확연히 다른 결과가 나오니... 이런식으로 많이 활용해야겠습니다. ㅎㅎ 웹상에서 사용되는 색깔은 저작권이 없지 않나요? ㅎㅎ 그리고 메이플 잎은 평소에 파비콘 쓰던 이미지인데 아주 깔끔하게 어울리네요. 흐믓.. ㅋ

2. 검색창
검색창의 크기나 모양은 네이버가 더 마음에 들어서 포토샵에서 그대로 겹쳐놓고 그렸습니다. 다음은 모양도 타원형이고 개인적으로 마음에 들지 않더군요. 하지만 색깔이 역시나 마음에 들어서, 네이버 검색창 모양 다음 검색창의 색깔을 입혔습니다. 네이버도 깔끔하지만 파란색 계통이 더 시원하고 마음에 드네요. ㅎ 

3. 메뉴 
본문이랑 사이드바랑 합치면 총 폭이 포털 보다 블로그가 더 크더군요. 크기를 포털크기 기준으로 만들어서 블로그에 적용하니조금 공간이 남아 보이긴 하지만 가운데로 맞추니 균형감이 나쁘지 않네요. 역시 메뉴모양은 네이버랑 비슷하게 만들고 색깔은 다음껄 가져왔지요. 그런데 스포이드가 정확하게 안 맞아떨어지는지... 다음 메뉴가 제 메뉴보다 조금 더 가볍고 밝아 보이네요. ㅎ 그래도 나쁘지 않아 만족합니다.  아, 메뉴만들면서 느낀건데... 완전 귀찮더군요. ㅡㅡ; 메뉴 버튼 하나마다 폭이 다르니 포토샵에서 캔버스 사이즈 조절해서 저장해줘야 되니... 처음엔 그냥 길게 만들어서 잘라 썼는데, 버튼 이미지 테두리에 어두운 색깔이 끼더라구요. 똑같은 색깔의 메뉴들이 깔끔하게 연결안되고, 더러워 보이더라구요. 쩝..그래서 일일이 다 캔버스 조정해서 하니... 귀차니즘.. 아놔. ㅎㅎ 메뉴 버튼 만들기가 이렇게 귀찮은줄 처음 알았네요. ㅎ

4. 광고
검색창 밑에 구글 애드센스 단위링크를 하나 넣었는데요. 다음이나 네이버에서는 인기 검색어를 넣어놓지만 저는 광고를 넣어봤지요. ㅋㅋ 하지만... 몇일 안됐지만 아무도 안 누르는... ㅎㅎ 그냥 달아놓은거니까 한달정도 놔둬보고, 나중에 다른 쪽으로 활용해봐야겠습니다. ㅎ 

5. html, css 소스 코드
제가 스스로 코딩할 능력은 안되기 때문에... 티비님이 공개하신 스킨팁에서  다 배워왔지요. ㅎㅎㅎ -0-; 저는 이미지 바꾸고, 구글 애드센스 넣고, 검색창에 글자 미리 넣어놓는거 밖에... ㅎㅎ 어짜피 그림바꾸고, 위치 조정하는게 전부이기 때문에 티비님 블로그 팁 보시면 아주 쉽게 따라하실 수 있습니다. 그리고 티비님의 스킨 팁에는 티비님이 쓰시는 mono스킨에 대한 종합적인 팁이 있기 때문에, 혹시 초보분들이나 스킨을 뭘로 할지 고민이신 분들은 따라하시면 아주 좋습니다. 무작정 따라하기만 해도 되거든요. ㅋ 응용하시면 더 좋겠지만요. 다시 한 번 티비님께 감사를.. (__ )

티비님의 검색창,메뉴 꾸미기 팁 [바로가기]

  아, 검색창에 미리 글자 넣어두는 코드 juo님 블로그 갔다가 사용하고 계시길래 소스보기 해가지고 배워왔습니다. 단순히 '검색'이나 'Search'라고 써놔도 상관없겠지만, 저 처럼 하고 싶은 말, 알리는 말 써놔도 좋을거 같네요. ^^

주오님 스킨 관련글 [바로가기]


[검색창에 미리 글자 넣기]
<s_search>
<label for="search">search</label>

<!--  
<input type="text"  name="[##_search_name_##]" value="[##_search_text_##]" onkeypress="if (event.keyCode == 13) { [##_search_onclick_submit_##] }"/>
-->

<input type="text" name="[##_search_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="[##_search_onclick_submit_##]" 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개까지 블로그 개설이 가능해서 테스트용 블로그 하나 만들어서 원래 블로그랑 스킨 똑같이 입혀놓고 테스트 하니 정말 편하고 안전하더군요. ㅋ 이번에 처음 해봤는데 앞으로 애용할거 같아요. ^^;

오늘도 읽어주셔서 감사합니다. 좋은하루 되세요~ ^^



캐나다 워킹홀리데이/생활정보/미드/영어!
페이스북 페이지
캐나다 워킹홀리데이/생활정보
캐나다 관광비자/취업비자/LMO/주정부이민/영주권 질문과답변 블로그
캐나다 취업비자/관광비자/LMO
주정부이민/영주권관련 블로그

질문환영! 자유로운 댓글 남겨 주세요! 욕설, 비방은 삭제합니다.

  1. ㅎㅎ 첨에 네이버를 따라한 스킨을 보고 색다르다고 생각했는데
    이제는 퓨전까지 등장했군요.
    독특합니다. ^^

  2. 나는 별로 맘에 안 드심
    daum보다 왠지 칙칙해 보여 ㅋㅋ

  3. 예전 블로그보다 훨씬더 깔끔하고~
    눈에 잘 들어오는것 같아요~!

  4. 멋져요`~ ^^
    전 아직 스킨 꾸미기 내공이 부족해 ㅜㅜ
    댓글창도 못바꾸고 있다는..ㅎㅎ
    잘 보고갑니다. 행복한 하루되세요^^

    • 저도 맨날 따라한답니다 ㅎ
      티비님을 비롯해서 스킨 팁 공유하시는분들 많으니,
      하나씩 천천히 따라하시면 될거에요. 바쁘셔서 못하시는듯. ㅎㅎ
      좋은 하루 되세요~~

  5. 우왕 멋집니다.짝퉁이 아니라 새로운 창작이죠 ㅎㅎ
    저도 저렇게 만들어 볼까 생각해봅니다.ㅎㅎ
    확 틀려보여요.깔끔도 하고 멋집니다. ^^

    • 오옷.. 창작!으로 바주셔서 감사합니다.
      예로부터 모방은 창조의 어머니라고... ㅡㅡ;

      피터님 변신을 기대해 볼게요. ㅋ

  6. 멋지네요. 다음과 네이버를 섞으시는 센스...
    저도 소스 좀 받아보고 싶어요

    cultpd@empal.com

    • 감사합니다. ㅎ

      8월님 블로그 이미 잘 꾸며놓으셨는데요? ㅎ
      신문 포털 사이트 같네요 ㅎ

      필요하시다면 보내드릴수 있지요
      단, 이용하신다면 티비님이랑 제 블로그
      링크 하나 걸어주세요.

      블로그 제일 하단에 카피라이트 부분에.. ^^
      Designed by Tistory, TB, 닉쑤 이렇게.. ^^;
      (저는이미지만 바꿔서, 소스만 쓰시고 이미지는 안 쓰시면 제 블로그 링크는 안 넣으셔도 됩니다. ^^)

    • 보내드렸어요~

  7. 우와~ 닉쑤님도 능력자 셨군요~
    멋지네요~
    네이버보다 다음필이 더 나는것 같아요~

  8. 재미있는 시선으로 보셨네요~
    실제로 퓨젼하면, 검색량이 엄청 날듯해요. ^^
    초대형 검색사이트~

  9. 오호 정말 괜찮은데요?
    좋은 아이디어 같아요. 제것도 함 만져볼까 하지만 >.<

    • 감사합니다.ㅎ

      이미 블로그 잘 꾸며놓으셨는데요? ㅎ

      저도 메뉴에 광고 넣을까 하다가..

      사실 검색창 밑에 넣어도 수익은 전혀 없어서 ㅎㅎ

      조금씩 보완해 나가는게 좋을거 같아요.

      저도 이렇게 하다보면 제 스타일을 찾겠지요.
      아직 못 찾아서 계속 이러고 있다는.. ㅎ

  10. @.@ ㅎㅎ 전 그냥 보면서 멋지다 라는 생각은 했었습니다 ^^;
    아주 깔끔하고 좋은 것 같아요.^^;; ㅎ

    • 말씀 감사합니다. ㅎ

      깔끔한건 마음에 드는데..

      제 블로그에 포털만큼 검색할 거리가 없어서

      포털 사이트만 따라했지... 크게 도움이 안되네요 ㅎ

      글이 이미 많이 쌓이신 분들에겐 좋을듯하지만.. ^^

  11. 대단한데요~~ 깜짝 놀랬어요 ㅋ

  12. 우와 이번 스킨 맘에 드느데요^^

  13. 근데 레뷰 누르면 닉쑤님의 컨텐츠 모음이 나타나는데요
    저는 왜 안나타날까요?
    혹시 파워리뷰어가 되어야 리뷰홈이 생기나요?

    • 제 레뷰버턴 링크 주소 보시면

      www.revu.co.kr/MyRevU/닉쑤 라고 돼있는데요.

      아마 제일뒤에 닉네임을 본인 revu닉네임으로 하시면 됩니다. ^^

      이거 어떻게 알았냐면..
      레뷰 글 목록에 보면 등록자 닉네임 클릭하면 집 모양 아이콘 뜨는데 그거 누르면 그사람이 등록한 글 전부 나오더군요. ^^

  14. 와... 정말 이것저것 잘 꾸미시네요 ㅎ 부럽습니다 ㅎ

  15. 닉쑤님 안녕하세요
    전 네이버 컨셉으로 바꿔 사용중인데
    다음과 네이버 퓨전컨셉을 사용하고 계시는군요 ^^
    반갑네요 ㅎㅎ

    한가지 부탁말씀드려도 될지요?
    제일 마지막에 남기신 글을 보니,
    이미지랑 소스 이용가능한지요?

    상단 메뉴바에 MAIN PROFILE TAG GUEST를 포함하여
    우측에 메뉴 삽입한 소스가 너무 괜찮네요
    부탁드립니다

    • 아, 그러시군요! 역시 앞서가는 분들은 어디에나.. ㅎ 이메일 주소 비밀글로 남겨주시면 제가 보내드리겠습니다. ^^ 포토샵 파일 통째로 드릴테니 본인 메뉴에 맞춰서 사용하시면 될 듯 합니다. ^^

  16. 눈물이 앞을 가립니다.너무 감사해요... 적용을 검초해보겠어요/
    헤드부분을 선물받은 디자인이라 크기를 조정하거던지 해서 고민 해볼께요

    • 눈물까지야... 제가 쓸라고 만든건데... ^^;;;; 소스랑 이미지 필요하시면 비밀글로 이메일 남겨주세요. 포토샵 파일째로 드릴게요. ^^

  17. 비밀댓글입니다

  18. 퓨전~

    어찌 이런 생각을 했을까요? ^^

    아주 재미있고 참신하고 특이합니다.

  19. 예전에, popeye라는 님이 이 컨셉의 스킨을 배포하신 적이 있습니다.
    네이버와 다음, 그리고 구글 등으로요..

    그런데 아쉽게도 티스토리 버전이 아니고, 텍스트큐브 버전입니다.
    http://popeye.textcube.com/745

    스킨 받아서 티스토리용으로 컨버터할까요 ㅎㅎ

    • 안녕하세요 juo님^^

      popeye님 블로그 가보니 네이버랑 똑같이 하셨네요.
      역시 처음일거라 생각지도 않았음. ㅋㅋ

      근데 네이버, 구글뿐이고 다음은 없네요.

      저는 이제 포탈은 그만 할려구요. 검색할 꺼리가 그닥 없어서.. ㅡㅡ;

      어떤 컨셉을 또 훔쳐;올지 고민중입니다. ㅋ
      방문 감사합니다~

    • 안 ㅈ무셨군요 ㅎ
      다음도 배포했었습니다. 제가 봤어요^^

      그나 저나 컨셉 찾기가 힘드네요 ㅎㅎ
      그래서 저는 티스토리 메인을 컨셉으로 했습니다.

      며칠 쓰려나.. 모르겠지만요..ㅋ

  20. 우와~~좋으시겠어요...
    블로그 스킨도 만들줄 아시구;;
    전 어떻게 만드는지 몰라서 그냥 대충~~하고 있습니다..
    제 친구는 포토샵으로 한다는데 전 포토샵할줄을 몰라서요(ㅠㅠ 제가 좀 컴맹;;)
    아무튼 부럽네요~~^^

    • ㅎ 저는 아직 스킨 '만들'수준은 안되구요;;

      다른분들이 만들어서 고맙게 공유해주신 것들을
      살짝살짝 바꿔서 사용하는 수준이지요. ^^;;