블로그에 접속하면 글이 여러개 나옵니다. 이 때 긴 글이 여러개 있으면 스크롤하기 불편한한 점이 있습니다. 첫 화면에 보일 글 개수를 지정해 봅시다.

 1. 가입, 블로그 생성, 변경, 삭제
 2. 글 쓰기/수정/삭제 
 3. 블로그 꾸미기 (첫 화면 글 개수)
 4. 블로그 스팟의 기능들 + α

 "대시보드 > 수정할 블로그 > 레이아웃 > 페이지 요소"에서 "블로그 게시물"을 수정합니다. "수정"을 클릭합니다.

'블로그 게시물 구성' 화면이 나타나면, '기본 페이지의 게시물 수' 에서 원하는 게시물의 숫자를 적어줍니다.

그리고 나서 "저장"을 꾹 눌러주면 마무리 됩니다.

끝~


Posted by 마몸
블로그 스팟을 설정하다가 그만두고 싶은 충동이 생길 때는, 맘에 드는 스킨(템플릿)을 찾을 수 없을 때 일 겁니다. 아래와 같이 기본으로 제공되는 스킨(템플릿)은 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;
}

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

Posted by 마몸
이제 블로그에 내용도 조금 있으니 꾸며 보겠습니다.
 1. 가입, 블로그 생성, 변경, 삭제 
 2. 글 쓰기/수정/삭제
 3. 블로그 꾸미기 (Navbar)
 4. 블로그 스팟의 기능들 + α

먼저 블로그 스킨(템플릿)을 변경하기에 앞서, Navbar 라는 것에 대해서 알아보려고 합니다. 자칫 스킨을 잘못 변경하면 Navbar가 영영 사라져 버릴 수 있거든요~ 아래와 같이 블로그 상단에 띠 모양으로 되어 있는 것이 Navbar 입니다.

사용자들마다 Navbar에 대해서 생각하는 것이 다를 수 있습니다. "있는 게 좋아서 꾸미고 싶다."는 분도 있을 것이고, "없는 게 좋다."는 분도 있을 것이고, "필요 할 때만 나타나면 좋겠다."는 분도 있을 것입니다. 여기에서는 자신이 원하는 대로 사용할수 있도록 여러 가지 설정 방법을 소개하려 합니다. 

1. Navbar 꾸미기
"대시보드 > 수정할 블로그 > 레이아웃 > 페이지 요소"로 찾아들어 갑니다. Drag & Drop 방식으로 원하는 기능(가젯)들을 넣고 빼고 움직일 수 있는 화면입니다. "저장"버튼 바로 아래에 Navbar 페이지 요소가 있습니다. Navbar 수정을 클릭합니다.

그러면, 아래와 같은 창이 나타나서 Navbar 의 색상을 변경할 수 있습니다. 자신의 블로그 스킨(템플릿)에 어울리는 Navbar를 구성해서 저장하도록 합니다.

2. Navbar 감추기
 하지만 아무리 어울리는 색상을 찾았다 하더라고 자신의 블로그와 어울리지 않을 수 있습니다. 이럴 때에는 수동으로 설정을 해서 Navbar 를 감추어 줍니다. 약간의 html 을 손보아야 하기 때문에 익숙하지 않은 경우 실수할 수 있습니다. 실수를 복원하기 위해 일단 현재 스킨(템플릿)을 모두 백업받아 놓습니다. "레이아웃 > HTML편집"으로 찾아가서 "전체 템플릿 다운로드"를 클릭해 백업을 받습니다.

그리고 나서 템플릿을 수정해 줍니다.
/* Hide Navbar by me! */
#navbar-iframe {display:none !important;}
위의 코드를 아래 부분에 붙여 넣습니다.
/* Variable definitions
   ====================
  중간 생략
*/

 /*  이 부분 */

