본문 바로가기
컴퓨터&인터넷

[티스토리 베이직 스킨] 사이드바 크기변경, 본문 폰트 및 글자크기, 줄간격 외 기타 스킨 변경 모음

Chobo-1 2016. 11. 27. 16:41

한동안 티스토리 블로그 스킨 변경하면서 애먹었던 몇가지 팁들만 간단히 정리했다.


티스토리는 자유롭게 스킨을 변경할 수 있는데 html 이나 css코드를 알아야해서 어려운 편이다.

사용자들이 자유롭게 만들어서 배포하는 스킨들도 많고 스킨들마다 스킨 소스코드도 조금씩 달라서 코드에 대해 바싹하지 않으면 나같은 초보는 자신만의 스킨을 만들기가 어려운 것 같다.

블로그 만들때부터 썼던 Basic 이라는 티스토리가 제공하는 기본 스킨을 간단하게 변경만해서 사용해야겠다.


티스토리 스킨 수정 방법은 검색하면 쉽게 찾을 수 있다. 변경법을 찾는데 시간이 걸렸던 몇가지 팁들만 올려본다.

Basic 이라는 스킨 기준이므로 조금 다를 수가 있는데 그렇게 크게 다르지는 않기때문에 비슷한 내용을 ctrl+F 키로 찾아보고 대충 변경해보면 쉽게 감을 잡을수가 있다.

저장해서 적용하기 전에 이전 스킨을 백업저장해야 한다. 



사이드바 크기 변경

△ 사이드바 크기 변경은 CSS 에디터에서 할 수 있다.

[블로그 레이아웃] 이라고 이름붙은 wrapcontainer 항목에서 sidebar 의 width 값을 바꾸면 된다.

content 에서는 본문 가로크기를 정할수 있다. 그리고 container 에서 본문과 사이드바 크기를 고려한 전체 가로크기를 계산해서 넓혀줘야 한다.


basic 스킨에서는 그외 넓혀줘야할 값이 @post-width:278=* 식으로 안내문구로 적혀있다.

변경한 본문 가로크기에 278 을 더하라는 얘기임. 스킨이 안맞고 이상하면 다른 width 값을 찾아서 레이아웃에 맞는 값을 넣어줘야 한다. (picpick의 줄자 등을 이용)

애드센스같은 광고를 사이드바에 넣는다면 300~320px 정도는 되어야 한다.


사이드바를 이미지로 구현하는 스킨은 이미지를 이미지에디터로 변경해줘야 한다.

안그러면 사이드바가 끝나는 지점 아래로 경계선이 어긋나서 본문 레이아웃과 안맞게되는 현상이 있었다.

사이드바 백그라운드 이미지를 수정하기 귀찮고 빠른 로딩을 원해서 그냥 ##url(images/sidebarbg_img.gif) 앞에 #을 붙여서 비활성하고 색상을 #F8F8F8 로 기본 사이드바 이미지 색상과 같게만 바꿨다.



사이드바 플러그인 글자 줄간격

△ 사이드바에 등록한 사이드바 모듈인 카테고리나 최근글, 댓글 등의 글자 줄간격을 조절하려면,

HTML 에디터에서

모두 보기 (232)
게임 (37)
컴퓨터&인터넷 (195)
기타 정보 (0)
등에 있는 <div id= > 뒤에 ; style="line-height:14px" 와 같은 값을 넣어주면 된다.


이 style 코드로 사이드바 제목(h3)을 다양하게 꾸밀 수 있다.

html style 코드를 찾아서 이리저리 입력해보면 됨.

 <s_sidebar_element>

<!-- 카테고리 모듈 -->

               <div id="category"; style="font-size:12px; line-height:18px; ">


<h3><div style= "color:fff; background:#4B6DAA; width:295; height:20; font-size:15px; position:relative; top:2px; right:12px; padding:7px 10px; "> <img src="https://tistory1.daumcdn.net/tistory/12345/skin/images/menu.png" style="padding:3px 0;"> <p style="margin:-19px 30px">카테고리</p> </div></h3>  

         

        </div>

 </s_sidebar_element>

////////////////////////////////

위는 현재 사용하고 있는 카테고리 모듈에 적용한 코드임.

<div id> </div> 에 있는 style는 카테고리 제목 아래 표시될 카테고리 목록의 스타일을 지정한다.

