블로그 타이틀 바에 마음데로 링크 걸기~

Infomation/Computer 2008.03.30 22:37
안녕하세요. ㅇㄷㅇ님의 질문에 답변을 드리겠습니다.

ㅇㄷㅇ님의 질문 >>
안녕하세요 태그 질문이 있어서 글을 남깁니다.
제가 블로그 시작한지 얼마 안되서 그런대요 타이틀바에 사진을 집어넣고 그 타이틀 바를
누르면 링크가 연결되게(보통 블로그 메인)하려면 어떤 태그를 수정해야되나요?
style.css에서 title에 넣은 사진 파일이름은 찾았는데
이걸 어떻게 수정해야 되는지 잘모르겠습니다.

네... 질문의 요지는 타이틀에 자신만의 링크를 어떻게 걸 수 있느냐... 라는 것이군요.

일단 관리자 페이지로 들어가셔서

스킨 > HTML/CSS 편집  메뉴로 들어가시면 수없이 많은 코드들이 쫘~악 펼쳐집니다.

커서를 skin.html 창에 두시고 Ctrl + F 를 눌러서 header 를 검색해보시면

  <!-- @@ container contents start @@ -->
    <div id="header">
      <!-- @@ header Start @@ -->
      <h1><a href="[##_blog_link_##]">[##_title_##]</a></h1>
   <div id="blogSet">
    
    <a href="[##_blog_link_##]owner/entry"  class="admin"><span>Admin</span></a>
  <a href="[##_blog_link_##]owner/entry/post"  class="post"><span>Posting</span></a></div>


위와 같은 코드를 찾으실 수 있습니다. 이부분의 style.css의 #header의 속성이 먹히는 영역인데요.

<!-- @@ container contents start @@ -->
<div id="header" onclick="window.location.href='http://suya55.tistory.com'">
      <!-- @@ header Start @@ -->
      <h1><a href="[##_blog_link_##]">[##_title_##]</a></h1>
   <div id="blogSet">
    
    <a href="[##_blog_link_##]owner/entry"  class="admin"><span>Admin</span></a>
  <a href="[##_blog_link_##]owner/entry/post"  class="post"><span>Posting</span></a></div>

위 코드처럼 붉은 글씨만 추가해 주시면 됩니다. 물론 주소는 자신의 블로그 주소를 적어주셔야 하겠죠?^^
" " 사이에 들어있는 ' ' 표시 빼먹지 마시고 쌍으로 잘 넣어주시구요.

일단 저 코드만 수정해줘도 타이틀 그림을 누르시면 원하시는 주소로 이동은 하는데 마우스 포인터가 손가락이 아닐겁니다.

마치 링크를 걸어준 착각을 일으키기 위해서 스타일 시트도 좀 바꿔주도록 하지요.^^

이번엔 style.css 텍스트 박스 안에 커서를 위치하시구요, Ctrl + F 로 header 를 찾으면

#header    {padding-top:230px; background:url("images/topimg.gif") 13px 20px no-repeat; }

위와 같은 코드를 찾을수 있습니다. 물론 안에 내용은 각 각 스킨에 따라서 다릅니다.

#header    {padding-top:230px; background:url("images/topimg.gif") 13px 20px no-repeat; cursor : pointer; }

제일 마지막 부분에 cursor : pointer; 이 코드만 추가해 주시면 마우스 포인터가 손가락 모양으로 변신하게 됩니다.^^

쉽죠?? 이왕 이렇게 알려드리는김에 제 블로그에도 적용해 보았답니다.^^

혹시나 스킨을 수정하시다가 또 궁금한점이 생기면 언제든 문의해 주세요.^-^!
신고

블로그에 MSN메신저 달기

Infomation/Computer 2007.12.07 13:38
서명덕 기자님의 블로그를 보다가 발견한 새로운 놀이!~
블로그 쥔장과 대화를 나눌 수 있는 공간 발견~~ㅋ

오른쪽에 보이는 MSN메신저를 블로그에 달았습니다.
http://settings.messenger.live.com/applications/WebSettings.aspx
이페이지 가셔서 로그인하시고 몇가지 설정을 해주시면 html코드가 생성되요.
iframe을 이용해서 생성시키네요.
코드는 아래와 같이 생성이 됩니다.

<iframe src="http://settings.messenger.live.com/Conversation/
IMMe.aspx?invitee=732be294295fe62f@apps.messenger.live.com&mkt=ko-KR" width="300" height="300" style="border: solid 1px black; width: 300px; height: 300px;" frameborder="0"></iframe>


근데 한가지 큰 문제점을 발견하고 말았다는....;;;
제 블로그의 사이드바의 width는 200px로 설정되어 있는데.
메신저를 달려면 최소 300px이상이 되어야 하더군요.
그래서 강제로 수치를 조절했습니다.

<iframe src="http://settings.messenger.live.com/Conversation/
IMMe.aspx?invitee=732be294295fe62f@apps.messenger.live.com&mkt=ko-KR" width="200" height="300" style="border: solid 1px black; width: 200px; height: 300px;" frameborder="0"></iframe>

직업이 웹 프로그래머인지라 이 까짓것쯤이야~ 쿠쿠쿠~하면서 당당히 고쳐서 달았습니다.
근데 MSN메신저는 역시 호락호락하지 않았습니다.


위와 같은 짜증나는 결과가...-_-;;
로그인 하지 않고 말을 걸기 위해선 특수문자를 입력해야 했던 것이었습니다...
이런....뭐 대화 한번 하는데 저런거 까지 검증을 해야하나 싶기도 했지만...-_-;;; 제가 저걸 뜯어 고칠수도 없는 노릇이고...어쩔수 없이 제 스킨을 늘렸습니다.

좀 쉽게 늘려보려고 스킨 위자드로 들어갔으나... 불행히도 스킨위자드에서는 사이드바 width를 조절 할 수 없네요..-_-;; 그래서 HTML/CSS 편집으로가서 style.css 편집창을 죽어라 들여다 보시면

#sidebar {
    float:right;
    width:300px;
    padding:30px 10px 0 10px;
        margin : 0 5 0 5;
        background-color : #EEE
}

요부분이 보이실겁니다. 여기서 width:300px; 이녀석을 조절하시면~ 사이드바가 확~ 늘어난답니다.ㅋㅋ

ㅇㅋㅂㄹ~ 저장하고 블로그를 확인해보니!! 이런대박사태가!!!!
사이드바가 사라진겁니다!! 이거이거 어디간겨ㅡ,.ㅡ?? 하면서 스크롤을 휙휙~ 돌려보니 사이드바가 아래로 뚝~ 떨어져 있었던 겁니다. 그 이유는 스킨의 구조때문에 그렇습니다.

블로그의 레이아웃은 style.css에 의해서 결정되는데요. 아래를 보시면
본문 내용이 들어가는곳이 #content 이녀석이구요. 사이드바는 #sidebar 그리고 이 두녀석을 감싸고 있는게 #container 입니다.
아래 설정 내용을 보시면...
전체를 둘러 싸고있는 container의 길이는 890px.
content 길이는 610px.
sidebar 길이는 방금 변경해서 300px
고로 content + sidebar 길이가 container길이를 오버해 버린샘이죠. 그래서 사이드바가 옆에 들어갈 공간이 없어서 밑으로  뚝~ 떨어졌던 겁니다.

/* 블로그 레이아웃 */
#container {
    width:/*@post-width:280*/ 890px /*@*/;
    margin:0 auto;
}

