얼마전에 블로그 스킨을 손 봤습니다. 블로그 타이틀 부분인데요. 원래는 하늘에 구름이 떠다니는 깔끔한 그림이었습니다. 하지만 뭔가 아쉽더라구요~ 뭐랄까... 공간을 더 알차게 활용하고 싶은 마음? ^^; 그래서 확 바꾸기로 마음먹었습니다!!
<이전 타이틀 이미지>
▼
▼
▼
<이번에 바꾼 타이틀 이미지>
짜란~ 처음에 바꿔놓고 혼자서 만족스러워가지고 흐믓해 했었지요. ㅋ 그리고 이웃 분들이 칭찬한마디씩 해주시니 더 기분이 좋네요.ㅋㅋㅋ 변신 성공-ㅅ-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개까지 블로그 개설이 가능해서 테스트용 블로그 하나 만들어서 원래 블로그랑 스킨 똑같이 입혀놓고 테스트 하니 정말 편하고 안전하더군요. ㅋ 이번에 처음 해봤는데 앞으로 애용할거 같아요. ^^;
오늘도 읽어주셔서 감사합니다. 좋은하루 되세요~ ^^
'유용한 정보 > 블로그' 카테고리의 다른 글
| 소셜댓글(Social Comments)을 달아보자~ DISQUS! Comments (2/2) (16) | 2010.08.20 |
|---|---|
| 소셜댓글(Social Comments)을 달아보자~ DISQUS! Profile (1/2) (13) | 2010.08.20 |
| 내 글 무단복사, 한눈에 확인하는 방법 - Tynt! (70) | 2010.08.18 |
| 다음과 네이버가 퓨전한다면?? 블로그 스킨, 포털 사이트 메인 따라잡기! (42) | 2010.08.17 |
| 티스토리 초대장 배포하다 중단한 사연 & 초대장에 대한 의문점. (43) | 2010.08.16 |
| 블로거에게 정말 필요한건? '휴일' vs '하루 25시간'?? (43) | 2010.08.15 |
| Picasa 슬라이드쇼로 깔끔하게 사진 정리하기. (1) | 2010.07.28 |
| 구글 검색기능으로 내 블로그 검색하기. 효과200%~ (6) | 2010.07.23 |
 페이스북 페이지캐나다 워킹홀리데이/생활정보 |  캐나다 취업비자/관광비자/LMO주정부이민/영주권관련 블로그 |
