2017년 6월 티스토리 블로그 초대장 5장 배포합니다.

블로그를 매일 하지는 못하시더라도 

꾸준히 알찬 정보를 공유해주실 분들만 

댓글을 달아주시기를 바랍니다. 

초대장을 원하시는 분들은

아래 댓글에 

1. 티스토리 블로그를 운영하려고 하는 이유(솔직하게)

2. 이메일주소

3. 지금 당장 블로그를 개설한다면 만들고자하는 

카테고리 3개와 글 제목 3개

를 적어주시기 바랍니다.

초대장 신청기간은 2017. 6. 10(토) 23:59까지해주시고

초대장 발송은 2017. 6. 11(일) 10:00에 하도록 하겠습니다.

양식에 맞지 않게 쓰시면 검토대상에서 제외하겠으니

꼭 위의 양식에 맞게 3가지를 모두 작성해주시기 바랍니다.

도움이 되셨다면, 로그인 없이 가능한

아래 하트♥ 공감버튼 을 꾸~욱 눌러주세요!

티스토리 블로그는 기본적으로 고딕, 굴림, 바탕, 돋움, 궁서체의 5가지 기본 폰트를 제공하고 있습니다. 하지만, 적용해보면 그다지 예쁘지도 않고, 가독성도 다소 떨어진다는 치명적인 단점이 있습니다. 아무리 블로그의 정보가 유익하다고 해도 읽기 싫어지는 글씨체가 적용되어 있거나 글씨 크기가 너무 작다면, 다 읽고 싶어도 도중에 나가버리고 싶은 충동이 생기게 마련입니다. 딱 봤을 때 한 눈에 들어오고 오래 읽어도 질리지 않는 폰트는 생각보다 많지 않은 듯 합니다. 

사람에 따라서 취향이 다르겠지만, 개인적으로는 나눔고딕, 나눔바른고딕, 나눔바른펜 폰트가 보기에 편하고, 가독성도 좋지 않나 생각합니다. 이런 의미에서 오늘은 내가 원하는 포트를 이용해서 티스토리 블로그의 기본 폰트, 글씨체 글꼴을 변경하는 방법에 대해서 소개해드리겠습니다.

본인이 원하는 폰트라면 어느 것이라도 적용하는 방법은 동일하니, 

천천히 차근차근 따라해주시기 바랍니다. 

저는 무료로 이용할 수 있고 보기에도 편한 나눔 시리즈 중, 

나눔바른고딕 폰트를 예를 들어 설명해드리겠습니다.

 폰트, 글꼴 다운로드 하기

먼저 구글, 다음, 네이버 등에 자신이 원하는 폰트의 이름을 검색해서 폰트 ttf 파일을 받습니다.

나눔바른고딕을 원하시는 분이라면

http://software.naver.com/software/summary.nhn?softwareId=GWS_000240

나눔바른펜을 원하신다면

http://software.naver.com/software/summary.nhn?softwareId=GWS_000687 

나눔고딕을 원하신다면

http://software.naver.com/software/summary.nhn?softwareId=MFS_107630

으로 들어가 주시기 바랍니다.

해당 링크로 들어갔다면, 오른쪽 위에 나와 있는 

다운로드 버튼을 눌러 받고, 실행해주어 설치를 진행합니다.

설치를 마치기 전에는 네이버 툴바와 네이버 기본 홈페이지 설정이 싫으시다면 

반드시 두 항목을 체크해제해주신 후 마침 버튼을 눌러주시기 바랍니다.

폰트는 제어판의 글꼴 폴더에 자동적으로 저장이 됩니다.

윈도우 시작 버튼을 누르고 제어판에 가서 글꼴 폴더로 들어갑니다.

스크롤을 쭉 내려서 나눔바른고딕 폰트를 찾고 복사한 후, 

바탕화면이나 본인이 찾기 쉬운 폴더에 붙여넣기 해줍시다.

 글꼴 TTF 파일을 EOT 파일로 바꾸기

우리가 받은 글꼴 폰트 파일은 TTF 파일로 용량이 4MB 정도로 상당히 큽니다. 이 파일을 그대로 인터넷 상에 올린다면 꽤 과부하가 걸릴 수도 있기 때문에 반드시 인터넷에 최적화 된 웹사이트용 폰트인 EOT 파일로 변환시켜주셔야 합니다.

TTF 파일을 EOT 파일로 손쉽게 바꾸기 해줄 수 있는 아래 사이트로 들어갑니다.

http://eotfast.com/

EOTFAST 사이트의 메인화면 모습입니다.

오른쪽 가운데에 있는 Free Download 버튼을 눌러 

무료로 변환 프로그램을 받습니다.

eotfast-2-22-10이라는 압축파일이 받아지면, 

마우스 오른쪽 버튼을 눌러 압축을 풀어줍시다.

이제 아까 받아 놓은 폰트 ttf 파일을 마우스로 드래그 해서 

EOTFAST-1.EXE 실행파일에 끌어 넣어줍니다.

그러면 파일 변환중이라는 검은 창이 잠시 떴다가 사라집니다.

검은 창이 사라지면 위와 같이 eot 글꼴 파일로 변환이 됩니다.

