티스토리 폰트어썸 아이콘 고정 사이드바 만들기

티스토리 블로그 폰트어썸 아이콘 고정된 사이드바 만드는 방법 입니다 매우 간단하며 PC화면에서만 보이는 사이드바 입니다 모바일 화면에서는 전혀 보이지 않습니다 이 사이드바 태그는 외국사이트에서 응용을 했습니다 플로팅 메뉴보다 더 간단하고요 조금 틀린부분이 있습니다 고정메뉴와 애드센스, 클릭몬, 쿠팡파트너스 광고 등을 배치 할려면 이 사이드바를 추가하시면 됩니다 어케보면 3단 사이드바 스킨 같은 구조인것 같습니다

 

HTML 태그와 CSS 코드 추가하기

HTML 추가

<s_sidebar_element>

<!-- The sidebar -->
<div class="sidebar">
  <a href="#home"><i class="fa fa-fw fa-home"></i> Home</a>
  <a href="#services"><i class="fa fa-fw fa-wrench"></i> Services</a>
  <a href="#clients"><i class="fa fa-fw fa-user"></i> Clients</a>
  <a href="#contact"><i class="fa fa-fw fa-envelope"></i> Contact</a>
</div>

</s_sidebar_element>

위 태그는 HTML 부분에서 사이드바 영역에 추가를 했습니다

 

티스토리 사이드바 추가

 

이렇게 추가를 하시면 됩니다 사이드바 메뉴를 하나 더 만든다고 생각 하시면 됩니다

사이드바가 아니면 /body 바로 윗부분에 추가를 시키시면 됩니다

 

CSS 추가

/* Style the sidebar - fixed full height */
.sidebar {
  height: 100%;
  width: 160px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 16px;
}

/* Style sidebar links */
.sidebar a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 20px;
  color: #818181;
  display: block;
}

/* Style links on mouse-over */
.sidebar a:hover {
  color: #f1f1f1;
}

/* Style the main content */
.main {
  margin-left: 160px; /* Same as the width of the sidenav */
  padding: 0px 10px;
}

/* Add media queries for small screens (when the height of the screen is less than 450px, add a smaller padding and font-size) */
@media screen and (max-height: 450px) {
  .sidebar {padding-top: 15px;}
  .sidebar a {font-size: 18px;}
}

 

두번째로 해야하는 부분은 CSS 추가를 해야 합니다 위 CSS 코드를 모두 복사하시고 CSS 편집 맨 하단에 추가를 하시면 됩니다

 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

 

마지막으로 해야하는 부분은 폰트어썸을 화면에 보이게 할려면 위 코드를 HTML 부분에서 head 바로 위에 붙여넣기를 하시면 됩니다

 

티스토리 사이드바

이렇게 HTML과 CSS 코드 추가를 끝났습니다 이제 티스토리 메인화면에 가시면 좌측에 사이드바가 추가된것을 볼수 있습니다

HTML과 CSS 코드는 밑에 메모장을 다운로드 받아서 붙여넣기 하시면 됩니다

 

티스토리 사이드바.txt

0.00MB

 

사이드바 기타 부분 수정하기 설명 예)

다른곳을 수정하고 싶은데 모르신다면 이 방법대로 해보세요!

메뉴 추가하기와 폰트어썸 아이콘 추가하는 방법

 

광고는 그냥 붙여넣기 하시면 됩니다 그런데 메뉴는 조금 다릅니다

 

<!-- The sidebar -->
<div class="sidebar">
  <a href="#home"><i class="fa fa-fw fa-home"></i> Home</a>
  <a href="#services"><i class="fa fa-fw fa-wrench"></i> Services</a>
  <a href="#clients"><i class="fa fa-fw fa-user"></i> Clients</a>
  <a href="#contact"><i class="fa fa-fw fa-envelope"></i> Contact</a>
</div>

 

메뉴는 이 영역입니다

 

a href 이 부분은 메뉴 주소나 기타 주소를 입력하시면 됩니다

 

 

<i class="fa fa-fw fa-home"></i> 이 부분은 폰트어썸 아이콘 입니다 

 

폰트어썸

 

원하는 폰트어썸 아이콘으로 바꾸거나 추가를 하실려면 폰트어썸 사이트에서 마음에 드는 아이콘을 클릭 합니다 링크

Font Awesome Icons

 

그리고 맨 밑 부분쯤에 파란색 부분에 있는 폰트어썸 아이콘 코드만 복사를 합니다

 

<i class="fa fa-fw fa-address-book-o"></i> 복사한 코드를 이렇게 붙여넣기 하시면 됩니다

 

</i> Home</a> HOME을 지우시고 원하는 메뉴 이름으로 바꾸시면 됩니다

 

 

마지막으로 티스토리 관리자 메뉴에서 꾸미기 - 사이드바 - Load an icon library 를 사이드바에 배치하시면 됩니다

사이드바 코드 부분

.sidebar {
  height: 100%;
  width: 160px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 16px;
}

1,사이드바 넓이 조정은 CSS .sidebar 에서 width: 160px; 을 조절 합니다

2, 메뉴 아래위 조절은 TOP: 을 조절 합니다다

3, 사이드바 배경 컬러는 background-color: 을 조절 합니다

4, 사이드바 좌측, 우측 바꾸는 방법은 left: 0; 이 부분에서 right: 0; 로 바꾸시거나 - px값으로 조절하셔야 합니다

.sidebar a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 20px;
  color: #818181;
  display: block;
}

 

1, 폰트어썸 아이콘 크기와 글짜 크기는 CSS .sidebar a 에서 font-size: 이 부분을 조절 합니다

2, 메뉴 정렬은 padding: 이 부분을 조절 합니다

 

@media screen and (max-width: 1800px) { #aside { display: none; } }

 

모바일에서 이 사이드바가 나온다면은 미디어 퀴리를 쓰면 됩니다 #aside 이 부분을 .sidebar로 바꾸시고 적용을 하시면 모바일 화면에 안 나타나고 오류도 안납니다

 

여기까지 입니다 그럼 잘 꾸미시길 바랍니다