[구글블로그스팟 운영하기] 상단메뉴 수정하기

블로그스팟 템플릿 적용후, 상단에 있는 메뉴내용 수정하기

블로그스팟 무료 템플릿은 이전 포스팅을 참고해주세요.
이전 포스팅 보러가기: [예쁜스킨 제공하는 사이트]

기존 처음 데모에 나와있는 상단메뉴에요.
템플릿을 가져와서 블로그에 적용을 시키면 저 메뉴 내용도 그대로 적용이 되어버리죠.ㅎ
이 상단 메뉴의 내용을 변경시켜보려고 해요.

블로그 운영자 모드에 들어가셔서 [템플릿]-[HTML 편집]으로 들어가 주세요.
수정을 해야하는데 먼저 메뉴줄의 내용을 찾아야하는데요. 너무 방대한 양때문에 일일이 하나씩 코드를 읽어서 찾을수가 없어요.

그래서, 검색을 해서 찾아보려고 해요.
html창안에 커서를 한번 클릭해준후에 [Ctrl]+[F]를 눌러주세요.
그러면 작은 검색칸이 추가로 나오는 것을 찾을수 있을거에요.
검색칸에 입력할 부분은 상단메뉴에 나오는 글중에서 home제외한것중에 아무거나 선택해서 입력해주세요.
위의 데모사이트를 예로 들면 Business나 health를 검색칸에 입력하시면 해당 메뉴칸으로 바로 이동하게 될거에요.

그럼 아래와 같은 내용들이 나오는 것을 발견할수 있어요.
아래 코드는 상단 메뉴에 대한 코드에요. 이내용을 필요한 내용만큼 입력하고 지워서 변경해 주시면 돼요.

변경해야할 상단메뉴의 코드내용

변경전의 코드 내용이에요.
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>

<li><a href='#'>Business</a>
<ul class='sub-menu'>
<li><a href='#'>Internet</a></li>
<li><a href='#'>Market</a></li>
<li><a href='#'>Stock</a></li>
</ul>
</li>

<li><a href='#'>Downloads</a>
<ul class='sub-menu'>
<li><a href='#'>Dvd</a></li>
<li><a href='#'>Games</a></li>
<li><a href='#'>Software</a>
<ul class='sub-menu'>
<li><a href='#'>Office</a>
</li>
</ul>
</li>
</ul>
</li>

<li><a href='#'>Parent Category</a>
<ul class='sub-menu'>
<li><a href='#'>Child Category 1</a>
<ul class='sub-menu'>
<li><a href='#'>Sub Child Category 1</a></li>
<li><a href='#'>Sub Child Category 2</a></li>
<li><a href='#'>Sub Child Category 3</a></li>
</ul>
</li>
<li><a href='#'>Child Category 2</a></li>
<li><a href='#'>Child Category 3</a></li>
<li><a href='#'>Child Category 4</a></li>
</ul>
</li>

<li><a href='#'>Featured</a></li>

<li><a href='#'>Health</a>
<ul class='sub-menu'>
<li><a href='#'>Childcare</a></li>
<li><a href='#'>Doctors</a></li>
</ul>
</li>

<li><a href='#'>Uncategorized</a></li>

</ul>
</nav>
</div>
</div>

변경이 필수적으로 되야할곳에 색깔을 연하게 변경해 두었어요.
템플릿마다 메뉴 내용은 다르지만 형식은 거의 비슷하니 참고해주세요.

HTML로 세부적인 상단메뉴 수정하기

[#]에는 해당 메뉴를 클릭했을때, 그 사이트로 넘어가게 하는 링크주소를 입력해 줘야해요.
블로그스팟에서는 카테고리라는것이 따로 없기때문에....
해당 태그만을 모아서 볼수 있는 블로그스팟의 방식을 이용해 메뉴처럼 보이게 하려고 해요.

[메뉴이름]을 변경할때는... 원하시는 수만큼 추가할수도 지울수도 있어요.
단, html형식을 맞춰야하기 때문에 시작과 끝만 맞춰주면 돼요.
예를 들어 <li>로 시작되면 </li>로 끝이 나야해요. 끝의 /표시가 없으면 오류가 나게되죠.


제 블로그의 메뉴는 아직 블로그 내용이 별로 없어서 메뉴도 간단한데요.
아래는.. 현재까지 만들어놓은 메뉴대로의 코드에요.
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>

<li><a href='http://olmangjolmang.blogspot.com/search/label/IT'> IT</a>
<ul class='sub-menu'>
<li><a href='http://olmangjolmang.blogspot.com/search/label/%EB%B8%94%EB%A1%9C%EA%B7%B8'>블로그</a></li>
<li><a href='#'>게임,어플</a></li>
<li><a href='#'>김프</a></li>
</ul>
</li>


<li><a href='#'>DRAMA,MOVIE</a>
<ul class='sub-menu'>
  <li><a href='#'>미드/영드</a></li>
<li><a href='#'>해외영화</a></li>
<li><a href='#'>한국영화</a></li>
</ul>
</li>

<li><a href='#'></a></li>

</ul>
</nav>
</div>
</div>

아직 포스팅이 되지 않은 메뉴들은 기본틀로만 만들어놓은 상태라, 링크주소는 #표시 그대로 비워두웠어요. [#]자체를 지우시면 코드 자체가 오류나니까...
빈체로 메뉴를 만들길 원하시면 #표시를 꼭 넣어주세요.

태그를 이용해 링크주소를 쓰실때는...
이미 포스팅되어있는 글 태그에 오른쪽마우스로 클릭을 하시면 메뉴창이 나오는데요.
거기서 링크주소를 복사해서 쓰시면 돼요.

빨간색으로 표시해둔 부분이 있는데요. 
꼭 마지막에 하나 넣으시는게 좋을꺼같아요. 제가 사용한 똑같은 템플릿이라면요!
저 링크를 뺐을때..
세부메뉴가 있다는 표시의 << 이모양이 메뉴글씨 중간에 나와버려서 모양이 흐트러지더라구요.
간단하게 빈 메뉴를 하나 더 넣으면 괜찮아져요.ㅎ

메뉴가 더 필요하시면 중간중간에...
<li><a href='#'></a></li>
이코드를 계속 추가로 넣어서 이용하시면 돼요.