티스토리 Fast 1.6.2 스킨 #4 사이드바 추천글 모듈 설치하기

안녕하세요! 뚱이 블로그입니다. fastboot 스킨의 추천글에 대해서 이번시간에 포스팅 해 볼까합니다.

블로그로 돈벌기 위해서는 인터넷이 되는 컴퓨터만 있다면 충분히 가능합니다.

저는 티스토리로 돈벌기 위해서 즉 애드센스로 수익을 내기 위해서 지난 3년 넘게 제가 터득한 노하우들을 공개하려고 합니다.

하지만 애드센스 승인을 받았다고해서 당장에 수익이 발생하는 구조는 아니라는 것입니다.

매일 꾸준하게 1포씩 해나가다 보면 시간이 지나게 되면 유입=광고클릭=수익으로 이어지는 구조가 발생하게 되는 것입니다.

제가 포스팅한 글들을 제대로 읽으신다면 월 300만원의 수익은 아니더라도 꾸준하게 부업으로 수익이 발생하게 될 것입니다.

내가 원하는 글, 내가 드러내고 싶은글, 방문자들이 원할 것 같은 글들을 사이드바에 넣을 수는 없을가를 생각하다가 따라해본 것입니다.
조금더 많은 시간을 내 티스토리에서 머물게 할 수는 없을까? 하는 생각으로 한참 고민을 하던중에 fastboot 1.6.2 의 제작자이신 readiz님이 사이드바 추천 모스트를 추가하는 방법을 설명한것을 찾았습니다.

모방은 창조의 어머니다라는 말이 떠오르더군요. 스킨을 어찌 적용시켜야한다는 것 자체가 따라해보면서 자신의 것으로 만들어가는 것이라 생각합니다.

옛말에 목마른 사람이 우물을 판다는 말이 있듯이, 이 갈증을 해결하기 위해서 아마도 readiz님이 사용자들을 위해서 올려주신것이 아닌가 생각해봅니다.
출처:http://blog.readiz.com/228

추천글 모듈은 내가 강조하고자 하는 포스팅이나 아니라면, 조회수가 많은 포스팅들로, 아님 유저들이 많이 관심을 가질 주제등으로 다양한 각도로 응용이 가능하다고 생각합니다.

이것이 완성된 사이드바에 생성이 된 저의 추천글 모듈입니다. 일단은 완성품을 본후에 만들어보는 법을 따라해볼까합니다.

사이드바 추천글 모듈을 위해서 먼저 html을 수정
<s_sidebar_element>

<div id="recommended" class="panel panel-default">
<h4 class="panel-heading"><i class="fa fa-flash"></i>추천글</h4>
<ul class="list-group list-group-flush">

</ul></div></s_sidebar_element>

추천글 사이드바.txt

텍스트 파일을 첨부할텐데 검은색으로 두껍게 된 줄쳐진 부분만 수정을 해주시면 되겟습니다.
먼저 다들 아시겠으나, 혹시나 하는 마음에 각 명령어에 들어가게 될 것들의 설명부터 할까합니다. 'a href="자신이 링크하고자 하는 포스팅 주소입니다', img src="썸네일의 주소랍니다', 'alt=썸네일 텍스트 설명 부분입니다.'
<li class="list-group-item">에서 시작을 해서 </li>로 끝나는 부분까지가 하나의 포스팅을 추천 모듈에 올리기 위한 부분입니다.

즉 다시 말해서 추천글을 10개를 하고 싶다면 <li class="list-group-item">에서 시작해서 </li>로 끝나게 되는 소스코드를 10개 만들면 되는 것입니다.

<span class="name">HOT</span>부분은 빨간색 박스의 뱃지입니다. HOT하다는 것을 강조하면서 내 티스토리에 유입을 한 방문자들로의 호기심을 유발시켜서 페이지뷰를 늘릴 수 있게하는 마케팅 효과를 노릴 수 있게 됩니다.

위에 텍스트 첨부파일을 다운 받으셔서 자신의 포스트 주소,이미지 주소,썸네일 텍스트 설명,포스팅 제목으로 변경하신후에 꾸미기-스킨편집에서 HTML로 들어가셔서 찾아야 할 부분은 CTRL + F로 '블로그 설명 모듈'을 검색 합니다.

그리고는 윗 부분에 잇는 <s_sidebar>과 <s_sidebar_element>부분에 한칸의 공간을 만드시고 거기에 붙여 넣으시면 일단 html부분에서의 작업은 끝이라고 보셔도 될 것입니다.
썸네일 부분은 저 같은 경우는 C36x36즈로 만들어서 일단 스킨편집에서 html로 들어가면 마지막에 잇는 파일업로드라는 곳에 만든 썸네일을 업로드 시켜서 일단 저장을 했습니다.
그리고는 오른쪽 마우스 버튼을 눌러서 이미지 주소를 복사해둡니다.

사이드바 추천글 모듈을 위해서 CSS 부분을 수정
/*추천글 모듈*/
#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;
}

#recommended ul li:hover span.name>span
{
background-color: #F7D358; (마우스 오버시에 바뀌게 될
border-color: #F7D358; 배경색입니다.)
color: #ff0000 !important; (마우스 오버시에 바뀌게 될 텍스트의 색상입니다.)
}

FastBoot 1.6.2 사이드바 추천글 모듈.txt

#recommended ul li:hover span.name>span 부분은 마우스 오버시에 뱃기의 배경색상과 텍스트의 색상이 변경되는 태그입니다.
태그의 입력 위치는 CSS창을 여신후에 맨 밑으로 쭈욱 내려가셔서 마지막에 붙여주시면 되겠습니다.

관련 키워드로는 블로그로 돈버는 방법,인터넷으로 돈벌기,컴퓨터로 돈벌기,컴퓨터로 돈버는 방법,인터넷으로 돈버는 방법,컴퓨터로 하는 부업,집에서 돈벌기,블로그 수익창출,돈 버는법,집에서 돈버는 방법,타이핑 알바,재택근무,직장인 투잡알바,주부알바,재택알바,주부알바 재택부업,유튜브,블로그 포스팅 알바가 존재를 합니다.

저작자표시

티스토리 Fast 1.6.2 스킨 #4 사이드바 추천글 모듈 설치하기

티스토리툴바