<h3></h3> 안에 있는 <div style>은 제목 스타일이다.

<img src=" " style=" ">은 제목 앞에 들어갈 메뉴 아이콘 이미지주소.

<p style> </p> 는 카테고리라는 제목의 폰트 스타일. <p style>에 폰트 종류나 크기를 지정해주면 상위 div style을 무시하고 재지정해줄 수 있음)


* 그외 사이드바 모듈 스타일은 CSS에서 변경 가능함. 




사이드바 모듈 만들기

카테고리나 최신글, 댓글 같이 블로그 컨텐츠와 복잡하게 연계된 사이드바 모듈은 CSS와 연결되있어서 초보들이 만들기가 쉽지 않다.

하지만 링크나 이미지 컨테이너로 활용할 간단한 사이드바 모듈은 쉽게 만들 수 있다.

html 편집기에 아래 사이드바 모듈 코드를 넣어도 되고, 사이드바 설정에서 html 배너 출력을 추가한 다음 입력해도 된다.

아래는 사이드바에 'html 배너 출력'을 등록하고 애드센스 전용 사이드바 모듈로 활용할 때의 예임.  

             <s_sidebar_element>

               <!-- 애드센스 모듈(적당한 이름) -->

<div class="panel panel-default">

    <h3 class="panel-heading"><i class="adsense(적당한 이름)"></i>


<div style= "color:fff; background: #4B6DAA ; width:295 ; height:20; font-size:15px;  position:relative; top:2px; right:12px; padding:7px 10px;"> <img src="사이드바 제목 앞 아이콘 이미지 주소" style="padding:3px 0;"> <p style="margin:-19px 29px;"> 애드센스(적당한 제목)</p></div></h3>


    <div class="panel-body" style="text-align:center;">


<!-------광고 코드 시작------->

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<!-- 반응형광고단위-->


</script>

<!-------광고 코드 끝------->


      </div>

         </div>

            </s_sidebar_element>

/////////////////////////////

위처럼 그냥 간단하게 파란색 <s_sidebar_element>와 <div class> <h3 class> 부분만 입력해주면 새 모듈이 만들어진다.



블로그 전체 폰트와 글자 크기

△ 블로그 전체에 적용되는 폰트와 글자크기는 CSS 편집에서 제일 앞부분에 "본문 공통" 이라고 된 곳에서 변경할 수 있다.

본문 포스팅 글뿐만 아니라 사이드바 등 블로그 전체에 적용되는 것 같다.

font:12px/1.2 부분이 글자크기 부분이고 뒷부분이 블로그 전체 공통 폰트를 정하는 부분이다.

가독성이 좋은 맑은 고딕을 기본으로 하고 맑은고딕 폰트가 없는 컴에서도 읽을 수 있도록 순서대로 Malgun Gothic, Dotum, Verdana 등을 추가하면 된다.



무료 폰트 추가

웹폰트를 다운받아서 파일업로드로 올린 후 CSS에서 편집하면 된다.

웹폰트는 가장 빠르게 로딩된다는 woff를 사용했다. (아래 링크 참조)

http://aboooks.tistory.com/153


업로드한 후 폰트파일 주소를 복사해서

@font-face {

font-family:BM DoHyeon(폰트별로 지정되어있는 이름); 

src: url(./images/폰트.woff) 

}

을 css 의 폰트 정의되어있는 상단에 입력해주면 됨.

/* Modern Basic - Modernize by Estoque http://est0que.tistory.com */

@font-face {

font-family:BM DoHyeon; 

src: url(./images/BMDOHYEONttf.woff);

}

@font-face {

font-family:BM HANNA; 

src: url(./images/BM-HANNA.woff);

}

@charset "utf-8";

/* 반드시 들어가야 하는 스타일 시작 */

html {

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}

/* 본문 공통 */

