반응형 스킨 제작을 하고 싶어서 부트스트랩을 최근에 공부하고 있습니다.
어디서부터 어디까지로 정해야지, 무작정 모든 기능을 다 넣기에는 시간도 오래 걸리고..
정작 블로그를 언제 다시 시작할지 막막하여 최소한으로 했습니다.


스킨 무료 배포 중이니
댓글이나
카톡 ID : liemi
로 문의주세요!


사용해보시고 티스토리 블로그 기능 내에서
부족한 부분이나 추가해줬으면 하는 부분 알려주시면 추가 보충 가능합니다~


그외에 애드센스, AddThis, 검색등록, 댓글 기능 등은
제각각 추가해야 하는 부분이라 제외시키고 보내겠지만
필요하신 부분은 문의해주시면 답변 가능합니다.


어려운 부분은 유료로 추가 가능합니다.


현재 네이버 웹마스터도구 기준으로 상위 5% 사이트라 뜰 정도로 최적화는 되어 있지만..

결함이 많은 스킨이라 배포 중지 했습니다. 틈틈히 고쳐나갈 생각인 건 변함이 없지만

음악을 하기 시작하고.. 또 여러가지를 하다보니 시간이 많이 부족하네요 ㅠㅠ


또한 이참에 자바 개발자로 정말 제대로 배울 예정이라..

본격적으로 배우면서 제 블로그 또한 성장시킬 생각입니다.


그때까지는 저도 대충 쓰려고 합니다...;;;


네이버에 이웃이 있다면 티스토리에는 링크가 있다. 

다만, 말 그대로 링크.. 


링크한 블로그의 새 글을 바로 확인할 수 있는 기능이 없다. 즉, 반대로 나를 링크한 블로그에서도 내가 쓴 새 글을 확인할 수 없다. 이러한 기능을 사용할 수 있도록 하는 것이 '네이버 이웃커넥트' 이다. 


다른 블로그 서비스를 이용해도 이웃을 맺을 수 있는 장점이 있어 블로그에 설치하면 유용하다. 이번에 새 글 소식을 꼭 받고 싶은 블로그가 네이버 블로그이다보니 꼭 설치해야 겠다는 생각이 들었다.


네이버에서 제공하는 거라 네이버 블로그는 개설과 함께 자동 설치이지만 티스토리에서는 따로 설치해야 한다.


해당 화면에서 '다른 블로그로 퍼가기'를 선택하면 블로그 주소 입력란이 뜬다. 자신의 블로그 주소를 입력하고 원하는 디자인으로 자유자재로 선택하고 '퍼가기'를 클릭한다. 참고로 네이버 로그인이 되어 있어야 한다.


'퍼가기'를 클릭하면 코드가 생성된다. 코드를 복사해서 티스토리에 붙이고 싶은 곳에 붙이면 된다.

티스토리 스킨 제작 시 치환자를 써야하기에 에디터를 사용하는 것보다 티스토리 안에 있는 'HTML/CSS 편집'을 사용하는 것이 편리합니다. 그런데 이 도구를 사용하려면 스킨이 저장되어 있어야 합니다. 앞서 작성했던 index.xml 포함 이번에 소개할 skin.html과 style.css 가 꼭 있어야 합니다. 여기서 처음부터 skin.html과 style.css를 'HTML/CSS 편집'에서 작성하면 좋겠지만 아무런 내용도 없는 파일은 스킨 저장이 되지 않기에 저는 레이아웃을 정하면서 skin.html과 style.css 내용을 채웠습니다.


skin.html


<!doctype html>

<html lang="ko">

