본문 바로가기

반응형 티스토리/FastBoot

데스크탑 상단 메뉴 바꾸기 / 블로그 제목에 홈링크 넣기


이 글은 FastBoot 1.6버전과 관련이 있습니다.




  데스크탑에 표시되는 Home, Tags, Guestbook, Recents 버튼을 변경하는 법을 질문해주신 분이 계셨는데, 설명하기가 어렵지 않아 간단하게 작성해봅니다. 추가적으로 블로그 제목에 홈링크를 다는 것을 원하시는 분도 계셔서 이또한 포스팅합니다. 일단 상단 메뉴를 바꾸는 방법은 아래와 같습니다.



데스크탑 상단 메뉴 구성 바꾸기


하단 그림 부분입니다.





수정할 부분


  skin.html를 보시면 아래 부분이 있습니다.

<!--F 데스크탑용 네비게이션 바 시작 --> <div id="desktopNav" class="hidden-xs"> <div class="container"> <p class="graylink pull-right"><a href="/admin" title="Admin"><i class="fa fa-cogs"></i></a><a href="/toolbar/popup/link" title="Add Link" target="_blank"><i class="fa fa-link"></i> Add Link</a><span id="loginout_append"><a href="https://www.tistory.com/login"><i class="fa fa-lock fa-fw"></i> Login</a></span></p> <div class="navMiddle"> <form class="pull-right" role="search"> <div class="form-search search-only"> <i class="fa fa-search search-icon"></i> <input type="text" name="search2" value="" onkeypress="if (event.keyCode == 13) { try{window.location.href='/search/' + looseURIEncode(document.getElementsByName('search2')[0].value);document.getElementsByName('search2')[0].value = ''; return false;}catch(e){} }" class="form-control search-query"> </div> </form> <p class="graylink pull-right rightMenus"> <a href="/">Home</a> <a href="/tag">Tags</a> <a href="/guestbook">Guestbook</a> <a href="/category">Recents</a> </p> <h3>[$$_title_$$]</h3> <p class="text-muted">[$$_desc_$$]</p> </div> </div> </div>


 여기서 주목해야 할 부분은,


	
<p class="graylink pull-right rightMenus">
	<a href="/">Home</a>
	<a href="/tag">Tags</a>
	<a href="/guestbook">Guestbook</a>
	<a href="/category">Recents</a>
</p>
	


  이 부분입니다. 필요 없는 메뉴는 지우셔도 되고, 좌우 폭이 허락하는 한에서 메뉴 추가도 자유롭습니다. 예를들면 <a href="/media">Media</a>로 미디어 메뉴를 추가할 수도 있고, 특정 카테고리를 <a href="/category/aaa">카테고리1</a>과 같은 식으로 추가할 수도 있습니다. 본인의 블로그에서 중요한 컨텐츠라고 생각되는 부분의 메뉴를 추가해주시면 됩니다. 페이스북 페이지도 마찬가지 요령으로 추가하실 수 있습니다. (본인 페이스북 페이지 주소를 넣으시면 되겠죠)




블로그 제목에 홈 링크 넣기


  제목을 눌렀을 때 홈으로 가는 링크가 있으면 좋겠다고 여러 분들께서 제안을 하셔서, 이 역시 어렵지 않아 간단히 소개합니다. 방금 수정한 바로 아래 부분이 타이틀 부분입니다.


<h3>[$$_title_$$]</h3>


  아래처럼 수정하세요.


<h3><a href="/">[$$_title_$$]</a></h3>


 다만 이렇게 수정하실 경우 제목에 링크가 걸리는 것이기 때문에 제목 색상이 파랗게 변하게 됩니다. 이 색을 원하는 색으로 변경하시려면 style.css에 아래 코드를 추가하세요.


	
#desktopNav h3 a {
  color: #aaa;
} 
	

  aaa 대신에 원하시는 색상을 넣으시면 됩니다.