스토리 티에디션 발행 소식을 접하고, 저의 첫번째 티에디션을 발행해봤습니다.
이 티에디션으로 제 블로그 첫번째 화면을 구성할 거라, 첫번째 티에디션은 제 블로그에 있는 주요 주제를 통괄하는 내용으로 만들었습니다. 기존에 테더데스크가 발행이 안되서 방문자들이 적었던 반면에, 티에디션은 테더데스크의 모든 기능을 물려받으면서도, 더 다양한 편집기능과 발행의 기능까지 추가된 점이 특징인것 같네요.
티에디션은 아래와 같이 티스토리 로그인 후에 블로그 홈에 접속하면, 오른쪽하면에 뜨는 티에디션 버튼을 눌러 시작할 수 있습니다.


 블로그 관리화면의 스킨 탭에서 선택하여 편집을 시작할 수도 있습니다. 글을 작성하고 나서 바로 티에디션을 관리할때 편한 기능일 것 같네요.



이제 티에디션으로 진입했습니다. 아래 그림은 시작 화면입니다. 언틋 보면 테더데스크 편집화면과 크게 달라진점은 없어 보이는데, 따로 보관함을 만들어 저장할 수 있는 기능도 있네요. 아쉬운 점은 이 화면에서 바로 발행하는 기능이 아직 마련되지 않았다는 것 같습니다.


왼쪽 위의 작은 편집도구는 이동과 최소화가 가능합니다. 구체적인 기능은 아래와 같습니다.

0123


이것저것을 포괄하는 구성으로 티에디션을 편집한후, 저장하기를 눌러 나갑니다.


완성된 화면을 보니, 위 그림에 표시한 것과 같이 너비가 맞지 않네요. 너비를 조정하기 위해 다시 티에디션 버튼을 누릅니다.



편집화면에 들어오면, 위의 너비조정 버튼을 눌러 너비를 알맞게 늘려줍니다.
위치도 원하는 대로 움직일 수 있군요~



너비가 알맞게 조정이 됐습니다. 저장한 티에디션은 보관함에 저장돼 언제든지 다시 이용할 수 있습니다.


이제 발행을 해 보겠습니다. 아래 그림과 같이 관리화면으로 접속해, 티에디션 설정 화면으로 들어가면, 발행하기 편집탭이 있습니다. 발행처는 현재 트위터와 다음VIEW 두 개 군요. 발행처를 선택한 후 제목을 만들어 주고, 발행 버튼을 누르면 끝~!




