2009년 7월 21일 화요일

블로그 스킨 변경 팁 공개

 좋은글을 쓸만한 능력은 없고, 그래도 만들어 놓은 블로그에 뭔가는 해야겠고...

 그래서 비도 주적 주적 오는날씨에 어디 나갈때도 없고 해서 맨날 스킨 잡고 놀고 있습니다.

 텍큐입성 한달도 채 안되어서 블로그 스킨만 3번 째입니다. 누가 알아주진 않지만, 프라나비 님의 칭찬에 힘입어 나름 몇가지 팁을 공개해보겠습니다.

 1. 블로그 타이틀을 이미지로 변경하기

 일단 깜군이를 가장 많이 찾아주시는 어지할까 님의 블로그 상단에 보시면 블로그 제목이 나옵니다.
 
 하지만 제 블로그는 이미지로 바꿨습니다.

 그리고 마우스 커서를 올리면 블로그 타이틀이 나옵니다. 클릭하면 블로그 첫페이지로...

 스킨편집들어가셔서, skin.html 중 header 내에 <h1>...</h1> 요 부분을 살짝 수정하면 됩니다.

 일반적으로

<div id="header">
    <h1><a href="[##_blog_link_##]"><span>[##_title_##]</span></a></h1>
  </div>

 이렇게 된 부분을 ...

<h1><a href="[##_blog_link_##]" title="[##_title_##]"><img src="이미지 경로" /></a></h1>


이렇게 바꿔주시면 됩니다.


2. 상단 가로 카테고리 메뉴


 이것은 윤초딩 이 공개해주신겁니다. 티스토리용인데 이것또한 텍큐에서 쓸려면 쉽게 쓸 수 있습니다.
< 파일 주신 윤초딩님께 감사... But 텍큐닷컴에서 쓰는법을 안갈켜주셔서리...>

 링크걸어놓은 윤초딩님 블로그에서 사용방법과 파일을 받으셨다면, 몇가지만 고치면 텍큐에서도 쓸 수 있습니다.

 일단 받으신 파일중에 생소한 menu.js 파일은 스킨편집 - 파일업로드 에서 업로드 조차 안됩니다. 일단 다른계정에 올리시는 방법이 있고 두번째 좋은 방법은 텍스트큐브 비공식 가이드 #2 (마음따라 발따라 딴따라 님)편을 보시면 해결 방법이 나옵니다.

 그리고 <head></head> 사이에 넣을 소스는 <body></body> 사이에 넣어도 됩니다. 저는 HTML 위젯에 소스를 넣어 사용합니다. 텍큐닷컴에서는 <head></head>사이에 소스를 넣어도 적용이 안됩니다.


3. 관심블로그 등록 이미지 바꾸기


 이것은 Briller Kate 님이 공개해주신겁니다. 덧붙여 설명할 것이 없네요.^^ 그냥 가서 보시면 끝~~


4. Syntax Highlighter 적용

 이건 블로그팁 / 플러그인 등을 사용하기 쉽게 만들어 주시는 BLUEnLIVE 님이 공개해주신 겁니다.


 Syntax Highlighter가 적용된 부분에 마우스를 올리시면 우측상단에 4가지 메뉴가 뜹니다.

 첫번째 것은 새창으로 그 소스만 보여주며, 두번째는 클립보드에 자동으로 복사해줍니다. (윈도우 기본 메모장에 붙여넣기하면 깨저서 나옵니다. 다른곳은 이상이 없네요.^^) 세번째것은 프린트해주는 메뉴. 마지막것은  Syntax Highlighter 정보가 나옵니다.

 소스등을 공개할때 아주 유용한 플러그인입니다. 링크걸어놓은 BLUEnLIVE 님 블로그에서 설명과 파일을 다운받으신 후 텍큐닷컴에 업로드가 안되는 *.js 및 *.swf 파일을 다른 경로로 올려주시고,

 역시 안되는 <head></head> 사이에 넣어야할 소스는 <body></body> 사이혹은 HTML 위젯을 만들어 사용하시면 됩니다.

  다른계정에 파일 업로드하고 피곤하실것 같아서 제 소스 그냥 공개합니다. 그냥 파일 업로드 없이 그냥 사용하셔도 될거예요. ^^

<script type="text/javascript" src="http://cfs.tistory.com/custom/blog/38/384413/skin/images/shCore.js"></script>
<script type="text/javascript" src="http://cfs.tistory.com/custom/blog/38/384413/skin/images/shBrushCpp.js"></script>
<script type="text/javascript" src="http://cfs.tistory.com/custom/blog/38/384413/skin/images/shBrushCSharp.js"></script>
<script type="text/javascript" src="http://cfs.tistory.com/custom/blog/38/384413/skin/images/shBrushCss.js"></script>
<script type="text/javascript" src="http://cfs.tistory.com/custom/blog/38/384413/skin/images/shBrushDelphi.js"></script>
<script type="text/javascript" src="http://cfs.tistory.com/custom/blog/38/384413/skin/images/shBrushDiff.js"></script>
<script type="text/javascript" src="http://cfs.tistory.com/custom/blog/38/384413/skin/images/shBrushJScript.js"></script>
<script type="text/javascript" src="http://cfs.tistory.com/custom/blog/38/384413/skin/images/shBrushPlain.js"></script>
<script type="text/javascript" src="http://cfs.tistory.com/custom/blog/38/384413/skin/images/shBrushXml.js"></script>
<script type="text/javascript" src="http://cfs.tistory.com/custom/blog/38/384413/skin/images/shBrushMsx.js"></script>
<script type="text/javascript" src="http://cfs.tistory.com/custom/blog/38/384413/skin/images/shBrushAvs.js"></script>
<script type="text/javascript" src="http://cfs.tistory.com/custom/blog/38/384413/skin/images/shLegacy.js"></script>
<link type="text/css" rel="stylesheet" href="http://cfs.tistory.com/custom/blog/38/384413/skin/images/shCore.css"/>
<link type="text/css" rel="stylesheet" href="http://cfs.tistory.com/custom/blog/38/384413/skin/images/shThemeDjango.css"/>
<script type="text/javascript">
     SyntaxHighlighter.config.bloggerMode = true;
     SyntaxHighlighter.config.clipboardSwf = 'http://cfs.tistory.com/custom/blog/38/384413/skin/images//clipboard.swf';
     SyntaxHighlighter.all();
</script>

 위 소스도 Syntax Highlighter 플러그인 적용시킨것입니다. 쉽게 퍼가세요 ^^

14 행의 shThemeDjango.css 은 Syntax Highlighter 의 스타일입니다. 모두 10가지가 있으니 맘에 드시는 걸로 사용하시면 끝~~

 이런 볼품없는 팁제공 글이지만, 막상 작성하는 깜군은 뒈진다는것...그래서 격려의 댓글과 피드백!!!필수

댓글 23개:

  1. 능력이 대단하신 깜군님...와우~!

    밧뜨 1번에 제 블로그 타이틀을 넣어 주셨지만

    아쉽게도 저는 절대 고칠 능력이 없다는 거~~~ ^^;;

    결국은 염장질 이라는거~~~ ㅋㅋ

    하지만 포스트는 정말 좋다는거~~~



    비 피해 없으시길 바래요~~

    답글삭제
  2. 와! 4번 궁금했던 건데~~ 깜군님께서 센스있게 이리 포스팅해주시다니~~~ 멋져요~!! ^^

    링크도 감사합니다 하핫~ ^ㅡ ^

    트랙백 걸고 갈께용용 ^^

    답글삭제
  3. trackback from: 텍스트큐브닷컴 블로그 스킨 수정시 참고할만한 포스팅
    블로그 스킨 수정하면서 도움이 되었던 사이트와 포스팅들 소개해드리려구요. 스킨에 변화를 주고 싶으신 분들은 아래 링크들을 돌아다니시면서 참고하시는 것도 좋을 것 같습니다. * Textcube.org 설치형 블로그 서비스, 다운로드, 블로그키워드, 스킨모음 및 제작가이드 수록. 메뉴 중 [ 스킨 ] 에 들어가시면, 올라온 자료들 중에 마음에 드는 스킨을 다운받으실 수 있습니다. 다운받으실 때, 그 스킨에 달려있는 댓글들도 한 번쯤 읽어보시구요. 스킨..

    답글삭제
  4. 아유아유! 유용한 팁들 감사 감사. ㅋㅋㅋ

    블로그 잠수 좀 오래 오래 타볼까 했더니,

    깜군님을 비롯한 많은 분들이 갑자기 마마마막

    적용해보고 싶은 팁들 포스팅 하셔서

    빨리 돌아와야겠다 싶네요 ㅎㅎ

    답글삭제
  5. @어찌할가 - 2009/07/21 04:31
    스킨과 비교불가인 '좋은글'<어려븐글;;;>을 써주시잖아요!!

    그나저나, 어찌할까님은 약간 긴 머리에, 불때 안경을 끼시고, 코에 밴드를 하시는군요.음하하~ 자다 일어나니 비가 생각보다 별로 많이 오지는 않았네요.^^

    답글삭제
  6. @Briller Kate - 2009/07/21 08:31
    저야;; 머! Briller Kate님 같은분이 올려놓은거 약간 모아소~ 글하나 뚝딱 (T.T 한 두어시간...) 작성하면 되는걸요.음하하.. 관심맺기 팁이 상당히 맘에듭니다. 능력자분들 만쉐이~!!

    답글삭제
  7. @김젼 - 2009/07/21 11:40
    빨리 돌아오세요~~ 그나저나 릴레이 바톤 넘겨주시고, 바로 잠수를 타시다니,,, 역시 잠수엔 '숨쉬고 싶은 욕망'을 살짝 살짝 계속 건들어 줘야 한다눙...캬캬캬~~!! 나한테 바톤이 빨리오면 복수할거임...와라..와라..바통 바통...

    답글삭제
  8. 어? 회색~ 멋지다능 ㅋㅋ 그리고 스킨 가이드 정말 잘 보았슴돠 .^^

    답글삭제
  9. trackback from: 티스토리 상단 가로 카테고리메뉴 소스 사용법
    대구사랑 님께서 제 티스토리 스킨중 헤드부분 메뉴가 마음에 드셨는지.. 소스를 부탁하셨는데.. 혹시 다른분들도 필요하실지 몰라서 올려봅니다. 제가 사용중인 스킨은 워드프레스 테마를 수정한것입니다. 원제작자의 링크는 스킨하단에 있습니다. 티스토리의 카테고리 치환자만으로는 소스의 구현이 안되서 카테고리 타이틀 링크를 수작업으로 일일이 넣어서 사용하는거라 상당히 귀찮습니다. 욜 왕짜증 작업이니 인내심이 많으신 분들만 참고하세요. 제가 현재 상단에 사용중이..

    답글삭제
  10. 팁 정리 포스트는 완소 포스트 가운데 하나지요. ㅎㅎ

    답글삭제
  11. @koreasoul - 2009/07/21 12:41
    캬캬, 어떤분이 빨간색스킨이 눈아푸다고 하시길래;; 회색으로 좀 바꿨답니다. 그분이 아주 잘생긴 분이시던데... ^^

    답글삭제
  12. @mahabanya - 2009/07/21 17:25
    아하~ 그렇군요. 사실 머리를 쥐어짜서 몇개 더 적을라고 캤는데.. 이글 작성하는데 (대강,캡쳐하고 미리보기도 몇번하고,)도 두어시간...커헉;; 팁을 좀더 모아서~ 다음에 후속편 작성'예정만!!' 있습니다. ^^

    답글삭제
  13. 오랜만에 들렸어요.. 요즘 너무 갑작스레 많은일이 터져서 블로그를 거이 하지 못했네요^^ 이제 원상복귀했습니다 ^^ 곧 스킨 변경할려하는데 많은 도움이 될것 같네요..

    답글삭제
  14. @분홍별장미 - 2009/07/22 17:35
    아궁궁,,, 댓글을 두개나 올려주시다니;;ㅋㅋ 하나는 제가 삭제햇습니다. 요즘 저도 영 블로그 스킨만 잡고 놀아서..ㅋㅋ 그음방 놀러 가겠습니다. ~ 휘리릭~~~

    답글삭제
  15. 오호~ 한 정리정돈 하신다능!!! ヾ(^∇^)

    답글삭제
  16. @cANDor - 2009/07/22 22:46
    아우;;칭찬까정;; 감사합니다. 2D 이모티콘 계속 탐나는중;;^^

    답글삭제
  17. 저녁드셨는지요^^

    오늘도 한가지 배우러 왔습니다.

    드런데, 4.번의 Syntax Highlighter 적용 하기를 어떻게 하는지 모르겠습니다.



    당췌 이해가 안 가요. 흐,.





    아래의 코드를 바디와 바디 사이에 넣으면 됩니까?









    <script type="text/javascript" src="http://cfs.tistory.com/custom/blog/38/384413/skin/images/shCore.js"></script>

    <script type="text/javascript" src="http://cfs.tistory.com/custom/blog/38/384413/skin/images/shBrushCpp.js"></script>

    <script type="text/javascript" src="http://cfs.tistory.com/custom/blog/38/384413/skin/images/shBrushCSharp.js"></script>

    <script type="text/javascript" src="http://cfs.tistory.com/custom/blog/38/384413/skin/images/shBrushCss.js"></script>

    <script type="text/javascript" src="http://cfs.tistory.com/custom/blog/38/384413/skin/images/shBrushDelphi.js"></script>

    <script type="text/javascript" src="http://cfs.tistory.com/custom/blog/38/384413/skin/images/shBrushDiff.js"></script>

    <script type="text/javascript" src="http://cfs.tistory.com/custom/blog/38/384413/skin/images/shBrushJScript.js"></script>

    <script type="text/javascript" src="http://cfs.tistory.com/custom/blog/38/384413/skin/images/shBrushPlain.js"></script>

    <script type="text/javascript" src="http://cfs.tistory.com/custom/blog/38/384413/skin/images/shBrushXml.js"></script>

    <script type="text/javascript" src="http://cfs.tistory.com/custom/blog/38/384413/skin/images/shBrushMsx.js"></script>

    <script type="text/javascript" src="http://cfs.tistory.com/custom/blog/38/384413/skin/images/shBrushAvs.js"></script>

    <script type="text/javascript" src="http://cfs.tistory.com/custom/blog/38/384413/skin/images/shLegacy.js"></script>

    <link type="text/css" rel="stylesheet" href="http://cfs.tistory.com/custom/blog/38/384413/skin/images/shCore.css"/>

    <link type="text/css" rel="stylesheet" href="http://cfs.tistory.com/custom/blog/38/384413/skin/images/shThemeDjango.css"/>

    <script type="text/javascript">

    SyntaxHighlighter.config.bloggerMode = true;

    SyntaxHighlighter.config.clipboardSwf = 'http://cfs.tistory.com/custom/blog/38/384413/skin/images//clipboard.swf';

    SyntaxHighlighter.all();

    </script>



    깜님이 도와주세요.

    답글삭제
  18. @Popeye - 2009/09/11 20:04
    아이코;; 제가 도움을 드리다니요.~

    <body></body>이 태그사이에 소스를 넣으셔두 되구요!!



    저는 참고로 HTML위젯에 이 소스를 넣어서 사용한답니다.^^

    답글삭제
  19. @kkamgun - 2009/09/11 23:39
    skin.html에는 아무 것도 넣지 않는 다면...

    어디서 어디까지를 위젯에 넣을까요?

    답글삭제
  20. 저, 아직 Syntax Highlighter 넣는 법 아직 몰라요..ㅜ.ㅜ

    자세히 가르쳐 주실레요?

    답글삭제
  21. @Popeye - 2009/09/20 13:26
    정말~ 저엉말 죄송합니다.T.T 블로그를 거의 안해서요..아니;; 못하고 있는거죠.T.T 답변이 넘 늦지 않을까 죄송;;



    일단 제가 올려놓은 소스 모두들 위젯에 싹 넣으시구요,



    본문 글에서 적용시키시려면 pre 태그를 넣으셔야 되거든요. 이부분은 제가 링크걸어놓은 BluenLive님 블로그에서 더욱 자세히 나와있습니다. !!

    답글삭제
  22. @kkamgun - 2009/09/25 13:07
    네, 고맙습니다. 잘 쓰겠습니다.

    답글삭제
  23. 블로거닷컴 쓰고 있는데 업로드할 방법이 없어서 제대로 사용하지 못하고 있었습니다.

    공개해주신 URL과 방법 덕에 이젠 잘 쓸 수 있겠네요 ^^

    정말 감사합니다.

    답글삭제