인터넷애드드림과 꿈꾸는자

예전에 네이버 블로그를 하기는 했지만 그때만 해도 블로그에 대해 별반 생각이 없었다.
다시 블로그를 들여다 보니 이거 놓치면 안되는 거였구나. 굉장한 거옜네.

다시 블로그를 시작하면서 그럼 어떤 블로그를 해야 하나 였는데.

별 생각없이 티스토리 부터 찾게 되었다.
별 생각이 없었던 것은 아니고 네이버 블로그를 이용해서는 안되겠다는 생각에 다른 대안을 찾다보니

티스토리란 아주 좋은 것을 발견하게 된거다.

왜 네이버플로그는 아예 생각조차 없었나?

자의가 아니라 타의였다. 네이버가 자르니 어쩔 도리가 없었다.

왜? 뭔 큰 잘못이라도 했나?

어느날 보니 내 블로그가 폐쇄되어 있었다. 네이버 아이디도 영구 정지(?) 용어는 모르겠는데 하여튼 지식인이며 블로그를 사용할 수 없도록 된 상태였다.

새로운 블로그도 만들 수 없는 상태였고. 아 이게 뭔일이냐? 뭐가 잘못되었겠지.
알아본 결과

네이버블로그 약관에 상업적으로 블로그를 이용해서는 안된다는 항목에 위반되어서 그렇단다. 인터넷광고에 대한 글을 적고 그 아래에 홈페이지로 갈 수 있는 링크를 걸어두었는데

그것이 약관에 위배되어서 완전 폐쇄되었다.

그 동안 시간을 쏟은 것들이 다 없어진 것이다. 백업을 받을 수도 없고.

사적인 일상사를 블로그에 올리는 분들을 제외한 조금이라도 업무상으로 올리는 분들은 네이버 블로그를 피하라고 말하고 싶다.

어느날 갑자기 블로그가 폐쇄된다면 얼마나 황당한가?

그런점에서 티스토리가 좋다. 여러 사람이 함께 블로그를 할 수도 있고.

태터툴즈를 이용해서 초기화면도 바꿀 수 있고, 하여튼 유연성이 네이버에 비교가 되지 않는것 같다.

티스토리 말고 또 웹서버에 직접 공개형 프로그램을 올려서 사용하는 설치형 블로그가 있다고 한다. 아직은 왜 설치형 블로그를 이용하는지 그 필요를 잘 모르겠다. 참 궁금하다.

프로그램을 올리고 블로그를 세팅하고 그런 번거러움을 감수하면서도 가질 수 있는 좋은 점들이 설치형블로그에 있기 때문일 텐데. 도대체 그게 뭘까?

아마도 블로그를 많이 하다보면 어떤 필요를 느끼게 되겠지.

이제 블로그를 조금씩 공부하고 있다. 조금씩 공부한 내용을 올려볼까 한다.

비즈니스 블로그 네이버블러그냐 티스토리냐 http://mlikpudding.tistory.com/42
이글도 참고하시면 좋겠네요.

인터넷광고 컨설팅 www.wwwad.co.kr

티스토리 블로그의 탑메뉴를 변경할려면 무엇을 바꾸어야 할까?

일단 스킨 메뉴의 HTML/CSS 편집으로 들어가서 스킨을 바꿔 바야 할텐데.

그 다음 부터가 막막하다. 어느 부분이 탑메뉴에 관계된 것일까?

skin.html 에서 내려가다 보니

<div id="container">
<div class="header">
<h1><a href="https://wwwad.tistory.com/">인터넷애드드림과 꿈꾸는자</a></h1>
 <div class="blogMenu">
   <ul>
    <li class="tab_home"><a href="https://wwwad.tistory.com/">블로그홈</a></li>
    <li class="tab_medialog"><a href="https://wwwad.tistory.com/media">미디어로그</a></li>
    <li class="tab_localog"><a href="https://wwwad.tistory.com/location">지역로그</a></li>
    <li class="tab_taglog"><a href="https://wwwad.tistory.com/tag">태그</a></li>
    <li class="tab_guestbook"><a href="https://wwwad.tistory.com/guestbook">방명록</a></li>
   </ul>
   </div>
   </div>