이제 이 eot 글꼴 파일을 이용해 

티스토리 블로그에 내가 원하는 폰트를 적용하러 가봅시다.

 티스토리 블로그 폰트 바꾸기

자신의 블로그로 들어와 q 버튼을 눌러 관리 화면으로 들어갑니다.

HTML/CSS 편집 항목을 클릭합니다.

화면 상단 오른쪽에 있는 파일업로드를 누릅니다.

그리고 아래 부분에 있는 추가 버튼을 누른 후, 

아까 변환한 eot글꼴 파일을 선택한 후 열기 버튼을 누릅니다.

그리고 꼭 오른쪽 위에 있는 저장 버튼을 누릅시다.

이번에는 CSS 항목을 클릭합니다.

오른쪽 하얀 곳 아무곳이나 한번 클릭해 준 후,

Ctrl키와 F키를 동시에 눌러 검색창을 뜨게합니다.

검색창에 font-family라고 입력하고 엔터를 칩니다.

엔터를 치면, 화면 오른쪽에 스크롤바 부분에 주황색으로

font-family라는 글씨가 적힌 해당 장소가 모두 표시가 됩니다.

이 부분들을 모두 찾아 우리가 올렸던 폰트 이름을 입력해주어야 합니다.

소문자와 대문자에 주의하여 반드시 똑같이 써주시기 바랍니다.

그리고 위 사진의 두번째 빨간 박스처럼

.eot라고 되어 있는 부분도 반드시 원하는 폰트이름으로 바꿔주셔야 합니다.

나눔바른고딕 글꼴이라면

@font-face 부분은 

font-family: 'NanumGothic';

으로 바꿔주시고, 나머지 부분은

font-family:NanumBarunGothic

위 화면과 같이 모두 변경해줍니다.

하지만, font-family가 써 있는 곳이라 하더라도 옆에 

*Don't Change Font-family (Icon)이라는 표시가 되어 있는 부분은 

절대로 바꿔주시면 안 됩니다. 

만약 이곳까지 우리가 원하는 글꼴로 바꿔버리면 

티스토리 블로그에 있는 fontawesome 폰트가 적용된 아이콘 모양들이 

모두 엑스박스로 표시되거나 아예 표시가 되지 않을 수 있기 때문입니다.

이 부분만 제외하고 모두 바꿔주시기 바랍니다.

저는 나눔바른고딕 폰트로 예를 들어 설명드렸지만,

자신이 원하는 다른 글꼴이 있다면 제가 설명드린 방법을 응용해서

본인이 원하는 폰트를 티스토리 블로그에 적용해봅시다.

티스토리 블로그 티에디션(T-edition)에 애드센스 광고 달기 방법

티스토리 블로그 글 제목 디자인 변경하기(수정, 바꾸기) 방법

티스토리 블로그 티에디션(T-edition) 설정하기 방법 fastboot스킨

티스토리 블로그 스킨 변경 등록 방법 및 반응형 스킨 추천

티스토리 블로그에 유튜브 동영상 쉽게 넣는 방법

티스토리 블로그 글꼴 변경에 성공하셨다면, 아래 하트 버튼을 눌러주세요.

지난 번에는 티스토리 블로그에 티에디션을 이용하여 블로그 메인 화면을 꾸미는 방법에 대해서 알아보았습니다. 그런데 이 포스팅과 관련해서 저의 블로그 메인화면에 구글 애드센스 광고가 게재되어 있는 것을 보시고서 어떻게 하면 티에디션을 이용해서 블로그 메인에 구글 광고를 게재할 수 있는지 궁금해하시는 분들이 많이 계셨습니다. 이에 오늘은 어떻게 하면 티스토리 메인 화면에 구글 애드센스 광고를 달 수 있을지 그 방법에 대해서 알려드리도록 하겠습니다.

티스토리 블로그 티에디션(T-edition)을 이용해 

블로그 메인 화면에 구글 애드센스 광고를 게재한 모습입니다.

만약, 티에디션을 설정하는 방법을 모르시는 분들이라면

아래 링크를 통해 티에디션 설정을 해주시기 바랍니다.

티스토리 블로그 티에디션(T-edition) 설정하기 방법 fastboot스킨

먼저, 블로그에서 q 버튼을 눌러 관리 화면에 들어간 후

화면설정, 티에디션 시작하기 순으로 눌러 

아래 화면처럼 보이도록 합시다.

가운데 보이는 하늘색 바탕의 둥근 플러스 십자(+) 모양의 버튼을 누릅니다.

그러면 이와 같이 아래에 아이템 공간이 하나 더 생기게 됩니다.

오른쪽 티에디션 설정창에서 아이템을 클릭하고,

목록형을 누르고 아래 화살표를 한 번 누른 후 맨 위 가운데에 있는 것을 눌러줍시다.

이렇게 글 두 개가 뜨게 됩니다.

티에디션 설정창에서 이번에는 디자인을 누르고

아래에 있는 HTML을 누릅니다.

위와 같이 HTML 소스가 쭈~~욱 나옵니다.

소스가 있는 곳을 아무곳이나 클릭한 후 Ctrl키와 A키를 눌러

전체 선택한 후 Delete키나 Backspace키를 눌러 모두 지웁니다.