body{

  font:12px/1.2 맑은 고딕, malgun gothic, Gulim, Verdana, AppleGothic, Arial, sans-serif, BM DoHyeon, BM HANNA;

color:#666;



본문 폰트와 글자 크기 변경

△ 포스팅한 본문에만 적용되는 폰트와 글자 크기, 글간격, 줄간격 등은 CSS 편집의 article 항목에서 수정한다.

@post-body-font-family 와 font-size 에서 바꾸면 된다.

line-height 은 글자줄 간격, letter-spacing 은 자간간격 임.



댓글 폰트와 크기 및 줄간격 변경

△ 댓글 폰트와 글자크기, 줄간격, 글색깔 등은 CSS에디터의 [comment] 부분에서 할 수 있다.

color:#666; font-size:13px; line-height: 18px; font-family: Malgun Gothic

처럼 입력해주면 됨.



애드센스 광고를 본문 포스팅 바로 아래 넣기

△애드센스 광고를 본문 바로 아래, 카테고리 바로 위 위치에 넣을려면

HTML 편집에서 ctrl+F 키로 'article_rep_desc' 를 찾아서 아래와 같이 입력하면 된다.

한동안 티스토리 블로그 스킨 변경하면서 애먹었던 몇가지 팁들만 간단히 정리했다.


티스토리는 자유롭게 스킨을 변경할 수 있는데 html 이나 css코드를 알아야해서 어려운 편이다.

사용자들이 자유롭게 만들어서 배포하는 스킨들도 많고 스킨들마다 스킨 소스코드도 조금씩 달라서 코드에 대해 바싹하지 않으면 나같은 초보는 자신만의 스킨을 만들기가 어려운 것 같다.

블로그 만들때부터 썼던 Basic 이라는 티스토리가 제공하는 기본 스킨을 간단하게 변경만해서 사용해야겠다.


티스토리 스킨 수정 방법은 검색하면 쉽게 찾을 수 있다. 변경법을 찾는데 시간이 걸렸던 몇가지 팁들만 올려본다.

Basic 이라는 스킨 기준이므로 조금 다를 수가 있는데 그렇게 크게 다르지는 않기때문에 비슷한 내용을 ctrl+F 키로 찾아보고 대충 변경해보면 쉽게 감을 잡을수가 있다.

저장해서 적용하기 전에 이전 스킨을 백업저장해야 한다. 



사이드바 크기 변경

△ 사이드바 크기 변경은 CSS 에디터에서 할 수 있다.

[블로그 레이아웃] 이라고 이름붙은 wrapcontainer 항목에서 sidebar 의 width 값을 바꾸면 된다.

content 에서는 본문 가로크기를 정할수 있다. 그리고 container 에서 본문과 사이드바 크기를 고려한 전체 가로크기를 계산해서 넓혀줘야 한다.


basic 스킨에서는 그외 넓혀줘야할 값이 @post-width:278=* 식으로 안내문구로 적혀있다.

변경한 본문 가로크기에 278 을 더하라는 얘기임. 스킨이 안맞고 이상하면 다른 width 값을 찾아서 레이아웃에 맞는 값을 넣어줘야 한다. (picpick의 줄자 등을 이용)

애드센스같은 광고를 사이드바에 넣는다면 300~320px 정도는 되어야 한다.


사이드바를 이미지로 구현하는 스킨은 이미지를 이미지에디터로 변경해줘야 한다.

안그러면 사이드바가 끝나는 지점 아래로 경계선이 어긋나서 본문 레이아웃과 안맞게되는 현상이 있었다.

사이드바 백그라운드 이미지를 수정하기 귀찮고 빠른 로딩을 원해서 그냥 ##url(images/sidebarbg_img.gif) 앞에 #을 붙여서 비활성하고 색상을 #F8F8F8 로 기본 사이드바 이미지 색상과 같게만 바꿨다.



사이드바 플러그인 글자 줄간격

△ 사이드바에 등록한 사이드바 모듈인 카테고리나 최근글, 댓글 등의 글자 줄간격을 조절하려면,

HTML 에디터에서

모두 보기 (232)
게임 (37)
컴퓨터&인터넷 (195)
기타 정보 (0)
등에 있는 <div id= > 뒤에 ; style="line-height:14px" 와 같은 값을 넣어주면 된다.


이 style 코드로 사이드바 제목(h3)을 다양하게 꾸밀 수 있다.

html style 코드를 찾아서 이리저리 입력해보면 됨.

 <s_sidebar_element>

<!-- 카테고리 모듈 -->

               <div id="category"; style="font-size:12px; line-height:18px; ">


<h3><div style= "color:fff; background:#4B6DAA; width:295; height:20; font-size:15px; position:relative; top:2px; right:12px; padding:7px 10px; "> <img src="https://tistory1.daumcdn.net/tistory/12345/skin/images/menu.png" style="padding:3px 0;"> <p style="margin:-19px 30px">카테고리</p> </div></h3>  

         

        </div>

 </s_sidebar_element>

////////////////////////////////

위는 현재 사용하고 있는 카테고리 모듈에 적용한 코드임.

<div id> </div> 에 있는 style는 카테고리 제목 아래 표시될 카테고리 목록의 스타일을 지정한다.

<h3></h3> 안에 있는 <div style>은 제목 스타일이다.

<img src=" " style=" ">은 제목 앞에 들어갈 메뉴 아이콘 이미지주소.

<p style> </p> 는 카테고리라는 제목의 폰트 스타일. <p style>에 폰트 종류나 크기를 지정해주면 상위 div style을 무시하고 재지정해줄 수 있음)


