[Tistory] 사이드바 커스터마이징

2021.03.17 스킨 변경함!

현재 변경한 사이드바 커스터마이징은 디지털뱃지밖에 없음 (파일 사이즈는 60x60으로 함)

<center>
	<div id="badge">
		<a href="복사한 url"><img src="./images/저장한 파일 이름"></a>
		<a href="복사한 url"><img src="./images/저장한 파일 이름"></a>
		<a href="복사한 url"><img src="./images/저장한 파일 이름"></a>
	</div>
</center>

얘를 <div id="sidebar__counter">와 <div class="uk-float-left uk-text-left"> 사이에 넣어주었다

CSS엔 아래만 추가해 줌

#badge {
	margin-bottom: 10px;
}

 

==옛날꺼==

 

사용하는 테마의 사이드바가 원래도 이뻤지만, 몇가지를 고치고 싶었다

1. 블로그 이름 위에 내 아이콘 보이기

2. 방문자 수와 검색창을 위로 올리기

3. 최근 댓글 등의 메뉴들 없애기

4. 내 디지털 뱃지 자랑하기

 

 

1. 블로그 이름 위에 내 아이콘 보이기

먼저 파일업로드 탭으로 가서 원하는 사진을 등록해준다

 

 

다시 HTML 탭으로 돌아와, s_t3의 id가 sidebar인 div를 찾는다

class가 blank인 div 아래에 다음 코드를 적는다

<div id="sidebar_profile">
	<center>
		<img class="thumbnail" src="./images/haejang.png" width="100" height="100">
	</center>
</div>

 

 

haejang.png는 내 사진이니까 본인 사진의 이름으로 바꿔주자

그리고 이렇게만 하면 사진이 좀 붕 뜬 느낌으로 나올텐데, 위의 blank 섹션을 조정해주면 된다

 

CSS 탭으로 가서 blank를 찾아보면 #sidebar .blank라는 부분이 있다

난 이 부분을 아래와 같이 수정해줬다

#sidebar .blank { clear: both; width: 50%; height: 50px; }

 

 

2. 방문자 수와 검색창 위로 올리기

이건 사실 별거 없는데, 그냥 s_sidebar의 "widget counte"와 "widget search"섹션을 찾아 위로 올려주기만 하면 된다

 

 

원랜 밑에 있던 Counter와 Search를 s_sidebar태그 바로 아래로 옮겨줬다

 

3. 최근 댓글 등의 메뉴 없애기

최근 댓글(Recent Comments), 뭔 링크(Links) 등을 없애려고 주석처리를 했는데 없어지질 않았다

왜 안없어지지? 했는데 관리자모드 > 꾸미기 > 사이드바 에서 (이름없음1)을 없애줘야 한다

 

 

이런식으로 해두고 저장하면 최근댓글이 사라져있다

(이름없음2)는 뭔지 모르겠다(아마 링크?인거같은데 넣어두나 마나 아무것도 안떠서 걍 없애버렸다)

 

4. 내 디지털 뱃지 자랑하기

acclaim에 로그인하면, 내가 딴 디지털 뱃지들을 볼 수 있다

원하는 뱃지를 클릭해 Share을 누른 후 ↓를 눌러 로고를 다운받는다 (원하는 사이즈로 받으면 됨. 난 102x102로 함)

 

받은 로고는 원하는 이름으로 저장한 후 티스토리 파일업로드로 올린다

그리고 링크를 클릭해서 url을 복사한다

 

그리고 아래와 같이 HTML 코드를 수정한다

<s_sidebar_element>

<div class="blank1"></div>
<div class="widget">
	<center>
		<div id="badge">
			<a href="복사한 url"><img src="./images/저장한 파일 이름"></a>
		</div>
	</center>
</div>

</s_sidebar_element>

 

난 2개라서 2개 씀

CSS에도 아래 코드를 추가해주자

.blank1 { clear: both; width: 50%; height: 50px; }

#badge > a {
	padding: 7px;
}

blank1이란 div는 원래 있는 blank란 클래스랑 동일하게 만들었고, 로고끼리 조금 떨어졌으면 좋겠어서 padding으로 띄워놨다

 

완성된 모습

 

로고를 클릭하면 acclaim으로도 잘 이동된다

 

 

+) 이 테마는 맨 밑에 최근 글을 4개 이미지를 띄워서 보여준다

 

 

이게 너무 이뻐서 인기 글도 해주고 싶었다

s_sidebar_element 중 recent-post란 섹션을 복사해서 밑에 붙여넣어준 후

<s_rctps_rep> 태그만 <s_rctps_popular_rep> 태그로 변경해주면 끝난다

결과

 

 

참고로 나는 최근글, 인기글의 링크는 지우고 크기도 h3으로 올렸다