그리고 구글 애드센스 광고 코드를 여기에 쏙 넣어주시면 됩니다.

만약 가운데 정렬을 하고 싶으시다면 위에 <center>를

아래에는 </center> 코드를 넣어주시면 됩니다.

위에 있는 적용 버튼을 누르고, 맨 위에 있는 적용하기를 누릅니다.

그러면 이렇게 구글 애드센스 광고가 잘 나오는 것을 확인하실 수 있습니다.

구글 애드센스 모바일에서 수익 좋은 광고 크기 알아보기

구글 애드센스 광고 심사센터 이용 및 싫은 광고 차단 방법

구글 맞춤 검색, 애드센스 맞춤 검색 사이드바 넣기 방법

구글 애드센스 승인 받기 좋은 티스토리 블로그 스킨 및 팁 정리

애드센스 광고 글 사이에 넣는 방법

도움이 되셨다면, 로그인 없이 가능한

아래 하트♥ 공감버튼 을 꾸~욱 눌러주세요!

티스토리 블로그는 다음 블로그나 네이버 블로그와는 다르게 광고 수익을 얻을 수 있는 블로그입니다. 바로 구글 애드센스라는 서비스를 통해서 말입니다. 그런데 구글 애드센스의 광고를 달기 위해서는 반드시 신청을 해서 승인을 받아야만 합니다. 예전에는 신청만 하면 승인이 되었던 시절이 있었다지만, 지금은 구글 애드센스가 점점 유명해지고, 광고 수익이 다른 곳에서 제공하는 광고보다 월등하게 높기 때문에 수요가 많아져, 승인을 받기가 매우 까다롭게 되었습니다.

승인을 받을 때까지 기다리고 수정하고 또 기다리고 하는 고통은 이루 말할 수 없습니다. 긴 인고의 끝에 최종승인을 받으면 정말 날아갈 것 같이 기분이 좋습니다. 하지만 그것도 그때뿐입니다. 승인을 받고 나서 수익을 올리는 건 더더욱 어렵기 때문입니다.

승인을 받고 나서 몇 주 간은 하루 수익이 1달러도 채 되지 않으시는 분도 꽤 많으실 겁니다. 어떻게 하면 수익을 극대화 할 수 있을지 이때부터 고민에 빠지기 시작합니다. 이런 경우는 대부분 구글 광고를 하나 내지는 두, 세 개만 달고 계시는 분들이 많습니다. 작년까지만 해도 블로그 한 페이지에 구글 광고를 달 수 있는 개수에 제한이 있었지만, 이제는 콘텐츠의 양에 비례해서 무제한으로 광고를 달 수 있게 되었기 때문에 여기 저기 광고를 달아보면서 어떨 때 가장 수익이 많이 늘어나는지, 연구를 해보면 좋습니다.

광고의 수, 광고의 위치, 광고의 크기

광고의 언어, 광고의 종류 

광고와 관련한 키워드와 글의 내용

등이 수익에 영향을 미칠 수 있는 요소가 아닐까 생각합니다.

몇 년 전만 해도 인터넷을 PC 컴퓨터로 하는 사람들이 대부분이었지만, 스마트폰이 대중화 되면서 모바일으로 인터넷을 하는 사람들이 크게 늘었습니다. 이와 관련하여 구글 애드센스도 자체적으로 연구 및 통계 분석을 해왔고 그 결과를 구글 애드센스 사이트에 공개를 해놓았습니다.

오늘은 구글 애드센스의 연구 통계를 바탕으로 모바일 스마트폰에서 구글 광고 수익을 가장 효과적으로 낼 수 있는 광고 크기는 무엇인지 알아보고, 블로그에 적용하는 것까지 다루어보도록 하겠습니다.

먼저, 아래 링크를 클릭해서 구글 애드센스 고객센터로 갑시다.

구글 애드센스 고객센터 모바일 웹 최적화 페이지

 모바일 스마트폰에서 수익이 가장 좋은 구글 광고 크기는?

어느 기기에서나 사용자의 참여를 유도하는 모바일 웹에 최적화라는 제목의 글이 있습니다.

아래쪽에 있는 팁을 보면 320x100 광고 단위와 300x250 광고 단위에 관한 팁이 적혀 있습니다.

그 아래에는 모바일 페이지 로드 시간 단축이라는 팁도 있네요.

가운데에 있는 300x250 광고 단위에 관한 팁을 클릭해봅시다.

300x250의 광고 단위가 왜 인기가 있는지 그 이유에 대해 

광고주들에게 인기 있는 광고 크기이면서 그에 따라 공급이 늘고 

경쟁이 높아짐에 따라 광고 단가도 오르기 때문에 

수익을 높일 수 있다는 설명이 적혀 있습니다. 

생각건대 광고주들 사이에서 300x250의 광고 크기가 인기 있는 이유는 

바로 모바일 웹에서 광고를 봤을 때 광고가 짤리지도 않고 

딱 알맞게 표시되기 때문일 것입니다.

위 사진은 구글에서 만든 광고위치의 중요성이라는 영문 pdf 파일 내용입니다. 