* 그외 사이드바 모듈 스타일은 CSS에서 변경 가능함. 




사이드바 모듈 만들기

카테고리나 최신글, 댓글 같이 블로그 컨텐츠와 복잡하게 연계된 사이드바 모듈은 CSS와 연결되있어서 초보들이 만들기가 쉽지 않다.

하지만 링크나 이미지 컨테이너로 활용할 간단한 사이드바 모듈은 쉽게 만들 수 있다.

html 편집기에 아래 사이드바 모듈 코드를 넣어도 되고, 사이드바 설정에서 html 배너 출력을 추가한 다음 입력해도 된다.

아래는 사이드바에 'html 배너 출력'을 등록하고 애드센스 전용 사이드바 모듈로 활용할 때의 예임.  

             <s_sidebar_element>

               <!-- 애드센스 모듈(적당한 이름) -->

<div class="panel panel-default">

    <h3 class="panel-heading"><i class="adsense(적당한 이름)"></i>


<div style= "color:fff; background: #4B6DAA ; width:295 ; height:20; font-size:15px;  position:relative; top:2px; right:12px; padding:7px 10px;"> <img src="사이드바 제목 앞 아이콘 이미지 주소" style="padding:3px 0;"> <p style="margin:-19px 29px;"> 애드센스(적당한 제목)</p></div></h3>


    <div class="panel-body" style="text-align:center;">


<!-------광고 코드 시작------->

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<!-- 반응형광고단위-->


</script>

<!-------광고 코드 끝------->


      </div>

         </div>

            </s_sidebar_element>

/////////////////////////////

위처럼 그냥 간단하게 파란색 <s_sidebar_element>와 <div class> <h3 class> 부분만 입력해주면 새 모듈이 만들어진다.



블로그 전체 폰트와 글자 크기

△ 블로그 전체에 적용되는 폰트와 글자크기는 CSS 편집에서 제일 앞부분에 "본문 공통" 이라고 된 곳에서 변경할 수 있다.

본문 포스팅 글뿐만 아니라 사이드바 등 블로그 전체에 적용되는 것 같다.

font:12px/1.2 부분이 글자크기 부분이고 뒷부분이 블로그 전체 공통 폰트를 정하는 부분이다.

가독성이 좋은 맑은 고딕을 기본으로 하고 맑은고딕 폰트가 없는 컴에서도 읽을 수 있도록 순서대로 Malgun Gothic, Dotum, Verdana 등을 추가하면 된다.



무료 폰트 추가

웹폰트를 다운받아서 파일업로드로 올린 후 CSS에서 편집하면 된다.

웹폰트는 가장 빠르게 로딩된다는 woff를 사용했다. (아래 링크 참조)

http://aboooks.tistory.com/153


업로드한 후 폰트파일 주소를 복사해서

@font-face {

font-family:BM DoHyeon(폰트별로 지정되어있는 이름); 

src: url(./images/폰트.woff) 

}

을 css 의 폰트 정의되어있는 상단에 입력해주면 됨.

/* Modern Basic - Modernize by Estoque http://est0que.tistory.com */

@font-face {

font-family:BM DoHyeon; 

src: url(./images/BMDOHYEONttf.woff);

}

@font-face {

font-family:BM HANNA; 

src: url(./images/BM-HANNA.woff);

}

@charset "utf-8";

/* 반드시 들어가야 하는 스타일 시작 */

html {

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}

/* 본문 공통 */

