블로그에서 탭메뉴 활용하기

demun
퍼블리셔/javascript
2010. 6. 20. 06:00

탭메뉴를 잘만 활용하면 디자인적으로나 공간적으로도 꽤 좋습니다. 관심이 있어 여기저기 찾아서 좋은것 있으면 적용을 시켜봤지만 곧잘 충돌을 일으켜 안되곤 합니다.
아무리 좋은것도 어떤 한 브라우져에서 안되거나하면 적용하기 좀 그렇죠. 가장 심플하고 간단한것이 여러모로 사용하기도 좋고, 호환성도 좋은거 같습니다.

인터넷 검색중에 좋다고 판단되어지는것은 전부 티스토리에 적용하면 잘 안되곤합니다.특히나 치환자부분. 더군다나 저의경우 코드하이라이팅하는 js와 메뉴바에 사용하는 js 등과 충돌이 있어서 잘 안되곤 했지요.
블로그에 탭메뉴를 서식으로 저장해놓고 사용하면 아주 좋습니다. 제가 사용하는것은 왠만한 브라우져에 모두 호환이 되는것입니다. 확인해봤으니까요.

블로그에 글을 쓰다보면 하단에 관련 링크들을 많이 달곤합니다. 그런 용도로 사용을 해도 좋을듯 합니다.
예를들어 저는 관련글, 최신글, 추천글 요렇게 3개정도 탭을 만들어서 블로그에 내용을 쓰다가 중간이나 하단에 서식으로 불러와서 사용을 해봤습니다.

자 이제 시작합니다.
먼저 아래의 코드를 스킨편집창에서 <head> 와 </head> 사이에 넣어주세요.


<script type="text/javascript">
<!--
function ShowTab(val){
  for (i=0; i<3; i++) {
    var tb = document.getElementById('tab_' + i);
    if (i != val) tb.style.display = "none";
    else tb.style.display = "block";
  }
}
//-->
</script>

그다음 글쓰기 창에서 아래코드를 그대로 복사해서 서식으로 저장해서 사용하세요.


<div class="tabmenuWrap">	
	<div class="tabmenu">
		<div>
			<span onclick="ShowTab('0')" style="cursor: pointer;">관련 글 </span>
			<span onclick="ShowTab('1')" style="cursor: pointer;">최신 글 </span>
			<span onclick="ShowTab('2')" style="cursor: pointer;">추천 글 </span>
		</div>
	</div>
	<div class="tabmenuBot">
		<div id="tab_0" style="width: 100%; display: block;">
			관련글은 여기넣고 
			여기에 광고를 넣고 싶으면 넣고
		</div>
		<div id="tab_1" style="width: 100%; display: none;">
			최신글은 여기넣고
		</div>
		<div id="tab_2" style="width: 100%; display: none;">
			추천글은 여기넣고
			광고를 또 넣고 싶으면 여기넣고
		</div>
	</div>
</div>

글을 쓰다가 넣고싶은 부분에 서식을 불러옵니다. 이미지도 넣을수있습니다.
적당이 스타일도 지정할수 있습니다. 블로그 맞게 스타일을 지정해보세요.

사용팁.

글쓰기 창에 우측에 보시면 이전글 넣기가 있습니다. html 에 체크가 안된상태에서 탭메뉴 서식을 먼저 불러오고 제일위에 관련글에 마우스로 블럭을 지정한상태에서 이전글넣기를 클릭하면 그 자리에 들어갑니다.

나머지는 즉 두번째,세번째탭에 들어갈 내용은 "여기서부터는 탭메뉴 아래부분" 이라고 적힌곳에 이전글넣기를 사용합니다. 모두 링크를 넣었다면 html에 체크를하고 관련글들을 코드로 복사해서 그 자리에 넣습니다.
예를들어 아래처럼 이전글넣기로 링크를 먼저 에디터상에서 넣으세요.

글쓰기 에디터에서 본 화면

그다음 html에 체크를 하고 관련링크를 복사합니다.

html에 체크를 하고 본 화면

그다음 원하는 자리에 붙여넣기 합니다.

이런식으로 최신글과 추천글은 넣으면 됩니다.
결론 처음탭은 그냥 이전글넣기로 넣으면되고 두번째 탭 부터는 에디터에 넣고 다시 html 에디터에서 복사 붙여넣기합니다.
참고로 광고를 넣고 싶다면 서식에 미리 광고를 넣어두세요. 관련주석까지 포함해서 넣은것이 좋습니다.
사용해보니 편집을 할때 관련 내용이 보기 편하거든요.그러니 주석을 같이 넣어서 저장해서 사용하세요.

추가글

이전에 css편집창에 탭메뉴관련 스타일을 지정했는데 스킨변경하면서 없어졌습니다.
생각해보니 아예 스타일을 html 에 삽입해서 사용하는것이 더 나을것 같습니다.
위의 html 코드에 아래스타일을 같이 넣어서 사용하는것이 더 좋을듯 합니다. 스타일은 본인들 블로그에 맞게 수정해서 사용하시면 됩니다.
모두 합쳐 넣으면 대략적으로 아래처럼 되겠군요.


<div class="tabmenuWrap" style="border:1px solid #ddd">	
	<div class="tabmenu" style="background-color:#dee8fa; border-bottom:1px solid #ddd">
		<div>
			<span onclick="ShowTab('0')" style="background:url(./images/down.gif) no-repeat 90% 50%; padding:0 30px 0 20px;cursor: pointer;">관련 글 ▼ </span>
			<span onclick="ShowTab('1')" style="background:url(./images/down.gif) no-repeat 90% 50%; padding:0 30px 0 20px;cursor: pointer;">최신 글 ▼ </span>
			<span onclick="ShowTab('2')" style="background:url(./images/down.gif) no-repeat 90% 50%; padding:0 30px 0 20px;cursor: pointer;">추천 글 ▼ </span>
		</div>
	</div>
	<div class="tabmenuBot" style="padding:5px">
		<div id="tab_0" style="width: 100%; display: block;">
			관련글은 여기넣고 <br />
			여기에 광고를 넣고 싶으면 넣고 <br />
		</div>
		<div id="tab_1" style="width: 100%; display: none;">
			최신글은 여기넣고<br /><br />
		</div>
		<div id="tab_2" style="width: 100%; display: none;">
			추천글은 여기넣고
			광고를 또 넣고 싶으면 여기넣고<br /><br />
		</div>
	</div>
</div>

아래는 위의 예제로 만들어서 본문에 넣어보았습니다. 각각의 탭목록을 클릭해보세요.

관련 글 ▼ 최신 글 ▼ 추천 글 ▼

관련글은 여기넣고
여기에 광고를 넣고 싶으면 넣고

예전의 탭 모양이였습니다.

개 개

demun(대문블로그)

블로그에서 탭메뉴 활용하기

티스토리툴바