이런 부분이 보인다.
요 부분이구나 하고 추가하고 싶은 메뉴를 추가해도 어라 메뉴가 보이지 않네.

그럼 메뉴에 관계된 부분을 뒤져봐야 겟구나.
관계된 것들은 container, header, blogMenu 이 부분이네.

메뉴를 추가했음에도 불구하고 나오지 않는다면 width를 정해준 부분이 있겠구나.

style.css 부분을 이제는 뒤져보자
관계된 부분을 함 적어면서 정리해 보면
#container { background:white;  clear:both; background:url(images/bgBoxLine.gif) 201px 0 repeat-y white; }

/* ***** Header ******/

.blogMenu { height:20px; margin-left:4px; margin-top:1px; overflow:hidden;}
.blogMenu a { color:#ccc; padding:16px 0 0 0; height:0; overflow:hidden; display: block; float:left;}
.blogMenu .desc  { margin-top:-4px;  font:0.9em dotum; letter-spacing:-1px; display:none;}

.blogMenu li { float:left;}
.blogMenu .tab_home a { background:url(images/menu_01.gif); width:59px;}
.blogMenu .tab_medialog a  { background:url(images/menu_02.gif); width:74px;}
.blogMenu .tab_localog a  { background:url(images/menu_03.gif); width:90px;}
.blogMenu .tab_taglog a  { background:url(images/menu_04.gif); width:73px;}
.blogMenu .tab_guestbook a  { background:url(images/menu_05.gif); width:68px;}

또 죽 내려가다 보니
.header .blogMenu { margin:0 auto; width:370px;}

이중 메뉴의 width에 관계된 부분은
.header .blogMenu { margin:0 auto; width:370px;} 이 부분이구나
여기서 width를 좀 넓혀서 변경한 후 추가한 메뉴가 나오는지 보자

아! 이제 나오는 구나 역시 이 부분이었네.

메뉴가 나오도록 하였으니 이제는 원하는 메뉴가 표시되도록 해야지.

예를 들어 "인터넷광고" 란 메뉴를 추가한다면

추가할 메뉴의 이미지를 만든 후 스킨/직접올리기로 들어가서 작성한 이미지를
menu_06.gif로 올린다.

skin.html 의 blogMenu 부분에
<li class="tab_iad"><a href="">인터넷광고</a></li>

style.css 부분에
.blogMenu .tab_guestbook a  { background:url(images/menu_06.gif); width:68px;}

를 추가한다.

이미 올려져 있는 메뉴 이미지를 가져와서 수정할려면 이미지의 url을 알아야 할텐데.
이미지 url은  사이드바 하단에 있는 rss feed 의 url을 참고하여 추적해 보면 된다.

rss feed 의 속성을 보니 url 이
http://cfs.tistory.com/custom/blog/19/197249/skin/images/rss.gif 였다.

이것으로 기존 메뉴의 url을 유추해 보면 menu1의 url은

http://cfs.tistory.com/custom/blog/19/197249/skin/images/menu_01.gif


주소창에 url을 입력하고 보니 정확하게 blog top 이미지를 볼 수 있었다.

원본 : http://kkommy.com/1170256296

먼저, 사이드바에 넣을 이미지를 고르세요.. 저는 사용할 파일을 이름을 'banner.gif'라고 하겠습니다.



플러그인->플러그인 목록에서 '배너출력' 플러그인을 미사용에서 사용중으로 변경해주세요..

그다음, 비공개로 사용할 이미지를 블로그에 떡하니 붙여서 글을 작성해주세요..
비공개로 하셔야 다른분이 못보시겠죠??
관리자는 비공개 글을 볼 수 있으니, 문제될게 없습니다..


그리고, 작성한 글로 가셔서 이미지의 경로를 복사합니다..

전 다른 방식을 이용했는데, moONFLOWer 님의 방식인 이게 더 쉽더라구요..+_+/












아래와 같은 경로가 보이는군요..^^ 복사해둡니다..
http://cfs5.tistory.com/upload_control/download.blog?fhandle=YmxvZzEwMDk0QGZzNS50aXN0b3J5LmNvbTovYXR0YWNoLzAvNS5HSUY=

스킨의 사이드바 설정으로 다시 옮겨가면 추가 가능한 플러그인에 CodeBanner가 보입니다..
그, CodeBanner를 끌어다가 사이드바안 원하는 곳에다가 끌어다 놓습니다.
그러면 아래 그림의 왼쪽 그림처럼 보여요~

 

그런다음 편집 버튼을 누르고 아래의 코드를 복사해 넣어주세요..


그리고 전송버튼을 누르면 오른쪽의 그림처럼 이미지가 표시됩니다..

자~~이제 이해가 되셨나요~? ^-^/
언능언능 이미지 배너를 달아보아요~~^0^/

원본 : http://youngminc.com/618

블로그에 플래쉬로 된 배너를 달게 되면 현재의 인터넷 익스플러러 버젼에서는 테두리가 나타나게 되어있습니다.

다음의 이미지처럼 말이죠.

그리고 배너에 마우스가 올라가게 되면 '이 컨트롤을 활성화하여 사용하려면 클릭하십시오.'라는 문구가 표시되는것도 볼수 있구요.

즉, 배너를 클릭하기 위해서는 활성화를 위해 먼저 한번의 클릭이 필요하게 되는 것이니 총 2번의 클릭이 필요하다는 말이 되겠습니다. 더군다나 외곽에 생기는 테두리는 영 보기가...

그래서 IE에서 이렇게 된(왜 이렇게 되었는지는 설명드리지 않겠습니다. 왜냐면 길어지니까요. ㅜㅜ.) 이후에 나온 사용방법이 있는데 그 방법을 티스토리에 적용시켜 사용하는 방법을 알려드리겠습니다.

먼저 다음의 파일을 다운로드해 주세요. (해로운 스크립트가 아님을 알려드립니다. ^^;)


다운로드시 파일이름이 'CallFlash.js_'로 되어있는데 이를 'CallFlash.js'로 변경해 주시고 블로그 관리자 페이지에서 스킨 -> 직접올리기로 이동하여 이 파일을 업로드 해주시면 1차 작업은 완료가 되겠습니다.

이제 2차 작업을 해보도록 하겠습니다.

블로그 관리자 페이지에서 스킨 -> HTML/CSS편집으로 이동합니다. 그러면 위쪽은 'skin.html' 편집영역이 아래는 'style.css' 편집영역이 보이게 되는데 아래의 편집영역은 그냥 그대로 두시고 상단의 html 편집영역중 <head>와 </head> 사이에 다음 부분을 추가해 주시면 됩니다.

<script language="JavaScript" src="./images/callFlash.js"></script>

편집영역을 보시면 처음에 <!DOCTYPE... 로 시작하고 다음줄은 <html xmlns...로 그리고 다음은 <head>로 시작하게 되는데 조금 아래에는 </head>가 있으니 그 사이에 넣으면 되는 것입니다.


이렇게 2차 작업이 끝났으므로 실제 배너에 적용시키는 방법을 알려드리겠습니다.

보통 플래쉬로된 배너의 소스를 가져오게 되면 다음과 같은 태그로 이루어져 있음을 볼수 있었고 지금까지는 그냥 붙여넣기만 했었습니다.

embed pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://flash_banner.swf" width="410" height="110" type="application/x-shockwave-flash" quality="high" wmode="transparent"

하지만 다음과 같이 하게되면 깔끔한 플래쉬 배너를 달수 있겠습니다.

<script language="javascript">
CallFlash('D27CDB6E-AE6D-11cf-96B8-444553540000','src부분','width','height');
</script>

먼저 ''로 감싸여진것이 4개가 있는데 첫번째 녀석은 그냥 놔두시면 됩니다. 그리고 두번째 영역에는 기존 배너 소스에서 src에 해당하는 주소부분을 넣으시면 되고 3번째와 4번째는 각각 width와 height부분의 숫자를 넣으시면 됩니다.

이제 페이지 상에서 아주 깔끔하게 표현되는 플래쉬 배너를 확인하시면 모든 작업이 성공적으로 완료된 것입니다. 이후 플래쉬 배너를 달 경우에는 마지막 부분만 확인하고 처리해 주시면 되겠습니다.