먼저 방문해 주셔서 감사합니다. ^0^
부족한 제 포스팅이 읽을만 한지도 잘 모르겠습니다. 단지 글을 읽으실때 꼭 끝까지 읽어주시고.. 글의 중요한 부분은 제가 항상 Bold로 진하게 표시를 해 두니... 읽어주시길 바랍니다. 그리고... 다른 의견이나 나누고 싶은 의견이 있으시면 댓글을 달아 주십시오.
제 블로그에 이런 표시를 하게 될지는 몰랐는데.. 어째튼... 글 내용을 오해하시고 잘못된 댓글 올라와 간혹 논쟁이 되어 버리는 경우가 생겨 이런 표시를 하게 되었습니다. 댓글 달때 글 내용을 꼼꼼히 읽어보시고 달아주십시오. 불편을 끼쳐 죄송스럽고, 너그러이 이해... 협조 부탁드립니다.
향기나는 블로그를 만듭시다~~!! 향기+블로그
부제 : 이전 간단한 Tip으로 내 블로그 이용자 배려하는 기능의 문제 해결 Tip
몇일전... 제 블로그 오른편에 달려 있는 졸졸 따라다니는 메뉴를 붙이는 법에 대해서 포스팅을 한 적이 있습니다. ^^
뭔 애기여~??? 싶으신 분들은 아래 포스팅을 먼저 읽어 주시면 됩니다. ^^
2009/05/28 - [Blog 이야기(*추천방)] - 간단한 Tip으로 내 블로그 이용자 배려하는 기능
전... 이걸 설치한 뒤에 나름 잘 사용하고 있습니다. 편리하기도 하고.. ^^
그래서 달았다는 몇몇 분의 블로그에 가서... 어떻게 이용하고 있나 한번 보러 갔는데.. 말씀처럼 편하지 않았나 싶습니다. ^0^ (달아 놓으신 분이 몇분 없더군요.. 홍홍홍)
그중에 피아랑님(http://piaarang.com/)은 멋찌게 다셨고... 응용까지 완벽하게 하셨더군요. 피아랑님 실력에 부러움이 가득합니다. ^0^
그런데 다른 분들은 응용을 잘못 하셨는지.. ^^;; 제대로 메뉴 클릭시 이동 안되는 분들도 있더군요. ^^ 아무래도 제가 설명을 제대로 못해서 이런일이 일어나지 않았나 싶어.....
제 블로그에 적용한 것을 다시 정리하기로 했습니다. ^0^ (이번에도 설명을 제대로 못해서.... 어렵다면... 음.... 제 머리의 한계이니... 어쩔 수 없습니다. 하하하. ^0^)
일종의 이전 포스팅의 강화 Tip 정도 보시면 되겠습니다. - 이번 포스팅도 제가 Tistory를 사용하니깐.. Tistory 기준으로 설명을 드리겠습니다. ^^ (이해가 안되시는 분은 이전 포스팅을 보신뒤에 보시면 도움이 될 듯 합니다. ^^ )
1. 메뉴가 생겼다가.... 움직여요.
블로그를 처음 접속했을때, 왼쪽 끝에 있다가, 시간이 지나면.. 오른쪽으로 옮겨오게 됩니다.
이런 증상은 꼭 왼쪽에서 오른쪽으로 이동할 때만 생기는 것은 아닙니다. ^^; html 의 로딩 순서의 차이입니다. (이런 증상은 인터프리터 언어의 특징 때문인데요... 그런 어려운 말보다... 실제 소스를 보면서 말씀 드리겠습니다. )
<!--- 떠다니는 레이어 메뉴 시작 : 화면 노출 부분 ---->
<!--- 레이더 디자인을 마음대로 수정할 수 있습니다. -->
<!--- 하지만 id="floatdiv" 만 수정하지 마세요~ ^^ -->
<div id="floatdiv" style="background-color:#ffffff; padding:0px; border-width:1px; border-color:#0049ce; border-style:solid; width:100px; height:120px; position:absolute; left:0px; top:0px; z-index:1;">
<!--- 입맛에 맞게 수정하세요~~ --->
<table border=0 align=center>
<tr><td><a href="#top">* 제일위로</a></td></tr>
<tr><td><a href="#ccl-icon-505-2">* 추천하기</a></td></tr>
<tr><td><a href="#recomm">* <b>댓글달기</b></a></td></tr>
<tr><td><a href="http://www.hanrss.com/add_sub.qst?url=http%3A%2F%2Fwww.ebizstory.com%2Frss" target=_blank>* <b>구독하기</b></a></td></tr>
<tr><td><a href="#end">* 제일아래로</a></td></tr>
</table>
<!--- 입맛에 맞게 수정하세요~~ --->
</div>
<!--- 떠다니는 레이어 메뉴 끝 : 화면 노출 부분 ---->
메뉴의 <div 태그를 보면... left:0px; top:0px; 이렇게 된 것이 보입니다. 이 부분이 처음 접속할때 메뉴가 띄는 위치 입니다.
스크립트에 보면....
<!--- 자바스크립트 부분입니다. 그대로 붙여 넣으시면 됩니다. ---->
<!--- 수정하는 부분은 위치 숫자만 손대면 됩니다. ----->
<script type="text/javascript">
<!--
var floatingMenuId = 'floatdiv';
var floatingMenu =
{
targetX: 926, // 레이어 가로 위치를 설정합니다. 0 을 넣으면 제일 왼쪽에 붙습니다.
targetY: 66, // 레이어 세로 위치를 설정합니다. 0을 넣으면 제일 상단에 붙습니다.
hasInner: typeof(window.innerWidth) == 'number'
hasElement: document.documentElement...............
- 중 략 -
메뉴의 위치를 결정하는 곳이 있다고 했습니다. 제가 설정해 놓은 것을 보니깐... 가로 926, 세로 66 위치에서 떠라고 설정했습니다. 그럼....
위의 메뉴의 <div 안에 left, top 부분을 스크립트 설정과 같이 수정합니다. left:926px; top:66px; 그럼 메뉴가 움직이지 않고 한쪽에 고정되게 됩니다.
<!--- 떠다니는 레이어 메뉴 시작 : 화면 노출 부분 ---->
<!--- 레이더 디자인을 마음대로 수정할 수 있습니다. -->
<!--- 하지만 id="floatdiv" 만 수정하지 마세요~ ^^ -->
<div id="floatdiv" style="background-color:#ffffff; padding:0px; border-width:1px; border-color:#0049ce; border-style:solid; width:100px; height:120px; position:absolute; left:926px; top:66px; z-index:1;">
<!--- 입맛에 맞게 수정하세요~~ --->
<table border=0 align=center>
<tr><td><a href="#top">* 제일위로</a></td></tr>
<tr><td><a href="#ccl-icon-505-2">* 추천하기</a></td></tr>
<tr><td><a href="#recomm">* <b>댓글달기</b></a></td></tr>
<tr><td><a href="http://www.hanrss.com/add_sub.qst?url=http%3A%2F%2Fwww.ebizstory.com%2Frss" target=_blank>* <b>구독하기</b></a></td></tr>
<tr><td><a href="#end">* 제일아래로</a></td></tr>
</table>
<!--- 입맛에 맞게 수정하세요~~ --->
</div>
<!--- 떠다니는 레이어 메뉴 끝 : 화면 노출 부분 ---->
2. 추천하기 클릭해도 화면이 이동하지 않아요.
솔직히 이 부분은 조금 어렵습니다. 찬찬히 따라하시면 됩니다.
본문 내용에 <a name="chuchen"></a> 이라는 것을 넣어야 하는데 방법이 없더군요...
그렇다고 다음 view가 추천의 가장 위인데 아래에 넣기도 어색하고... 그런데 눈에 띄는 것이 있었으니... CCL 아이콘 입니다. ^^
먼저 이 녀석을 본문에 자동으로 들어가게 할려면.... 티스토리에서 설정해야 하는 부분이 있습니다.
티스토리 관리자 > 환경설정 > 기타 설정으로 들어갑니다.
기타 설정 본문 내용에 보면.. CCL 설정하는 부분이 있습니다.
여기서 내가 설정한 저작물 사용 허가를 표시합니다. 앞 부분을 체크 하고 저장하고 나옵니다. ^^
그런뒤에 플로그인 > 플로그인 설정으로 들어갑니다.
이제 본문 하단에 자동으로 CCL 아이콘이 붙을 것입니다.
이중에 사람모양의 아이콘 id가 자동 등록되는데.... 정보가 "ccl-icon-포스팅번호-0" 이 됩니다.
문제는 중간에 포스팅번호 입니다. 이번 포스팅 포스트 소스에 보면.. 전 추천하기가 "ccl-icon-505-2" 로 되어 있는 것을 보실 수 있을 것입니다. 이부분을 살짝 수정해야 합니다.
<!--- 입맛에 맞게 수정하세요~~ --->
<table border=0 align=center>
<tr><td><a href="#top">* 제일위로</a></td></tr>
<tr><td><a href="#ccl-icon-505-2">* 추천하기</a></td></tr>
<tr><td><a href="#recomm">* <b>댓글달기</b></a></td></tr>
<tr><td><a href="http://www.hanrss.com/add_sub.qst?url=http%3A%2F%2Fwww.ebizstory.com%2Frss" target=_blank>* <b>구독하기</b></a></td></tr>
<tr><td><a href="#end">* 제일아래로</a></td></tr>
</table>
<!--- 입맛에 맞게 수정하세요~~ --->
위 줄 부분을....
<!--- 입맛에 맞게 수정하세요~~ --->
<table border=0 align=center>
<tr><td><a href="#top">* 제일위로</a></td></tr>
<tr><td>
<SCRIPT TYPE="TEXT/JAVASCRIPT">
//<![CDATA[
var str1 = "[ # # _article_rep_link_ # # ]";
str2 = str1.slice(1,str1.length);
str2 = "ccl-icon-"+str2+"-0";
document.write("<a href='#"+str2+"'><b>* 추천하기</b></a>");
//]]>
</SCRIPT>
</td></tr>
<tr><td><a href="#recomm">* <b>댓글달기</b></a></td></tr>
<tr><td><a href="http://www.hanrss.com/add_sub.qst?url=http%3A%2F%2Fwww.ebizstory.com%2Frss" target=_blank>* <b>구독하기</b></a></td></tr>
<tr><td><a href="#end">* 제일아래로</a></td></tr>
</table>
<!--- 입맛에 맞게 수정하세요~~ --->
스크립트를 넣어 수정하면.... 됩니다.
또 하나 중요한 것이 있습니다. 이전 포스팅에 보면... 메뉴관련 소스가 움직이는 소스 바로 위에 붙어 있어 하단에 있습니다.
이전 소스를 반드시 본문 영역 가까이 넣어야 합니다. 정확히 <s_article_rep>...........</s_article_rep> 로 구분되어 있는 곳 안에 넣어야 합니다.
정확히 위치가 어디인지 모르시겠으면..... 스킨 안에서.... <div class="article">[ # #_article_rep_desc_# # ]</div> 을 찾으셔서 이전 소스를 바로 아랫중에 넣으면 됩니다.
<div class="article">[ # # _article_rep_desc_ # # ]</div> <=== 이렇게 나오는 부분 바로 아랫줄 넣어 주세요.
이곳에 소스를 넣으면... 2가지 효과를 볼 수 있습니다.
첫째. 추천하기 기능이 됩니다. (이것은 티스토리와 텍스트규브만 됩니다.)
둘째. 포스팅 본문에서만 메뉴가 나오게 됩니다. 본문에만 나온다는 의미는 아래에 설명드리겠습니다.
※ 주의
위의 [ # # _article_rep_link_ # # ] 부분을 그대로 복사해 가시면 안됩니다. 중간에 공백이 있으니깐.. 공백을 다 지우고.. 붙여서 가져 복사하셔야 합니다. ^^
3. 첫화면, 방명록에서는 메뉴가 안나오게 하고 싶어요.
티스토리 블로그를 보면.... 본문외에 대문(첫화면)과 방명록이 있습니다. 그런데... 이곳에는 메뉴가 필요가 없죠.
이런 화면에서는 메뉴 원기능이 필요가 없습니다. 오히려 사용자에게 혼란만 주는 것 같습니다.
해결 방법은 조금 어렵긴 하지만 2 번에서 벌써 설명을 드렸습니다.
이전 포스팅의 소스를 본문 영역 가까이 넣어야 합니다. 정확히 <s_article_rep>...........</s_article_rep> 로 구분되어 있는 곳 안에 넣어야 합니다.
모르시겠다면... <div class="article"></div> 부분의 바로 아랫 줄에 넣어면 됩니다.
바로 이부분 입니다.
소스를 본문 영역에 넣으면 본문이 나오는 페이지외에 다른 곳에서는 메뉴가 나오질 않습니다.
4. 메뉴 클릭하면 제대로 이동이 안되요.
메뉴 클릭해서 이동이 안되는 경우는 2가지가 있습니다.
첫째. 이동 위치의 이름을 정확히 넣지 않은 경우
둘째. <a id="..."></a>의 위치가 정확하지 않거나, 넣지 않은 경우 입니다.
첫번째의 이동 위치의 이름을 정확히 넣지 않은 경우란.
<!--- 입맛에 맞게 수정하세요~~ --->
<table border=0 align=center>
<tr><td><a href="#top">* 제일위로</a></td></tr>
<tr><td><a href="#ccl-icon-505-2">* 추천하기</a></td></tr>
<tr><td><a href="#recomm">* <b>댓글달기</b></a></td></tr>
<tr><td><a href="http://www.hanrss.com/add_sub.qst?url=http%3A%2F%2Fwww.ebizstory.com%2Frss" target=_blank>* <b>구독하기</b></a></td></tr>
<tr><td><a href="#end">* 제일아래로</a></td></tr>
</table>
<!--- 입맛에 맞게 수정하세요~~ --->
메뉴 부분의 소스에서 #이름 으로 되어 있는 부분이 있습니다. 이 부분과 위치할 곳에 넣어둔 <a id="이름"></a>부분의 이름이 정확히 맞아야 한다는 것입니다.
예를 들어 제일위로 보내는 부분에 #top 으로 되어 있습니다. 그럼 <a id="top"></a> 소스를 넣는 곳에서 top 이라고 정확히 맞아야 합니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<a id="top"> </a>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="alternate" type="application/rss+xml" title="" href="" />
<link rel="stylesheet" media="screen" type="text/css" href="./style.css" />
<link rel="shortcut icon" href="favicon.ico" />
<title> :: </title>
</head>
<body>
제 설정을 보면 <a id="top"></a> 이라고 명칭이 정확히 통일되어 있습니다. * 주의점 메뉴에서는 # 붙지만 <a id="..."></a> 에서는 # 이 붙지 않습니다.
둘번째. <a id="..."></a>의 위치가 정확하지 않거나, 넣지 않은 경우는..
위치가 정확하지 않은 경우는 이동하고자 하는 부분에 정확히 이동하지 않고 다른 곳으로 이동하게 되는 경우 입니다.
이럴 경우는 <a id="...."></a>을 이동하는 곳에 옮겨 놓으면 됩니다.
소스를 보면 어디쯤이 어디인지 잘 모를 경우는 <a id="...."></a>의 위치를 한줄씩 위로 올리거나 내려보면서 정확한 위치를 셋팅하면 됩니다.
넣지 않는 경우에는 클릭해도 이동하지 않습니다. 이름이 틀려서 이동하지 않는 경우와 증상은 똑 같습니다.
이동하고자 메뉴를 넣었다면 반드시 <a id="..."></a> 를 넣어야 합니다.
메뉴를 달아 놓으신 몇몇 분들 블로그에 들어가보니.... 제일아래로 가 작동하지 않는 분들이 많이 있더군요. 해결 방법은 아주 간단합니다.
<!--- 입맛에 맞게 수정하세요~~ --->
<table border=0 align=center>
<tr><td><a href="#top">* 제일위로</a></td></tr>
<tr><td><a href="#ccl-icon-505-2">* 추천하기</a></td></tr>
<tr><td><a href="#recomm">* <b>댓글달기</b></a></td></tr>
<tr><td><a href="http://www.hanrss.com/add_sub.qst?url=http%3A%2F%2Fwww.ebizstory.com%2Frss" target=_blank>* <b>구독하기</b></a></td></tr>
<tr><td><a href="#end">* 제일아래로</a></td></tr>
</table>
<!--- 입맛에 맞게 수정하세요~~ --->
메뉴에는 <a href="#end">* 제일아래로</a> 로 설정해 놓고.
<a id="end"> </a>
</html>
제일 아래 </html> 바오 위에 <a id="end"></a> 를 넣어 두었습니다.
여기까지가 메뉴를 달아 놓으신 몇몇 이웃블로거 블로그를 방문해 보고.... 문제가 있을 것 같은 부분을 다시 점검한 부분입니다. ^^
아무래도 html 이나 javascript 을 처음 접하신 분들에게는 어렵게 느껴집니다. 그래서 왠만하면 소스를 다운 받아 그대로 붙여 넣기만 해도 사용할 수 있도록 한 것인데.... 그래도 어려웠던 것 같습니다.
2.번에 javascript 을 더 추가하게 된 것도 더 어렵게 느껴집니다. 하지만, 1~4번까지는 쉽게 수정할 수 있지 않을까 싶기도 합니다. ^^
한번 더 화이팅 하시구요.
오늘 이 포스트를 처음 보신 분들 중에...
소스를 구하거나, 다는 법을 배우고 싶은신 분은... 아래 포스팅을 참조하시고.... 조금 더 강화하겠다 싶으신 분은 본 포스팅을 참조하시면 되겠습니다. ^^
2009/05/28 - [Blog 이야기(*추천방)] - 간단한 Tip으로 내 블로그 이용자 배려하는 기능
그럼... 오늘도 다들 화이팅 입니다~~~ ^0^
이올린에 북마크하기
이올린에 추천하기'Blog 이야기' 카테고리의 다른 글
| 강팀장이 말하는 블로그와 트위터의 관계 (12) | 2009/11/27 |
|---|---|
| 당신은 블로그를 왜 하십니까? (67) | 2009/08/07 |
| 법무부 블로그 공개자문을 하다. (40) | 2009/06/22 |
| 당신에게 블로그는 어떤 의미가 있습니까? (56) | 2009/06/18 |
| 기능개선된 네이버 블로그를 점검해보니... (46) | 2009/06/15 |
| 간단한 Tip으로 내 블로그 이용자 배려하는 기능 #2 (20) | 2009/06/10 |
| 당신의 블로그 느리진 않나요? (52) | 2009/06/04 |
| 간단한 Tip으로 내 블로그 이용자 배려하는 기능 (66) | 2009/05/28 |
| 블로그로 개인브랜드 구축하는 방법 (53) | 2009/05/22 |
| 프로블로거 특강 들으면 1억 벌어?? 제대로 된 낚시질?? (52) | 2009/05/18 |
| 주말이 싫었던 어느 블로거~ 주말이 즐거운 이유.... (40) | 2009/05/15 |
제글이 도움이 되셨는지 모르겠습니다.
제글이 다음에 다시 업데이트가 되면 편하게 보실 수 있는 기능이 있는데.. RSS 라는 것입니다.
[ RSS 대해서 알아보기 : 만화로 보는 RSS, 동영상으로 보는 RSS]
RSS로 포스팅 보기... 옆에 RSS 버튼을 클릭하시면 됩니다.=>
IT,
JavaScript,
TIP,
Tistory,
강팀장,
메뉴 달기,
바로가기 메뉴,
블로그,
블로그 tip,
웹이야기,
이동하는 메뉴,
자바스크립트,
텍스트큐브 팁,
티스토리,
팁,
플러그인,
환경설정 트랙백 보낼 주소 :: http://ebizstory.com/trackback/510
-
홈페이지 꾸미기 완료 - RSS구독, 공유도구, 트위터연동, 이동메뉴
from 직장인 로망 공작실2009/11/30 21:06
지난 주말동안 짬을 내서 홈페이지를 대대적으로 개편했다. 2009.08.06 에 티스토리 블로그로 홈페이지를 오픈한 이후 실질적으로는 두 번째 개편인셈이다. 첫번째 개편에서는 기본적인 의사소통 및 브랜딩 도구를 설치했고, 한참 SNS를 따라잡던 터라 SNS 와의 기본 연결고리를 만들었었다. - 링크나우 프로필 버튼 : 사이드바 설정의 이미지배너 출력 사용 - 믹시, 다음 뷰 등의 메타블로그 위젯 : 각 메타블로그 사이트가 제공하는 위젯 사용 - 멋진..