<head>

    <title>[##_page_title_##]</title>

    <meta charset="utf-8">

    <meta name="description" content="[##_desc_##]">

    <meta name="author" content="[##_blogger_##]">

    <meta name="keywords" content="티스토리, 로그래밍, HTML, CSS">

    <meta name="robots" content="티스토리, 프로그래밍, HTML, CSS">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="alternate" type="application/rss+xml" title="[##_title_##]" href="[##_rss_url_##]" >

    <link href="./style.css" rel="stylesheet" type="text/css">

    <script src="./images/prefixfree.min.js"></script>

    <!--[if lt IE 9]>

<script src="./images/html5shiv.js"></script>

    <![endif]-->

</head>

<body>

<s_t3>

<header></header>


<div id="article"><article></article></div>


<aside></aside>

<footer></footer>

</s_t3>

</body>

</html>


관련글 : HTML 문서 기본 구조 !doctype, html, head, body 

관련글 : style과 link, 그리고 CSS 선택자

관련글 : HTML5 시맨틱 태그 header, nav, section, article, aside, footer


빨간색으로 표시한 부분은 치환자 및 꼭 넣어야 하는 태그들입니다. 그외 구성요소는 위에 링크들을 보시면 아실 수 있습니다.


style.css


@import url(//fonts.googleapis.com/earlyaccess/nanumgothic.css);

*{margin:0; padding:0; font-family: 'Nanum Gothic', sans-serif; color:black; text-decoration:none;}


header{

    width:100%;

    background-color:black;

    

    height:100px;

}

#article{

    width:100%;

    float:left;

    margin-right:-340px;

    

    height:100px;

    background-color:yellow;

}

article{

    margin-right:340px;

}

aside{

    width:340px;

    float:right;

    

    height:100px;

    background-color:green;

}

footer{

    clear:both;

    width:100%;

    

    height:100px;

    background-color:blue;

}


사실 flex로 레이아웃을 지정하려고 했지만 문제점이 발생되어 float로 레이아웃을 만들었습니다.

빨간색으로 표시한 부분처럼 설정해놓으면 aside는 340px 너비 고정, article 너비 값만 유동적인 2단 레이아웃을 만들 수 있습니다.



위에 설정값대로 스킨을 저장하면 이렇게 뜰 텐데요. 이렇다보니 운영중인 블로그에서 하기에는...;;; 

저같은 경우도 따로 블로그를 새로 만들어서 스킨 테스트로 사용하고 있습니다.


스킨등록시 index.xml, skin.html, style.css 파일이 필수이다. 하나라도 없으면 스킨 등록이 안된다.
이 중에서 가장 먼저 알아볼 것은 index.xml이다. 이에 대한 설명은 tistory.com/guide/skin/step5에 있지만..
작성한 내용이 어디로 입력되는지 궁금해서 알아보다가 알게 된 내용을 포스팅 하게 되었다.


<?xml version="1.0" encoding="utf-8"?>

<skin>

<information></information>

<author></author>

<default></default>

</skin>


가장 큰 단위로는 information, author, default가 있다.


information

<information>

<name>Mini</name>

<version>1.0</version>

<description><!CDATA[ 2단 레이아웃으로 가장 기본인 글의 초점을 맞추었습니다. ]]</description>

<license><!CDATA[ 재배포 금지, 저작권 표시하에 자유롭게 수정이 가능합니다. ]]</license>

</information>


author

<author>

<name>Minimelody</name>

<homepage>http://minimelody.tistory.com</homepage>

<email>minimelodi@naver.com</email>

</author>


default

<default>

<showListOnCategory>1</showListOnCategory> (카테고리 - 0 : 숨김, 1 : 보임)

<showListOnArchive>1</showListOnArchive> (글보관함 - 0 : 숨김, 1 : 보임)

<tree>

<activeColor>000000</activeColor>

<activeBgColor>eeeeee</activeBgColor>

<color>000000</color>

<bgColor>ffffff</bgColor>

<labelLength>27</labelLength>

<showValue>1</showValue> (카테고리 글 수 - 0 : 숨김, 1 : 보임)

</tree>

</default>


<default>

<contentWidth>760</contentWidth>

</default>


<default>

<itemsOnGuestbook>10</itemsOnGuestbook>

<expandComment>1</expandComment> (댓글 - 0 : 닫힘, 1 : 펼침)

<expandTrackback>0</expandTrackback>(트랙백 - 0 : 닫힘, 1 : 펼침)


<recentEntries>5</recentEntries> 

<lengthOfRecentEntry>27</lengthOfRecentEntry>

<recentComments>5</recentComments>

<lengthOfRecentComment>30</lengthOfRecentComment> 

<recentTrackbacks>5</recentTrackbacks>

<lengthOfRecentTrackback>30</lengthOfRecentTrackback> 

<lengthOfRecentNotice>25</lengthOfRecentNotice>

<lengthOfLink>30</lengthOfLink>