body{

  font:12px/1.2 맑은 고딕, malgun gothic, Gulim, Verdana, AppleGothic, Arial, sans-serif, BM DoHyeon, BM HANNA;

color:#666;



본문 폰트와 글자 크기 변경

△ 포스팅한 본문에만 적용되는 폰트와 글자 크기, 글간격, 줄간격 등은 CSS 편집의 article 항목에서 수정한다.

@post-body-font-family 와 font-size 에서 바꾸면 된다.

line-height 은 글자줄 간격, letter-spacing 은 자간간격 임.



댓글 폰트와 크기 및 줄간격 변경

△ 댓글 폰트와 글자크기, 줄간격, 글색깔 등은 CSS에디터의 [comment] 부분에서 할 수 있다.

color:#666; font-size:13px; line-height: 18px; font-family: Malgun Gothic

처럼 입력해주면 됨.



애드센스 광고를 본문 포스팅 바로 아래 넣기

△애드센스 광고를 본문 바로 아래, 카테고리 바로 위 위치에 넣을려면

HTML 편집에서 ctrl+F 키로 'article_rep_desc' 를 찾아서 아래와 같이 입력하면 된다.

<div class="*** (임의의 문자)">

  애드센스 광고코드 삽입

</div>

///////////////////////////////////////

그 다음으로 제일 아래쪽에 있는 </body> 아래쪽에 다음과 같은 코드 삽입.

//////////////////////////////////////

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

<script>

  jQuery( '.another_category' ).appendTo( '.***(임의의 문자' );

</script>



사이드바에 즐겨찾기 링크 수정하기

사이드바에 링크를 등록하려면 사이드바에 링크 모듈을 등록해서 [네트워크]의 [내 링크]에서 추가해나가면 되는데, 그룹별, 카테고리별로 표시가 되지 않아서 불편하다.

여러 방법이 있었는데 제일 간단한건 사이드바에 [HTML 배너출력] 을 등록하고 html 코드로 링크시키는 방법인 것 같다. 일일이 다 입력해줘야해서 귀찮긴하지만 한번 등록해두면 간편하게 더하고 뺄수있다.

html 배너출력을 사이드바에 등록한 후 [편집]을 눌러 아래 코드를 참고해서 변경하면 된다. 그러면 사진과 같이 나옴.

<html>

<body>

<div style="line-height: 150%">

  <h3> 그룹 이름 1</h3>

        <a href="링크 주소" target="_blank">ㆍ링크명</a><br>

        <a href="링크 주소" target="_blank">ㆍ링크명</a>

  <h3> 그룹 이름 2</h3>

  ㆍ<select onchange="window.open(this.value);" style="font:0.95em Malgun gothic; color:#666; width:180px; line-height:130%">

 <option value="" select>링크 목록 박스 이름</option>

 <option value="링크 주소">링크명</option>

 <option value="링크 주소">링크명</option>

    </select><br>

       <a href="링크 주소" target="_blank">ㆍ링크명</a><br>

       <a href="링크주소" target="_blank">ㆍ링크명</a>

</div></body>

</html>

** line-height: 줄간격 / <h1~h4> 는 제목글 크기 / <br> 은 다음줄로(키보드의 스페이스바) / 목록박스 코드인 <select> </select>에 있는 폰트크기는 em 이나 px 단위로도 가능함. 스킨별로 더 잘맞는 단위가 있을것임.

* <html><body> </body><html> 는 생략 가능.



사이드바에 검색창 달기

검색창은 티스토리 스킨에서 기본 제공하는게 있는데 블로그 내의 컨텐츠만 검색 가능하다.

네이버나 다음 검색창을 달려면 html 코드로 스킨 에디터에 직접 넣거나 사이드바 모듈인 html 배너출력에서 편집하면 된다.

검색창 만드는 방법도 많아서 이미지를 이용하면 자신만의 고퀄리티 검색창을 만들 수 있다.

내 블로그엔 광고를 좀 달아놔서 느릴것 같아 간단한 검색창만 달았다.

사진처럼 만들었는데 검색창은 <form> 이라는 코드를 사용한다.

HTML 에디터로 들어가서 '검색 모듈' (searchbox) 를 찾아서 <div id="searchBox">............</div> 안에 있는 기존 검색모듈을 지우고 다음과 같이 입력했다.

<s_sidebar_element>

                             <!-- 검색 모듈 -->

<div id="searchBox">

<style> input:focus {outline: none;} </style>


<form name='form' method='get' action='http://search.daum.net/search' target='_blank'>

<input type='hidden' name='ie' value='UTF-8'>

<input type='hidden' name='st' value='sim'>

<input type='hidden' name='sm' value='tab_opt'>

<input type="text" class="article_search_field" name="search" value="" onkeypress="if (event.keyCode == 13) { try{window.location.href='/search/' + document.getElementsByName('search')[0].value.replaceAll('%', '%25');document.getElementsByName('search')[0].value = ''; return false;}catch(e){} }" id="article_search" style='width:120px; border:3px solid #2C383E'/>

<input type="submit" class="article_search_submit" value="블로그 내 검색" onclick="try{window.location.href='/search/' + document.getElementsByName('search')[0].value.replaceAll('%', '%25');document.getElementsByName('search')[0].value = ''; return false;}catch(e){}" style='width:100px; height:22px; background:#2C383E; color:#fff'; onMouseOver="this.style.cursor='pointer'" />

  </form>


<form action="http://www.google.co.kr" id="cse-search-box">

  <div>

    <input type="hidden" name="cx" value="partner-pub-9474580448639740:6422628511" />

    <input type="hidden" name="ie" value="UTF-8" />

    <input type="text" name="q" size="55" />

    <input type="submit" name="sa" value="&#xac80;&#xc0c9;" style='width:50px;  height:22px; background:#4285F4;'/>

  </div>

</form>

<script type="text/javascript" src="http://www.google.co.kr/coop/cse/brand?form=cse-search-box&amp;lang=ko"></script>

<script type="text/javascript" src="http://www.google.com/cse/query_renderer.js"></script>

<div id="queries"></div>

<script src="http://www.google.com/cse/api/partner-pub-9474580448639740/cse/6422628511/queries/js?oe=UTF-8&amp;callback=(new+PopularQueryRenderer(document.getElementById(%22queries%22))).render"></script>


<form name='form' method='get' action='http://search.naver.com/search.naver' target='_blank'>

<input type='hidden' name='ie' value='UTF-8'>

<input type='hidden' name='st' value='sim'>

<input type='hidden' name='sm' value='tab_opt'>

<input type='text' name='query' style='width:120px; border:3px solid #22B600'>

<input type='submit' value='네이버 검색' style='width:100px; height:22px;  background:#22B600; color:#fff'; onMouseOver="this.style.cursor='pointer'"/>

  </form>


<form name='form' method='get' action='http://search.daum.net/search' target='_blank'>

<input type='hidden' name='ie' value='UTF-8'>

<input type='hidden' name='st' value='sim'>

<input type='hidden' name='sm' value='tab_opt'>

<input type='text' name='query' style='width:120px; border:3px solid #FEB500'>

<input type='submit' value='다음 검색' style='width:100px; height:22px; background:#FEB500; color:#ffff'; onMouseOver="this.style.cursor='pointer'">

  </form>


                       </div>

                 </s_sidebar_element>

 

input type=text 부분이 검색입력창 크기다. 가로와 높이 크기를 입력하고, 테두리선의 두께와 색깔을 지정할 수 있다. border:1px solid #ffffff; - 테두리선 1px(두께) #ffffff(색깔)

input type=submit 부분은 검색클릭창 부분이다. value에서 이름을 정하고 style= 에서 창크기와 폰트 크기 색깔 등을 지정할 수 있다.

입력글자크기 등을 설정하려면 font-size:13px; 와 같이 추가해주면 됨.

(구글검색창은 맞춤검색 코드인데 크기 설정이 잘 안먹힌다. 좀 더 찾아볼 예정임)


검색창 CSS 코드는 아래와 같음.

#searchBox { margin: 15px 0 0 0; padding-left:25px;}

#searchBox input         { width: 133px; height:26px; border: none; vertical-align: middle; margin:-0.4em 0 0 0;

    -webkit-border-radius: 1px;

    -moz-border-radius: 1px;

    -ms-border-radius: 1px;

    -o-border-radius: 1px;

    border-radius: 1px;

 }

