블로그 스팟을 써보자 (꾸미기) - 템플릿(스킨)

블로그 스팟을 설정하다가 그만두고 싶은 충동이 생길 때는, 맘에 드는 스킨(템플릿)을 찾을 수 없을 때 일 겁니다. 아래와 같이 기본으로 제공되는 스킨(템플릿)은 16종입니다. 템플릿마다 색상을 변경할 수는 있긴 하지만... 그래도, 제로보드에서 생겨난 수만개의 스킨을 맛보고, 티스토리에서도 147종의 스킨을 제공하는 것에 비하면 블로그 스팟의 템플릿은 선택의 폭이 좁은 것 같습니다. 아무래도 템플릿을 만드는 블로거들을 검색해 봐야 할 것 같습니다.

1. 가입, 블로그 생성, 변경, 삭제  2. 글 쓰기/수정/삭제   3. 블로그 꾸미기 (템플릿=스킨)  4. 블로그 스팟의 기능들 + α

1. 기본 템플릿 설정 

먼저 아래는 블로그 스팟에서 제공되는 16종의 템플릿입니다. (우리 나라에서는 보통 '스킨'이라는 말로 통용되는 것 같은데, 블로그 스팟에서 '템플릿' 이라는 메뉴로 나오니, 혼용해서 사용하겠습니다.) "대시보드 > 수정할 블로그 > 레이아웃 > 새 템플릿 선택"에서 원하는 템플릿을 골라 블로그에 입힐 수 있습니다.

2. 공개 템플릿 다운로드 (예: btemplagtes.com)

'blogspot template' 로 구글링하면 많이 나옵니다. 저는 Blogger 템플릿 리스트에서 두번째로 나와 있는 Btemplates 에 가 보았습니다. 오호라~ 수백개의 템플릿이 있고, 분류별로도 볼 수 가 있습니다. (1단 2단 3단 4단, 스타일별, 컬러별, 최고 다운로드 템플릿 등등)

스타일별로 나열된 것 중에서 'Adapted from Wordpress'에서 'The Journey' 가 맘에 듭니다~ 템플릿 스크린 샷 아래에 있는 'Live Demos' 를 통해서 미리 볼 수 있고, 'Downloads' 를 클릭해 다운 받을 수 있습니다.

3. 템플릿 적용

이제 다운받은 템플릿을 적용해 보겠습니다. 우선 다운받은 The journey.zip 의 압축을 풉니다. 그리고, "대시보드 > 수정할 블로그 > 레이아웃 > HTML 편집" 으로 이동합니다. 먼저 '전체 템플릿 다운로드'를 클릭해 혹시나 생길지 모르는 오류에 대비해 백업을 받아 놓습니다. template-xxxxxxxxxxxxxxxxxxx.xml 과 같이 19자리 숫자로 되어 다운됩니다. 이 숫자는 blogID로서 새 게시물이나 대시보드에 마우스를 올려 놓았을 때 보이는 blogID와 동일합니다. 여러개의 블로그를 관리할 때 구분할 수 있지요.

이제 '파일 선택'을 클릭해 아까 다운받아서 압축을 풀어 놓은 템플릿을 선택합니다. 보통 *.xml 파일 하나로 되어 있습니다. 나머지 readme.txt 등의 파일을 설명입니다. 그냥 이 글을 보면 되지요^^~

원하는 파일을 선택했으면, '파일 선택' 오른쪽에 해당 파일 이름이 나옵니다. 이제 '업로드'를 클릭합니다.

템플릿을 업로드 하면 기존에 구성되어 있던 도구들이 업로드 되는 템플릿에 맞게 재구성됩니다. 여기에서는 'Followers1' 과 'Profile1'이 삭제되네요. 이는 나중에 "대시보드 > 수정할 블로그 > 레이아웃 > 페이지 요소" 에서 각각 "관심있는 사용자" 가젯과 "프로필" 가젯을 추가해서 복구할 수 있습니다. 그러니 가젯들을 넣고 빼고 하기 전에 템플릿을 먼저 설정해 주는 것이 손이 덜 가겠지요~ '확인 후 저장'을 클릭해서 템플릿을 변경합니다.

변경이 되었다고 나오면 블로그로 들어가 봅니다.

뽀샤시 하게 바뀌었네요~

변경 이전과 비교해 봅니다. ㅋ~

4. Navbar 복원

The journey 스킨에서는 Navbar를 감추어 놓았군요~

#navbar-iframe {display:none;}

원한다면 다시 살리도록 합니다.

/* Hide Navbar by me! */
/* Navbar show-hide code powered by mamom */
#navbar {height: 30px;}
#navbar-iframe {
height: 4px;
-webkit-transition: height 0.2s linear;
}
/* IE7, IE8, IE6 */
#navbar-iframe {height/*\**/: 30px\9;}
/* Other Browsers */
#navbar-iframe:hover {height: 30px;}

이렇게만 하면 Header 에 삽입된 이미지가 페이지 상단과 붕 떠버리는 일이 벌어집니다. 이를 해결하기 위해선 템플릿의 Html 코드를 열어 아래와 같이 바꾸어 줍니다. 이미지 주소는 스킨마다 다를 수 있겠지요.

* 변경 전

body {
background:#f3f2ee;
color:#333;

- 중략 -

#header-wrapper {
margin:0 auto 10px;
width: 780px;
height:210px;
background: url(http://3.bp.blogspot.com/_j82W7u9kZbs/S0Imu4G_DDI/AAAAAAAAAtg/aBqPRujN8EY/s1600/header_pic.jpg) no-repeat;
}

* 변경 후

body {
background:#f3f2ee url(http://3.bp.blogspot.com/_j82W7u9kZbs/S0Imu4G_DDI/AAAAAAAAAtg/aBqPRujN8EY/s1600/header_pic.jpg) no-repeat;
background-position: 50% 0px;
color:#333;

- 중략 -

#header-wrapper {
margin:0 auto 10px;
width: 780px;
height:210px;
}

네, 그렇게 원하는 템플릿을 찾아서 수정하면 되겠습니다~