Tistory 12

Google AdSense 1차 도전

안녕하세요 별깡솔입니다 : ) 별깡솔 블로그를 방문하신 모든 분들 진심으로 감사드립니다 Google AdSense 가입 및 심사 드디어 구글 애드센스에 대해 포스팅을 시작하는 단계로 무단 침입합니다 notice.tistory.com 블로그에 흥미로운 글이 작성되면서 티스토리 관리 탭에 수익이라는 새로운 탭이 생겼습니다 모든 블로거라고 단정 지어 말할 수 없으나 대다수 블로거들은 수익형 블로그를 꿈꾸실 겁니다 이 힘든 시기에 한 푼이라도 벌어보자는 생각으로 시작하신 분들이 꽤 많을 거라 생각합니다 어떤 일을 시작하기도 전에 인터넷을 검색을 통해 대략 어떠한 분위기인지 사전에 파악하는 게 습관이 되어버렸습니다 애초에 승인받기가 어렵다 아니다 코로나로 인해 더욱 쉬워졌다 1일 1포스팅을 지켜야 한다 글 2개 ..

Tistory/Adsense 2020.10.29

나만의 헤더 만들기 상단에 고정시키기

안녕하세요 별깡솔입니다 : ) 별깡솔 블로그를 방문하신 모든 분들 진심으로 감사드립니다 나만의 헤더 만들기 상단에 고정시키기 오디세이 스킨에 없는 기능으로 스크롤을 아래로 내렸을 때 헤더가 상단에 고정하는 것입니다 티스토리 포럼에 헤더 관련한 문의가 종종 있기도하고 헤더에 메뉴가 많은 저같은 사람은 모바일 스크린에서 메뉴 몇 가지가 잘려 안보입니다 해당 문제를 해결하기 위해 일부를 수정하기 보다는 전체를 들어내는 작업을 할 예정입니다 우선 다른 스킨들 중에서 헤더가 고정되는 스킨을 찾아보겠습니다 최신 스킨 순으로 살펴보면 아래와 같이 보여지고 있습니다 #1 검색창과 카테고리가 우측에 있습니다모바일 화면에서는 버튼으로 대체하고 클릭하면 오른쪽에서 사이드바가 슬라이딩합니다. 다소 아쉬운점은 프리뷰 상태여서 ..

Web Font XEIcon & Font-awesome 사용하기

안녕하세요 별깡솔입니다 : ) 별깡솔 블로그를 방문하신 모든 분들 진심으로 감사드립니다 Web Font 사용하기 별깡솔 블로그에서 xeicon & font-awesome을 많이 사용합니다 인스타그램 피드 사용하기 포스팅에서 담지 못했던 내용을 알아보겠습니다 xecion xecion에 접속합니다 library-2.3.3 페이지에 CATEGORY로 분류가 되어 있으며 아래로 스크롤해서 문서를 살펴보면 많은 아이콘들이 있습니다 GET STARTED 페이지에서 사용 방법이 자세하게 안내되고 있습니다 가장 쉬운 방법으로 header 사이에 아래 cdn을 붙입니다 css Import 방법 또한 안내되어 있습니다 EXAMPLES 페이지에서 아이콘 표시 방법이 있습니다 제가 사용하는 2가지 방법에 대해 알아보겠습니다 ..

티스토리 블로그에 인스타그램 피드 Access Token & API 없이 사용하기

안녕하세요 별깡솔입니다 : ) 별깡솔 블로그를 방문하신 모든 분들 진심으로 감사드립니다 인스타그램 피드 Access Token & API 없이 사용하기 카페24 앱스토어에 인스타그램 위젯 기능을 사용한 경험이 있어서 티스토리에도 적용하고 싶었습니다 티스토리에서 인스타그램 위젯 기능을 제공하지 않기 때문에 인스타그램 피드를 가져와 사용하기가 초보자 입장에선 매우 어려웠습니다 스냅 위젯을 사용하는 방법이 있지만 내가 원하는 레이아웃을 만들기 어렵고 페이스북 개발자 페이지에서 앱을 만들어 토큰을 얻어 사용하는 방법도 어렵습니다 페이스북에 인스타 연결부터 시작해서 해야할 것이 많습니다 그리고 힘들게 얻은 토큰을 장기 토큰으로 만들고 그 토큰마저 60일 제한이라 토큰을 관리하기가 짜증납니다 인스타그램 아이디만 가..

사이드 tag, 태그 꾸미기

안녕하세요 별깡솔입니다 : ) 별깡솔 블로그를 방문하신 모든 분들 진심으로 감사드립니다 사이드 tag 꾸미기 별깡솔 html Tag cloud h3 tag 안에 cloud 라는 문구를 추가하였습니다 다음에 , 쉼표는 삭제하였습니다 css를 이용해서 :before # 표시합니다 별깡솔 css .area-aside .box-tag { // 공백 삭제 font-size: 0; } .area-aside .box-tag h3 { // tag title font-size: 18px; text-align: center; text-transform: capitalize; letter-spacing: 1px; font-family: 'Poppins', sans-serif; padding-bottom: 10px; } .a..

