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

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


티스토리 툴바