#headerBox {
    width: 100%;
    margin:0;padding:0;
    /*@title-background-image=background-image:url(images/head_bg.gif);*/ background-image: url("images/head_bg.gif"); /*@*/
    /*@title-background-image-position=background-position:left top;*/ background-position: left top; /*@*/
    /*@title-background-image-repeat=background-repeat:repeat-x;*/ background-repeat: repeat; /*@*/
    /*@title-background-color=background-color:#1A1A1A;*/ background-color: #1A1A1A; /*@*/
    height:/*@title-height=100*/ 100px /*@*/;
}
#header {
    width:/*@post-width:250*/ 860px /*@*/;
    margin:0 auto;
    padding:45px 0 0 30px;
}
/* ***** Header ***** */

#header h1 a { padding:0; margin:0; font-family:/*@title-font-family=dotum*/ dotum /*@*/; /*@title-color=color:;*/ color: #fff; /*@*/  font-weight:bold;  font-size:/*@title-font-size=14px*/ 16px /*@*/; line-height:1.0;}
#header .blogMenu { font-family: dotum; font-size:12px;  color:#484848; margin: 12px 0 0 0;float:right;}
#header .blogMenu a { color:#868686;}

#content {
    margin:0;
    float:left;
    width:/*@post-width*/ 610px /*@*/;
    padding: 35px 0 0 30px;
}

#sidebar {
    float:right;
    width:300px;
    padding:30px 10px 0 10px;
        margin : 0 5 0 5;
        background-color : #EEE
}


#footer {
    background:#FFF;
    clear:both;
    padding:20px 0 0 0;
}

해결 방법은 간단합니다.
container 의 width를 넉넉하게 늘려만 주심 됩니다요~흐흐~

그래서 지금 보시는 거와 같이 이쁘게~ 잘 들어간 모습이 보이시죠.^^?

신고

'Infomation > Computer' 카테고리의 다른 글

누구냐 넌?  (6) 2007.12.08
블로그에 MSN메신저 달기  (1) 2007.12.07
[flickr] 플리커와 테터툴즈 연동!!  (0) 2007.12.02
[DIY스킨] 움직이는 사이드바  (2) 2007.06.20

[DIY스킨] 움직이는 사이드바

Infomation/Computer 2007.06.20 08:00
네이버 블로그에서 티스토리로 이사중에 티스토리의 스킨의 모든 코드를 내마음데로 바꿀수도 있다는것을 알았다. 이런이런 또 발동이다.
남들과 같은것은 참을수 없는 나의 성격. 뭔가 하나라도 남들과는 달라보여야 한다.!!
디자인이 안되면 기술로 승부하자!

