웹프로그래밍/티스토리 7

티스토리 블로그에 애드센스 광고 달기

이번 포스팅에서는 티스토리 블로그에 광고를 다는 방법을 정리해 보았습니다. 데스크탑의 웹브라우저티스토리 블로그 본문의 상단, 하단.티스토리 블로그 본문의 오른쪽 사이드바 모바일 웹브라우저티스토리 블로그 본문의 상단, 하단 사이드바에 구글광고 게시하기 우측 상단의 메뉴에서 관리를 클릭! 플러그인 -> '플러그인 설정' 에서 배너출력 클릭! -> 확인 클릭! 확인을 누르고~ 'HTML 배너출력'을 드래그한 다음 편집을 누른 뒤 HTML 코드를 넣고 확인을 눌러주면 됩니다. 사이드바게시 끝! 포스트 상 하단에 구글광고 게시하기 우측 상단의 메뉴에서 관리를 클릭! 플러그인 -> '플러그인 설정' 에서 'Google AdSense(데스크탑 웹용)'과 'Google AdSense(모바일용)'를 찾습니다. 우선 'G..

Tistory 치환자 삽입하기

치환자 삽입하기 이번 포스팅은 치환자에 대해서 다뤄보도록 하겠습니다. 치환자에 관한 설명은 아래의 링크에서 잘 설명이 되어있습니다.http://www.tistory.com/guide/skin/step3#1-1 하지만 어떻게 적용하는지에 대해서는 설명이 부족한듯하여 글을 적어봅니다. 가장 기본적인 치환자는 아래와 같습니다. : 블로그 주소 : '관리자 > 환경설정 > 기본설정'에서 입력된 블로그 제목 아래 그림은 이전 글에서 끄적거린 예제에 치환자를 삽입한 결과입니다. 본문내용입니다. 사이드바입니다. 바닥공간입니다. 위 그림은 치환자를 사용하면서 저의 블로그이름이 들어가고 하이퍼링크가 걸린것을 확인할 수 있습니다. 이런식으로 티스토리의 치환자를 활용하여 쉽게 블로그를 제작하실 수 있습니다.

스킨제작의 기초

스킨 뼈대 이해하기 이번 블로그는 스킨의 뼈대를 제작해 보겠습니다.스킨의 디자인을 결정했다면 이제 스킨의 구조를 파악해야 합니다. 예를 들어, 2단형의 기본 스킨의 디자인을 보면 크게 header, content, sideinfo, footer로 이루어져 있습니다. 각 영역은 아래와 같은 정보를 담고 있습니다. 1 header 블로그 제목, 설명, 블로그 메뉴 등 2 content 검색 결과, 위치로그, 태그, 방명록, 공지사항, 보호글, 페이징 등 3 sideinfo 카테고리, 최근글 리스트, 최근 댓글, 공지사항, 링크 등 4 footer 전체 블로그 메뉴, Copyright 등 skin.html step 1 structured Tip : 코드가 길어지면 헛갈릴 수 있으므로 닫는 태그에 주석을 달아줍..

Tistory 시작하기

Tistory 가입하기 티스토리는 회원가입이 자유롭지가 못합니다.기존 회원에게 초대장을 받아서 초대가 가능합니다.초대장이 필요하신 분들은 아래의 조건대로 비밀댓글을 달아주세요 0. 비밀댓글로 달아주세요.(공개댓글은 삭제합니다)1. 자신이 운영하는 주소나 홈페이지(없으면 생략)2. 티스토리를 시작하려는 이유3. 이메일 예제)1. dreamzelkova.tistory.com2. 열심히 공부한 내용을 공유하고 싶습니다.3. abcd@hanmail.net Tistory 연습할 블로그 만들기 우측상단에 '내블로그▼ '를 클릭하고 '내 블로그 만들기'를 클릭합니다. 블로그 제목과 블로그 주소를 적어넣고 완료합니다. 내 블로그 가기 클릭! 좌측상단에 아이디 클릭 -> 관리 클릭 HTML/CSS 편집을 클릭합니다. 아..

티스토리 - 긴글쓰기(접기/펼치기) 디자인하기

접기 펼치기 사용후기 접기 펼치기 기능을 사용한 순간 접기, 펼치기 옵션을 보고오 진짜 좋은기능인데? 라고 생각하며 사용해 보았다.하지만.. 뭐지? 나는 분명히 펼치기에 더보기를 입력했는데 이런 영혼없는 디자인은? 충격과 공포에 우쩔가? 생각하다가 자바스크립트와 CSS를 사용한 접기 펼치기 기능을 사용해 봤으나. Tistory 기능 때문인지 ... 글쓰고 저장하는 순간 이상하게 꼬여버렸다 ㅜ^ㅜ 그렇다면? 결론은.... 접기 펼치기 기능을 고쳐야 한다는 것. 플로그인을 살펴보고 HTML/CSS를 뚫어지게 쳐다보다가 빙빙도는 코드때문에 난감해 하다가.꾸미기 -> Html/css 편집 ->파일 업로드하기를 살펴본 순간 실마리가 풀리게 되었다 ^-^ iconMore과 iconLess에 영혼없는 디자인을 보고 ..