300x250은 스크롤을 내리지 않고 페이지 윗부분에 있을 때 수익으로 연결되는 확률이 커 보입니다.

반면, 300x50은 높이가 300x250보다 낮기 때문에

스크롤을 내리지 않은 상태에서는 손가락으로 터치할 확률이 낮지만,

스크롤을 내리고 바로 다음에 보이는 화면에 이 광고가 있을 때 

수익으로 연결 될 확률이 높아지는 것을 확인할 수 있습니다.

모바일 환경에서 처음 화면에서는 300x250을 달고

손가락으로 페이지를 올릴 때 보여지는 부분에는 300x50을 

다는 것이 수익에 좋다는 것을 알았으니 

이제 구글 애드센스 사이트에서 광고 단위를 만들어 봅시다.

아래 링크를 눌러 애드센스 사이트로 들어가 로그인을 합시다.

http://www.google.com/adsense

 구글 애드센스 300x250 광고 단위 만드는 방법

구글 애드센스 화면에서 

왼쪽의 내 광고, 광고 단위, 새 광고 단위 만들기 순으로 클릭합니다.

광고 이름은 300x250광고1이라는 식으로 적절하게 적어줍시다. 

광고의 크기를 선택하는 부분에서 스크롤을 조금 내리면 

아래에 중형 직사각형 300x250이라는 광고 단위가 있는데 이것을 선택합니다.

그리고 밑의  저장 및 코드 생성 버튼을 눌러 코드를 복사해둡시다.

저는 300250크기1이라고 이름을 붙여보았습니다.

요약 부분을 보면 텍스트와 이미지 모두 나오는 광고 유형으로 

300x250 크기의 광고라는 것을 알 수 있습니다. 

여기까지 확인이 되었다면, 블로그에 넣어서 광고를 활성화를 시켜 주어야 합니다.

 티스토리 블로그에 300x250 광고 설정하는 방법

자신의 티스토리 블로그에 오셔서 q 버튼을 눌러 관리 화면으로 갑니다.

왼쪽에 있는 플러그인 설정을 누르고 수익5를 누른 후

Google Adsense를 선택한 후 복사한 광고 코드를 넣어줍니다.

나가기 전에 반드시 저장 버튼을 눌러 설정합시다.

만약 위와 같이 블로그 오른쪽 사이드바에 광고를 달고 싶다면

아래 글을 참고하여 사이드바에도 게재가 되도록 설정해봅시다.

※ 참고글 : 티스토리 블로그 텐핑 사이드바 달기 설정 방법

구글 맞춤 검색, 애드센스 맞춤 검색 사이드바 넣기 방법

구글 애드센스 광고 심사센터 이용 및 싫은 광고 차단 방법

구글 애드센스 승인 받기 좋은 티스토리 블로그 스킨 및 팁 정리

애드센스 광고 글 사이에 넣는 방법

도움이 되셨다면, 로그인 없이 가능한

아래 하트♥ 공감버튼 을 꾸~욱 눌러주세요!

티스토리 블로그는 다른 블로그보다 블로거가 원하는 디자인으로 색상을 바꾸거나 아이콘을 넣거나 여러 플러그인 기능을 삽입해서 자유롭게 꾸밀 수 있다는 것이 큰 장점입니다. 이번 시간에는 블로그 글 제목에 아이콘을 넣고 변경하는 방법과 글 제목 배경 색상을 바꾸는 방법에 대해서 알아보도록 하겠습니다. FastBoot 스킨을 사용하고 계신 분들이라면 글 제목 왼쪽에 상병 마크, 석 삼과 같은 三 이러한 아이콘으로 되어 있을 것입니다. 그리고 기본 색상이 회색으로 되어 있을 것입니다. 전체적으로 흰색, 회색으로 디자인 되어 있는 스킨이기 때문입니다. 

회색은 안정적이고 침착한 분위기를 내는 색이지만, 어떻게 보면 조금은 칙칙하고 우울해보이는 색일 수도 있습니다. 그런 의미에서 글 제목만큼은 회색이 아닌 조금 더 밝은 색상을 띠는 색으로 바꾸어 보도록 하겠습니다.

블로그 글 제목의 최종 모습은 이렇게 연필 모양의 아이콘과 밝은 하늘색 배경색이 되도록 해봅시다. 

 블로그 글 제목 아이콘 변경 방법

먼저, 블로그 화면에서 q 버튼을 눌러 관리 화면으로 들어갑니다.

관리 화면 왼쪽에 꾸미기가 있습니다.

그 아래에 있는 HTML/CSS 편집을 클릭합니다.

오른쪽 화면 아무 곳이나 클릭한 후 

Ctrl키와 F키를 동시에 눌러 위에 검색창이 뜨도록 합니다. 

검색창에 포스트의 본문 시작을 입력하고 엔터를 쳐줍니다. 

위 화면처럼 포스트의 본문 시작이 보이면 그 아래 줄에 있는

  <i class="fa fa- > 부분이 보이실 겁니다. 

위 사진에서 옅은 분홍색으로 칠해준 곳에 pencil이라고 입력을 하고 

화면 오른쪽 위에 있는 저장 버튼을 누릅니다.

그리고 블로그로 와서 보면 글 제목 아이콘이 

