티스토리 쉽게 따라하기 - 우측 사이드바 추천(Recommended) 모듈 달기

티스토리 쉽게 따라하기 - 우측 사이드바 추천(Recommended) 모듈 달기

오늘은 우측 사이드 바에 추천 모듈을 달아 보도록 하겠다. 이건 fastboot스킨을 쓰는 분들 뿐 아니라 티스토리 전체 사용자에게 적용된다.

추천 모듈은 자신이 보여주고자 하는 포스팅이나 링크를 걸 수 있도록 하는 것으로, 추천 모듈을 통해 페이지뷰를 늘릴 수 있을 것으로 예상된다. 추천 모듈을 설정하는 방법은 두가지가 있다.

첫번째 방법은 html 편집으로 들어가서 추천 모듈 소스를 삽입하는 방법이 있고, 두번째는 사이드바 메뉴에서 html 배너출력을 통해서 설치하는 방법이다. 이 중 쉬운 두번째 방법으로 설치하는 법을 배워 보도록 하겠다. 어차피 결과는 똑같기 때문에 이왕이면 조금이라도 더 쉬운 방법이 좋지 않겠는가? 또한 이방법은 나중에 수정할때도 더 편하다.

추천 모듈 설치 방법 - 사전 준비 작업

추천 모듈은 아래 그림에 나와 있는 것을 말한다.

추천 모듈을 통해서 자신이 보여주고 싶은 특정 포스팅이나 링크를 걸 수 있으며, 이부분은 설정해 놓으면 자동으로 변하지 않으며, 수동으로 바꿔줘야 한다.

일단 추천 모듈을 설치하기 위해선 우선적으로 해야할 것들이 있다. 바로 왼쪽에 있는 이미지를 만들어 놓아야 한다.

1. 이미지 준비하기

1>왼쪽 이미지 만들기

포토샵이든 다른 방법이든 원하는 이미지를 만든다. 사이즈는 80 * 80 픽셀이 적당하다.

추천모듈에 들어갈 갯수는 원하는 만큼 만들 수 있는데 필자는 6개를 만들었다. 그러므로 왼쪽에 들어갈 이미지는 6개인데, 각 칸마다 다른 이미지를 넣어도 되고 하나로 통일해도 되고 그건 마음대로 하면 된다. 일단은 배우는 단계이니 한개씩만 해보겠다.

원하는 이미지를 만들었으면 이제 이미지를 웹상에 올려야 한는데, 우리는 티스토리를 쓰고 있으므로 티스토리에 업로드를 하면 된다.

2>이미지 업로드 하기

이미지를 업로드 하기 위해서 블로그관리로 가서 블로그관리홈>꾸미기>HTML/CSS편집 으로 들어간다.

여기서 상단에 파일 업로드를 클릭하면 현재 올려져 있는 이미지들이 보인다.

아래로 가서 +추가 를 클릭해서 이미 만들어져 있는 이미지를 올린다.

업로드 된 파일을 클릭하면 오른쪽으로 이미지가 보인다. 마우스 우측을 클릭해서 링크주소복사를 클릭하여 이미지 주소를 복사해 놓는다.

참고로 크롬을 사용한다면 위 그림처럼 나올텐데 익스플로어를 쓴다면 속성을 클릭해야 할 것이다.

주소를 복사했으면 메모장을 열어서 붙여넣기를 하여 메모장 입력해 놓는다.

2. 보여줄 포스팅 주소 준비하기

두번째로 미리 준비해 놔야 할 것은 보여질 포스팅 주소이다. 원하는 포스팅으로 들어가면 상단 주소란에 있는 주소를 복사한다.

이역시 메모장에 붙여 넣기를 해 논다. 참고로 티스토리 내에서의 포스팅이기 때문에 주소 전체가 아니라 녹색 네모 부분인 /1 부분만 있어도 상관없다.

이제 준비는 다 끝났다. 그럼 본격적으로 추천 모듈을 넣어보자.

추천 모듈 설치 방법 - CSS 수정

일단 CSS를 수정해야 한다.

아래 메모장 파일을 다운 받는다.

사이드바 추천 모듈 CSS.txt

메모장을 열면 아래와 같이 점선 안에 있는 내용이 있을 것이다.

--------------------------------------------------------------------------

#recommended .thumb img {
width: 40px;
height: 40px;
margin-left: -5px;
margin-right: 15px;
float:left;
border-radius: 0.5em;
}
#recommended span.name>span {
display: inline-block;
min-width: 10px;
padding: 3px 7px;
font-size: 12px;
font-weight: bold !important;
line-height: 1;
color: #fff !important;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
background-color: #da4453;
border-color: #da4453;
border-radius: 10px;
padding-left:11px;
}
#recommended span.name>span:empty {
display:none;
}

