블로그 관리

블로그 스킨을 반응형 스킨인 동적뷰로 스킨 변경

커스터마이징은 사이드바만 조정하고, 바로 적용했다. 바꿀 때마다 커스터마이징하는것이 정말 번거롭다. 모듈화 시켜서 사용할 수 있는 방법을 찾아야겠다.

구글 웹폰트 적용하기

구글 블로그 블로그스팟 한글 폰트 적용 방법

왜 웹폰트를 사용하는 가?

사용자의 컴퓨터에 셋팅되어 있는 font에 따라서 자신의 블로그의 외관이 달라지는게 싫다. 고 생각하는 사람은 웹폰트를 적용하여 자신이 원하는 모양을 유지할 수 있다. 나눔 고딕을 사용하려면 이 사이트 http://fontface.kr/ 를 방문하여 그대로 적용하면 된다.

Layout 를 만져보자.

- BTemplates Blogger 템플릿을 다운받을 수 있는 영문 사이트.

- HTML & CSS HTML, CSS, HTML5, CSS3 코드들이 잘 정리되어 있는 한국어 사이트입니다.

- Icons DB 사이즈별, 색상별로 아이콘, 로고 등을 다운받을 수 있는 영문 사이트입니다.

- Urang-kurai.blogspot.com 독창적인 디자인 블로그. 블로거에서 어느 정도 수준까지 템플릿을 구현할 수 있는지 확인해보고 싶으신 분들은 꼭 한번 들러보실 것을 추천합니다. Urang Kurai에서 제작한 템플릿의 데모를 볼 수 있고, 또 다운도 받을 수 있습니다.

- Blogger 한국어 포럼

+Unplugbook 님이 운영하시는 구글 플러스의 비공식 Blogger 커뮤니티입니다.

- Blogger Error Codes 블로거의 에러 코드(bX-오류)가 정리되어 있는 영문 블로그입니다.

- Known Issues for Blogger Blogger 팀에서 직접 운영하는 영문 블로그. 최근 보고된 문제들을 접할 수 있습니다. 해결된 문제에는 fixed 라벨이 붙습니다.

- Codeformatter.blogspot.com 소스 코드를 포맷시켜주는 영문 사이트입니다. 별도의 설치없이 온라인에서 변환 시켜주기 때문에, 블로그 종류와 관계없이 유용하게 사용할 수 있습니다.

이용방법은 소스 코드 포맷해주는 사이트 란 글을 참고하시기 바랍니다.

- CSS Menu Maker 탭 메뉴를 만들 수 있는 사이트입니다. 드롭다운 메뉴, 아코디언 메뉴 등 새로운 디자인의 메뉴들이 꾸준히 업데이트 되고 있습니다.

- Adobe Kuler 블로거의 배색, 색상조합을 설정할 때 활용할 수 있는 영문 사이트입니다. 이용방법은 블로그/웹사이트 색상 조합 시 참고할 만한 사이트 - Adobe Kuler 라는 글을 참고하시기 바랍니다.

- The Real Blogger Status 블로그를 운영할 때 세부적으로 많은 난관에 부딪치게 되는데, 구글에서는 세부적인 문제들에 대해서까지는 일일이 알려주지 않습니다. 블로거에서 알려주지 않는 자잘한 팁이나, 유저들 사이에서 공유되고 있는 문제점들을 짚어주는 친절한 영문 블로그입니다. 개인적으로 블로거를 주제로 삼고 있는 블로그들 중 꼭 구독해야할 1개를 꼽는다면, 이 블로그를 꼽겠습니다.

- Southernspeakers.net 동적뷰 관련 정보를 많이 얻을 수 있는 영문 블로그입니다.

- w3schools.com CSS 관련 정보들이 잘 정리되어 있는 영문 사이트. 궁금한 게 생기면 이 곳에서 공부합니다.

- metachecker.net 메타 태그를 체크해주는 영문 사이트입니다.

일반 템플릿

우클릭 & 드래그 방지

저작자 표시 구성(** 템플릿. Blogger 제공) 삭제하기

저작자 표시 구성 숨기기 #2

애드센스 중앙 정렬

게시물과 사이드바 사이에 경계선 삽입하기

헤더 이미지 중앙, 또는 우측으로 정렬시키기

포스트 타이틀과 날짜 타이틀 중앙 정렬시키기

페이지 탭 중앙 정렬시키기

이미지의 최대 폭 제한하기

패딩(padding), 마진(margin) 개념을 이해하는데 도움이 될 만한 도면 모음

레이아웃 간격 조절 코드 몇가지

구글 블로그(blogger)의 조건 태그

조건 태그를 이용하여 페이지별로 위젯 설정하기

헤더 클릭 범위 설정하기

Navbar의 높이 조절하기

"레이블이 ***인 게시물을 표시합니다." 메세지 커스터마이징

포스트 이미지 가장자리에 그림자 효과 주기

포스트 이미지에 투명 효과 주기

본문 이미지 호버 효과 #1

태그 클라우드 꾸미기 #1

태그 클라우드 꾸미기 #2

태그 목록 꾸미기 #1

링크목록, 태그 가젯 list style 설정

태그·레이블을 이용한 페이지 탭 활용

라벨 페이지와 글목록 페이지에 글제목만 나오게 하는 방법 (+K. Hong 님의 글)

포스트 하단의 '최근 게시물', '홈', '이전 게시물' 을 이미지로 대체하기

