신텍스 하이라이터 SyntaxHighter?????

신텍스 하이라이터[SyntaxHighter] 설치법을 알아보겠습니다.

신텍스 하이라이터란 아래처럼 블로그 포스팅 안에 HTML 소스를 보여지게 하는 기능입니다.

참 유용한 기능이죠.

  


     
        
        MARANATHA
    
    
        
        

welcome to maranatha home

MARANATHA

즐겨찾는 페이지

감사합니다

물론 다른 방법도 있습니다.

아래처럼 순수하게 TEXT로만 보여지게 하면 간단하죠.

무선을 선택하든 맘에 드는 걸로 알아서 하면 됩니다.

<!DOCTYPE html>

<html>

    <head> 

        <meta charset="utf-8">

        <title>MARANATHA</title>

    </head>

    <body>

        <!--본문 시작-->

        <h1>welcome to maranatha home</h1>

        <a href="https://t1.daumcdn.net/cfile/tistory/990A563C5B7A3DF801">MARANATHA</a>

        <br>

        <br>

        <a href="attribute.html">즐겨찾는 페이지</a>

        <br>

        <br>

        <img src="https://t1.daumcdn.net/cfile/tistory/990A563C5B7A3DF801" alt="감사합니다" title="인물사진"width="600" height="400">

        </body>

</html> 


신텍스 하이라이터 SyntaxHighter 다운로드 방법

syntaxhighlighter_3.0.83.zip

위의 압축 파일을 다운 로드 받아서 압축을 풀어줍니다.

복잡하거나 html을 잘 모르는 분이라면 위의 파일을 다운로드 받아서 압축을 풀어주면 됩니다.

아니면 아래의 사이트로 가서 다운로드를 받아도 됩니다.

문제는 영어라는거..ㅎㅎ;;;;

http://alexgorbatchev.com/SyntaxHighlighter/

다운로드를 받아서 압축을 풀면 아래와 같은 폴더가 만들어집니다.

syntaxhighlighter_3.0.83의 압축파일을 풀면 아래와 같은 파일들이 들어 있습니다.

이제는 이 파일들을 티스토리에 적용을 시켜보겠습니다.


신텍스 하이라이터 SyntaxHighter 티스토리[Tistory]에 설치하기

티스토리 화면에서 블로그 관리자 화면으로 들어갑니다.

기본 설정에서 단축키 [Q]를 눌러도 블로그 관리자 화면으로 들어갑니다.

관리자 화면에서 [1]의 스킨 변경으로 들어가서 

[2]번의 스킨 다운로드를 클릭해서 현재의 스킨을 다운로드 받아서 따로 저장하면 좋습니다.

지금부터 스킨의 html과 css를 수정할 텐데 수정을 잘 못하면 되돌릴수 없는 요단강을 건너는 수가 있기때문에 안된다 싶으면 원본 파일로 다시 설치 해보리면 됩니다.

물론 이 방법 외에도 다른 방법이 있으니까 잘 찾아보기시 바랍니다.

[3]번 스킨 편집을 클릭합니다.

[3]번을 클릭하면 화면이 분할 되면서 우측에 스킨 편집 화면이 나옵니다.

[html 편집] 버튼을 클릭합니다. 




'IT > 티스토리 꾸미기' 카테고리의 다른 글

html에 사용하는 GIF이미지들  (0) 2018.08.20
티스토리 글서식  (0) 2018.08.20
티스토리 애드센스 광고 삽입하기  (0) 2018.07.20
티스토리 사이트맵  (0) 2018.07.13

아래의 이미지들은 maranatha의 html 이미지 소스들입니다.

점선 긋기


아래 이미지 입니다.

HTML

<p>HTML</p><div class="txc-textbox" style="border-style: dashed; border-width: 1px; border-color: rgb(193, 193, 193); background-color: rgb(238, 238, 238); padding: 10px;"><p>

원본이미지-잘 찾아보면 중앙에 점4개짜리 이미지가 있습니다.




 Won's Factory 
반응형 블로그에 들어가는 티스토리 글 양식입니다.

1 가나다라


2 마라나타


첨부된 파일을 다운 로드 받아서 사용하면 됩니다.

양식을 다운 로드 받은 후 txt를 html로 수정하면 윈도우 화면에서 확인을 할 수 있습니다.

티스토리서식.txt

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

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


티스토리 애드센스 광고 삽입하기

티스토리 애드센스 광고 삽입하기

티스토리 애드센스 광고 삽입하기

티스토리 애드센스 광고 삽입하기


티스토리와 구글 애드센스

네이버 블로그, 다음 블로그, 티스토리, 구글 블로그등 여러가지 형태의 블로그들이 있습니다.

이러한 블로그 중에서도 설치형 블로그가 있는데 티스토리나 워드프레스등으로 만드는 블로가가 대표적인 설치형 블로그라고 할 수 있습니다.


많은 분들이 티스토리를 하죠.

티스토리는 하면 할 수록 빠져들고 분명히 매력적인 블로그인것 많은 확실합니다.

네이버 블로그도 아주 좋지만 만지기 좋아하고 자기만의 개성있는 블로그를 만들고 싶어 하는 블로거들에게는 아주 매력적인것은 도구입니다.


자동차 관련 네이버 블로그를 운영하고 있지만 티스토리도 제대로 한번 운영을 해볼까합니다...ㅎㅎ

티스토리와 네이버 블로그의 가장 큰 차이점은 광고 수익 시스템인데요.

티스토리와 구글 애드센스등과 같은 매체와 연결이 가능합니다.