----------------------------------------------------------------------------

이 내용을 복사한다. 그리고 블로그관리홈>꾸미기>HTML/CSS편집으로 가서 CSS부분을 클릭한다.

여기에 적당한 곳을 찾아 붙여넣는다. 필자는 / *태그* / 위에 넣었다.

그리고 우측 상단에 저장을 클릭하고 나온다.

이제 여기 까지 했으면 거의 다 왔다. 마지막 단계만 남았다.

추천 모듈 설치 방법 - 사이드바 HTML 배너출력 추가하기

블로그관리홈>꾸미기>사이드바로 간다. 여기서 [플러그인]HTML 배너출력 + 부분을 클릭해서 우측에 생성시킨다. 그리고 원하는 위치로 끌어당겨 위치를 잡고 난 후

아래에 있는 추천모듈 메모장을 다운 받는다.

사이드바 추천 모듈.txt

그럼 아래와 같은 내용이 있을 것이다.

----------------------------------------------------------------------------------------------------------

<s_sidebar_element>
<div id="recommended" class="panel panel-default">
<h4 class="panel-heading"><i class="fa fa-flash"></i> Recommended</h4>
<ul class="list-group list-group-flush">
  <li class="list-group-item">
   <a href="★"><span class="thumb"><img src="●" alt=""></span>
    <div style="text-indent:-4px"><i class="fa fa-angle-right"></i> 여기에 제목을 입력하세요.

-----------------------------------------------------------------------------------------------------------

다른건 특별히 건들건 없다.

★를 지우고 대신 아까 메모장에 복사해 놓았던 포스팅 주소를 넣는다. 포스팅 맨 끝 주소인 /1 만 넣어도 된다.

그리고 ●를 지우고 그곳에 복사해 놓았던 이미지 주소를 넣는다.

여기에 제목을 입력하세요 부분을 지우고 포스팅 제목을 입력한다.

수정을 했으면 전체를 복사한다.

그리고 다시 사이드바 배너 출력으로 간다. 우측 편집 을 클릭하면 창이 나오는데 이름을 쓰고 HTML소스 칸에 좀전에 복사한 소스를 붙여 넣고 확인을 눌러 저장을 한다.

아래 변경사항저장을 클릭하고 블로그로 가보면 추천 모듈이 있는 것을 확인 할 수 있다.

추천 모듈 설치 방법 - 칸 늘이기와 HOT 수정

1. 칸 늘이기

칸을 늘이는 것은 모듈 소스중 다음 부분이다. 이부분 전체가 하나의 칸이라고 생각하면 된다.

<li class="list-group-item">
<a href="★"><span class="thumb"><img src="●" alt=""></span>
<div style="text-indent:-4px"><i class="fa fa-angle-right"></i> 여기에 제목을 입력하세요.

이부분에서 포스팅 주소, 이미지 주소, 제목 수정 후 아래에 그대로 붙여넣기만 하면 한칸씩 추가되며, 몇개를 만들어도 상관없다.

2. HOT 뱃지 수정

추천 모듈 제목 오른 쪽에 빨간 HOT 아이콘 뱃지를 볼 수 있다. 이부분에 대한 소스는

<span class="name"><span>HOT</span></span> 이다.

위 HOT 부분을 삭제하면 뱃지가 없어지며 이곳에 다른 글자를 넣으면 해당 글자로 뱃지가 보이게 된다.

글자를 입력하여 원하는 아이콘으로 수정해서 쓰면 된다.

3. 추천 모듈 위 제목바 수정

추천 모듈 위 지붕부분을 수정하려면

<h4 class="panel-heading"><i class="fa fa-flash"></i> Recommended</h4>을 수정하면 된다.

flash는 아이콘 번개모양, 빨간 글씨는 제목 부분이다. 원하면 수정하면 되며 이부분에 대해서는 예전에 포스팅 해논 부분이 있으니 참고하길 바란다.

[IT & WEB/티스토리 쉽게 따라하기] - 티스토리 fastboot 우측 사이드바 배너 위 제목바 만들기

추천 모듈 만들기 다 끝났다. 설명을 자세히 하느라 길게 느껴질지 몰라도 사실 그대로 따라만 한다면 매우 쉽다. 만든 추천 모듈을 잘 활용해서 보기좋은 블로그로 꾸며 가길 바란다.