발행된 제 첫번째 티에디션을 확인할 수 있습니다.
주소는 http://자신의티스토리블로그주소/te/발행호수와 같이 설정되는군요.
제 첫 번째 티에디션 주소는, http://shymean.tistory.com/te/1 이네요.
그리고 두 번째 티에디션은 IT계열로 꾸며봤습니다.(http://shymean.tistory.com/te/2)
다음 티에디션 발행 계획은 자동차(http://shymean.tistory.com/te/3) 그리고 경제 부문 입니다.


다음뷰에 티에디션을 발행했기 때문에 다음 뷰를 통한 구독도 가능합니다. 이 점이 바로 티에디션의 가장 큰 장점이라고 생각하는데요, 나만의 티에디션 발행을 이용해서 출판을 할 수 있는 것입니다. 일일히 RSS피드를 확인할 필요없이 관심블로거의 티에디션을 확인하면 되니 정말 편리한 기능이 아닐수 없군요.^^ 2호 발행부터는 주제를 가진 티에디션을 만들어 봐야겠습니다.

Posted by designeer shyfragrance

댓글을 달아 주세요

  1. Favicon of https://mamanim.tistory.com BlogIcon 경빈마마 2010.05.15 21:21 신고 Address Modify/Delete Reply

    어떻게 해야 되는지 모르는데 일단 시작해 보려구요.
    알수록 할게 많아지고 공부할게 많아집니다.




무 효과 없이 폰트로만 장식된 밋밋한 디자인의 포스트 제목에 플래쉬 효과를 넣어봅시다.
먼저 아래 파일을 받아서 압축을 풀고, 나온 세 개의 파일을 HTML/CSS 편집을 통해 파일업로드 합니다.



업로드를 끝낸후, HTML/CSS편집으로 돌아와, skin.html 탭에서 Ctrl+F를 이용해, article_rep_title을 찾아줍니다. 그리고 아랫 부분의 코드를 찾습니다.

<h2><a href="[##_article_rep_link_##]">[##_article_rep_title_##]</a></h2>


위 코드를 아래의 코드로 대체합니다.

<script language="javascript"  src="./images/viewTitle.js" type="text/javascript">
</script>
<script language="javascript">
showTitle("./images/", "viewTitle.swf", 600, 30, "[##_article_rep_title_##]", "[##_article_rep_link_##]", "center", "0x00000");
</script>

빨강색으로 된 center는 플래시 효과가 적용될 포스트 제목이 수평상에서 중앙에 위치하도록 한 것입니다. 왼쪽/오른쪽으로 바꾸고 싶을 때는, left나 right를 center대신 넣어주면 됩니다. 0x00000는 플래시 효과의 색깔인데, 16진수 RGB로 다른 색깔도 적용시킬 수 있습니다.





공개/보호/비공개가 각각 따로 article_rep_title이 있는 경우에는 각각 다 <h2>에서 </h2>사이에 있는 기존 코드를 저 코드로 대체해 주셔야 합니다. 제 스킨의 경우는 공개/비공개 글로만 따로 돼있어, 두번의 코드 수정을 하였습니다.


Tip from : 하늘과 바람과 별과 시와 코드와 기타(http://minsangk.com/91)
Posted by designeer shyfragrance

댓글을 달아 주세요

  1. Favicon of http://7047.blatsoffcomics.com/ghd.html BlogIcon ghd 2013.07.11 06:20 Address Modify/Delete Reply

    귀를 기울여봐 가슴이 뛰는 소리가 들리면 네가 사랑하는 그 사람 널 사랑하고 있는거야.

어떤 버튼등을 본문에 글을 쓸때마다 자동으로 표시되게 하고싶을때는, [##_article_rep_desc_##]를 찾아 그것 위 또는 아래에 원하는 소스를 붙여넣기만 하면 됩니다. 예를들어, 본문위에 항상 Bookmark/Share 위젯과, Subscribe위젯을 달고 싶다면, http://www.addtoany.com/에 접속해, 일단 위젯을 받은뒤 [##_article_rep_desc_##] 윗쪽줄에 붙여넣어주기만 하면 됩니다.



위 그림과 같이 www.addtoany.com/buttons/ 에서 버튼의 소스코드를 따옵니다.



그리고 HTML편집으로 돌아와, [##_article_rep_desc_##]의 윗쪽에 버튼들을 붙여줍니다. 저의 경우에는 북마크버튼과, 구독(Subscribe)버튼 두개를 본문 상단에 설치하고 싶어서 이렇게 [##_article_rep_desc_##] 위쪽에다가 소스를 달았습니다.



결과는 위 그림과 같습니다.

이제 본문 밑에 소스를 설치해 보겠습니다. 마이픽업 위젯을 설치하기로 하죠.
http://estorylab.com/18 에 들어가, 트위터와 연동되는 마이픽업 위젯의 코드를 받습니다. 이곳은 마이픽업 개발자분의 블로그인데, 각 블로그 서비스에 맞는 마이픽업 위젯 소스코드를 공개해 주셨습니다. 
저는 티스토리이용자이기때문에, 티스토리용 소스코드를 복사하겠습니다.


마이픽업 위젯은 본문 하단에 위치시키고 싶기때문에 위와같이 제가 분홍박스로 표시한, [##_article_rep_desc_##] 바로 아래쪽에 소스코드를 붙여넣으면 됩니다.
결과는 아래와 같습니다.





Posted by designeer shyfragrance

댓글을 달아 주세요


티스토리 글씨체를 바꾸는 법에 대해서 알아보겠습니다.
파일업로드 없이 그냥 단순한 소스수정만으로는 방문자가 블로그관리자가 소스로 설정한 폰트를 하드에 보유하고 있어야만 바뀐 글씨가 보여집니다. 그래서 방문자의 폰트보유여부와 상관없이 항상 블로그관리자가 지정한 폰트효과를 나타내기 위해 웹에 폰트를 올려 블로그 글씨체를 바꾸는 법을 알아보겠습니다.

단 아래 파일을 받아서 압축을 풉니다.


이 파일을 받아서 압축을 풀면, 설치 exe파일과, html파일하나, 그리고 txt파일 하나가 나오는데요, 설치파일을 제외한 index.htmlSubset.txt은 영어 디렉토리만으로 구성된 곳에 옮겨줍니다. 예를들어 c:에만 옮겨 놓는다는 식으로말입니다. 중간에 한글이나 영어가 아닌 다른 언어가 포함된 디렉토리에 넣어두면 안됩니다. 그리고 WEFTIII2b1.exe파일은 실행시켜 설치를 진행합니다. 설치시 꼭아래의 화면대로 진행해야만 합니다. 설치시 나오는건 대부분다 OK를 누르고 진행하면 되지만, 이부분이 나왔을때 꼭 아래 그림에 표시된 부분의 체크박스를 선택해주세요. Finish를 눌러 설치를 완료합니다.


바탕화면에 생성된 WEFT를 처음 실행시키면 이와같은 잠시후 창이 뜹니다. 여기서 절대로 예(Y)를 누르면 안됩니다. 아니오(N)를 눌러줍니다.






이름이랑 이메일쓰는곳은 대충 휘갈겨도 됩니다. 그리고 다음을 눌러줍니다.


이부분에서 삼각형모양 버튼을 눌러 http://로 선택돼있는것을 file://로 바꿔줍니다. 그리고 첨부파일 중 C:/로 옮겨 놨었던 index.html파일을 "..."버튼을 눌러 불러옵니다.


파일이 추가됐으면 저런 디렉토리의 그림이 나오고, 밑의 체크박스를 체크해 준뒤에 다음을 누릅니다.


그 다음 나오는 창에서도 밑의 체크박스를 체크한 후에 다음을 누릅니다.


이 창이 나오면 밑의 Add버튼을 눌러 폰트 파일을 추가합니다.


폰트 파일이 추가됐으면, Subset버튼을 누릅니다.



Load를 눌러 첨부파일 중 C:/로 옮긴 Subset.txt파일을 불러옵니다. 불러올때는 파일 종류를 All files로 해야 찾을 수 있습니다.


Subset.txt를 불러왔으면, Language를 Hangul로 바꿔줍니다. 그러면 밑의 글씨들이 한글로 나옵니다.


위 과정을 다 완료했으면 다음을 눌러줍니다.


이 창에서 "..."버튼을 눌러 eot파일로 변환시킬 폰트파일의 저장경로를 지정해 줍니다. 저는 c:/wwww/로 지정하겠습니다.



그리고 바로 밑에 있는 Edit버튼을 눌러 위 그림처럼 아까 폰트파일을 저장하겠다고 지정한 file:// 위치를 Add해줍니다. 또 탭을 http:// 으로 바꿔서 자신의 블로그주소를 Add해줍니다. 위 그림과 같은 형식으로 지정했으면 OK를 누릅니다.


그러면 위 그림처럼 경로와 블로그 주소가 지정된 것을 볼 수 있습니다. 밑에 있는 세 개의 체크박스 중 첫번째와 두번째것만 체크한 뒤, 다음을 누릅니다. 그러면 아래와 같은 창이 뜨는데 이때 절대로 다른 버튼을 누르면 안됩니다. 잠시 기다리면 소스가 생성된 것을 알 수 있습니다.


생성된 소스중에 밑줄친 글씨체이름부분은 복사해서 밑의 폰트이름 대신에 넣어줍니다. 확인하고 폰트 eot파일 변환을 마칩니다. 그리고 아까 지정한 경로에 생성된, 확장자가 eot인 파일이 있는지 확인합니다.



제 변환된 eot폰트파일을 블로그의 HTML편집 툴로 돌아와서 파일업로드로 직접 올려줍니다.
파일이 업로드 됐으면, HTML/CSS편집으로 돌아와 소스를 수정합니다. 첨가/변환 해야할 소스는 아래와 같이 총 세 개 입니다.

일단 Ctrl+F버튼을 눌러 <head>로 시작해서, </head>로 끝나는 부분을 찾아줍니다. 소스의 좀 윗부분에 있습니다. </head>윗줄에 아래 코드를 삽입합니다.

<style type="text/css">
@font-face {font-family:폰트이름; src:url(폰트주소);}
a:link {font-family: 폰트이름;font-size: 10pt;}
a:visited {font-family: 폰트이름;font-size: 10pt;}
a:hover {font-family: 폰트이름;font-size: 10pt;}
a:acvite {font-family: 폰트이름;font-size: 10pt;}
body,div,table,tr,td,p,span {font-family: 폰트이름;font-size: 10pt;}
</style>


빨강색글씨로 된 폰트이름 대신에 아까 마지막단계에서 밑줄친 부분에 있었던 폰트이름을 넣어줍니다. 폰트주소는 ./images/업로드한파일이름과 같이 적어주시면 됩니다. 저의 경우 이 소스의 결과는 다음과 같습니다.

<style type="text/css">
@font-face {font-family:나눔고딕; src:url(./images/DBFNT3.eot);}
a:link {font-family: 나눔고딕;font-size: 10pt;}
a:visited {font-family: 나눔고딕;font-size: 10pt;}
a:hover {font-family: 나눔고딕;font-size: 10pt;}
a:acvite {font-family: 나눔고딕;font-size: 10pt;}
body,div,table,tr,td,p,span {font-family: 나눔고딕;font-size: 10pt;}
</style>


제 두번째 소스를 추가해 보겠습니다. 아래에 있는 소스는 <div class="article">을 찾아 그것 대신에 넣어줍니다. 빨강색으로 된 폰트이름에는 마찬가지로 아까와 같은 폰트이름을 넣어줍니다.
<div class="article">이 두 개가 있다면, 둘다 아래 소스로 바꿔줍니다.

<div class="article" style="font:10pt/150% 폰트이름;">

저의 경우는 아래와 같습니다.

<div class="article" style="font:10pt/150% 나눔고딕;">



지막으로 추가해야할 소스는 아래와 같습니다. 이 소스는 skin.html부분이 아니라 밑의 style.ccs부분의 맨 앞줄에 그냥 넣어줍니다. 이 소스도 마찬가지로 폰트이름대신에 아까와 같은 폰트이름을 넣어주고, 폰트주소부분에 업로드된 폰트파일의 주소를 올려줍니다.

@font-face{font-family:폰트이름; src:url(폰트주소)}

저의 경우에는 아래와 같습니다.

@font-face{font-family:나눔고딕; src:url(./images/DBFNT1.eot)}

이제 저장을 누르시고 바뀐 블로그 폰트 모습을 확인하시면 됩니다.
Posted by designeer shyfragrance

댓글을 달아 주세요

  1. 혼수상태 2010.05.01 02:42 Address Modify/Delete Reply

    복잡하네요..

    • Favicon of https://shymean.tistory.com BlogIcon designeer shyfragrance 2010.05.01 10:19 신고 Address Modify/Delete

      저도 직접 해보고 바꾸는데 익숙해지기까지 정말 오래걸렸네요^^;; 그래도 힘들게 한만큼 효과는 확실히 있으니 꼭 한번 해보세요^^화이팅

  2. Favicon of http://damonisch.tistory.com BlogIcon 데모니슈 2010.05.12 23:22 Address Modify/Delete Reply

    와우~ 정말 정말 감사합니다.
    글씨체가 마음에 안드는 건 평소에도 줄곧 생각했었는데, 귀차니즘에 허덕이다 우연히 포스팅을 보고 바꿨습니다. 으흐흐흐흐...
    글씨체도 이것저것 실컷 바꿔봤네요. 덜덜덜.
    다 좋은데요....ㅠㅠ
    그런데요....
    하나 문제가 있는데, 왜 포스팅 제목은 글씨체가 겹치는 걸까요.ㅠㅠㅠ 소스를 수정해야 하나요?

    • Favicon of http://shymean.tistory.com BlogIcon shyfragrance 2010.05.13 09:28 Address Modify/Delete

      저도 이것저것 글씨체를 바꿔봤는데, 폰트 종류에 따라서 띄워쓰기가 안되는 것도 있고, 겹쳐져 보이는 것도 있고 그렇더라구요^^; 맥용/윈도우용 글씨체가 따로 있고, 트루타입과 그렇지 않은 글꼴이 있는것 처럼, 글씨체에 따라 특정 사용자에게는 웹폰트가 제대로 보여지지 않을 수도 있는것 같아요. 요즘 웹에 보면 글씨체를 네이버에서 배포하는 나눔고딕체로 채택하는 사이트가 많아졌는데, 나눔고딕은 이런 충돌이 없어서 그런것 같습니다. 저도 개성있는 글씨체들을 포기하고 나눔고딕을 선택한 이유가 바로 여기 있지요^^; 감사합니다

  3. Favicon of https://mingoo426.tistory.com BlogIcon 민구사이륙 2010.06.06 12:54 신고 Address Modify/Delete Reply

    EOT 파일이 있긴한데, 안보이고 WEFT 으로만 열때 보이는데 어떻하죠?

    • Favicon of http://shymean.tistory.com BlogIcon shyfragrance 2010.06.08 13:08 Address Modify/Delete

      저도 처음할땐 그렇더라구요.
      다른 폴더를 새로 만들어서 한번 다시 해 보세요.
      그리고 혹시모르니 디렉토리에 한글이 있는지 확인해 보시구요.

  4. Favicon of http://525600minutes.tistory.com BlogIcon BeeAnne 2010.08.26 10:54 신고 Address Modify/Delete Reply

    정말 유용한정보! 잘쓸께요~

  5. Favicon of https://sweetecho.tistory.com BlogIcon 탁함 2011.05.26 23:49 신고 Address Modify/Delete Reply

    유용한 정보 감사합니다! 티스토리 글꼴 바꾸고 싶어서 이것 저것 찾아보다가 좋은 정보 발견했네요. 덕분에 글꼴 예쁘게 바꿨어요(^^)

  6. 2011.06.24 10:02 Address Modify/Delete Reply

    비밀댓글입니다

  7. Favicon of https://jinims.tistory.com BlogIcon 최찌니 2016.02.01 18:48 신고 Address Modify/Delete Reply

    글씨가 옆으로 누웠네요 ㅠㅠ


다음뷰, 한RSS, 트위터보내기 버튼을 블로그 스크롤을 따라 움직이도록 적용시켜봅시다.
출처는 http://liverex.tistory.com/452 임을 밝힙니다.


위의 사진은 제 블로그에 적용시킨 화면입니다.

스크롤을 따라 움직이는 구독버튼 추가하기

먼저 아래 버튼 파일을 받은뒤 압축을 풀어 나온 png그림파일들을 HTML/CCS편집에 들어가서 직접 업로드합니다.




압축을 풀고 나온 파일들을 추가했으면, 다시 HTML/CCS 소스 수정탭으로 돌아와서, 아래와 같은 소스코드를 붙여 줍니다. 아래 첨부된 텍스트 파일은 이와 같은 소스입니다. skin.html탭에서 </body>를 찾아주고 </body>바로 위에 이 소스를 추가해 줍니다. </body>소스를 쉽게 찾는 방법은 Ctrl+F3버튼을 눌러 </body>를 검색하면 쉽게 찾을 수 있습니다. 아래 사진은 소스코드를 붙여 넣은 제 블로그의 HTML상태를 보여줍니다.






위 코드는 첨부된 텍스트 파일의 소스와 같은 소스입니다. 파란색글씨는 버튼이 위치할 높이입니다. 높이는 화면 위에서 부터 계산됩니다. 각자의 취향에 맞춰서 높이를 입력하시면 됩니다. 초록색글씨는 구독버튼이 좌측이냐, 우측이냐를 결정하는 것이니, 오른쪽에 버튼을 달고 싶으시다면 left대신에 right를 입력하시면 됩니다. 빨강색글씨는 다음view, 한RSS, 트위터계정의 주소를 입력하는 부분입니다(저의 경우에는 이 소스를 추가하기전에 트위터 버튼이 있었기 때문에 트위터 버튼 부분은 뺐습니다.). 혹시 구독 주소를 모르실 분들을 위해 아래에 구독주소 찾는 곳의 링크를 걸어놓겠습니다. 그리고 흑백이미지/컬러이미지 URL에는 아까 업로드했던 파일의 주소를 붙여넣어야 합니다. 파일의 주소는 아래 그림과 같이 추가한 파일을 찾고 그림위에서 '오른쪽마우스버튼-속성'클릭하여 찾으시면 됩니다.



구독 주소 찾는 방법

 다음View 의 경우,



http://bloggernews.media.daum.net/reporter/의 뒷편에 자기 다음 아이디를 입력하면 찾을 수 있습니다.


한RSS 의 경우,



한RSS에 들어가서 로그인후, 나타나는 왼쪽 메뉴중 구독버튼 추가하는 부분에 들어가 RSS주소 부분에 자기 블로그 주소를 입력하면 소스가 나옵니다. 여기서 따옴표를 제외한 밑줄친 부분이 바로 한RSS 자기 블로그 구독 주소입니다.
Posted by designeer shyfragrance

댓글을 달아 주세요

  1. Favicon of http://23331.ccgenevois.com/uggfrance.php BlogIcon ugg 2013.07.11 01:23 Address Modify/Delete Reply

    지금은 반짝반짝 빛이 나겠지,, 하지만 시간이 흐르면 그빛은 사라저버릴거야,지금 우리처럼

티스토리에서 기본으로 제공되는 태그 사이드바 위젯을 태그구름으로 폼나게 바꿔봅시다.
이를 위해선 파일을 직접 업로드 하고, HTML소스를 수정해야 하는데, 그리 어렵지 않은 과정인 것 같아 포스팅 합니다. 출처는 http://hshin.info/282 임을 밝힙니다.

Step1. 태그구름 파일 업로드하기

아래 링크를 다운받아 압축을 풀면 swfobject.js와 tagcloud.swf 두 개의 파일이 나온다. 이 두 파일을 스킨 직접올리기 기능을 이용해서 올린다.
 




파일을 업로드 한 후 HTML수정 창으로 돌아와 찾아야 하는 부분은 <s_random_tags> 밖에 있는 <ul>~</ul>입니다.




<ul>
    <s_random_tags>
    <li>
      <a href="[##_tag_link_##]" class="[##_tag_class_##]"> [##_tag_name_##]</a>
    </li>
    </s_random_tags>
  </ul>

그리고 위의 부분을 찾아서 이 소스를 몽땅 지우고, 아래의 코드로 대체 합니다.
굵은 부분은 Light TT 플러그인과 융합이 잘 되도록 추가된 부분입니다.

<div id="htags" style="display:none;"><tags>
  <s_random_tags>
    <a href="[##_tag_link_##]" class="[##_tag_class_##]">[##_tag_name_##]</a>
  </s_random_tags>
<a href="/"></a></tags></div>
<div id="TiCumulus"><p>Tistory Cumulus Flash tag cloud by <a href="http://zoc.kr">BLUEnLIVE</a> requires Flash Player 9 or better.</p></div>
<script type="text/javascript" src="./images/swfobject.js"></script>
<script type="text/javascript">
  var t = new SWFObject("./images/tagcloud.swf", "tagcloud", "100%", "200", "7", "#ffffff");
  t.addVariable("tcolor", "0x222222");
  t.addVariable("mode", "tags");
  t.addVariable("distr", "true");
  t.addVariable("tspeed", "100");
  t.addParam("allowScriptAccess", "always");
  t.addParam("wmode", "opaque");
  t.addVariable("tagcloud", document.getElementById('htags').innerHTML.replace(/&amp;/gi, ' ').replace(/class=([\w]+)/gi, 'class="$1"').replace(/\"\"/gi, '"').replace(/class=\"/gi, 'style=\"font-size:').replace(/:cloud([\d])/gi, ':1$1pt;').replace(/TAGS\>/gi, 'tags>').replace(/\<A\s/gi, '<a ').replace(/\<\/A\>/gi, '</a>').replace(/\"/g, "'"));
  t.write("TiCumulus");
</script>
Posted by designeer shyfragrance

댓글을 달아 주세요