포스트 하단의 '피드 구독하기: 게시물 (Atom)' 메세지 보이지 않게 설정하기

블로그 보관함 위젯의 드롭다운 메뉴 너비 설정

CSS의 transition을 이용한 링크 색상의 부드러운 전환

블로거 모바일 템플릿에 위젯 추가하기

본문 요약 및 이미지 썸네일 처리하기

관리자만 볼 수 있는 가젯 만들기

인용 상자 꾸미기

Blogger 튜토리얼

구글 검색 결과 삭제 요청 방법 (공식 구글 한국 블로그)

Google의 검색 엔진 최적화 초보자 가이드 (구글 공식 PDF 파일)

레이아웃용 Widget 태그 (구글 도움말)

레이아웃 데이터 태그 (구글 도움말)

레이아웃용 페이지 요소 태그 (구글 도움말)

구글플러스 댓글에서 일반 댓글로 되돌리기

블로거 일반 템플릿에서 동적뷰 전환하기

블로거(Blogger) 피드 URL (구글 도움말)

사이트 피드 설정 변경 (구글 도움말)

이미지 업로드시 크기 조정하기

템플릿 변수 정의 (variable definitions)

HTML / CSS - 블로거 Blogger 꾸밀 때 알아두면 도움이 되는 CSS

.class

class=”class”의 모든 요소를 선택

#id

id=”id”의 모든 요소를 선택

{ }

중괄호는 스타일 지정의 시작과 끝을 의미한다.

! important

important 라는 구절은 해당 CSS가 높은 우선 순위를 갖고 있음을 뜻한다.

테두리(border-style)의 유형

CSS 브라우저 지원 접두사들

CSS의 overflow 사용 예제

transition-timing-function 의 값, linear, ease, ease-in, ease-out, ease-in-out 의 변화 속도 차이 (w3schools)

em과 px은 어떻게 다른가 - CSS의 단위들

CSS에서의 색상 설정

CSS 색상 키워드

CSS Properties

background-repeat 이해하기

border-radius 이해하기

box-shadow 이해하기

text-decoration 이해하기

transition 이해하기

word-wrap 이해하기

CSS 텍스트 링크 Hover 효과

CSS 텍스트 링크 Hover 효과 #1 - 자체 발광

CSS 텍스트 링크 Hover 효과 #2 - 글씨 크기 확대

CSS 메뉴

CSS transition을 이용한 아코디언 메뉴

블로거 관련 사이트

- BTemplates

Blogger 템플릿을 다운받을 수 있는 영문 사이트.

- HTML & CSS

HTML, CSS, HTML5, CSS3 코드들이 잘 정리되어 있는 한국어 사이트입니다.

- Icons DB

사이즈별, 색상별로 아이콘, 로고 등을 다운받을 수 있는 영문 사이트입니다.

- Urang-kurai.blogspot.com

독창적인 디자인 블로그. 블로거에서 어느 정도 수준까지 템플릿을 구현할 수 있는지 확인해보고 싶으신 분들은 꼭 한번 들러보실 것을 추천합니다. Urang Kurai에서 제작한 템플릿의 데모를 볼 수 있고, 또 다운도 받을 수 있습니다.

- Blogger 한국어 포럼

+Unplugbook 님이 운영하시는 구글 플러스의 비공식 Blogger 커뮤니티입니다.

- Blogger Error Codes

블로거의 에러 코드(bX-오류)가 정리되어 있는 영문 블로그입니다.

- Known Issues for Blogger

Blogger 팀에서 직접 운영하는 영문 블로그. 최근 보고된 문제들을 접할 수 있습니다. 해결된 문제에는 fixed 라벨이 붙습니다.

- Codeformatter.blogspot.com

소스 코드를 포맷시켜주는 영문 사이트입니다. 별도의 설치없이 온라인에서 변환 시켜주기 때문에, 블로그 종류와 관계없이 유용하게 사용할 수 있습니다. 이용방법은 제 블로그의 소스 코드 포맷해주는 사이트 란 글을 참고하시기 바랍니다.

- CSS Menu Maker

탭 메뉴를 만들 수 있는 사이트입니다. 드롭다운 메뉴, 아코디언 메뉴 등 새로운 디자인의 메뉴들이 꾸준히 업데이트 되고 있습니다.

- Adobe Kuler

블로거의 배색, 색상조합을 설정할 때 활용할 수 있는 영문 사이트입니다. 이용방법은 블로그/웹사이트 색상 조합 시 참고할 만한 사이트 - Adobe Kuler 라는 글을 참고하시기 바랍니다.

- The Real Blogger Status

블로그를 운영할 때 세부적으로 많은 난관에 부딪치게 되는데, 구글에서는 세부적인 문제들에 대해서까지는 일일이 알려주지 않습니다. 블로거에서 알려주지 않는 자잘한 팁이나, 유저들 사이에서 공유되고 있는 문제점들을 짚어주는 친절한 영문 블로그입니다. 개인적으로 블로거를 주제로 삼고 있는 블로그들 중 꼭 구독해야할 1개를 꼽는다면, 이 블로그를 꼽겠습니다.

- Southernspeakers.net

동적뷰 관련 정보를 많이 얻을 수 있는 영문 블로그입니다.

- w3schools.com

CSS 관련 정보들이 잘 정리되어 있는 영문 사이트. 궁금한 게 생기면 이 곳에서 공부합니다.

- metachecker.net

메타 태그를 체크해주는 영문 사이트입니다.