본문 바로가기

분류 전체보기133

[티스토리 블로그 꾸미기] 홈(커버) 쉽게 만들기 안녕하세요! 지난 글에 이어 성능 최적화된 홈(커버) 인피드 광고를 노출시키기 위해 이번에는 홈(커버) 쉽게 만드는 방법을 아주 쉽게 알려드리겠습니다. 홈(커버)은 블로그의 첫인상을 좌우하는 중요한 요소입니다. 홈(커버)을 잘 꾸미면 방문자가 더 많은 페이지를 탐색하도록 유도할 수 있습니다. 이번 글을 통해 방문작 더 자주 찾고 싶어지는 블로그 홈을 만드는 방법을 안내해 드리겠습니다. 이 작업은 티스토리 '북클럽' 스킨을 기준으로 진행합니다. 기본 설정 확인 블로그 홈의 기본 설정을 확인합니다. 커버를 사용하지 않으면 아래 이미지와 같이 전체 글이 리스트로 표현됩니다. 스킨 편집 들어가기관리자 페이지에 왼쪽 메뉴에서 '꾸미기' 탭 안에 '스킨 편집'버튼을 클릭하면 새로운 창이 열립니다.새로운 창이 열리면.. 인사이트/블로그 2024. 6. 3.
[티스토리 블로그 광고] 성능 최적화된 홈(커버) 인피드 광고 넣는 방법 안녕하세요! 블로그 홈(커버) 글 사이사이에 인피드 광고를 넣어 광고 수익을 극대화하고 싶으신가요!? 잘 찾아오셨습니다. 이번 글에서는 홈(커버)에 인피드 광고를 넣는 방법을 쉽게 알려드리겠습니다. 이 글에서는 홈(커버)에 광고를 넣는 코드와 페이지 성능을 최적화하는 코드를 합친 종합 코드에 대해 설명하겠습니다. 애드센스 승인을 받은 분들만 이 작업을 진행할 수 있습니다. 아직 승인을 받지 못하셨더라도 이 글을 저장해 두셨다가 승인 후 바로 사용하시기를 권장합니다. 이 글은 이전 글인 카테고리 인피드 광고 넣는 방법과 매우 비슷합니다. 이전 글을 적용하지 않으셨더라도, 이 글에서 쉽게 설명해 드리니 천천히 따라오시면 됩니다! 이 작업은 티스토리 '북클럽' 스킨의 커버에 있는 '뉴스레터'를 기준으로 진행합.. 인사이트/블로그 2024. 6. 2.
[티스토리 블로그 광고] 성능 최적화된 카테고리 인피드 광고 넣는 방법 안녕하세요! 블로그 카테고리 글 사이사이에 인피드 광고를 넣어서 광고 수익을 극대화하고 싶으신가요!? 잘 찾아오셨습니다. 이번 글에서는 그 방법을 아주 쉽게 알려드리겠습니다. 카테고리 글 사이사이에 광고를 삽입하는 코드와 페이지 성능을 최적화하는 방법을 합친 종합 코드를 소개합니다. 애드센스 승인을 받은 분들만 이 작업을 진행할 수 있습니다. 아직 승인을 받지 못하셨더라도 이 글을 저장해 두셨다가 승인 후 바로 사용하시기를 권장합니다. 이 광고를 적용하려고 제가 5일을 찾아보고 적용과 실패를 겪으면서 완성한 코드입니다. 쉽게 적용하실 수 있게 안내해 드리겠습니다. 결론에 최적화된 본문 상단 광고 2개 넣는 방법에 대한 내용도 있으니 끝까지 봐주세요! 이 작업은 티스토리 '북클럽' 스킨을 기준으로 진행합니.. 인사이트/블로그 2024. 6. 1.
[티스토리 블로그 광고] 성능 최적화된 상단 광고 2개 넣는 방법 안녕하세요! 블로그 본문에 상단 광고를 두 개 넣어서 광고 수익을 극대화하고 싶으신가요!? 이번 글에서는 그 방법을 아주 쉽게 알려드리겠습니다. 본문 상단 광고 2개를 삽입하는 코드와 페이지 성능을 최적화하는 방법을 합친 종합 코드를 소개합니다. 애드센스 승인을 받은 분들만 이 작업을 진행할 수 있습니다. 아직 승인을 받지 못하셨더라도 이 글을 저장해 두셨다가, 승인 후 바로 사용하시기를 권장합니다. 제가 3일간 찾고 적용한 방법을 쉽게 따라 할 수 있도록 안내해 드릴게요. 이 작업은 티스토리 '북클럽' 스킨을 기준으로 진행합니다. 다른 스킨도 비슷한 방식으로 진행하시면 됩니다! 광고 만들기 애드센스 사이트에 접속해서 로그인 후 왼쪽 메뉴에서 '광고'를 클릭합니다.광고 메뉴에서 '사이트 기준', '광고 .. 인사이트/블로그 2024. 5. 31.
[티스토리 블로그 꾸미기] 댓글 마우스 오버 효과 주기 (3탄) 안녕하세요! 댓글 섹션을 꾸미는 데 관심이 있는 분들께 유용한 팁을 하나 더 준비했습니다. 이번에는 댓글 섹션에 마우스를 올렸을 때 나타나는 효과를 주는 방법을 알려드리겠습니다.이번 작업은 마우스 오버 효과에 일부이니, 다양하게 꾸며보실 수 있습니다. 따라 하기 쉽게, 코드를 붙여 넣기만 하면 되도록 준비했으니, 천천히 진행해 보세요!잘 모르는 코드가 있거나, 필요한 코드는 자주 쓰는 CSS 속성 총정리 게시글에서 확인하세요!이 작업은 티스토리 '북클럽' 스킨을 기준으로 진행합니다. 스킨 편집 들어가기관리자 페이지에 왼쪽 메뉴에서 '꾸미기' 탭 안에 '스킨 편집'버튼을 클릭하면 새로운 창이 열립니다.새로운 창이 열리면, 우측 상단에 있는 'html 편집' 버튼을 클릭합니다. CSS 코드 바꾸기우측 상단에.. 인사이트/블로그 2024. 5. 30.
[티스토리 블로그 꾸미기] 댓글 글자색 쉽게 바꾸기 (2탄) 안녕하세요! 지난번에 티스토리 블로그 꾸미기 댓글 테두리 색상 쉽게 바꾸기는 방법을 소개해드렸습니다. 이번에는 이어서 댓글 글자색 쉽게 바꾸기 2탄을 알려드리겠습니다.이 작업을 하려고 3시간을 헤맸지만, 여러분께서는 이 과정을 따라 하기 쉽게, 코드를 붙여 넣기만 하면 될 수 있도록 준비했습니다. 쉽고 따라 하기 쉬운 작업이니, 천천히 진행해 보세요!잘 모르는 코드가 있거나, 필요한 코드는 자주 쓰는 CSS 속성 총정리 게시글에서 확인하세요!이 작업은 티스토리 '북클럽' 스킨을 기준으로 진행합니다. 스킨 편집 들어가기관리자 페이지에 왼쪽 메뉴에서 '꾸미기' 탭 안에 '스킨 편집'버튼을 클릭하면 새로운 창이 열립니다.새로운 창이 열리면, 우측 상단에 있는 'html 편집' 버튼을 클릭합니다. CSS 코드 .. 인사이트/블로그 2024. 5. 29.
[티스토리 블로그 꾸미기] 댓글 테두리 색상 쉽게 바꾸기 (1탄) 안녕하세요! 지난번에 티스토리 블로그 꾸미기를 위해 자주 쓰는 CSS 속성 총정리를 소개해드렸습니다. 이번에는 댓글 테두리 색상 쉽게 바꾸는 방법에 대해 알려드리겠습니다.이번 작업은 댓글의 테두리와 대댓글 테두리도 쉽게 바꾸는 방법에 대해 소개하겠습니다. 댓글 꾸미기가 좀 있다 보니, 다음 글에도 댓글 꾸미기 2탄을 안내해드리겠습니다.이 작업은 티스토리 '북클럽' 스킨을 기준으로 진행합니다. 스킨 편집 들어가기관리자 페이지에 왼쪽 메뉴에서 '꾸미기' 탭 안에 '스킨 편집'버튼을 클릭하면 새로운 창이 열립니다.새로운 창이 열리면, 우측 상단에 있는 'html 편집' 버튼을 클릭합니다. CSS 코드 바꾸기우측 상단에 있는 'HTML | CSS | 파일업로드' 중에 'CSS'를 클릭합니다. 기본 설정 확인본문.. 인사이트/블로그 2024. 5. 28.
[티스토리 블로그 꾸미기] 자주 쓰는 CSS 속성 총정리 안녕하세요! 지금까지 블로그 꾸미는 과정을 소개해드렸습니다. 이번에는 블로그 꾸밀 때 가장 많이 쓰는 CSS 속성 총정리에 대해 알려드리겠습니다.이 글만 보더라도 웬만한 꾸미기는 다 하실 수 있을 것이라는 생각이 듭니다. (저도 이 글을 자주 볼 거예요!)티스토리 '북클럽' 스킨에 CSS 속성들을 분석해서 자주 사용하는 것들을 최대한 뽑았습니다. 많이 활용하시길 바랍니다. Padding: 내용과 테두리 사이의 빈 공간(여백) padding: 10px; /* 모든 방향에 10픽셀 */padding: 10px 5px; /* 위아래 10픽셀, 좌우 5픽셀 */padding: 10px 0; /* 위아래 10픽셀, 좌우 0픽셀 */padding: 0 0 10px 0; /* 아래쪽에 10픽셀 (나머지는 0) */p.. 인사이트/블로그 2024. 5. 27.
[셀프 리더십 #1] 성공은 작은 일이 모여 이룬 결과 가끔 무언가를 할 때 '이게 무슨 짓거리인가?'라는 생각이 들어. 최근에 그런 생각이 들어서 글도 썼었지. 열심히 하는데도 뭔가 잘 안 되는 느낌이 들 때가 많거든. 무언가를 하면 할수록 뿌듯함을 느끼거나, 성장하고 있다는 느낌을 받아야 하는데, 오히려 '이게 뭐지?' 싶을 때가 많아. 아마 나와 비슷한 생각을 하는 사람들도 많이 있을 거야. 마치 제자리걸음을 하고 있는 느낌? 이런 좌절감을 느끼는 건 자연스러운 일이라고 하더라. 자기계발 책에서는 '그냥 하다 보면 성공한다.'라고 하는데, 그 의미를 아직 잘 모르겠어. 정말 하다 보면 성공할 수 있는 걸까..? 최근에 1년 넘게 공부하고 노력했지만, 결과물이 없고 계속 시간과 돈을 투자하는 것 같아서 쉽게 싫증이 났어. 아무것도 안 하고 싶은 상황이 많.. 성장/셀프리더십 2024. 5. 26.
[티스토리 블로그 꾸미기] 네임카드 꾸미기와 1분 만에 쉽게 제거하기 안녕하세요! 지난번에 본문 공감 버튼 5분 만에 쉽게 꾸미기를 소개해드렸습니다. 이번에는 네임카드 꾸미는 방법과 1분 만에 쉽게 제거하는 방법을 알려드리겠습니다.이번 작업에서는 네임카드의 블로그 이름과 설명의 글자색, 글자 크기, 글자 굵기, 배경색, 테두리 색을 꾸미는 방법을 소개하고, 네임카드를 아주 쉽게 제거하는 방법을 설명해드리겠습니다.저는 이 부분을 해결하려고 5시간 동안 헤맸지만, 여러분의 시간을 아껴드리겠습니다!이 작업은 티스토리 '북클럽' 스킨을 기준으로 진행합니다. 스킨 편집 들어가기관리자 페이지에 왼쪽 메뉴에서 '꾸미기' 탭 안에 '스킨 편집'버튼을 클릭하면 새로운 창이 열립니다.새로운 창이 열리면, 우측 상단에 있는 'html 편집' 버튼을 클릭합니다. CSS 코드 바꾸기우측 상단에 .. 인사이트/블로그 2024. 5. 26.
[티스토리 블로그 꾸미기] 본문 공감 버튼 5분 만에 쉽게 꾸미기 안녕하세요! 지난번에 본문 표 꾸미기를 소개해드렸습니다. 이번에는 본문 공감 버튼들을 5분만에 쉽고 빠르게 꾸미는 방법을 알려드리겠습니다.이번 작업은 각 버튼들의 테두리 색상을 변경하고, 마우스를 올렸을 때 확대되는 느낌을 주는 방법을 소개해드리겠습니다. 저는 이 부분을 고치려고 약 13시간을 헤맸습니다. 여러분의 시간을 아껴드리겠습니다!이 작업은 티스토리 '북클럽' 스킨을 기준으로 진행합니다. 스킨 편집 들어가기관리자 페이지에 왼쪽 메뉴에서 '꾸미기' 탭 안에 '스킨 편집'버튼을 클릭하면 새로운 창이 열립니다.새로운 창이 열리면, 우측 상단에 있는 'html 편집' 버튼을 클릭합니다. CSS 코드 바꾸기우측 상단에 있는 'HTML | CSS | 파일업로드' 중에 'CSS'를 클릭합니다. 기본 설정 확인.. 인사이트/블로그 2024. 5. 25.
[티스토리 블로그 꾸미기] 본문 표 꾸미기 안녕하세요! 지난번에 인용문 꾸미기 시리즈를 소개해드렸습니다. 이번에는 본문 표를 꾸미는 방법을 알려드리겠습니다.이번 작업은 각 표를 글자 길이에 맞게 조절할 수 있는 방법과 테두리 색상을 꾸미는 방법을 소개해드리겠습니다.이 작업은 티스토리 '북클럽' 스킨을 기준으로 진행합니다. 스킨 편집 들어가기관리자 페이지에 왼쪽 메뉴에서 '꾸미기' 탭 안에 '스킨 편집'버튼을 클릭하면 새로운 창이 열립니다.새로운 창이 열리면, 우측 상단에 있는 'html 편집' 버튼을 클릭합니다. CSS 코드 바꾸기우측 상단에 있는 'HTML | CSS | 파일업로드' 중에 'CSS'를 클릭합니다. 기본 설정 확인 표 스타일의 기본 설정은 회색 테두리에 각 박스 크기가 넓고, 텍스트가 왼쪽에 붙어 있는 것을 확인할 수 있습니다. .. 인사이트/블로그 2024. 5. 24.
[티스토리 블로그 꾸미기] 인용문 꾸미기 3탄 (박스 스타일) 안녕하세요! 지난번에 인용문 꾸미기 2탄 블록 스타일에 이어, 이번에는 인용문 꾸미기 3탄 (박스 스타일)에 대해 알려드리겠습니다.이번 작업에서는 박스 우측 하단에 서명 같은 느낌을 주는 방법과 테투리, 배경색을 꾸미는 방법을 소개하겠습니다.이 작업은 티스토리 '북클럽' 스킨을 기준으로 진행합니다. 스킨 편집 들어가기관리자 페이지에 왼쪽 메뉴에서 '꾸미기' 탭 안에 '스킨 편집'버튼을 클릭하면 새로운 창이 열립니다.새로운 창이 열리면, 우측 상단에 있는 'html 편집' 버튼을 클릭합니다. CSS 코드 바꾸기우측 상단에 있는 'HTML | CSS | 파일업로드' 중에 'CSS'를 클릭합니다. 기본 설정 확인 박스 스타일의 기본 설정은 테두리가 회색으로 되어 있고, 배경은 아이보리 느낌으로 되어 있는 것을.. 인사이트/블로그 2024. 5. 23.
[티스토리 블로그 꾸미기] 인용문 꾸미기 2탄 (블록 스타일) 안녕하세요! 지난번에 인용문 꾸미기 1탄 따옴표 스타일에 이어, 이번에는 인용문 꾸미기 2탄 (블록 스타일)에 대해 알려드리겠습니다.이번 작업은 1탄보다 쉽기 때문에 따라 하기 쉽습니다.이 작업은 티스토리 '북클럽' 스킨을 기준으로 진행합니다. 스킨 편집 들어가기관리자 페이지에 왼쪽 메뉴에서 '꾸미기' 탭 안에 '스킨 편집'버튼을 클릭하면 새로운 창이 열립니다.새로운 창이 열리면, 우측 상단에 있는 'html 편집' 버튼을 클릭합니다. CSS 코드 바꾸기우측 상단에 있는 'HTML | CSS | 파일업로드' 중에 'CSS'를 클릭합니다. 기본 설정 확인 블록 스타일의 기본 설정은 왼쪽 테두리가이 회색으로 되어 있는 것을 확인할 수 있습니다. 블록 스타일 변경하기 CSS 파일 내에서 코드 있는 부분 아무 .. 인사이트/블로그 2024. 5. 22.
[티스토리 블로그 꾸미기] 인용문 꾸미기 1탄 (따옴표 스타일) 안녕하세요! 지난번에는 본문 리스트 형식의 여백 조절 방법을 소개해드렸습니다. 이번에는 본문에서 자주 사용되는 인용문인 따옴표 스타일을 꾸미는 방법을 알려드리겠습니다.저도 따옴표 스타일을 변경하려고 많은 시간과 실패를 경험했습니다. 이 글을 보는 여러분이 저와 같은 실패를 겪지 않도록, 방법을 자세히 소개하겠습니다.이번 작업에서는 따옴표를 위아래 배치하는 방법과, 필요에 따라 테두리 또는 배경색을 추가하는 방법을 안내해드리겠습니다.이 작업은 티스토리 '북클럽' 스킨을 기준으로 진행합니다. 스킨 편집 들어가기관리자 페이지에 왼쪽 메뉴에서 '꾸미기' 탭 안에 '스킨 편집'버튼을 클릭하면 새로운 창이 열립니다.새로운 창이 열리면, 우측 상단에 있는 'html 편집' 버튼을 클릭합니다. CSS 코드 바꾸기우측 .. 인사이트/블로그 2024. 5. 21.
[티스토리 블로그 꾸미기] 본문 리스트 형식 꾸미기 안녕하세요! 지난번에는 굵은 글꼴 밑줄 효과 주는 방법을 소개했습니다. 이번에는 본문에서 리스트 형식을 꾸미는 방법을 알려드리겠습니다.기존의 방법으로는 리스트 형식을 바꾸기 어렵습니다. 여백, 글자색, 밑줄 등 텍스트와 배경만 스타일링할 수 있습니다. 이번 글에서는 여백 조절 방법을 알려드리겠습니다.이 작업은 티스토리 '북클럽' 스킨을 기준으로 진행합니다. 스킨 편집 들어가기관리자 페이지 왼쪽 메뉴에서 '꾸미기' 탭 안에 '스킨 편집'버튼을 클릭합니다.새로운 창이 열리면 우측 상단에 있는 'html 편집' 버튼을 클릭합니다. 우측 상단에 있는 'HTML | CSS | 파일업로드' 중에 'CSS'를 클릭합니다. 리스트 여백 조절 리스트 형식의 기본 설정은 왼쪽 여백이 많은 것을 확인할 수 있습니다.CSS .. 인사이트/블로그 2024. 5. 21.
[티스토리 블로그 꾸미기] 굵은 글꼴 밑줄 효과 주기 이전 글인 본문 제목 1, 2, 3 스타일링에 이어, 이번 글에서는 굵은 글씨에 밑줄 효과를 주는 방법에 대해 소개해드리겠습니다. 이 효과는 글 작성 시에는 표현되지 않지만, 글을 다 작성한 후 읽을 때는 표현이 됩니다. 이 방법을 사용하여 강조하고 싶은 부분이나 중요한 포인트를 강조하면 더욱 읽기 쉬운 글이 될 것입니다.이 작업은 티스토리 '북클럽' 스킨을 기준으로 진행합니다. 스킨 편집 들어가기관리자 페이지에 왼쪽 메뉴에서 '꾸미기' 탭 안에 '스킨 편집'버튼을 클릭하면 새로운 창이 열립니다. 새로운 창이 열리면, 우측 상단에 있는 'html 편집' 버튼을 클릭합니다. CSS 코드 바꾸기우측 상단에 있는 'HTML | CSS | 파일업로드' 중에 'CSS'를 클릭합니다. 굵은 글씨 밑줄 효과 주기 글.. 인사이트/블로그 2024. 5. 20.
[티스토리 블로그 꾸미기] 제목 1, 2, 3 스타일링 (h2, h3, h4) 이전 글인 커버 이미지 변경하기에 이어, 이번에는 본문 제목 1, 2, 3 스타일링 방법에 대해 소개해드리겠습니다. 다양한 스타일링 방법이 있지만, 이번 글에서는 각 제목을 다르게 스타일링을 하는 방법을 안내해드리겠습니다.티스토리 '북클럽' 스킨을 기준으로 진행합니다. 스킨 편집 들어가기관리자 페이지에 왼쪽 메뉴에서 '꾸미기' 탭 안에 '스킨 편집'버튼을 클릭하면 새로운 창이 열립니다. 새로운 창이 열리면, 우측 상단에 있는 'html 편집' 버튼을 클릭합니다. CSS 코드 바꾸기우측 상단에 있는 'HTML | CSS | 파일업로드' 중에 'CSS'를 클릭합니다. 제목 1 (h2) 제목 1의 기본 설정을 확인합니다. 폰트 크기 외에 다른 스타일은 적용되지 않은 것을 확인할 수 있습니다.CSS 파일 내에서.. 인사이트/블로그 2024. 5. 20.
[티스토리 블로그 꾸미기] 커버 이미지 변경하기 이전 글인 카테고리 글자색 및 실선 색상 변경하기에 이어, 이번에는 블로그 글의 커버 이미지를 썸네일이 아닌 고정 이미지 또는 고정된 색상으로 설정하는 방법을 소개해드리겠습니다. 이 글에서는 썸네일 이미지가 커버 이미지에 맞지 않아 잘리는 현상을 방지하고, 고정된 이미지로 깔끔하게 보이도록 하는 방법에 중점을 뒀습니다.티스토리 '북클럽' 스킨을 기준으로 진행합니다. 스킨 편집 들어가기관리자 페이지에 왼쪽 메뉴에서 '꾸미기' 탭 안에 '스킨 편집'버튼을 클릭하면 새로운 창이 열립니다. 새로운 창이 열리면, 우측 상단에 있는 'html 편집' 버튼을 클릭합니다. CSS 코드 바꾸기우측 상단에 있는 'HTML | CSS | 파일업로드' 중에 'CSS'를 클릭합니다. 단색 커버 이미지 기본 설정인 커버 이미지는.. 인사이트/블로그 2024. 5. 19.
[티스토리 블로그 꾸미기] 카테고리 글자색 및 테두리 색상 변경하기 이전 글인 카테고리 추가하기에 이어, 이번에는 메인 카테고리와 서브 카테고리의 글자색 변경 및 서브 카테고리 테두리 색상 변경 방법을 소개해드리겠습니다.티스토리 '북클럽' 스킨을 기준으로 진행합니다. 스킨 편집 들어가기관리자 페이지에 왼쪽 메뉴에서 '꾸미기' 탭 안에 '스킨 편집'버튼을 클릭하면 새로운 창이 열립니다. ;새로운 창이 열리면, 우측 상단에 있는 'html 편집' 버튼을 클릭합니다. CSS 코드 바꾸기우측 상단에 있는 'HTML | CSS | 파일업로드' 중에 'CSS'를 클릭합니다. 메인 카테고리 글자색 변경하기 사이드바에 추가한 카테고리의 기본 설정인 연한 검은색과 연한 회색으로 되어 있는 것을 확인할 수 있습니다.CSS 파일 내에서 아무 곳이나 클릭한 후, Ctrl+F를 눌러 검색창에 .. 인사이트/블로그 2024. 5. 19.
loading

티스토리툴바