상병 마크에서 연필 모양으로 바뀌어져 있는 것을 확인하실 수 있습니다.

만약 연필모양이 마음에 들지 않는다. 

좀더 개성 있는 모양으로 아이콘을 바꾸고 싶다. 

라고 생각하시는 분들이라면, Font Awesome이라는 사이트에서 

마음에 드는 아이콘을 골라 바꾸실 수 있습니다.

아래 글을 통해 더 다양한 아이콘을 이용해서 적용해봅시다.

※ 관련글 : FontAwesome 아이콘으로 티스토리 블로그 꾸미는 방법

 블로그 글 제목 바탕색 바꾸는 방법

이번에는 글 제목 바탕색을 바꿔보도록 하겠습니다. 

위와 동일한 방법으로 HTML/CSS 화면에 진입합니다.

아까는 HTML에서 작업을 했지만, 

이번에는 상단의 CSS를 눌러 CSS에서 작업을 해주셔야 합니다. 

화면 오른쪽 아무 곳이나 한 번 클릭해주고,

 Ctrl키와 F키를 눌러 검색창을 띄워 

h3.title이라고 써주고 엔터를 누릅니다. 

h3.title이 검색이 되면 아래 부분에 

background : #~~~~~~; 이라고 되어 있는 부분이 보일 것입니다. 

