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

Posted by Readiz
2014.06.02 11:32 반응형 티스토리/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 대신에 원하시는 색상을 넣으시면 됩니다.

저작자 표시 비영리 변경 금지
신고
이 댓글을 비밀 댓글로
  1. 이전 댓글 더보기
  2. 감사하게 잘쓰고 있습니다.
    질문이 있는데, 간혹, 내 블로그를 몇명이나 방문했나, 살짝 보기를 원하는데,,
    하단등에 금일방문자 숫자 카운트가 나오게 할려면 어떻게 해야 할까요?
    • 기본 사이드바 카운터 적용하시면 될 것 같은데요.. 지금 아마 숨김으로 해두신 듯 합니다. ^^
      또한 티스토리 스킨가이드 보시면 방문객에 대한 치환자가 나와있으니 이를 쓰시면 될듯 해요.
  3. 잘보고갑니다 '';;
  4. 최근 구글애널리틱스를 이용해 사용자 평균 페이지 로드시간을 봤는데

    두자리수이네요 ㅠ
    로드시간을 줄일방법은 뭐가 있을까요?
    • 애널리틱스에 나오는건 모든 요소가 로딩되는데 걸리는 시간이라서 크게 우려하실 부분은 아닙니다. 보통 구글광고가 다 로딩되는데 많은 시간이 걸리죠..
      제스킨은 물론이거나와 대부분의 스킨들은 컨텐츠부터 랜더링되도록 구조를 신경써서 구성해놓았기 때문에 실제 체감하는 속도와 수치상 속도는 차이가 있습니다.
  5. 본문 사이드바와 타이틀 적용 했습니다~ CSS를 몰라서 좀 험난한 과정이였습니다 ㅠㅠ

    타이블 아래 글은 어떻게 넣나요? 그냥 넣으니까 아래 글이 안사라지고 위로 밀리네여 ㅠ;;
    • 네?? ㅎㅎ
      제가 이해를 잘 못하겠네요.. 조금만 자세히 ㅠ
      링크도 걸어주시면 도움이 됩니다.
    • Readiz
      Read easy. http://readiz.com/
      이렇게 쓰신 부분이에요

      [Read easy. http://readiz.com/] -> 이부분이 포스팅 글을 읽을때

      아래로 가면 상단메뉴 부분이 작아지자나요.

      Readiz Read easy. http://readiz.com/ <--이런식으로 나오더라구요.


  6. youtube 영상의 경우 상단 메뉴보다 상위로 위치하게 되던데..
    이거 해결방법은 없을까요??
    그리고 상단 메뉴를 고정이 아닌 일반적인 홈페이지 식으로 바꾸는 방법은 없는지 궁금합니다.
    상단 메뉴가 스크롤 내려도 존재하면 편할 것 같지만 왠지 어색한 부분도 많아 보입니다.
    • 유투브는 iframe이라서 브라우저에 따라 상단에 위치하는 경우도 있고 아닌 경우도 있습니다, 어려운 문제네요..
      말씀하신 것은 css에서 fixed속성들을 다 지워주시면 됩니다. 제가 직접 수정하실 수 있는 방법을 포스팅할 수 있었으면 좋겠는데 이번주는 좀 힘들 것 같습니다. 만약 같은 문제가 반복되시면 다음주중에 다시 물어보시면 제가 추가포스팅을 하도록 하겠습니다. 죄송합니다..
  7. 좋은 스킨 정말 감사합니다. ^^ 쉽고 빠르게 고쳐서 잘 쓰고 있습니다.
    문의 드리고 싶은 것은
    상단 고정 바 부분에 카테고리가 쭉욱 가로로 길게 나오는데, 제 블로그 카테고리 전체가 나와서 두줄이 되어 버렸네요. 나오게 하고 싶은 카테고리 항목만 나올 수 있게 고치려면 어떻게 하면 좋을까요?
    - 제 블로그는 bsmilal.tistory.com 입니다. ^^
  8. FastBoot 홈 화면은 어떻게 바꾸나요^^;;
    궁금해 미치겟어요~~
  9. 감사합니다. ^^
  10. 상단메뉴를 화면설정에 있는 메뉴랑 연동시키려고 했는데 역시 아는게 없으니...OTL
    치환자가 [#_blog_menu_#]라는거 빼고는 알아낸게 없네요.ㅠ

    ps. 댓글 수정하려고 보니 수정/삭제 버튼이 쓰레기통 모양으로 되어있어서 삭제버튼으로 착각하고 한참 찾았네요. 톱니바퀴 모양으로 바꾸는게 어떨까요?
  11. 좋은 정보 감사합니다.
    제 블로그에도 적용 완료 했습니다 ㅎ
  12. 와 잘 따라 했습니다 감사합니다.
  13. <h3>[$$_title_$$]</h3>

    이부분이 없는데요?...
  14. 감사합니다
  15. 정말 좋은 스킨 감사합니다
    정말 오랜만에 새로 블로그를 만들면서 이것저것
    (클라우드 태그, 메인 우측 사이드바, 홈타이틀 링크걸기,네이버이웃커넥트,파비콘,아이콘 등등)
    적용하는데 깔끔한 반응형 스킨...
    첨 접하지만 매력에 푹 빠졌습니다~
    능력자십니다~ㅎㅎ
    정말 감사합니다~^^

    명절 연휴 마무리 잘하시고 새해 복 많이 받으세요~!!!^^
  16. readiz님 너무 깔끔한 스킨에 반하고 있는 중입니다.
    데스크탑 상단 메뉴(home,tags.guestbook,recents 등)를 깔끔하게 이미지로 바꿀 수 없나요?
    <img src> 사용하니까 이미지가 완전 크게 나와 상단메뉴 전체가 이상해지더라구요...

    부탁드립니다~~
  17. 정말 감사합니다. 이상없이 적용해서 잘 쓰고 있습니다.
  18. 감사합니다~ 적용했어요~

    그런데 혹시.. 메인 타이틀에 배경화면을 넣는 법 좀 알려주시면 좋겠어요..^^
    • 2015.08.15 23:52
    비밀댓글입니다
  19. 이 블로그를 내 링크로 추가하는 메뉴를 표시할려면 어떻게 해야 하나요.
  20. 질문이 있습니다. 상단에 검색하는곳을 길게 고정되어 나타낼수있나요? 마우스로 눌렀을때 길어지게 말구요.

티스토리 툴바