티스토리 에드센스 광고 삽입하기

티스토리 에드센스 광고 삽입하기에 대해서 알아보겠습니다.


일단 구글 애드센스 계정이 필요하겠지요.

애드센스 계정 만들기도 별도로 포스팅을 하겠습니다.

오늘은 티스토리에 애드센스 광고 삽입하는 방법을 배워야 하니까...ㅎㅎ

티스토리 애드센스 광고 삽입하기


티스토리 플러그인

티스토리 로그인을 하고 좌측 카테고리 하단에 플러그인이라고 있습니다.

이 플러그인은 티스토리의 아주 중요한 기능중에 하나니까 꼼꼼하게 살펴보시길 바랍니다.

플러그인을 클릭하면 메인 화면에 여러가지 플러그인이 나타납니다.

캡처 화면에는 3개가 나오지만 상단의 전체 플러그인 갯수에는 44개가 있군요.

물론 플러그인은 용도에 따라서 더 만들수도 있습니다.

하지만 딱히 더 만들지 않아도 티스토리 플러그인 44를 다 사용하기도 벅차기때문에 있는 것만 잘 활용해도 아주 좋은 효과를 만들수 있습니다.

스크롤 바를 아래로 죽~내려도 찾을 수가 있지만 상단 [광고]라고 검색을 하면 광고 플러그인이 검색됩니다.

티스토리 애드센스 광고 삽입하기

[광고]라고 검색을 하니까 7개의 광고 플러그인이 나오는군요.

그중에 구글 애드센스는 PC, 모바일, 반응형 세가지 플러그인이 나옵니다.

요즘 대세가 반응형이죠.

저도 반응형 티스토리를 사용하기때문에 반응형 구글 애드센스 광고를 삽입해보겠습니다.


티스토리 애드센스 광고 삽입하기


구글 애드센스 새 광고 단위 만들기

구글 애드센스 pc 버전 플러그인을 클릭하니 위와 같은 화면이 나오는군요.

구글 애드센스 pc광고는 상단과 하단에 할 수 있습니다.

물론 여기에는 애드센스에서 요구하는 규정이 있기때문에 그 규정을 꼭 준수해주시기 바랍니다.

광고 배치 유형 중에 1 가지를 선택해주세요. 상단/하단 각 1개씩 선택 가능합니다.

광고 코드 입력창에 애드센스 광고 코드를 넣어주어야 하는데 애드센스 광고 삽입의 중요한 포인트는 꼭 사이즈를 맞추어야 한다는 것입니다.

사이즈가 안맞으면 엑박이 나오거나 광고부분이 하얗게 아무것도 안나오는 경우가 있습니다.

그럼 구글 애드센스로 넘어가서 광고를 만들어 보겠습니다.

티스토리 애드센스 광고 삽입하기

구글 애드센스에 접속을 해서 좌측에 내 광고>>>광고 단위를 클릭해서 광고 단위 아래 [새 광고 단위]를 하나 만들줍니다.

이미 광고를 하고 있기때문에 몇 개의 광고가 보이는데 이 광고들은 샘플 광고들이고 설정에서 내 광고를 보이게도 할 수 있고 보이지 않게 할 수 있는 기능도 있습니다.


일단 새로운 광고를 하나 만들어 보겠습니다.

티스토리 애드센스 광고 삽입하기

텍스트 및 디스플레이 광고, 

일치하는 콘텐츠. 

인피드 광고,

콘텐츠 내 자동 삽입광고 

이렇게 4가지 유형이 나옵니다.

가장 기보적인 [텍스트 및 디스플레이 광고]를 새 광고 단위로 만들어 보겠습니다.

가독성을 좋게 하기 위해서 상단에 720*90 사이즈의 새 광고 단위를 만들었습니다.

티스토리 애드센스 광고 삽입하기


티스토리에 광고 단위 삽입하기

광고코드가 생성 되었습니다.

이제는 저 광고 코드를 티스토리 구글 애드센스 플로그인에 붙복을 하고 적용 버튼을 누르면 설정이 완료됩니다.

티스토리 애드센스 광고 삽입하기

티스토리 애드센스 광고 삽입하기에 대해서 알아봤는데 생각보다 간단하죠.

이런식으로 몇 번 수정을 하다보면 내가 원하는 디자인으로 광고를 만들 수 있습니다.

여러가지 모양으로 만들어보고 삽입해보고 하면 재미도 있고 많은 돈은 아니지만 쏠쏠하게 들어오는 광고료가 나름 재미도 있습니다.

2018/07/17 - [IT/엑셀] - 엑셀 피펏테이블 : 엑셀 피벗테이블!!!무엇에 쓰는 물건인고~~

2018/07/17 - [IT/엑셀] - 엑셀 피펏테이블 : 엑셀 피벗테이블!!!무엇에 쓰는 물건인고~~

2018/07/17 - [IT/엑셀] - 엑셀 피펏테이블 : 엑셀 피벗테이블!!!무엇에 쓰는 물건인고~~


티스토리 애드센스 광고 삽입되면 이런 식으로 수익이 창출되는데 구글 애드센스를 이해하면 또 다른 세상이 보일것입니다.

이미 앞서가는 크리에이터들은 이미 구글 애드센스에서 훌륭한 수익구조를 만들어 내고 있습니다.


우리도 한번 도전 해봅시다....ㅎㅎ

sitemap.xml


won,s factory의 티스토리 사이트맵 좌표입니다.



참고사이트

http://foxcg.com/546


http://prolite.tistory.com/828


+ Recent posts