body {
  background: $bgColor;
즉, 아래와 같이 역상으로 된 부분을 입력하는 것입니다. 그리고 나서 "템플릿 저장"을 꾹 눌러주면 수정됩니다.

자, 이렇게 사라졌습니다.

3. Navbar 보이기
  그런데 Navbar 를 없애면 로그인하기 약간 불편합니다. 그래서 다시 보이고 싶을 때에는 다시 템플릿 코드를 수정해 줍니다. Navbar를 감출 때와 반대로 아래 코드를 찾아서 삭제한 후 "템플릿 저장"을 누르면 다시 Navbar가 살아납니다.
/* Hide Navbar by mamom */
#navbar-iframe {display:none !important;}

4. 필요할 때만 Navbar 보이기
  어느 방법도 맘에 들지 않으면, 마지막으로 필요할 때만 보이게 하는 방법이 있습니다. 이 방법을 적용하면 평상시에는 감추어져 있다가 페이지 상단에 마우스를 가져다 대면 Navbar가 나타납니다. 현재 나온 기술로는 아래와 같이 세 가지 정도가 있습니다. 원하는 방법을 적용하면 될 듯 합니다.

4.1 투명도 설정하기
블로거 Navbar 자동감추기 Auto-Hide Blogger Navbar As Windows Taskbar에 소개된 방법입니다. 위 링크로 가보면 Navbar가 자동으로 감추어 지도록 설정되어 있으니 확인해 볼 수 있습니다. "2. Navbar 감추기"에서 넣었던 코드를 지우고, 그 자리에 아래 코드를 넣으면 됩니다. 
/* Hide Navbar by me! */
/* Hovering Peek-A-Boo Blogger Navbar */
#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}
단, 이 코드는 IE6이나 IE7에서는 동작하지 않는다는 단점이 있습니다. 해결점은 없는 것으로 나타났다고 합니다.

4.2 크기 설정하기
Navbar 숨기기 버전 2에 소개된 방법입니다. 웹 표준을 지키지 않는 IE의 제한점을 역으로 이용해서 만든 방법입니다. "2. Navbar 감추기"에서 넣었던 코드를 지우고, 그 자리에 아래 코드를 넣으면 됩니다. 
/* Hide Navbar by me! */
#navbar-iframe {height:5px;}
/* IE7, IE8, IE6 */
#navbar-iframe {height/*\**/: 30px\9;}
#navbar-iframe:hover {height:40px; !important;}
단, IE 에서는 늘 Navbar가 나타나고, 다른 브라우저에서는 화면이 아래로 밀려 내려가는 단점이 있습니다.

4.3 크기 설정 애니메이션 하기
CSS로 쉽게 animation을. (in 사파리) 참고해 제가 만든 방법입니다.(sample) 위에서 화면이 아래로 밀려 내려가는 단점을 수정/보완해서 만들었습니다. http://bitnada.blogspot.com/ 에 적용되어 있으니 확인할 수 있습니다. "2. Navbar 감추기"에서 넣었던 코드를 지우고, 그 자리에 아래 코드를 넣으면 됩니다. 
/* 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;}
단, 애니메이션이 지원되지 않는 브라우저에서는 스르르 나타나지 않고, 팍! 나타난다는 단점이 있지요~ 그래도 제일 나은 것 같습니다. ㅎㅎ (제가 만들었으니~)

그리고 Navbar 사용 방법도 좀 알아보면 좋겠지요~ 사용법은 자습^^ 이제 Navbar를 알았으니 다음에는 블로그를 진짜로 꾸미는 방법에 대해서 알아보도록 하겠습니다.


Posted by 마몸
이번에는 두 번째 '글 쓰기'를 해봅니다.
 1. 가입, 블로그 생성, 변경, 삭제
 2. 글 쓰기/수정/삭제
 3. 블로그 꾸미기
 4. 블로그 스팟의 기능들 + α

1. 로그인 - 새로 글을 쓰기 위해서는 자신의 블로그에 로그인해야 합니다. 블로그 상단에 있는 메뉴바(Navbar라고 합니다)에서 로그인을 먼저 합니다.

아이디와 암호를 입력합니다.
로그인에 성공하면 아래와 같은 대시 보드가 나타납니다.

2. 새글 쓰기 - 대시 보드나 블로그에서 새 글을 쓸 수 있습니다.
먼저, 대시보드에서는 원하는 블로그의 "새 게시물" 을 클릭하면 되고,

블로그에서는 로그인이 되어 있다면 상단의 메뉴(Navbar)에서 새 게시물을 클릭해서 새글을 씁니다.

3. 작성하기 - 제목을 넣고, 내용을 입력합니다. 

3-1. 사진을 첨부해 봅니다.
컴퓨터에서 사진을 골라 넣거나, 웹에서 공개된 이미지 URL을 이용해 그림을 넣을 수 있습니다. 웹상의 이미지를 넣을 때에는 저작권에 주의를 합니다.

컴퓨터에서 넣는 사진은 picasa 에 저장이 되고, 만약 가입을 안했다면 위와 같이 '서비스 약관'에 동의하는지 물어보게 됩니다. 약관에 동의하고 난 후에는 아래 그림과 같이 현재 사용하고 있는 용량이 나타납니다. 1GB 까지는 무료인데, 그 이상은 유료 서비스를 신청해야 합니다. 자세한 가격은 '유료 저장용량'을 참고합니다.

3-2. 레이블을 지정해 게시물들을 분류/관리합니다. 지메일(gmail)에서 메일에 태그를 붙이듯, 블로그스팟은 게시물마다 레이블을 붙입니다. 블로그 스팟은 카테고리 기능을 사용하진 않지만, 이 레이블들을 모아서 카테고리 기능을 사용할 수 있습니다. 

3-3. 공개할지 초안으로 남겨둘지 정합니다.
"저장하기" 를 클릭하면 초안(draft)으로 저장되며, 아직 외부 사람들에게는 공개되지 않습니다. 조금 더 손을 본 후에 "게시하기"를 클릭하면 발행(publish)이 됩니다. 외부에 공개되는 글일 경우에 신중을 기할 수 있는 기회이지요. "게시물 수정" 탭을 클릭하면 아래와 같이 발행된 글과 초안이 표시됩니다.

4. 수정/삭제하기
 "게시" > "게시물 수정"을 클릭하고, 해당 게시물에서 "수정" 이나 "삭제" 버튼을 사용해 게시물을 관리합니다. 작성된 게시물을 미리 보려면 "수정"이나 "새 게시물" 작업에서 "미리보기"를 클릭합니다.

다시 편집으로 돌아가려면, "미리보기 숨기기"를 클릭합니다.

5. 멀티미디어 첨부 기능
 사진 추가 메뉴 오른쪽에 동영상 추가 아이콘이 있습니다.

최대 100MB 까지 지원하고, Google 동영상에서 호스팅 되는 것 같습니다.

6. 파일 첨부 기능
  HOWTO: Upload Files to Blogger라는 글을 보면, 블로거닷컴에서는 파일을 첨부할 수 없다고 합니다. 가장 사용자 층이 많은 워드프레스도 오피스 관련 파일만 업로드 된다고 합니다.
  대신 무료로 파일 호스팅을 해주는 곳(예: Fileave.com, 50MB)에 파일을 올리고, 파일 링크를 걸면 된다고 합니다. 이외에도 "구글 사이트(10GB)"나 "티스토리(무제한)"에 가입해서 파일 링크를 거는 방법이 있습니다.
  마지막으로 오피스 관련 파일인 경우에 Using Google Docs with Blogger를 보면, "구글 Docs"에 해당 파일을 Share 한 후에, 이 링크를 블로그 글에 링크하면 된다고 합니다.


* 팁 - 게시물 작성 시간 바로잡기
위의 게시물 작성 시간을 보면 오전으로 되어 있습니다. 현재 시각은 새벽인데, 시간 설정이 잘못되어 있나 봅니다. "설정" > "서식" > "시간대" 를 수정해 줍니다.

서울은 GMT+09:00 이므로, 해당 시간으로 바꾸어 저장해 줍니다.

휴~ 휴~ 여기까지~

Posted by 마몸
조짱님이 기다리던 블로그 스팟 사용기입니다~ 얘기 나온지 2주가 되었건만 인제서야 쓰네요^^; 블로그 스팟 사용법으로 '배낭하나 달랑'도 업데이트가 되길 바래 봅니다~ 

구글에서 서비스 하고 있는 블로그 스팟은 단순하지만 강력하다는 장점이 있습니다. 심지어 블로그 스팟 공식 페이지에서도 자신을 트럭에 비유하기도 했습니다. 직관적인 GUI를 선호하는 국내 사용자들에게는 아직 사랑받고 있지 못하지만, 트럭에 비유되는 강력한 기능들을 하나씩 알게 되면 조금씩 블로그 스팟을 이용하게 되지 않을까 생각됩니다. 글을 쓰면서 기능들을 찾아보게 되겠지만, 아마도 쇼셜기능이 주요하지 않을까 싶습니다.

아래와 같은 순서로 소개하면서 새롭게 나오는 개념들에 대해서 설명을 덧붙이면 될 듯 합니다.
 1. 가입, 블로그 생성, 변경, 삭제
 2. 글 쓰기
 3. 블로그 꾸미기
 4. 블로그 스팟의 기능들 + α

먼저, 가입하고, 블로그를 생성/변경/삭제하는 방법입니다.

1. 가입 및 생성
http://www.blogspot.com/ 에 접속합니다.

구글 계정이 있으면 로그인을 하고, 없다면 "블로그 만들기"를 클릭해서 새로 구글 계정을 만듭니다.

계정을 만들고 난 후에는 블로그를 바로 생성할 수 있습니다. "블로그 주소(URL)"은 나중에 개인 블로그 접속 주소가 됩니다. 

중복되지 않는 블로그 주소로 만들었다면, 템플릿을 선택해 블로그의 전체적인 윤곽을 한 번에 잡을 수 있습니다.

그러면, 일단 블로그가 생성되게 됩니다~

블로그는 여러 개 생성할 수 있습니다.(blogger.com의 답변은 아니지만, 계정당 100개라고 하기도 하고, 제한이 없다고도 합니다.) 위의 과정을 반복하거나, 아래 나오는 대시보드에서 블로그를 추가할 수 있습니다. 또한 수정이나 삭제도 가능합니다.

2. 블로그 스팟의 관리 메뉴 구조
블로그에서 이런 저런 작업을 하기에 앞서, 블로그 스팟의 관리자 메뉴 구조에 대해서 알아봅니다. http://blogspot.com/ 에서 로그인하게 되면 아래 대시보드(Dash board) 관리 화면이 나옵니다. 여러 개의 블로그를 만들 수 있는데, 대시 보드에서 이 모든 블로그들을 관리하는 것이지요. 또한 관심 있는 다른 블로그들의 기사들을 가져와서 볼 수 있습니다. 즉, 대시보드는 블로그들의 상위 메뉴입니다.

실제로 대시 보드는 이렇게 생겼습니다. 윗부분은 자신이 생성한 블로그들을 관리하는 곳이고, 아랫부분은 RSS Reader 라고 보시면 됩니다. 관심있는 블로그로 지정해 두면 해당 블로그에서 발행된 글들을 구독해서 읽어볼 수가 있습니다.(티스토리에 없는 기능!)

블로그 설정을 변경하기 위해서는 블로그 하나를 택해서 들어가야 합니다. 위 대시 보드에 있는 블로그 중 하나로 들어가거나, 처음부터 블로그 주소로 접속한 뒤 수정을 클릭하면 아래와 같이 블로그를 설정할 수 있는 관리 메뉴가 나옵니다.

실제로 블로그 관리 메뉴는 이렇게 생겼습니다. 하위 메뉴를 보려면, 메뉴를 클릭해야 하는 아쉬움이 있지요. '게시'는 글쓰기 관련 메뉴이고, '레이아웃'은 스킨 관련 메뉴이고, '수익 창출'은 구글 애드 센스 관련 메뉴이고, 이외의 모든 설정은 '설정'에서 하는 것입니다.

블로그 스팟에서는 여러 개의 블로그를 생성할 수 있고, 생성된 블로그의 주소를 변경할 수 있고, 이미 생성된 블로그를 삭제할 수도 있습니다. 생성은 위에서 살펴보았고, 

3. 블로그 주소 변경
이미 생성한 블로그의 주소를 변경하려면, "대시보드 > 수정하려는 블로그 > 설정 > 게시" 에서 아래와 같이 수정이 가능합니다. 

4. 블로그 주소 삭제
블로그들 중 하나를 삭제하고 싶으면,  "대시보드 > 수정하려는 블로그 > 설정 > 기본사항" 에서 '블로그 삭제'를 통해 삭제할 수 있습니다.

그럼, 다음 번에는 블로그 스팟에서 글쓰기에 대해서 알아보겠습니다. 

Happy New Year !!!


Posted by 마몸

최근에 올라온 글

카테고리

모두 (498)
We BLOG (353)
테라피 (72)
재능 찾기 (62)

달력

«   2024/11   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30

글 보관함