사이드 최신글 인기글 꾸미기 날짜 형식 영어로 변경하기

안녕하세요 별깡솔입니다 : ) 별깡솔 블로그를 방문하신 모든 분들 진심으로 감사드립니다 사이드 최신글 & 인기글 꾸미기 날짜 표시 형식을 바꾸는 방법에 대해 알아보다 시간이 많이 지체되었습니다 여러 블로그를 탐험하며 정보를 얻는 중에 날짜 표시 형식이 사전에 예고 없이 한 번 변경되었다는 걸 알게 되었습니다 그러다 보니 javascript로 string 처리하는 방식이 달라짐으로 새롭게 구성해야 하는 귀찮음이 있었죠 무언가 변경되면 사전에 알려달라! 우선 스킨의 기존 최신글 인기글 부분은 아래 그림과 같습니다 최신글이 먼저 노출되고 있습니다 그리고 인기글 부분은 글자 색상이 연하게 나타나서 탭으로 구성되었다 라는 것을 알 수 있습니다 날짜 부분도 연한 색상으로 나타나고 있습니다 별깡솔 스타일로 변경할 부..

사이드 카테고리 꾸미기

안녕하세요 별깡솔입니다 : ) 별깡솔 블로그를 방문하신 모든 분들 진심으로 감사드립니다 사이드바 카테고리 프로필 박스 바로 하단에 위치한 카테고리 부분입니다 공식 가이드에 치환자 값 정보는 , 가 전부인 것 같다 블로그 사용자의 카테고리 개수 만큼 알아서 노출시켜주는 방식이어서 아주 세밀하게 제어하기는 힘들 것 같다 html로 직접 작성해서 컨트롤하는 방법이 있겠지만 새 글이 작성되었을 때 표시 방법과 글 카운터가 불가능해진다 원래는 html 코드를 직접 작성하려 하였으나 능력이 부족하니 css를 사용하자 border, background color, color change, text shadow, hover, opacity, font icon, pseudo class 정도가 사용될 것이다 뭐가 많고 거..

헤더 영역 로고 & 카테고리 메뉴바 꾸미기 헤더 영역

안녕하세요 별깡솔입니다 : ) 별깡솔 블로그를 방문하신 모든 분들 진심으로 감사드립니다 헤더 수정 첫 메 인페이지 상단 부분에 카테고리 영역 즉 메뉴바 사이즈가 컨텐츠 부분 인기글 커버와 최신글 커버를 담고 있는 컨테이너 크기가 달라서 틀어져 있는 상태입니다 티스토리 꾸미기 컨텐츠로만 글을 작성하고 있던 와중에 스킨에 설정되어 있는 레이아웃이 마음에 들지 않아 간간히 수정을 하도록 하겠습니다 로고 타이틀과 카테고리 영역 즉 메뉴바를 담고 있는 크기와 인기글 커버, 최신글 커버를 담고 있는 컨테이너 영역의 사이즈가 달라서 보기 좋지 않게 틀어져 있습니다 한사람 한사람 개인의 입맛에 맞추어 만들어진 스킨이 아니니까 당연하게 야기될 일이라 생각합니다 글을 발행하기 전에 비공개로 수정을 하면서 레이아웃을 그때 ..

홈 설정 포스터 타입 커버 꾸미기

안녕하세요 별깡솔입니다 : ) 별깡솔 블로그를 방문하신 모든 분들 진심으로 감사드립니다 홈 설정 부분 꾸미기 홈 설정 탭에서 커버를 등록하고 5개를 노출시키는 것으로 설정하였습니다 그러나 의도한 레이아웃으로 보이지 않아서 빠르게 수정하기로 했습니다 4번째 글과 이미지가 아래쪽으로 내려가버렸습니다 개발자 도구로 어느 부분에 해당하는지 알아보겠습니다 ( Odyssey 스킨 사용중 ) body wrap container main area-main area-common area-cover 커버 2개를 설정해서 area-cover div가 2개 있습니다 선택한 area-cover box-article box-cover-poster 코드를 찾습니다 클릭하고 적용된 css를 참고해보면 width 부분이 33%로 되어..

사이드바 꾸미기 1. 프로필 영역 꾸미기

안녕하세요 별깡솔입니다 : ) 별깡솔 블로그를 방문하신 모든 분들 진심으로 감사드립니다 사이드바 꾸미기 프로필 사진 부분은 대략 300 x 300px 이지만 사진이 매우 작게 보여집니다 그리고 사진에서 별, 솔 아래 ㄹ이 조금 잘려서 보이지 않습니다 프로필 사진이 140 x 140px 크기로 사진이 매우 작고 여백도 불필요하게 크게 잡혀있습니다 우선 프로필 사진 부분에 border-radius를 해제하니 잘렸던 부분이 보여집니다 ( 제가 사용한 html과 css는 맨 아래 있습니다 ) 블로그 설명 부분이 길어서 2줄로 된 부분을 한 줄로 바꿉니다 text-profile 클래스를 찾아서 주석 처리하고 직접 블로그 설명을 적었습니다 ( 삭제하여도 무방합니다 ) 별 깡 솔 부분만 빤짝이는 네온 효과를 넣기 위..