<tagsInCloud>30</tagsInCloud>

<sortInCloud>3</sortInCloud> (1 : 인기순, 2 : 이름순, 3 : 임의순)

</default>


<default>

<commentMessage>

<none></none>

<single></single>

</commentMessage>

<trackbackMessage>

<none></none>

<single></single>

</trackbackMessage>

</default>


트랙백은 물론, 댓글 조차도 설정하지 않았다. 댓글 조차 설정하지 않은 이유는 HTML/CSS 편집을 해도 여기에 설정한 값이 나타나서이다. 처음에는 이걸 잘 몰라서 멋대로 작성되는 바람에 짜증이 날 정도였으니. 결국 이게 문제인 걸 알고는 아예 삭제했다.


현재 '구글 애드센스로 돈 벌기'라는 책을 읽고 티스토리에 반영하고 있는데요. 가장 큰 고민이 '스킨'이었습니다. 기존 스킨 중에서는 '수익 극대화에 최적화된 4가지 레이아웃'에서 소개된 첫번째 레이아웃에 적합한 것이 없드라구요..


그래서 결국 직접 제작하기로 결심하고
HTML과 CSS를 공부하기에 이르렀습니다....


그리고 미완성이지만 어쨌든 완성한 첫번째 스킨 입니다.



보시다시피 애드센스 광고가 적합한 위치에 제대로 들어가 있습니다.
현재 디자인 되어 작동하는 기능은 가장 기본인 글과 카테고리 부분입니다.


좀 더 작업을 하고 오픈을 할까 하다가 이 기능만으로도 동작하는 데 무리가 없어 바로 오픈 했는데요.


저작권 표시하에 자유롭게 수정이 가능합니다. 단, 재배포 금지!
아직 반응형 스킨이 아니라 모바일웹은 ON으로 해주셔야 됩니다.


구글이나 다음은 잘 검색되지만.. 역시나 네이버 ㅠㅠ..

이번 포스팅이 계속 검색 되지 않는 것을 보니 스킨을 중간에 바꾸면 검색되지 않는다는게 사실인가 봅니다.


처음 티스토리로 왔을 때를 생각하면서 다시 힘내보겠지만.. 이제 막 포스팅들이 검색되기 시작했는데

다시 시작하려니 암울하기도 하고.. 앞으로의 포스팅들도 검색되지 않는 다고 생각하니 힘빠지지만..


그래도 방법을 찾아가는 게 맞다 판단하고 밀어붙이려고 합니다.


이후 포스팅은 스킨 제작 과정을 낱낱히 밝혀내려고 하는데요.

스킨 제작하는 데 도움이 되셨으면 좋겠습니다.


  1. 티스토리 잼나는 블로그 입니다.

  2. 딸래미아빠 2017.11.08 21:06 신고

    다운은 어디서 받아요??

    • 미니멜로디 2017.11.08 23:27 신고

      죄송합니다ㅠ 이 스킨은 사용하다보니 부족한 게 많아서 현재 새 스킨 제작중입니다. 빠르면 내일.. 이번주내로 제작완료하고
      새롭게 올릴 예정입니다. 무료스킨으로 제공할 예정이니 그때 확인해보시고 괜찮다 싶으면 다운받게끔 올려놓을게요!

  3. 딸래미아빠 2017.11.09 07:47 신고

    네^^

사실 티스토리보다 더 많은 애드센스 수익을 올릴 수 있는 곳은 유튜브라는 건 누구나 다 아는 사실일 것입니다. 그럼에도 불구하고 전 티스토리를 중심으로 놓고 있습니다. 이유는 유튜브가 동영상 콘텐츠만 담을 수 있다면 블로그는 동영상 포함 사진과 글도 담아낼 수 있어서입니다. 무엇보다 유튜브 동영상도 가지고 올 수 있으니 이보다 더 좋을 순 없을 것 같습니다.


무슨 공부가 되었든 꼭 봤으면 하는 동영상이 있어서 포스팅을 하려고 했는데요. 글쓰기 어디에도 유튜브 동영상을 넣을 수 있는 방법이 안 보이더군요. 그래서 이참에 티스토리에 유튜브 동영상을 올리는 방법을 간략하게 소개하겠습니다.