#searchBox .submit       { background:#323E44; width: 32px;  height:28px; color: #fff; border:0; cursor:pointer; vertical-align: middle; margin:-0.4em 0 0 0;

    -webkit-border-radius: 4px;

    -moz-border-radius: 4px;

    -ms-border-radius: 4px;

    -o-border-radius: 4px;

    border-radius: 4px;

    font-size: 14px;

}





<div class="*** (임의의 문자)">

  애드센스 광고코드 삽입

</div>

///////////////////////////////////////

그 다음으로 제일 아래쪽에 있는 </body> 아래쪽에 다음과 같은 코드 삽입.

//////////////////////////////////////

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

<script>

  jQuery( '.another_category' ).appendTo( '.***(임의의 문자' );

</script>



사이드바에 즐겨찾기 링크 수정하기

사이드바에 링크를 등록하려면 사이드바에 링크 모듈을 등록해서 [네트워크]의 [내 링크]에서 추가해나가면 되는데, 그룹별, 카테고리별로 표시가 되지 않아서 불편하다.

여러 방법이 있었는데 제일 간단한건 사이드바에 [HTML 배너출력] 을 등록하고 html 코드로 링크시키는 방법인 것 같다. 일일이 다 입력해줘야해서 귀찮긴하지만 한번 등록해두면 간편하게 더하고 뺄수있다.