그 첫손질로 오른쪽에 위치한

사이드바의 위치를 드래그 & 드랍으로 마음껏 위치이동하고 싶다.

사용자 삽입 이미지

옮기고 싶은 사이드바



그래서 눈을 부릅뜨고 아래 소스코드를 열심히 뒤지다가 눈깔이 빠질까 두려워 좀 편리한 도구를 쓰기로 결심한다.
사용자 삽입 이미지

[관리메뉴의 스킨>스킨선택>편집하기를 누르면 위와같은 스킨의 소스 편집창이 보인다.]

그 편리한 삽질도구의 선두주자 두명을 소개하고자 한다. 그 첫째는 MS에서 제공하는 IEDevToolBar
불여우(FireFox - 이하 파폭)의 플러그인중 하나인 Firbug (동영상).
그중 나는 주로 Firebug를 사용한다. 왠지 더 편하다.-_-;

파폭에서 F12를 눌러 firbug를 Enable시킨 후 Inspect를 클릭하고 화면에 커서를 가져가면 각각의 요소에대한 태그 정보가 적나라하게 나타난다.
사용자 삽입 이미지

파폭의 firebug 실행화면



찾았다. 사이드바의 <div>태그의 id는....sidebar...-_-a
조금 허무하다..;

아무튼 목적하는바를 달성했으니 step2로 gogo싱~

step2. 이제 핵심 소스를 포함시킬 차례다.

invalid-file

자바스크립트 소스

이 블로그에 포함시키는 소스는 최범균씨가 쓴 AJAX PROGRAMMING 기초부터 중급까지라는 책에서 소스를 조금 얻어서 사용했음을 밝힌다. 또한 내 나름데로 수정도 많이 가해졌다.
마음껏 가져가서 사용해도 무방하지만 출처를 속이지는 말길 바란다.^-^*


자 이제 스킨편집창으로 돌아가서. *skin.html 영역의 스킨을 자세히 보면 <head>...</head>이라는 부분이 보인다. 이 헤드 태그 사이에 자바스크립트를 삽입해야 한다. 위 소스코드를 다운로드 받아서 노트패드나 editplus등등의 편집기를 이용해서 열어보면 어지러운  자바스크립트가 보인다.
여기서 수정해야 할 부분은 아랫부분이다.

window.onload=function(){
        var drag1=new ajax.dnd.SimpleDragSource("sidebar");
}

소스코드의 제일 아랫부분에 위 코드가 위치한다.
위에서 단지 고칠곳은 "sidebar" 이곳.
이곳에 setp1에서 찾은 사이드바의 div id를 넣어준 후
 소스를 스윽~긁어서 복사한다. 그리고 스킨편집창의 *skin.html에서 </head> 태그 바로 윗줄에 붙여넣기 하자.

다.됬.다!

이제 한번 저장하기를 누른후 블로그로 돌아가서 마우스를 꾹~누지르고 이동해보자!!
오오~~사이드바가 움직이는게 보이시는가~!+_+

그런데 이런 뭔가 좀 이상하다....

그렇다. 마우스 커서가 화살표 모양이다. 보통 창을 움직이는것을 뜻하는 마우스 포인터는 십자가 모양이지 않은가?? 이건 딱 이렇다고 정해진것은 아니나... 오래전부터 MS의 빌아저씨가 그렇게 만들었으므로 우리의 뇌릿속엔 이미 이렇게 박혀있다.

step3. 마우스 커서의 스타일을 한번 병경시켜보자.

다시 스킨편집 페이지로 돌아가자. 그리고 편집창에서 소스코드를 눈 부릅뜨고 잘 찾아보자~라고 무식한 방법 쓰지 말고..;;
Ctrl+F를 누르면 글자를 찾을수 있으니 이것을 이용하여 sidebar div를 찾아보자.
이런한 태그가 보이는가~?
<div id ="sidebar" style="cursor:move">
......
</div>


div태그 옆에 빨간 글씨의 속성을 지정해주면 마우스커서가 십자가 모양으로 변할것이니~~

다음시간에는 큰 사진도 문제 없다! 메인창 넓이를 마음데로! 라는 주제로 글을 써볼까 합니다.
특시 사진을 즐겨 찍으시는 분들...
큰사진을 올리면 사진이 사이드가 잘려버리는 큰 사태가 발생하여 2단 스킨만을 사용하고 계신분들을 위해..
이런분들도 3단 스킨을 맘놓고 편히 사용하라는 뜻에서 적어보고자 합니다.
신고

'Infomation > Computer' 카테고리의 다른 글

누구냐 넌?  (6) 2007.12.08
블로그에 MSN메신저 달기  (1) 2007.12.07
[flickr] 플리커와 테터툴즈 연동!!  (0) 2007.12.02
[DIY스킨] 움직이는 사이드바  (2) 2007.06.20


티스토리 툴바