TAG 검색창,
검색창에 글자 미리 넣어 놓기,
구글애드센스,
네이버,
다음,
메뉴 버튼,
블로그,
블로그 꾸미기,
블로그 스킨,
블로그 팁,
타이틀 이미지,
포털사이트,
포토샵,
퓨전
질문환영! 자유로운 댓글 남겨 주세요! 욕설, 비방은 삭제합니다.
ㅎㅎ 첨에 네이버를 따라한 스킨을 보고 색다르다고 생각했는데
이제는 퓨전까지 등장했군요.
독특합니다. ^^
퓨전이 먹히는 시대 아닙니까...ㅎㅎ
이미 지났던가.. ㅡㅡ;
감사합니다. ^^
나는 별로 맘에 안 드심
daum보다 왠지 칙칙해 보여 ㅋㅋ
스포이드가 제대로 못 빨아들이나바 ㅎ
예전 블로그보다 훨씬더 깔끔하고~
눈에 잘 들어오는것 같아요~!
감사합니다~
티비님 덕분이지요. ㅋ
앞으로도 잘 부탁. -0-
멋져요`~ ^^
전 아직 스킨 꾸미기 내공이 부족해 ㅜㅜ
댓글창도 못바꾸고 있다는..ㅎㅎ
잘 보고갑니다. 행복한 하루되세요^^
저도 맨날 따라한답니다 ㅎ
티비님을 비롯해서 스킨 팁 공유하시는분들 많으니,
하나씩 천천히 따라하시면 될거에요. 바쁘셔서 못하시는듯. ㅎㅎ
좋은 하루 되세요~~
우왕 멋집니다.짝퉁이 아니라 새로운 창작이죠 ㅎㅎ
저도 저렇게 만들어 볼까 생각해봅니다.ㅎㅎ
확 틀려보여요.깔끔도 하고 멋집니다. ^^
오옷.. 창작!으로 바주셔서 감사합니다.
예로부터 모방은 창조의 어머니라고... ㅡㅡ;
피터님 변신을 기대해 볼게요. ㅋ
멋지네요. 다음과 네이버를 섞으시는 센스...
저도 소스 좀 받아보고 싶어요
cultpd@empal.com
감사합니다. ㅎ
8월님 블로그 이미 잘 꾸며놓으셨는데요? ㅎ
신문 포털 사이트 같네요 ㅎ
필요하시다면 보내드릴수 있지요
단, 이용하신다면 티비님이랑 제 블로그
링크 하나 걸어주세요.
블로그 제일 하단에 카피라이트 부분에.. ^^
Designed by Tistory, TB, 닉쑤 이렇게.. ^^;
(저는이미지만 바꿔서, 소스만 쓰시고 이미지는 안 쓰시면 제 블로그 링크는 안 넣으셔도 됩니다. ^^)
보내드렸어요~
우와~ 닉쑤님도 능력자 셨군요~
멋지네요~
네이버보다 다음필이 더 나는것 같아요~
아무래도 색깔을 다 가져왔다 보니.. ㅎ
감사합니다.^^
재미있는 시선으로 보셨네요~
실제로 퓨젼하면, 검색량이 엄청 날듯해요. ^^
초대형 검색사이트~
그런일은 없을꺼 같지만 두 포털이 합치면.. 어머어마 ㅋ
오호 정말 괜찮은데요?
좋은 아이디어 같아요. 제것도 함 만져볼까 하지만 >.<
감사합니다.ㅎ
이미 블로그 잘 꾸며놓으셨는데요? ㅎ
저도 메뉴에 광고 넣을까 하다가..
사실 검색창 밑에 넣어도 수익은 전혀 없어서 ㅎㅎ
조금씩 보완해 나가는게 좋을거 같아요.
저도 이렇게 하다보면 제 스타일을 찾겠지요.
아직 못 찾아서 계속 이러고 있다는.. ㅎ
@.@ ㅎㅎ 전 그냥 보면서 멋지다 라는 생각은 했었습니다 ^^;
아주 깔끔하고 좋은 것 같아요.^^;; ㅎ
말씀 감사합니다. ㅎ
깔끔한건 마음에 드는데..
제 블로그에 포털만큼 검색할 거리가 없어서
포털 사이트만 따라했지... 크게 도움이 안되네요 ㅎ
글이 이미 많이 쌓이신 분들에겐 좋을듯하지만.. ^^
대단한데요~~ 깜짝 놀랬어요 ㅋ
점점 다가오시나요? ㅋ
저도 언젠간 재아님처럼 자리를 잡겠죠.
그때까지는 계속 변덕일듯.;
우와 이번 스킨 맘에 드느데요^^
감사합니다~~^^
저도 맘에 드는데.. 언제 또 바꿀지 모르는.. ㅎ
사실 스킨이라기보단 타이틀만 바꾼거죠. ^^
근데 레뷰 누르면 닉쑤님의 컨텐츠 모음이 나타나는데요
저는 왜 안나타날까요?
혹시 파워리뷰어가 되어야 리뷰홈이 생기나요?
제 레뷰버턴 링크 주소 보시면
www.revu.co.kr/MyRevU/닉쑤 라고 돼있는데요.
아마 제일뒤에 닉네임을 본인 revu닉네임으로 하시면 됩니다. ^^
이거 어떻게 알았냐면..
레뷰 글 목록에 보면 등록자 닉네임 클릭하면 집 모양 아이콘 뜨는데 그거 누르면 그사람이 등록한 글 전부 나오더군요. ^^
와... 정말 이것저것 잘 꾸미시네요 ㅎ 부럽습니다 ㅎ
저는 따라하는거만 잘해서 ㅎㅎ
어쨋든 감사합니다. 말씀하신게 부끄럽지 않게 할게요 ㅎ
닉쑤님 안녕하세요
전 네이버 컨셉으로 바꿔 사용중인데
다음과 네이버 퓨전컨셉을 사용하고 계시는군요 ^^
반갑네요 ㅎㅎ
한가지 부탁말씀드려도 될지요?
제일 마지막에 남기신 글을 보니,
이미지랑 소스 이용가능한지요?
상단 메뉴바에 MAIN PROFILE TAG GUEST를 포함하여
우측에 메뉴 삽입한 소스가 너무 괜찮네요
부탁드립니다
아, 그러시군요! 역시 앞서가는 분들은 어디에나.. ㅎ 이메일 주소 비밀글로 남겨주시면 제가 보내드리겠습니다. ^^ 포토샵 파일 통째로 드릴테니 본인 메뉴에 맞춰서 사용하시면 될 듯 합니다. ^^
눈물이 앞을 가립니다.너무 감사해요... 적용을 검초해보겠어요/
헤드부분을 선물받은 디자인이라 크기를 조정하거던지 해서 고민 해볼께요
눈물까지야... 제가 쓸라고 만든건데... ^^;;;; 소스랑 이미지 필요하시면 비밀글로 이메일 남겨주세요. 포토샵 파일째로 드릴게요. ^^
비밀댓글입니다
소스랑 이미지 보내드렸습니다. 도움이 되길 바래요. ^^
퓨전~
어찌 이런 생각을 했을까요? ^^
아주 재미있고 참신하고 특이합니다.
제가 응용은 조금 하는듯해요.. 창조는 어렵고.. ㅎㅎㅎㅎ 농담입니다; 칭찬 감사해요~ ㅋ 춤줘야겠음. ㅎ
예전에, popeye라는 님이 이 컨셉의 스킨을 배포하신 적이 있습니다.
네이버와 다음, 그리고 구글 등으로요..
그런데 아쉽게도 티스토리 버전이 아니고, 텍스트큐브 버전입니다.
http://popeye.textcube.com/745
스킨 받아서 티스토리용으로 컨버터할까요 ㅎㅎ
안녕하세요 juo님^^
popeye님 블로그 가보니 네이버랑 똑같이 하셨네요.
역시 처음일거라 생각지도 않았음. ㅋㅋ
근데 네이버, 구글뿐이고 다음은 없네요.
저는 이제 포탈은 그만 할려구요. 검색할 꺼리가 그닥 없어서.. ㅡㅡ;
어떤 컨셉을 또 훔쳐;올지 고민중입니다. ㅋ
방문 감사합니다~
안 ㅈ무셨군요 ㅎ
다음도 배포했었습니다. 제가 봤어요^^
그나 저나 컨셉 찾기가 힘드네요 ㅎㅎ
그래서 저는 티스토리 메인을 컨셉으로 했습니다.
며칠 쓰려나.. 모르겠지만요..ㅋ
우와~~좋으시겠어요...
블로그 스킨도 만들줄 아시구;;
전 어떻게 만드는지 몰라서 그냥 대충~~하고 있습니다..
제 친구는 포토샵으로 한다는데 전 포토샵할줄을 몰라서요(ㅠㅠ 제가 좀 컴맹;;)
아무튼 부럽네요~~^^
ㅎ 저는 아직 스킨 '만들'수준은 안되구요;;
다른분들이 만들어서 고맙게 공유해주신 것들을
살짝살짝 바꿔서 사용하는 수준이지요. ^^;;