html 배너출력을 사이드바에 등록한 후 [편집]을 눌러 아래 코드를 참고해서 변경하면 된다. 그러면 사진과 같이 나옴.

<html>

<body>

<div style="line-height: 150%">

  <h3> 그룹 이름 1</h3>

        <a href="링크 주소" target="_blank">ㆍ링크명</a><br>

        <a href="링크 주소" target="_blank">ㆍ링크명</a>

  <h3> 그룹 이름 2</h3>

  ㆍ<select onchange="window.open(this.value);" style="font:0.95em Malgun gothic; color:#666; width:180px; line-height:130%">

 <option value="" select>링크 목록 박스 이름</option>

 <option value="링크 주소">링크명</option>

 <option value="링크 주소">링크명</option>

    </select><br>

       <a href="링크 주소" target="_blank">ㆍ링크명</a><br>

       <a href="링크주소" target="_blank">ㆍ링크명</a>

</div></body>

</html>

** line-height: 줄간격 / <h1~h4> 는 제목글 크기 / <br> 은 다음줄로(키보드의 스페이스바) / 목록박스 코드인 <select> </select>에 있는 폰트크기는 em 이나 px 단위로도 가능함. 스킨별로 더 잘맞는 단위가 있을것임.

* <html><body> </body><html> 는 생략 가능.



사이드바에 검색창 달기

검색창은 티스토리 스킨에서 기본 제공하는게 있는데 블로그 내의 컨텐츠만 검색 가능하다.

네이버나 다음 검색창을 달려면 html 코드로 스킨 에디터에 직접 넣거나 사이드바 모듈인 html 배너출력에서 편집하면 된다.

검색창 만드는 방법도 많아서 이미지를 이용하면 자신만의 고퀄리티 검색창을 만들 수 있다.

내 블로그엔 광고를 좀 달아놔서 느릴것 같아 간단한 검색창만 달았다.

사진처럼 만들었는데 검색창은 <form> 이라는 코드를 사용한다.

HTML 에디터로 들어가서 '검색 모듈' (searchbox) 를 찾아서 <div id="searchBox">............</div> 안에 있는 기존 검색모듈을 지우고 다음과 같이 입력했다.

<s_sidebar_element>

                             <!-- 검색 모듈 -->

<div id="searchBox">

<style> input:focus {outline: none;} </style>


<form name='form' method='get' action='http://search.daum.net/search' target='_blank'>

<input type='hidden' name='ie' value='UTF-8'>

<input type='hidden' name='st' value='sim'>

<input type='hidden' name='sm' value='tab_opt'>

<input type="text" class="article_search_field" name="search" value="" onkeypress="if (event.keyCode == 13) { try{window.location.href='/search/' + document.getElementsByName('search')[0].value.replaceAll('%', '%25');document.getElementsByName('search')[0].value = ''; return false;}catch(e){} }" id="article_search" style='width:120px; border:3px solid #2C383E'/>

<input type="submit" class="article_search_submit" value="블로그 내 검색" onclick="try{window.location.href='/search/' + document.getElementsByName('search')[0].value.replaceAll('%', '%25');document.getElementsByName('search')[0].value = ''; return false;}catch(e){}" style='width:100px; height:22px; background:#2C383E; color:#fff'; onMouseOver="this.style.cursor='pointer'" />

  </form>