여기에서 샵(#) 뒤에 본인이 원하는 색상코드를 넣어 배경색을 지정해준 후 

오른쪽 위 저장 버튼을 눌러 저장해주시면 되겠습니다.

색상코드 관련해서는 관련글을 참고해주세요.

※ 관련글 : HTML 색상표, 색상코드표, 컬러코드표 간단히 이용하기

도움이 되셨다면, 로그인 없이 가능한

아래 하트♥ 공감버튼 을 꾸~욱 눌러주세요!

여러 티스토리 블로그, 사이트를 방문해보면 폴더 모양, 집 모양, 연필 모양, 카드 모양 등등 여러 모양의 아이콘을 볼 수가 있습니다. 블로그를 운영하기 전까지는 아, 그냥 그렇구나 하고 지나갔던 부분이지만, 디자인을 바꾸고 연구하다보니 저 아이콘 어떻게 한 거지? 하고 의문이 들었습니다. ㅁ을 누르고 한자키를 눌러서 나오는 다양한 특수기호나 한컴오피스 한글에서 입력할 수 있는 특수기호들을 이용한 건가?라고도 생각해보았습니다. 하지만, 다른 사이트에서 사용하고 있는 아이콘과 똑같은 아이콘을 찾을 수 없었습니다.

이곳 저곳 알아보았지만, 답은 가까운 곳에 있었습니다. 바로, FastBoot 스킨에 이미 적용되어 있던 아이콘에서 힌트를 얻어 찾아냈습니다. 그리고 블로그의 모든 곳에 원하는 아이콘을 적재적소에 배치를 하였습니다.

제 티스토리 블로그 상단에 보이는 홈 아이콘과 

폴더 아이콘, 글 제목에 포함된 연필 아이콘의 모습입니다.

오른쪽 사이드바에도 여러 아이콘이 있습니다. 

돋보기 아이콘, 지구본 아이콘, 카드 모양 아이콘 등등 

정말 다양한 아이콘이 있다는 것을 확인할 수 있습니다.

지금부터 이 아이콘을 가져올 수 있는 곳을 알려드리겠습니다.

바로, Font Awesome이라는 사이트입니다.

아래 링크를 눌러 Font Awesome 사이트로 들어갑시다.

http://fontawesome.io/icons/

 Font Awesome 사이트에서 아이콘 검색하는 방법

FontAwesome 사이트의 Icons라는 탭 화면입니다.

여기서 스크롤을 조금만 더 내려봅시다.

아래에 수많은 아이콘과 아이콘의 이름이 나열되어 있습니다.

정말 너무 많은 아이콘이 있기 때문에

내가 원하는 아이콘을 언제쯤이면 찾을 수 있을지 걱정부터 앞섭니다. 

노가다를 해서 눈이 빨개질 정도로 찾아보면 

언젠가는 찾을 수야 있겠지만, 매우 비효율적입니다.

그런 문제를 해결하기 위해 사이트에서는 검색 기능을 제공하고 있습니다.

Search icons라고 되어 있는 곳을 한 번 클릭하고, 

영어로 원하는 아이콘의 이름을 적고 엔터를 누르면 쉽게 찾을 수 있습니다.

저는 연필 모양의 아이콘을 찾아보기 위해

Pencil을 입력해보았습니다.

Search for 'pencil'이라는 표시가 뜨면서 

pencil, pencil-square-o, pencil-square이라는 세 가지 검색 결과가 나왔습니다. 

이 중에서 가장 눈에 잘 들어오는 pencil을 눌러봅시다.

그러면 위와 같이 내가 원하는 아이콘의 코드가 나옵니다.

티스토리 블로그나 본인이 운영하는 사이트에 가서

위와 같이 코드를 넣어 수정해봅시다.

만약 이미 fa fa- 와 같은 형식의 코드가 있다면

뒤에 있는 부분, 화면에서는 옅은 분홍색으로 표시된 부분만

바꿔주시면 원하는 아이콘으로 변경하실 수 있습니다.

도움이 되셨다면, 로그인 없이 가능한

아래 하트♥ 공감버튼 을 꾸~욱 눌러주세요!

인터넷 상에서 HTML 코드로 만들 수 있는 색상은 

RGB 즉 빨강, 초록, 파랑의 빛의 삼원색의 원리를 따르고 있습니다.

빛의 삼원색의 원리는 빨강, 초록, 파랑의 빛을 

모두 더하면 흰색이 된다는 것입니다.

색상코드는 F를 가장 원색을 띠는 것으로 삼고, 

F, E, D, C, B, A, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0 순으로 

색을 잃어버리는 식,

즉 어두어지는 것으로 정의하고 있습니다. 

이 정의를 따라 모든 색을 표현할 수가 있습니다. 

샵(#)뒤에는 여섯 자리의 숫자 및 알파벳이 오는데, 

FFFFFF는 흰색을 뜻하고, 

000000은 검은색을 뜻합니다.

맨 앞자리 두개는 빨간색을, 

중간의 두개는 초록색을, 

마지막 두개는 파란색에 해당하는 코드입니다.

다시말해서

빨강은 FF0000

초록은 00FF00

파랑은 0000FF

이라는 것입니다.

좀더 세부적으로 설명하자면

밝은 빨강 FF0000

중간 빨강 AA0000

중간보다 조금 어두운 빨강 990000

검은색에 가까운 빨강 110000

에 속합니다.

 HTML 컬러 코드 사이트를 이용해 색상코드를 쉽게 알아보자!

이제 빛의 삼원색의 원리를 적용한 HTML 색상코드의 기본적인 이해가 되셨다면, 손쉽게 티스토리 블로그에 글자색이나 배경색을 바꿀 수 있는 방법을 알아봅시다. 티스토리 블로그에서 글쓰기를 누르면 나오는 글씨색 지정 기능에서도 색상 코드를 쉽게 알 수 있지만, 컬러 하나 하나씩밖에 코드를 알 수 없기 때문에 한번에 여러 색상 코드를 알 수 있기 위해서는 HTML 컬러 코드 사이트를 이용하는 것이 좋겠습니다.

아래 링크를 통해 HTML 컬러 코드 사이트에 들어갑시다.

http://html-color-codes.info/Korean/

컬러코드 사이트는 여러 나라의 언어를 지원하고 있기 때문에 

한국어로 편하게 볼 수 있다는 장점이 있습니다. 

혹시 일본어나 영어 등 기타 언어로 보시는 게 편하신 분이라면 사

이트 오른쪽에 보이는 국기를 클릭해주시면 되겠습니다.

스크롤을 조금만 내리면 이와 같이 HTML 컬러 차트가 보입니다.

색을 클릭하면 누른 순서대로 해당 색의 코드가 위쪽에 저장되어 나옵니다.

정말 편리해보입니다.

하지만, 색이 세분화되어 있지 않고 개수가 제한되어 있기 때문에

내가 원하는 색이 없을 수 있습니다.

이럴 경우 고민하지 마시고 스크롤을 조금만 더 내려봅시다.

그러면 HTML 컬러피커라는 부분이 나옵니다.

여기서는 HTML 컬러 차트보다 더 많은 색상을 선택할 수 있습니다.

화면 가운데에 있는 무지개 색의 바에서 원하는 색을 정하고

왼쪽의 커다란 부분에서 세부적인 색을 클릭해주시면 됩니다.

다만, 이 경우에는 컬러 차트와는 다르게 클릭할 때마다 

색이 바로 바로 자동으로 저장되지는 않습니다.

마음에 드는 색을 저장해주시려면, 

화면 위쪽에 있는 Save Color 라는 버튼을 누르시면 됩니다.

이 부분은 번역을 해놓지 않아 한국어가 아닌 영어로 되어 있다는 점이 조금 아쉽지만, 

정말 편하게 다양한 색상을 선택하고 저장할 수 있는 좋은 사이트인 점은 확실한 듯 합니다.

도움이 되셨다면, 로그인 없이 가능한

아래 하트♥ 공감버튼 을 꾸~욱 눌러주세요!

티스토리 블로그에는 정말 블로거를 위해 다양하고 편리한 기능이 많이 있습니다. 스킨도 여러 종류가 있을 뿐더러, 내가 원하는 디자인을 마음대로 설정할 수가 있지요. 그뿐 아니라 티에디션이라는 꾸미기 기능도 있습니다. T-edition을 통해 블로그의 대문을 깔끔하고 예쁘게 꾸밀 수가 있는데요. 오늘은 바로 이 티에디션 기능을 설정하는 방법에 대해 알아보도록 하겠습니다.

제 블로그를 방문하신 대부분은 사실 이 화면을 보신 분들이 별로 없을 거라고 생각합니다. 하지만 블로그 상단 오른쪽에 있는 홈으로 버튼이나 왼쪽에 있는 블로그 제목을 클릭해본 적이 있으신 분들이라면 뭔가 정리되어 있는 느낌이 나서 괜찮다, 내 티스토리 블로그도 이런 식으로 설정해보고 싶다. 라고 하시는 분들이 몇 몇 있으셨습니다.

 Fastboot 스킨에서 티에디션 설정할 수 있게 하는 방법

Readiz님이 만드신 fastboot 1.6.2 버전을 그대로 적용하시면 아마 기본적으로 티에디션을 적용하지 못하게끔 설정이 되어 있기 때문에 티에디션을 적용할 수 있게 먼저 설정을 해주셔야 합니다. 

다른 스킨을 사용하고 계신 분이라면 이 앞 부분은 건너뛰셔도 좋습니다.

먼저, 블로그에서 q(큐) 키를 눌러 티스토리 관리 화면으로 들어갑니다.

꾸미기 아래에 있는 HTML/CSS편집을 누릅니다.

HTML 화면에서 스크롤을 아주 조~금 내리시면 이렇게 T-Edition Enable이라는 설명이 있습니다. false로 하면 FastBoot 인덱스 기본 설정으로 설정을 하는 것입니다. Default 디폴트라고 써 있는 것을 보니 역시나 이것이 기본 설정으로 되어 있는 것이 맞다는 것을 확인할 수 있습니다. 이 기본설정으로 되어 있으면 티에디션을 이용할 수 없습니다. 반면, 그 아래에 있는 true로 하면 T-edition을 사용할 수 있게 된다고 되어 있습니다. 

그 밑에 있는 var f_enableTedition= 다음에 있는 false를 true로 바꿔주시고 화면 오른쪽 위에 있는 저장 버튼을 누르고 나옵시다.

 티에디션 사용 및 설정 방법

이제 티에디션 설정을 할 수 있게 되었으니, 꾸미기 아래 있는 화면 설정을 누르고, 티에디션 항목에서 오른쪽 위에 있는 사용하기 버튼을 눌러줍시다.

위와 같이 화면 가운데에

 티에디션 시작하기라는 버튼이 표시된 것을 확인할 수 있습니다.

주저하지 말고 눌러줍시다.

티에디션 설정화면입니다. 화면 왼쪽에는 블로그 대문을 어떻게 꾸밀 것인지 실제 화면이 표시가 되고, 오른쪽에는 티에디션 디자인 편집창이 뜹니다. 먼저 왼쪽에 있는 것을 클릭하고 오른쪽 티에디션 창에서 아이템, 목록형을 누른 후 아래에 있는 오른쪽 화살표를 한 번 누른 후 목록형 상단 가운데에 있는 디자인을 클릭해봅시다. 

그러면 이와 같이 왼쪽 화면이 내가 지정한 디자인처럼 바뀝니다. 그런데 글씨가 작아보이고, 글자 색도 마음에 들지 않는군요. 그렇다면 세부적으로 디자인을 설정해주셔야 하겠습니다. 티에디션 편집창에는 아이템, 글선택, 디자인이라는 항목이 있는데 여기서 디자인을 누르면 되겠다고 직감적으로 느껴지네요.

디자인을 클릭하면 이와 같이 타이틀, 글제목, 글요약 세 가지를 각각 글씨체, 글씨크기, 배경, 테두리, 아이콘 설정을 하실 수 있습니다. 타이틀의 경우 타이틀의 이름을 본인이 직접 입력할 수 있습니다. 그 아래에는 카테고리명, 댓글수, 작성자, 작성일을 표시할 것인지 말 것인지를 취사선택할 수 있는 선택란이 보입니다. 저는 깔끔한 것이 좋다고 생각해서 모두 체크해제를 해주겠습니다.

가운데에 있는 글선택을 누르면 이렇게 카테고리별로 표시되는 글을 설정할 수 있습니다. 모든 글을 이 한 화면에 넣을 수도 있고 한 가지 카테고리에 있는 글만 설정할 수도 잇습니다. 왼쪽 화면에 보면 화면 위 아래에 플러스 + 표시가 있는데 이 화면 위쪽에 또 이러한 화면을 넣고 싶다면 위에 있는 +를 누르면 되고, 아래에 만들고 싶다면 아래에 있는 +를 누르면 됩니다. 반대로 이 화면을 없애고 싶다면 오른쪽 위에 있는 주황색의 작은 x 버튼을 누르면 됩니다.

또, 왼쪽 화면의 밑 부분을 보면 하얗게 공백이 있는데, 이것을 없애고 싶으신 분들도 계실 겁니다.

그럴 때는 티에디션 편집창에서 아이템을 클릭하고, 아래쪽에 있는 아래 부분을 선없음으로 설정해주시면 위 화면과 같이 빈 공간이 쏙 들어가게 만들 수 있습니다.

이제 티에디션으로 티스토리 블로그의 대문을 예쁘게, 그리고 내 입맛에 맛게 디자인해봅시다.

티스토리 블로그 스킨 변경 등록 방법 및 반응형 스킨 추천

티스토리 블로그 Fastboot 댓글창 오류 해결 방법 (파란줄, 회색줄, 아이콘, 프로필)

티스토리 블로그 채팅창 달기(설정, 설치) 방법 2부 :: 채널 데스크 이용편

티스토리 블로그 본문 글씨 크기 바꾸는 방법

티스토리 블로그에 유튜브 동영상 쉽게 넣는 방법

티스토리 블로그 머리말 디자인 바꾸는 방법

도움이 되셨다면, 로그인 없이 가능한

아래 하트♥ 공감버튼 을 꾸~욱 눌러주세요!

오늘은 블로그 사이드바에 구글 애드센스 맞춤검색창을 넣는 방법을 알아보도록 하겠습니다. 

블로그의 맨 오른쪽 상단에 돋보기 모양의 검색창이 있는데 그 검색창은 블로그 안에 있는 글들 내에서만 검색이 가능하기 때문에 다소 제한사항이 있습니다. 하지만, 이번에 적용할 구글 맞춤검색 기능을 이용하면, 내가 원하는 사이트, 블로그들에 한해서 검색을 할 수 있기 때문에 편리합니다. 

블로그 오른쪽 사이드바를 보시면 이렇게 맞춤검색 플러그인이 있습니다.

검색창에 찾고자 하는 단어를 입력해주시고 오른쪽에 있는 검색 버튼을 눌러봅시다.

저는 여행이라고 입력하고 검색을 눌러보겠습니다.

이렇게 여행과 관련된 검색 결과가 쭉 나옵니다.

블로그 안에서 구글이나 다음, 네이버 등과 같은 

포털사이트 검색 결과를 볼 수 있으니 상당히 편리하네요.

그럼, 구글 맞춤검색을 블로그에 다는 방법을 알아보겠습니다.

 구글 애드센스를 통해 맞춤검색 코드 가져오기

먼저 구글 애드센스 사이트에 로그인을 합니다.

https://www.google.com/adsense

왼쪽 사이드바에서 내 광고를 누르고, 검색, 맞춤검색 엔진 순으로 클릭을 합니다.

그러면 오른쪽에 위 화면과 같이 나오는데 여기서 새 맞춤검색 엔진을 누릅니다.

이름에는 맞춤검색1, 맞춤검색2 등 적절하게 써넣어줍니다.

검색 범위는 내 블로그 안에 있는 글들에 한해서 검색이 되도록 할 것인지

아니면, 구글, 네이버, 다음 등과 같은 사이트에서도 검색이 되게 할 것인지를 정하는 것입니다.

국가 또는 지역과 사이트 언어를 해당 국가와 언어에 맞게 선택해줍니다.

대한민국, 한국어 이렇게 선택해주시면 됩니다.

검색창 스타일과 광고 스타일 설정까지 입맛에 맞게 해줍시다.

모두 완료가 되면 맨 아래에 있는 저장 및 코드 생성을 눌러주시면 됩니다.

그러면 이와 같이 검색창 코드 생성 완료라고 뜨면서 코드를 복사할 수 있는 창이 뜹니다.

코드를 복사해둡시다.

이제 티스토리 블로그로 와 사이드바에 달아보도록 합시다.

 티스토리 사이드바에 구글 맞춤검색 달기

블로그에 와서 q를 눌러 관리 화면으로 진입합니다.

왼쪽 사이드에서 꾸미기, 사이드바, HTML 배너출력 순으로 선택해주시고

오른쪽에 HTML 배너출력이 나오면 편집을 눌러줍니다.

이름에 맞춤검색창1이라고 적당히 적어주시고, HTML 소스 부분에

구글 애드센스 사이트에서 가져온 코드를 붙여넣기 해주신 후 확인 버튼을 누릅니다.

그리고 반드시 저장 버튼을 눌러 저장해줍시다.

이제 내 블로그 화면으로 와 보면 구글 맞춤검색이 사이드바에 달려있는 것을 확인할 수 있습니다.

구글 이미지 검색 모바일 스마트폰에서 하는 방법

구글 애드센스 광고 심사센터 이용 및 싫은 광고 차단 방법

구글 애드센스 승인 받기 좋은 티스토리 블로그 스킨 및 팁 정리

구글 애드센스 거래 은행 선택 방법 :: SC제일은행 VS 우체국은행

구글 애드센스 일치하는 콘텐츠 광고 넣기 방법

도움이 되셨다면, 로그인 없이 가능한

아래 하트♥ 공감버튼 을 꾸~욱 눌러주세요!

2017년 5월 티스토리 블로그 초대장 3장 배포합니다.

블로그를 매일 하지는 못하시더라도 

꾸준히 알찬 정보를 공유해주실 분들만 

댓글을 달아주시기를 바랍니다. 

초대장을 원하시는 분들은

아래 댓글에 

1. 티스토리 블로그를 운영하려고 하는 이유(솔직하게)

2. 이메일주소

3. 지금 당장 블로그를 개설한다면 만들고자하는 

카테고리 3개와 글 제목 3개

를 적어주시기 바랍니다.

초대장 신청기간은 2017. 5. 26(금) 23:59까지해주시고

초대장 발송은 2017. 5. 27(토) 10:00에 하도록 하겠습니다.

양식에 맞지 않게 쓰시면 검토대상에서 제외하겠으니

꼭 위의 양식에 맞게 3가지를 모두 작성해주시기 바랍니다.

도움이 되셨다면, 로그인 없이 가능한

아래 하트♥ 공감버튼 을 꾸~욱 눌러주세요!