유튜브 동영상 넣기


관리 - 플러그인 설정 - 글쓰기에 들어가시면 'YouTube 동영상 넣기'라고 있습니다.
확인을 누르시고 글쓰기 페이지로 오면 오른쪽 하단에 플러그인을 확인하시면 'YouTube'라고 있습니다.



Let's teach for mastery - not test scores, Sal Khan

유튜브 공유에서 해당 동영상의 주소를 복사해서 YouTube 페이지에 검색하시면 원하는 동영상을 이렇게 가져올 수 있습니다. 제가 소개하면서 가져온 이 동영상은 칸 아카데미에 가입하면서 메일로 보내준 동영상인데요. Sal Khan의 TED 강의입니다. 그동안의 학습이 무엇이 잘못된 건지 생각하게 됩니다.


공부를 잘하는 사람과 공부를 못하는 사람의 차이는 무엇일까요? 그럼 공부를 못하는 사람은 영원히 공부를 못하는 걸까요? 그들의 차이점은 단지 '속도' 차이였을 뿐 잘하는 사람, 못하는 사람 구별을 지을 수 없다고 생각됩니다. 그러나 현재 교육들은 모든 사람들에게 같은 '속도'를 강요하면서 따라가지 못하는 사람은 '패배자'로 인식합니다. 같은 수업을 듣고 시험을 보면 학생들마다 다른 점수를 받습니다. 사회는 점수에 따라 학생을 판단하기만 하고 다음 수업을 이어나갑니다. 그러다 보면 자신이 부족한 부분이 어떤 부분인지 알면서도 그저 사회가 정해놓은 '속도'에 맞춰서 넘어가니 갈수록 어려워지는 거였습니다.


얼마 전 갔다 온 소프트웨어 컨퍼러스에서 느낀 것만 생각해도 앞으로 공부하지 않는 사람, 발전이 없는 사람은 더 이상 일할 수 있는 곳이 없겠다는 생각이 들었습니다. 결국 앞으로는 계속 공부하는 사람, 성장해나가는 사람만이 살아남을 듯싶은데요. 과거의 실패를 실패라 생각하지 말고 지금부터라도 남들이 정해놓은 것이 아닌 자기만의 '속도'를 정해놓고 공부하다 보면 원하는 목표를 이룰 수 있을 거라 생각됩니다.


아이디만 있으면 만들 수 있는 네이버 블로그 VS 초대장이 있어야만 시작할 수 있는 티스토리

이렇게 보면 왜 대부분의 사람들이 두 가지 서비스를 놓고 고민을 하는지 이해가 되지 않을거다. 사용하기도 쉽고 방문자 유입률도 압도적으로 높은 네이버 블로그를 선택하는 게 당연하니까. 그러나! 솔직하게 이야기를 털어보면 블로그를 단지 순수한 목적으로만 하려는 사람보다 이왕 하는 거 '돈'되는 일을 하고자 하는 사람이 더 많지 않을까? 어쩌면 처음에는 돈을 바라지 않더라도 결국 시간을 돈으로 바꿀 수 있는 일이 아니면 결국 지치지 않을까?


블로그로 돈을 벌 수 있는 방법이 다양하다고는 하지만 처음 시작하는 초보자가 도전하기에 가장 쉬운 방법은 포스팅에 '광고'를 걸어 놓는 것이다. 이 방법은 흔히들 사이트나 무료 어플에 광고를 걸어놓는 것과 일치하다. 이는 사람들에게 정보를 제공한 대가를 받는다고 생각하면 된다. 네이버 블로그는 애드포스트, 티스토리는 애드센스 서비스를 사용할 수 있다. 


구글 애드센스


티스토리와 유튜브, 그리고 애드센스!

애드포스트와 애드센스! 두 가지 서비스는 비교하기도 부끄러울 정도로 압도적으로 애드센스 수익률이 높다는 것은 공공연한 사실이다. 이러한 이유 때문에 쉬운 네이버 블로그를 포기하고 티스토리를 선택한 사람들이 적지 않다. 무엇보다 애드센스는 유튜브 동영상에도 광고를 걸 수 있는 서비스라 티스토리와 함께 유튜브를 운영하면 수익을 몇 배로 올릴 수 있을 거라 예상된다.


+ Recent posts