<form action="http://www.google.co.kr" id="cse-search-box">

  <div>

    <input type="hidden" name="cx" value="partner-pub-9474580448639740:6422628511" />

    <input type="hidden" name="ie" value="UTF-8" />

    <input type="text" name="q" size="55" />

    <input type="submit" name="sa" value="&#xac80;&#xc0c9;" style='width:50px;  height:22px; background:#4285F4;'/>

  </div>

</form>

<script type="text/javascript" src="http://www.google.co.kr/coop/cse/brand?form=cse-search-box&amp;lang=ko"></script>

<script type="text/javascript" src="http://www.google.com/cse/query_renderer.js"></script>

<div id="queries"></div>

<script src="http://www.google.com/cse/api/partner-pub-9474580448639740/cse/6422628511/queries/js?oe=UTF-8&amp;callback=(new+PopularQueryRenderer(document.getElementById(%22queries%22))).render"></script>


<form name='form' method='get' action='http://search.naver.com/search.naver' target='_blank'>

<input type='hidden' name='ie' value='UTF-8'>

<input type='hidden' name='st' value='sim'>

<input type='hidden' name='sm' value='tab_opt'>

<input type='text' name='query' style='width:120px; border:3px solid #22B600'>

<input type='submit' value='네이버 검색' style='width:100px; height:22px;  background:#22B600; color:#fff'; onMouseOver="this.style.cursor='pointer'"/>

  </form>


<form name='form' method='get' action='http://search.daum.net/search' target='_blank'>

<input type='hidden' name='ie' value='UTF-8'>

<input type='hidden' name='st' value='sim'>

<input type='hidden' name='sm' value='tab_opt'>

<input type='text' name='query' style='width:120px; border:3px solid #FEB500'>

<input type='submit' value='다음 검색' style='width:100px; height:22px; background:#FEB500; color:#ffff'; onMouseOver="this.style.cursor='pointer'">

  </form>


                       </div>

                 </s_sidebar_element>

 

input type=text 부분이 검색입력창 크기다. 가로와 높이 크기를 입력하고, 테두리선의 두께와 색깔을 지정할 수 있다. border:1px solid #ffffff; - 테두리선 1px(두께) #ffffff(색깔)

input type=submit 부분은 검색클릭창 부분이다. value에서 이름을 정하고 style= 에서 창크기와 폰트 크기 색깔 등을 지정할 수 있다.

입력글자크기 등을 설정하려면 font-size:13px; 와 같이 추가해주면 됨.

(구글검색창은 맞춤검색 코드인데 크기 설정이 잘 안먹힌다. 좀 더 찾아볼 예정임)


검색창 CSS 코드는 아래와 같음.

#searchBox { margin: 15px 0 0 0; padding-left:25px;}

#searchBox input         { width: 133px; height:26px; border: none; vertical-align: middle; margin:-0.4em 0 0 0;

    -webkit-border-radius: 1px;

    -moz-border-radius: 1px;

    -ms-border-radius: 1px;

    -o-border-radius: 1px;

    border-radius: 1px;

 }

#searchBox .submit       { background:#323E44; width: 32px;  height:28px; color: #fff; border:0; cursor:pointer; vertical-align: middle; margin:-0.4em 0 0 0;

    -webkit-border-radius: 4px;

    -moz-border-radius: 4px;

    -ms-border-radius: 4px;

    -o-border-radius: 4px;

    border-radius: 4px;

    font-size: 14px;

}





저작자표시 비영리 변경금지

'컴퓨터&인터넷' 카테고리의 다른 글

크로미움(Chromium) 인터넷 브라우저를 사용해봤다  (0) 2016.12.14
컴퓨터 보안에 관해 초보가 알게된 것들  (0) 2016.12.01
구글 검색에 관해 알게된 몇가지  (0) 2016.11.20
윈도우 탐색기 대체 프로그램은 왜 쓸까  (0) 2016.11.13
구버전 브라우저나 포터블(무설치) 브라우저에서 플래쉬(Flash) 동영상 안될 때  (0) 2016.11.10

'컴퓨터&인터넷' Related Articles

티스토리툴바