사용법어찌?

구글 블로그 사이드바 모바일 숨기기, 데스크탑 보이기, 모바일 속도 빠르게

2019-05-01T03:13:00.001-04:00

구글 블로그 반응형 테마는, 모바일로 접속하면 사이드바가 접히고 상단에 햄버그 아이콘이 표시됩니다. 화면에 사이드바가 보이지는 않지만, 사이드바 내용을 로딩 하므로, 블로그 로딩 시간이 많이 걸리게 됩니다.

사이드바 내용이 많거나 큰 용량의 이미지가 있어, 페이지 로딩 속도가 문제 된다면, 모바일에서는 사이드바를 로딩하지 않도록 하는 방법도 생각해 볼 수 있겠습니다. 방문자가 햄버그 버튼을 눌러 사이드바 내용을 빈번하게 사용하는지를 잘 헤아려 볼 필요가 있습니다.

방법은 간단합니다.
사이드바 영역에 아래와 같은 조건을 설정해 주면 됩니다.

cond='data:blog.isMobileRequest == "false"'

>> 블로그 대시보드 > 테마(Theme) > HTML편집(Edit HTML) 버튼을 눌러, HTML 편집창을 엽니다.
>> 창의 아무곳에나 마우스를 놓고, 한 번 클릭하여, 창을 활성화 시킵니다. > 키보드의 [컨트롤 + F]키를 쳐서 검색상자를 엽니다.

>> 검색상자에 <aside 를 입력하고, 엔터키를 쳐서, 해당 위치로 이동하여, 조건을 설정하는 코드를 넣습니다. <aside> </aside> 는 사이드바 영역입니다.

위 그림에서 보듯이, 사이드바 코드는 아래와 같은 모양으로 되어 있습니다.

<aside 뒤에 아래의 코드를 복사하여 붙여 넣고 저장을 하면 작업 끝입니다.

cond='data:blog.isMobileRequest == "false"'

이 코드는 모바일 기기로 접속하면, 해당 영역을 로딩하지 않도록 하는 것입니다.

그러면, 코드가 아래 모양이 됩니다.

<aside cond='data:blog.isMobileRequest == "false"' class='sidebar-container container sidebar-invisible' role='complementary'>
      <div class='navigation'>
        <b:include data='{ button: true, iconClass: "flat-icon-button ripple sidebar-back" }' name='backArrowIcon'/>
      </div>
      <div class='sidebar_top_wrapper'>
        <b:class cond='data:widgets none w => w.sectionId == "sidebar_top"' name='no-items'/>

참고:
위와 같이 하여서 작동이 되지 않으면, 아래와 같이 <b:if> </b:if> 로 감싸는 방법으로 해보기 바랍니다.

>> 먼저, 위에서 처럼 <asdie 부분으로 이동 합니다.
>> <aside ~ ~> 바로 아래의 사이드바 여닫기 버튼(navigation)을 제외하고 나머지 영역을 <b:if> ~ </b:if>로 감싸고, <b:if>에 cond='data:blog.isMobileRequest == "false"' 조건을 설정합니다.

>> 아래에서, 빨강색으로 표시한 코드가 추가된 것입니다.

그러면, 코드가 아래 모양이 됩니다.

이렇게 하면, 사이드바 영역은 잡히지만, 사이드바에 있는 내용은 로딩되지 않습니다. 사이드바를 여는 햄버그 버튼과, 사이드바를 닫는 화살표 버튼은 표시됩니다.

위 방법들은 사이드바 뿐만 아니라, 특별히 로딩 속도를 떨어뜨리는 부분(영역)이나 가젯(위젯)이 있다면, 그러한 문제를 해결할 수 있는 길 가운데 하나가 될 수 있을 것입니다. 한가지 주의할 것은, 브라우저 종류와 버전에 따라 작동 상태가 다르게 나타날 수 있으므로, 확인을 할 필요가 있습니다.

>> 가젯(위젯)을 특정한 페이지에만 또는 모바일에만 보이거나 숨기는 방법

블로그 웹페이지 본문(포스트)의 적당한 가로 너비 : 300 픽셀 ~ 400 픽셀

2018-02-07T12:39:00.003-05:00

블로그나 웹사이트에서 본문의 가로 너비는 어느 정도가 적당한가?
아래는 글을 읽다가 관련 부분을 번역하여 간략하게 요약한 것입니다. 블로그의 특성에 따라 절대적일 수는 없을 것이므로, 그냥 참고 정도로 하면 될 것 같습니다.

"
방문자의 글 읽는 편의성을 기준으로 하면, 폭이 좁은 것을 더 선호하는 것 같다.

글을 쉽게 읽고 잘 이해하도록 하려면 폭을 한 줄에 영문자 기준 40자 ~ 55자 정도가 되도록 하는 것이 적당하다. 이는, 글자 크기에 따라 차이가 있지만, 본문 가로폭이 250 픽셀 ~ 350 픽셀 정도가 됨을 뜻한다.

하지만, 블로그나 온라인 샾을 운영하는 사람이라면, 가로폭이 300 픽셀 ~ 400 픽셀이면 지나치게 좁다는 것을 알 것이다.
"

모니터가 데스크탑 쪽은 갈 수록 커지고, 다른 한편으로는 모바일화에 따라 작아집니다.
모바일 기기는 너비가 좁으므로 별다른 고민이 생기지 않지만, 데스크탑 모니터는 갈수록 커지고 있으니, 생각해 볼 여지가 생깁니다.

아래는 실제로 가독성이 어떤지 간단히 비교해 보고자, 동일한 내용을 가지고 가로폭을 몇 가지로 하여 본 것입니다.

[가로 너비 300 픽셀]

방문자의 글 읽는 편의성을 기준으로 하면, 폭이 좁은 것을 더 선호하는 것 같다.

글을 쉽게 읽고 잘 이해하도록 하려면 폭을 한 줄에 영문자 기준 40자 ~ 55자 정도가 되도록 하는 것이 적당하다. 이는, 글자 크기에 따라 차이가 있지만, 본문 가로폭이 250 픽셀 ~ 350 픽셀 정도가 됨을 뜻한다.

하지만, 블로그나 온라인 샾을 운영하는 사람이라면, 가로폭이 300 픽셀 ~ 400 픽셀이면 지나치게 좁다는 것을 알 것이다.

[가로 너비 450 픽셀]

[가로 너비 600 픽셀]

[가로 너비 720 픽셀]

방문자의 가독성을 최대로 높이면서도, 커다란 모니터 여백을 가지런하고 멋있게 하는 일이 결코 간단하지도 쉽지도 않다는 생각이 듭니다.

도움이 되기를 바랍니다.

구글 블로그 사용법: 엠포리오 (Emporio) 반응형 테마 포스트 (아이템) 페이지 헤더 이미지 안보이게 설정/삭제하는 방법

2018-01-19T04:10:00.002-05:00

구글 블로그의 반응형 테마 가운데서 엠포리오(Emporio) 템플릿은 개별 글 (포스트) 페이지에서는 본문의 첫 그림을 확대하여 헤드 이미지로 사용하므로, 본문에 큰 사이즈의 사진이나 그림 이미지가 들어 있는 경우에는 멋진 모습을 보여 줍니다.

반면에, 작은 그림이 들어 있는 경우에는 모양새가 좀 어수선해 보이기도 합니다. 이럴 경우에, 헤드 이미지를 보이지 않도록 해당 코드 부분을 삭제하는 것도 하나의 방법이 될 것 같습니다.

[ 엠포리오 테마 헤드 이미지가 있는 경우와 없는 모양새 비교]

1. 개별 글 페이지의 헤더 이미지 기능 코드 찾아 가기

==> 블로그 대시보드 > 테마(Theme) > HTML편집(Edit HTML)을 클릭하여, HTML 편집창을 연다
==> 코드가 있는 본문의 아무곳에나 마우스로 한 번 클릭하여 창을 활성화 한다

==> 키보드의 [컨트롤(Ctrl) + F]키를 쳐서, 아래 그림의 오른쪽 위와 같은 검색기를 열고, 아래의 코드를 복사하여 붙여 넣고 > [엔터/Enter] 키를 친다. 그러면, 해당 코드가 있는 부분으로 이동되어, 노랑색으로 표시된다.

[찾아 갈 코드 부분 : 검색기에 붙여 넣고, 엔터키를 침]

data:widgets.Blog.first.posts.first.featuredImage

2. 해당 코드 부분 삭제 하기

글 페이지 헤더 이미지 기능을 하는 코드 부분은 아래와 같습니다.
아래의 코드 부분을 삭제하고, 편집창 맨 위의 [저장하기 / Save Theme] 버튼을 누르면, 변경사항이 저장됩니다.

실제로 저장을 해 보면, 시간이 한 참 걸리기도 하고, 저장이 되지 않았다는 오류 메시지가 뜨기도 합니다. 그러나, 저장은 별 탈없이 잘 되니 걱정하지 않아도 되겠습니다.

[ 삭제할 코드 부분]

<b:if cond='data:view.isSingleItem'>
<b:if cond='data:widgets.Blog.first.posts.first.featuredImage'>
    <b:include data='{
                      image: data:widgets.Blog.first.posts.first.featuredImage, selector: ".bg-photo"
                     }' name='responsiveImageStyle'/>
    <div class='bg-photo-container'>
      <div class='bg-photo'/>
    </div>
</b:if>
</b:if>

3. 코드를 그냥 두고, 기능을 중단시키는 방법

일단 코드를 삭제하고 난 뒤에 해당 기능을 다시 복원할 경우를 대비하여 방법을 생각해 보면,

1) 템플릿 자체를 다시 적용하는 방법을 생각해 볼 수 있겠지만, 그렇게 하면, 이런저런 설정을 모두 다시 하여야 하므로 매우 번거롭게 됩니다.

2) 코드를 삭제하기 전에,
==> 블로그 대시보드 > 테마 (Theme) 페이지의 오른쪽 맨 위에 있는 테마 백업/복원(Backup/Restore) 기능을 이용하여, 테마를 백업해 두었다가, 필요할 때 복원하는 것이 안전하고 편리하겠습니다. (자세한 방법은 링크 페이지 참조: 템플릿 백업과 복구 하기)

3) 또 하나의 방법은, 아래와 같이 주석태그를 이용하는 것입니다.
위의 헤더 이미지 기능을 하는 코드 부분을 삭제하지 말고, 그냥 두되, 아래와 같이 주석 코드로 감싸면 됩니다. 나중에 기능을 다시 복원하려면, 주석태그만 제거하면 됩니다.

그러면, 아래와 같은 모양이 됩니다.

4. 페이지 헤드와 글 제목간의 간격 조절하기

위와 같이 헤드 이미지 기능을 중지시키면, 헤드 이미지 부분이 없어지므로, 해당 기능에서 설정되어 있는 여백 부분이 없어져, 헤드와 글 제목이 딱 붙어 갑갑해 보이게 됩니다. 아래와 같이 CSS 코드를 추가하여, 여백을 적절하게 조절하면 됩니다.

.item-view .post-wrapper {padding-top:45px;}

위 코드는 HTML의 <head> 란에 추가하면 됩니다. HTML편집창에서 직접 입력하기 보다는,
==> 블로그 대시보드 > 테마(Theme) > 설정(Customize) > 고급설정(Advanced) > CSS추가 (Add CSS)로 이동하여, CSS 입력창에 추가하면 편합니다.

자세한 방법은 아래 링크 페이지를 참조하면 되겠습니다.
>> 구글블로그 사용법: CSS코드 추가 변경하는 방법 2가지

위와 같이 코드를 제어한 실제 페이지보기 :
>> 유전자조작 지엠오 GMO로 인한 첫 인간 사망 - 의사들이 공식적으로 확인

도움이 되기를 바랍니다.

구글 블로그 사용법: 애드센스 최대 허용/노출 개수 설정 방법 maxNumAds : 반응형 테마 - 콘템포, 엠포리오, 소호, 노터블

2018-01-03T14:14:00.002-05:00

구글의 새로운 반응형 테마인 콘템포 Contempo, 소호 Soho, 엠포리오 Emporio, 노터블 Notable 스킨에서는 애드센스 광고단위의 최대 노출 개수를 조절할 수 있습니다.

기본적으로는 한 페이지에 노출 되는 애드센스 광고 단위는 3개로 설정되어 있습니다. 템플릿의 구조, 광고 배치, 목록 페이지에서 광고 노출 간격 등에 따라 알맞게 조절하면 좋을 것 같습니다.

설정 방법은

=>블로그 대시보드 > 테마(Theme) > HTML편집(Edit HTML) 버튼을 눌러, 아래 그림처럼 HTML 편집창을 엽니다.
=> 코드가 있는 본문 영역을 아무곳이나 한 번 클릭하여, 창을 활성화 한 다음 => 키보드의 [컨트롤 Ctrl + F]키를 쳐서 검색입력 창을 엽니다.

=> 검색어 입력창에 maxNumAds를 입력하거나 복사하여 붙여 넣고 [엔터]키를 칩니다. 그러면 해당 코드 위치로 이동되어 노랑색으로 표시됩니다.
=> 수자 3을 원하는 수자로 변경합니다.

=> 편집창 맨 위의 [테마 저장 / Save Theme] 버튼을 눌러 저장을 하고, [Back] 버튼을 눌러 편집창을 닫습니다.
[테마 저장 / Save Theme] 버튼을 누르면, 경우에 따라서는 시간이 한 참 걸리는 경우도 있고, 저장이 되지 않았다는 오류 메시지가 뜰 때도 있지만, 저장은 오류 없이 잘 되는 것 같습니다.

maxNumAds

참고:
예컨데, 최대 개수를 5로 변경하면, 검색결과 페이지나 목록 페이지 등에서 광고가 5개 까지 노출 됩니다.

- 광고단위가 많이 노출될 수록 좋은가?
- 목록 페이지에서 인라인 애드(in-line-ad)가 여러개 노출 될 경우에, 몇 번 째 광고단위가 효율성이 높은가? 여러 개 노출 됨에 따라 단가는 어느 정도 영향을 받는가?

... 등등을 감안하여 최대 노출 수를 설정하는 것이 좋을 것 같습니다.

참고: 아래 그림과 같이 해당 위치로 찾아 가도 됩니다.

>> 인라인 애드 In-Line Ads 원하는 광고 단위 형식 코드로 변경 하는 방법 - 네이티브 인피드 광고 (Native In-feed ads)로 대체하기
>> 인라인 애드 (InLine Ads) 넣고 설정하는 방법 - 글과 글 사이에 애드센스 넣기와 가로 위치 (왼쪽 가운데 오른쪽 등) 조절하기

구글 블로그 반응형 테마, 애드센스를 본문 위 왼쪽/오른쪽 끼워 넣는 방법

2017-08-08T00:45:00.002-04:00

광고를 게제한 블로그나 사이트들 가운데 아래 그림과 같이 광고를 본문의 왼쪽이나 오른쪽에 끼워 놓은 경우를 흔히 볼 수 있습니다. 구글 블로그 반응형 테마에서는 이전 테마(템플릿)와는 달리 그렇게 할 수 있습니다.

아래에서 설명하는 방법으로 애드센스 광고단위를 삽입해 본 결과, 배경색을 회색으로 한 본문 영역이 애드센스 영역을 조금도 가리지 않고, 애드센스 영역에 마우스를 올리면 마우스가 활성화 되는 것을 볼 수 있습니다. 정상적으로 작동할 것으로 짐작됩니다.

방법은 간단합니다.
HTML 편집창에서 애드센스 광고 단위 코드를 블로그 본문 영역 위에 놓고, 광고 코드를 DIV로 감싼 뒤에, 그 DIV에 float 속성을 주면 됩니다.

1. 방법 1: HTML에서 직접 속성 주기

광고를 왼쪽에 놓으려면 float: left
광고를 오른쪽에 놓으려면 float: right

>> 반응형 테마에서 애드센스 광고단위를 본문의 위 또는 아래에 넣는 방법을 설명한 페이지 보기

2. 방법 2: 광고코드를 DIV로 싸고, DIV에 클래스(class)를 설정하여, 테마-디자이너에서 속성을 주는 방법

(1) HTML 편집창에서 광고 코드 넣기

(2) 블로그 테마-디자이너에서 클래스(class) 속성주기

.top-ads {width:336px; float:left; margin: 0em 2em 1.5em 0em;}

광고를 왼쪽에 놓으려면 float: left
광고를 오른쪽에 놓으려면 float: right

>> 반응형 테마에서 애드센스 광고단위를 본문의 위 또는 아래에 넣는 방법을 설명한 페이지 보기
>> DVI 영역을 왼쪽 / 오른쪽에 위치시키고 아래쪽 내용을 옆으로 달아 올리는 방법을 설명한 페이지 보기
>> DIV 태그 여백(margin) 설정 방법을 설명한 페이지 보기

참고: 반응형 광고단위의 경우, 광고영역 너비를 300px로 주면, 애드센스는 300x600 광고단위를 보여주게 되므로, 너비를 336px로 주어 336x280 광고 단위가 게제되도록 하는 것이 더 잘 어울리지 않겠는가 싶습니다.

애드센스 글 본문(포스트) 바로 위 / 아래에 넣는 방법 - 구글 블로그 반응형 템플릿 Contempo Soho Emporio Notable

2017-08-07T11:47:00.000-04:00

애드센스 코드를 글(포스트) 제목과 글 본문 사이 (= 본문 위), 글 본문과 글 푸터 (post-footer) 사이 (= 본문 아래)에 넣으려면 아래와 같이 하면 됩니다. 구글 블로그의 반응형 테마에서는, 이전 템플릿들과는 달리, 애드센스 코드를 직접 HTML에 넣을 수 있습니다.

간략히 말하면, HTML 편집창에서, 글 본문을 불러 오는 <data:post.body/> 코드를 찾아서, 코드 위 또는 아래에 애드센스 코드를 넣으면 됩니다. 다만, 애드센스 코드의 async를 async='async'로 바꾸어 주어야 합니다.

<data:post.body/> 를 찾아 애드센스 코드 삽입하기

>> 블로그 대시보드 > 테마(Theme) > HTML편집(Edit HTML)으로 이동하여, HTML 편집창을 열고
>> HTML 편집창의 오른쪽 위에 있는 검색상자에 <data:post.body/>를 입력(복사, 붙여 넣기)하고 [엔터]키를 치면 해당 위치로 이동됩니다.

<data:post.body/>

<data:post.body/> 위치에 글 (포스트) 본문이 보여지므로, 애드센스 코드를 <data:post.body/> 위 또는 아래에 넣으면 됩니다. 곧,

애드센스 광고가 본문 바로 위 (글 제목과 분문 사이)에 보이게 하려면, <data:post.body/>위에 넣고, 광고가 본문 바로 아래 (글 본문과 포스트 푸터 사이)에 보이게 하려면 <data:post.body/> 코드 아래에 넣습니다.

위와 같이 HTML 편집창에서 애드센스 코드를 넣을 때는 아래의 두 가지를 고려하여야 합니다.

1. 애드센스 코드의 async를 async='async' 바꾸기

애드센스 코드를 그냥 넣으면, HTML 편집창에서 오류 메시지가 뜨고 저장이 되지 않습니다. 애드센스 코드의 async 부분을 async='async'으로 바꾸어 주면, 오류 메시지 없이 저장이 됩니다.

[원래의 애드센스 코드 모양]

[바꾼 뒤의 모양]

애드센스 코드를 변경하는 것은 애드센스 정책에 위반 된다는 것은 두 말할 필요가 없을 만큼 모두 알고 있을 것 같습니다. 그러면, 위와 같이 변경하면 애드센스 정책에 위반되는 것인가?

이에 대한 글을 인터넷에서 찾아 보면, 많지는 않지만 몇 개의 글들을 볼 수 있습니다. 위와 같이 변경하는 것은 HTML5 문법에 관한 것이고, 애드센스 코드 자체를 변경하는 것이 아니므로, 애드센스 정책 위반이 아니라는 의견들을 볼 수 있습니다.

문제는 이에 대하여 구글에서 이렇다저렇다 한 내용을 찾아 볼 수 없다는 것입니다. 곧, 구글에서 애드센스 정책 위반이라고 하면 위반인 것이고, 괜찮다고 하면 괜찮은 것입니다. 그러니, 이 방법은 애드센스 게시자 스스로가 판단하고 결정할 수 밖에 없는 일입니다.

2. 광고 여백 설정하기

애드센스 코드를 넣으면, 광고의 여백이 맞지 않을 가능성이 높습니다. 아래와 같이, 애드센스 코드를 <div>태그로 감싸고, 마진(margin) 속성으로 여백을 조절하면 되겠습니다.

아래 첫 번째 예와 같이, 애드센스를 감싼 <div> 태그에서 직접 margin을 설정하여도 되겠고, 두 번째 예와 같이 <div>에 클래스(class)를 지정하여 별도로 margin을 설정하여도 되겠습니다.

[ 예 1. DIV 태그에서 스타일(style) 속성으로 직접 margin을 설정한 예]

[ 예 2. DIV 태그에서 클래스(class) 속성으로 margin을 설정한 예]

첫 번째 방식은 HTML 편집창에서 바로 설정을 하므로 편하고, 두 번째 방식은 테마 디자이너에서 시각적으로 보면서 여백을 조절할 수 있으므로 좋습니다.

두 번째 방식으로 할 경우, 클래스(class) 설정은
>> 블로그 대시보드 > 테마(Theme) > 사용자설정(Customize) > 고급설정(Advanced) > CSS추가(Add CSS)로 이동하여, CSS 코드 입력창을 엽니다. (자세한 설명 보기 >>)

위의 예에서 <div class="post_bottom_ads">와 같이 클래스를 post_bottom_ads 로 하였으므로, CSS 입력창에 다음과 같이 입력합니다.

.post_bottom_ads {margin: 25px 0px 15px 0px;}

클래스 앞에는 점(.)을 찍어 줍니다.
마진(margin)에 적용하는 숫자는 위쪽 여백, 오른쪽 여백, 아래쪽 여백, 왼쪽 여백 순서 입니다.
>> <div> 태그 마진(margin) 설정에 관한 자세한 내용은 링크 페이지를 참조

>> 구글 블로그 반응형 테마, 애드센스를 본문 위 왼쪽/오른쪽 끼워 넣는 방법

구글 블로그 반응형 테마 상단 사이드바 가젯 위쪽 / 아래쪽 세로 정렬하는 방법

2017-07-30T06:06:00.000-04:00

구글 반응형 테마(템플릿)의 사이드바는 위쪽 사이드바(top sidebar)와 아래쪽 사이드바로 나뉘어 있습니다. 아래쪽 사이드바는 세로로 위쪽 정렬이 되므로 일반적인 사이드바와 차이가 없습니다.

위쪽 사이드바는 세로로 가운데 정렬이 되도록 기본 설정되어 있습니다.
블로그 구성이나 특성에 따라서는 세로로 위쪽 정렬 또는 아래쪽 정렬을 하는 것이 더 잘 어울릴 수 있겠습니다.

1. 위쪽 사이드바 내용이나 요소를 세로로 위쪽 또는 아래쪽으로 정렬하는 방법은 아래와 같이 추가한 가젯(gadget)에 margin을 설정하면 됩니다.

세로로 위쪽 정렬을 하려면, margin: 0 auto auto auto; 속성을 주고
세로로 아래쪽으로 정렬하려면, margin: auto auto 0 auto; 속성을 주면 됩니다.

[구글 반응형 테마 상단 사이드바 세로 아래쪽 정렬]

2. 반응형 테마의 상단에 넣은 가젯에 마진(margin) 속성 설정은 테마 디자이너에서 하면 됩니다.
>> 블로그 대시보드 > 테마(Theme) > 사용자 설정 (Customize) > 고급설정 (Advanced) > CSS 추가 (Add CSS)에서 설정합니다.

[예: HTML 가젯을 상단 사이드바에 넣고 세로 아래쪽 정렬 속성을 줌]

#HTML1 {margin: auto auto 0 auto; width: 300px;}

위 예에서
1) HTML1은 추가한 가젯 고유 아이디 (ID)이므로, 실제 추가한 가젯 ID로 대체하면 됩니다. 가젯 ID 앞에는 #을 붙여야 합니다.

예컨데, #HTML2, #HTML3, .... #BlogList1, #PopularPosts1, ... 등.
>> 추가한 가젯 아이디 (ID) 쉽게 찾는 방법은 링크 페이지 참조

2) 가젯의 너비 (width: 300px) 속성을 준 것은, 너비 속성을 주지 않으면 상단 사이드바에서는 사이드바 하단에 가로 스크롤 바가 생성되어 보기가 좋지 않기 때문입니다.

>> 실제로 적용한 예 보기

도움이 되기를 바랍니다.

구글 블로그 사용법: 새로운 반응형 테마 헤더 본문 사이드바 너비 조절하는 방법

2017-05-30T09:26:00.003-04:00

구글에서 새로 제공하는 반응형 테마인 Contempo, Shoho, Emporio, Notable에 사이드바 너비, 메인 너비, 사이드바와 메인 사이의 최소 여백을 설정하는 기능이 추가 되었습니다.

방법은 아래 그림과 같이,
>> 블로그 대시보드에서 테마(Theme) > 사용자설정(Customize) 버튼을 눌러 블로거 테마 디자이너 (Blogger Theme Designer)를 엽니다.
>> 왼쪽 메뉴에서 고급설정(Advanced) > 너비(Width) 항목을 열어서, 조절 레버를 움직여서 설정하거나, 입력란에 수자를 직접 입력해도 됩니다.

테마가 나온 이래 한가지씩 개선이 되고 있으므로, 사용자들의 피드백이 반영되리라 생각됩니다. 테마 오른쪽의 애드센스 위치와 너비 설정기능에 대하여 의견들이 많이 있는 것 같지만, 아직 이 기능은 제공되지 않습니다.

주) 아래는 반응형 테마가 처음 나왔을 때, 너비 조절 기능이 제공되지 않던 때에 작성한 글입니다. 아래와 같이 하여도 됩니다.

구글에서 새로 제공하는 반응형 테마인 Contempo, Shoho, Emporio, Notable은 영역 구조, 사이드바 위치, 헤더 높이, 본문(메인) 너비, 사이드바 너비 등을 조절할 수 있는 기능이 없습니다.

그러나, 테마(템플릿)디자이너에서는 조절할 수 없지만, 아래와 같이, HTML 편집창에서 헤더 (배경 그림) 높이, 본문(메인) 너비 그리고 사이드바 너비 세 가지는 조절할 수 있습니다.다만, 조절 후에 테스트를 해 본 결과 문제는 발견되지 않았지만 특정한 기능에서는 오류가 발생할 수 도 있습니다.

이전의 코드에 비해 복잡해진 탓에 여타 수치를 조절하면, 접속기기에 따른 반응 기능이 제대로 작동하지 않습니다.

너비 조절 방법은
>> 블로그 대시보드 > 테마(Theme) > HTML 편집 (Edit HTML)버튼을 눌러 편집창을 연다
>> 아래 그림에서 좌측의 행 번호와 그룹(Group) 이름을 참조하여 해당 코드 부분으로 간다
>> 조절하고자 하는 영역 그룹의 값(value)을 조절한다.

다만, 최소값(min), 최대값(max) 범위 안에서 조절하여야 오류가 생기지 않습니다. 최소값이나 최대값을 변경하면, 테마의 틀 자체가 흩으러져 오류가 생길 가능성이 높습니다.

새로운 반응형 테마에서는 세로형 애드센스 영역을 별도로 두고 있고, 이 영역의 너비를 조절하면 오류가 발생하므로 조절할 수 없습니다.

[반응형 테마 헤더, 본문, 사이드바 너비 조절하기]

[테마 영역 너비/높이 설정하는 코드 그룹 이름]

ㅇ 헤더 (배경 이미지) 높이 설정
<Group description="Backgrounds">

ㅇ 본문(메인) 너비 설정
<Group description="Posts" selector="div.widget.Blog">

ㅇ 사이드바 너비 설정
<Group description="Sidebar" selector="div.sidebar-container">

반응형 테마는 처음 나온 탓에 사용자가 영역을 조절할 수 없지만, 언젠가는 이전 테마들 처럼 사용자가 조절할 수 있도록 개선될 것으로 짐작됩니다.

구글 블로거 사용법: 새로운 반응형 테마 (템플릿)에서 가젯 잠금 해제 방법 locked=false

2017-05-28T09:45:00.004-04:00

구글 블로거에서 새로 제공하는 Contempo, Shoho, Emporio, Notable 등 4가지 테마(스킨)는 틀을 짜놓고 가젯들도 고정시켜 놓아 이동할 수도 없고 제거(remove) 할 수도 없습니다.

가젯 가운데는 기본 틀에 짜여져 있는 가젯의 '사용(Show)' 체크를 해제하여 사용하지 않도록 하여도, 가젯이 추가되지 않는 경우도 있습니다.

이럴 때는 아래와 같이, 해당 가젯의 잠금을 해제한 뒤에, 해당가젯을 마우스로 끌어서 이동하면, 원래 짜여진 가젯은 그대로 있고, 새로운 가젯이 추가 됩니다.

>> 블로거 대시보드에서 > 테마(Theme) > HTML편집 (Edit HTML) 버턴을 클릭하여 HTML 편집창을 연다

>> HTML 편집창의 맨 위에 있는 [위젯 바로가기, Jump to widget] 버튼을 눌러, 잠금을 해제하고자 하는 가젯을 선택한다. 그러면, HTML 코드에서 해당 가젯 부분으로 바로 이동이 된다. 아래 그림은 피쳐드 포스트 (FeaturedPost1) 가젯의 잠금을 해제하는 예이다.

>> 해당 가젯 코드 부분으로 가면, 해당 가젯의 id 와 함께 locked='true'라고 되어 있다. 곧, 가젯 잠금을 설정해 둔 것이다. true를 지우고 대신에 false로 바꾸어 주면 잠금이 해제된다.
즉, locked='true' ==> locked='false'

>> HTML 편집창 맨위에 있는 [저장, Save theme] 버튼을 눌러 저장을 하고, 편집창에서 빠져 나온다.

그러면, 잘 저장이 될 때도 있고, '저장이 되지 않았으며, 변경된 데이타는 잃게 된다'는 경고 메시지가 뜨는 경우도 허다합니다. 비록 경고 메시지가 뜨더라도 저장이 안되는 경우는 거의 없는 것 같습니다. 이 오래된 불편이 언제 개선될지는 구글도 모르는 듯 합니다.

이러한 현상은 오류로 보이지는 않습니다. 그것이 블로거의 스타일인지 구글의 스타일인지는 모르겠지만, 새로 나온 테마는 짜여진 틀 안에서 그저 글꼴이나 색상 정도만 꾸며서 사용하라.... 그런 뜻이 아닌가 싶습니다.

[가젯 잠금 해체 하는 방법]

도움이 되기를 바랍니다.

구글 블로그 사용법: 모바일 테마(theme)에 가젯 보이기 / 숨기기 설정하는 방법 mobile="yes, No, Only"

2017-04-01T03:16:00.002-04:00

블로거에서 가젯(gadget)을 추가하면 데스크탑 컴퓨터에서는 보이지만 모바일 기기로 접속하면 표시되지 않으므로 모바일을 통한 방문자는 해당 가젯을 볼 수 없다.

가젯을 모바일 기기에서도 보이게 하거나, 보이지 않게 하거나, 오직 모바일에서만 보이게 설정하려면 HTML에서 아래와 같이 설정해 주면 된다.

[블로거 가젯 모바일 표시 설정]

데스크탑 모바일 모두 보임 mobile='yes'
데스크탑에서는 보이고, 모바일에서는 안 보임 mobile='no'
데스크탑에서는 안 보이고, 모바일에서만 보임 mobile='only'

HTML 설정하는 방법
1) 블로거 대시보드 > 테마(Theme) > HTML편집(Edit HTML) > 설정하고자 하는 가젯으로 이동
2) 해당 가젯의 locked='false' 다음에 위의 설정 가운데 원하는 것을 추가하고 저장(Save Them)을 한다.

모바일에서 위 설정이 적용되게 설정하기

위에서와 같이 모바일 표시 설정을 한 다음, 그 내용이 적용되도록 하기 위해서는 아래와 같이 설정해 주어야 한다.

>> 블로그 대시보드 > 템플릿(Theme) > 모바일 설정 버튼을 눌러 설정창을 연다
>> 모바일기기에서는 모바일 템플릿을 적용하도록 선택 (Yes, Show mobile theme ......)
>> 모바일 테마 (theme) 선택 (Choose mobile theme)에서 사용자 설정 (Custom)을 선택하고 저장(Save) 한다.

여타 참고 사항:

1) 모바일에 가젯을 표시되게 할 때는 모바일 기기는 화면이 작다는 점을 감안할 필요가 있다.
특히, 애드센스 가젯을 모바일에서 표시되게 할 때는 주의를 해야 할 것 같다. 애드센스 광고단위 가운데 반응형 광고단위를 HTML 가젯을 통하여 추가하고 모바일에 표시되게 하면, 경우에 따라서는 광고가 화면 전체를 덮을 수 있다.

2) 위와 같이 설정을 하고 저장(save theme) 버튼을 누르면, 경우에 따라서는 저장이 되는 데에 뭐가 잘 못 되었나 싶을 정도로 오래 걸릴 때가 있다. 저장이 되고 나서 HTML 편집창에서 나오면 "저장이 되지 않았으므로 변경된 내용을 잃게 된다"는 메시지가 뜨는 경우도 왕왕 있지만, 다시 HTML 편집창으로 들어가 보면 제대로 저장되어 있다.

>> 구글블로그 사용법: 모바일템플릿 꾸미기 - 테두리 배경 색상 폰트 버튼 등을 꾸미는 방법

도움이 되기를 바랍니다.

구글 블로그 사용법: 새로운 반응형 테마 4가지 Contempo Soho Emporio Notable

2017-03-24T03:42:00.001-04:00

구글 블로그에서 새로운 반응형 테마(responsive theme) 4 종류를 추가하였습니다.

Contempo, Soho, Emporio, Notable 등이며, 기존의 템플릿과는 다른 몇 가지 장점과 특징이 있는 것 같습니다.

# 참고: 기존에는 템플릿(template)이라고 하였는대, 3월달 들어 서면서 블로그의 대시보드 등에서 테마(theme)라는 낱말로 모두 바뀌었습니다.

어저께 처음으로 공개되었기에 새 테마를 적용한 블로그도 찾기 어렵고, 새 테마에 대한 의견이나 CSS에 관한 글을 볼 수가 없습니다. 새로운 테마 가운데 콘템포(Contempo)를 이 블로그에 적용하고 하루 정도 살펴 본 소감을 간단하게 적어 봅니다.

우선, 가장 큰 특징이자 장점으로는 디스플레이 크기에 따라 변동되는 반응형 테마라는 점을 들 수 있겠습니다.

타블렛이나 핸드폰 등의 이동형 기기들이 널리 쓰이면서 디스플레이 크기가 다양화 되어 가는 시류에 부합되는 장점이라 하겠습니다.

둘째는, 테마의 틀을 짜 놓고 많이 쓰이는 가젯들은 고정을 시켜 이동이 불가능하도록 정형화 시켰습니다.

메뉴를 만드는 페이지 가젯, 피쳐드 포스트 가젯, 이메일 구독 신청 가젯, 파퓰러 포스트 가젯, 애드센스 가젯, 프로필 가젯, 아카이브 가젯, 라벨 가젯 등은 위치를 이동할 수 없고 단지 사용여부를 on/off 할 수 있도록 되어 있습니다.

메인을 담는 콘테이너 폭은 조절이 가능하지만, 사이드바의 폭을 조절하는 기능은 제공되지 않습니다.

구글 블로그 팀에서 제작한 테마라고 하니 여러가지 면에서 최적화된 것으로 생각되지만, 한편으로는 좀 답답하다... 불편하다... 그런 느낌이 있습니다.

세째는, 애드센스 노출 순서가 바뀌었습니다.
이전의 테마에서는 애드센스 단위의 노출 순서가 헤더 > 메인 > 사이드바 순이었습니다.

새로운 테마에서는, 왼쪽 그림의 테마 틀에서 볼 수 있듯이, 오른쪽 사이드 애드센스 단위가 메인 포스트에 있는 애드센스 단위 보다 먼저 노출 되도록 틀이 짜여 있습니다.

오른쪽 사이드에 게제되는 애드센스는 폭이 좁은 광고 단위가 적용되도록 되어 있고 블로거가 광고 사이즈를 조절하는 기능은 제공되지 않습니다.

애드센스 인라인 애드를 포스트 1개 단위마다 노출되도록 설정을 해 놓으면, 모바일로 접속했을 때 포스트 애드센스 포스트 애드센스 포스트 애드센스 형태로 보여지고, 300x250 과 같은 사각형 광고가 노출되므로, 아무래도 이래저래 클릭이 일어날 확률이 높을 것 같습니다. 다만, 방문자 입장에서 생각하면 여간 성가신 일이 아닐 수 없을 것 같습니다.

애드센스에 관심을 많이 쏟은 것으로 짐작되는대, 실제적인 결과는 많은 블로거들이 적용을 해 본 뒤에 알 수 있을 것 같습니다.

그 밖의 특징들을 보면,
ㅇ 앞 글, 뒷 글 읽기 링크가 없다.
ㅇ 이전과 달리, 페이지 (pages)에도 날짜가 표시된다.
ㅇ 검색기, 이메일 구독 신청 가젯, 프로필 가젯, 아카이브 가젯, 라벨 가젯이 기본으로 장착되어 있다.
....

여담 삼아 한 마디 보태면,
ㅇ 콘템포 (Contempo) 테마에서는 페이지 가젯이 정상적으로 작동하지 않는 오류가 있지만, 곧 개선되리라 짐작되므로 문제될 것은 아니겠습니다.
ㅇ 구글 스피드 테스트 페이지에서 테스트를 해 보니, 이전 테마들과 비교해서 별로 빨라 진 것 같지는 않습니다.

이제 막 출시된 테마이기도 하거니와 잠깐 적용해 보고 살펴 본 것이라, 행여 잘 못 본 것이 있을 수도 있으므로 그냥 참고로 하기 바랍니다.

구글 블로그 사용법: 템플릿 디자이너의 사용자 CSS가 보이지 않을 때 해결 방법

2017-01-27T03:59:00.000-05:00

구글 블로그의 "블로그 템플릿 디자이너, Blogger Template Designer" 에는 사용자 CSS (Custom CSS)코드를 쉽게 추가하고 수정할 수 있는 기능이 있다.

이 곳을 통하여 추가해 놓은 CSS코드가 보이지 않을 때가 있다.
HTML 편집기(Edit HTML)에서 직접 HTML코드를 수정하고 저장하게 되면, 템플릿 디자이너에서 추가한 CSS코드가 그대로 있고 정상적으로 작동을 하지만, 템플릿 디자이너의 CSS코드 추가 설정하는 창에서는 보이지 않게 된다. 아마도 이것은 일종의 오류라고 할 수 있을 것 같고, 수정되어야 할 것으로 생각된다.

어쨋거나, 그럴때는 HTML 편집창 (Edit HTML)을 열고
> 추가한 CSS코드 부분을 복사하고
> HTML편집창에서는 삭제를 하고
> 템플릿 디자이너의 CSS코드 추가하는 창에 붙여 넣고 저장을 하면 된다.

도움이 되기를 바랍니다.

웹페이지 페이지 여백 (브라우저와 콘텐츠 사이) 설정과 없애는 방법 html, body {margin: 0px; padding: 0px;}

2017-01-26T03:14:00.000-05:00

웹페이지의 콘텐츠와 브라우저 가장자리와의 사이 여백을 없애거나 줄임으로써 노트북과 같은 휴대용 기기들에서 콘텐츠가 가리우는 것을 피할 수 있다.

1. 페이지 여백 설정 코드 추가하기

구글 블로그 템플릿에는, 그림에서 보듯이, 기본적으로 페이지 여백이 설정되어 있으므로, 브라우저를 줄여도 일정한 여백이 주어진다. 이러한 여백을 줄이려면 다음의 코드를 추가해 주면 된다. (추가하는 방법은 링크 페이지를 참조 : 구글블로그 사용법: CSS코드 추가 변경하는 방법 2가지)

html, body {margin: 0px; padding: 0px;}

기본적으로는 페이지 바디(body)의 여백을 설정하는 것이므로, body {margin: 0px; padding: 0px;}으로 하면 되지만, 브라우저에 따라서는 그렇게 하면 작동이 되지 않는 경우가 있으므로, 아래와 같이 html, body { ~~~} 로 적어 주는 것이 안전하다.

html, body {margin: 0px; padding: 0px;}

또 하나의 방법은 HTML 편집창에서 <body> 태그에 직접 설정해 주어도 된다.

2. HTML 편집창에서 원래의 여백코드 지우기

위에서와 같이 CSS코드를 추가하면, 페이지가 열릴 때, 먼저 원래의 코드에 설정된 여백으로 페이지가 열린 다음에, 추가한 CSS코드의 여백을 다시 적용하여 조정하게 된다.

따라서, 페이지가 열리는 속도가 아주 빠른 경우에는 눈깜작할 사이에 이루어지므로 알 수가 없지만, 인터넷 속도나 컴퓨터의 처리 속도 등이 느릴 경우에는 페이지 열리는 속도가 느리게 되고, 그려면, 페이지가 좌우로 "끄떡"하는 것을 볼 수 있다. 방문자로서는 눈에 거슬릴 수 있을 것 같다. 익스플로러와 파이어폭스에서는 그런 현상이 보이지 않는대 유독 크롬에서만 눈에 띄게 나타난다.

아예 여백을 없도록 하려면,
위에서와 같은 CSS코드를 추가하지 말고, 아래와 같이 페이지 여백설정 원래 코드를 삭제하면 된다. 이렇게 하면, 페이지가 열릴 때 옆으로 끄떡 하는 현상도 없어 좋다.

아래는 원래의 페이지 여백 태그 (padding)를 지우는 방법이다.

도움이 되기를 바랍니다.

구글 블로그 사용법: 바디 메인 콘텐츠 영역 바깥 테두리 그림자 없애거나 조절하는 방법 - content-outer shadow

2017-01-19T07:59:00.000-05:00

구글 블로그의 기본 템플릿 (simple template)에는 콘텐츠 영역의 테두리에 그림자 (shadow)가 그려지도록 되어 있다. 블로그의 구조나 색상 등에 따라 유용할 수도 있고 그렇지 않을 수도 있겠다.

테두리 그림자를 없애거나 조절하려면 아래 그림과 같이 HTML 편집창에서 content-outer 를 제어하면 된다.

>> 블로그 대시보드 > 템플릿 (template) > HTML 편집 (Edit HTML)을 눌러 편집창을 연다
>> 편집창의 왼쪽에 있는 행번호의 10번 쯤에 보면 <b:skin> ... </b:skin>있다. 이 행의 왼쪽 행번호 옆의 까만색 삼각형을 클릭하여 숨겨진 부분을 펼친다

>> 쭉 아래로 내려가면, 행번호 220번쯤에 content-outer { ----- }가 있다.
그림자를 아예 없애려면, 해당 코드를 모두 삭제하고, 편집창 맨위에 있는 [Save template] 버튼을 눌러 저장을 하고, [back] 버튼을 눌러 편집창을 닫으면 된다.

그림자의 속성을 조절하여 블로그를 꾸미려면, 숫자 부분을 변경하여 조절하면 된다.

[콘텐츠 영역 테두리 속성 없애기]

[구글 블로그 콘텐츠 테두리 속성 코드]

.body-fauxcolumn-outer .cap-top .cap-left {
width: 100%;
background: transparent $(body.background.gradient.cap) repeat-x scroll top left;
_background-image: none;
}

.content-outer {
-moz-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
-webkit-box-shadow: 0 0 $(content.shadow.spread.webkit) rgba(0, 0, 0, .15);
-goog-ms-box-shadow: 0 0 $(content.shadow.spread.ie) #333333;
box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);

margin-bottom: 1px;
}

.content-inner {
padding: $(content.padding) $(content.padding.horizontal);
}

구글블로그 사용법: 글 (포스트) 제목 링크, 본문에 있는 링크, 푸터 링크 개별 제어 방법

2016-07-06T18:28:00.001-04:00

블로그의 링크 전체에 적용되는 스타일은
=> 템플릿 > 사용자설정 (Customise) > 고급설정 (Advanced) > 링크 (Links) 에서 간편하게 설정을 할 수 있다.

글(포스트)의 제목, 본문 속 링크, 푸터 영역의 링크를 블로그 전체에 적용되는 링크 스타일과는 다르게 적용하려면, 아래의 코드를 사용하여 할 수 있다.

h3.post-title a {color: #333;}
.post-body a {color: #333;}
.post-footer a {color: #333;}

첫 번째 코드는 글(포스트)의 제목에 걸리는 링크를 제어하는 코드이고
두 번째 코드는 글(포스트)의 본문 안에 들어 있는 링크를 제어하는 코드이고
세 번째 코드는 글(포스트)의 푸터 영역에 있는 링크를 제어하는 코드이다.

CSS 코드에는 색상뿐만이 아니라 필요한 여러가지 요소들을 사용하여 알맞게 꾸미면 된다.

CSS 코드 추가는
=> 블로그 대시보드 > 템플릿 > 사용자설정(Customise) > 고급설정 (Advanced) > CSS추가 (Add CSS) 에서 하면 된다. (자세한 방법은 링크 페이지 참조)

경우에 따라서는 블로그 전체에 적용되는 링크 스타일을 유지하고, 특정한 글에 들어 있는 특정한 링크의 색상이나 글꼴 또는 글자크기 등을 제어할 필요가 있을 수 있다. 그럴 때는 링크를 거는 <a> 태그에서 스타일을 설정하면 된다. 예를 들자면,

[개별 링크 스타일 설정하기]

[실제 적용한 모습]
개별 링크 꾸미기 예제

도움이 되기를 바랍니다.

구글블로그 사용법: 라벨(Label) 클릭시 한 페이지에 나열 되는 글 갯수를 제어하는 방법 - 라벨검색 결과 페이지 글 수 제어

2016-05-19T03:59:00.002-04:00

한 페이지에 나열되는 글 갯수를 제어할 필요가 있을 수 있겠다.
대문페이지에 보여 줄 글 갯수 지정은 설정(Setting)에서 할 수 있다. 하지만, 라벨을 클릭하면 한 페이지에 20개의 글을 나열하여 보여 주도록 되어 있고, 사용자가 설정할 수 있는 기능은 없다.

긴 글이 많을 경우에는 20개의 글을 한 페이지에 나열하면 불편한 점이 많다. 이럴 경우에는 블로그 HTML에 짧은 코드를 추가함으로써 해결 할 수 있다. 라벨을 클릭하였을 때 한 페이지에 보여지는 글 갯수를 제어함에 있어 두 가지를 생각해 볼 수 있겠다.

하나는, 특정한 라벨로 메뉴를 만드는 등과 같이 특정한 라벨링크에 대하여만 글 갯수를 제어하는 것이고, 또 하나는, 모든 라벨에 대하여 일괄적으로 나열되는 글 갯수를 제어하는 것이다.

1. 특정한 라벨링크에 대하여만 글 갯수를 제어하기

특정한 라벨링크를 만들 때 아래와 같이 글 갯수를 지정해 주면 된다. 구글블로그의 일반적인 라벨검색 뒤에 ?max-results=보여줄 글 갯수(수자) 를 붙여 주는 것이다.

[라벨링크 결과 보여줄 글 갯수 제어]

블로그 주소(URL)/search/label/라벨?max-results=보여줄 글 갯수(수자)

예컨데, 이 블로그에서 라벨이 "Blogger"인 글을 검색하는 주소는
https://howways.blogspot.com/search/label/Blogger 이다. 이렇게 검색하면, 라벨이 Blogger 인 글이 한 페이지에 20개씩 나열된다.

아래의 예에서는 글이 1개만 보여지도록 숫자를 1로 설정하였다. 아래의 [실제 예]의 라벨링크를 클릭하면, 글이 하나만 보여진다.

[실제 예]

https://howways.blogspot.com/search/label/Blogger?max-results=1

2. 모든 라벨검색결과 페이지에 대하여 일괄적으로 제어하기

블로그에서 어떤 라벨이든 라벨 검색결과 페이지에 나열되는 글 갯수를 제어하려면, 아래 그림과 같이, 블로그 HTML에서 블로그의 원래 코드 뒤에 검색결과 글 수를 제어하는 코드를 추가한다.

=> 블로그 대시보드 > 템플릿(Template) > HTML편집(Edit HTML)을 선택하여 블로그 HTML 편집창을 연다
=> HTML이 있는 곳의 아무데나에 마우스로 한 번 클릭하여, HTML 편집창을 활성화 한다

=> 키보드의 [컨트롤(Ctrl) + F] 키를 쳐서, 검색상자를 열고, 아래의 블로그 기본코드를 복사하여 붙여 넣고, [엔터] 키를 쳐서, 해당 코드 위치로 간다

[블로그 원래의 기본 코드]

data:label.url

=> 노랑색으로 표시된 블로그 기본 코드를 아래의 [대체할 코드]로 바꾸어 준다. 즉, 노랑색으로 표시된 기본코드를 삭제하고, 그 자리에 아래의 [대체할 코드]를 복사하여 붙여 넣는다

[대체할 코드]

data:label.url + "?max-results=보여줄 글 갯수(수자)"

=> HTML 편집창을 저장(Save Template)한다. 이로써 작업이 끝났다.
저장을 하면, 저장이 되지 않았다는 오류메시지가 뜰 때가 많다. 일단 저장 버튼을 눌렀으면, 오류메시지를 무시하고, 편집창에서 빠져 나와 블로그의 라벨을 클릭해서 제대로 작동하는지 확인하면 되겠다.

아래 그림의 예에서는 글 갯수를 1개로 지정하였다.

data:label.url + "?max-results=1"

구글블로그 사용법: 페이지 네비게이션 (이전페이지 다음페이지) 페이지 상단 위에 두는 방법

2016-02-16T00:46:00.002-05:00

블로그의 특성에 따라서는 앞/뒤 페이지로 이동하는 네비게이션 링크나 버튼이 글(포스트)의 위쪽에 있는 것이 글의 아래쪽에 있는 것 보다 방문자에게 더 편리할 경우가 있다. 네비게이션을 글의 위쪽에 두는 방법은 아래와 같이 간단하다.

블로그의 HTML 편집창에서 '페이지 네비게이션 코드'를 복사하여 포스트의 위쪽 위치에 붙여 넣어 주면 된다. 포스트 아래에 있는 원래의 네비게이션을 그냥 두어도 되고 필요가 없다면 삭제하면 된다.

[1. 페이지 네비게이션 코드]

<b:include name='nextprev'/>

> 블로그 대시보드 > 템플릿(Template) >HTML편집(Edit HTML)을 클릭하여 HTML 편집창을 연다
> [컨트롤+F]키를 쳐서 검색상자를 열고, 을 복사하여 붙여 넣고 [엔터]키를 쳐서 해당 위치로 이동한다
> 페이지 네비게이션 코드인 <b:include name='nextprev'/>를 복사한다.
> 이 과정은 생략하고 위에 있는 코드를 복사해도 된다

[2. 페이지 네비게이션을 놓을 위치]

<b:includable id='main' var='top'>

<div class='blog-posts'>

> HTML 편집창에서 [컨트롤+F]키를 쳐서 검색상자를 열고 <div class='blog-posts 를 복사하여 붙여 넣은 다음 [엔터]키를 쳐서 해당 위치로 이동한다
> <div class='blog-posts'> 바로 아래쪽에 위에서 복사한 페이지 네비게이션 코드를 붙여 넣는다. 그러면 아래와 같은 모습이 된다

[3. 적용 후의 모습]

<b:includable id='main' var='top'>

<div class='blog-posts'>


<b:include name='nextprev'/>

> 위와 같이 붙여 넣었으면, 편집창의 맨 위에 있는 [저장 / Save Template]버튼을 눌러 저장을 하고, [나가기 / Back]버튼을 눌러 HTML 편집창을 닫으면 된다.

주) 구글 블로그에서 HTML 편집을 하고 저장을 하면 한참동안 응답이 없거나 저장되지 않았다는 메시지가 뜨는 경우가 흔히 있다. 저장을 하고 난 다음에 오류 메시지가 표시되더라도 일단 편집창을 닫고, 다시 편집창을 열어서 저장이 되었는지 확인을 해 보는 것이 좋다.

구글블로그 사용법: 본문 메인과 사이드바 사이의 세로줄 숨기기와 꾸미기

2015-04-12T03:04:00.000-04:00

구글 블로그의 거의 모든 템플릿에서는 본문과 사이드바 사이에 세로줄이 표시된다. 블로그의 특성에 따라서 세로줄이 잘 어울리지 않는다면, 아래의 CSS코드를 추가함으로써 세로줄을 표시되지 않게 할 수 있다.
CSS 코드 추가하는 방법은 링크 페이지에 자세히 설명되어 있으니 참고하면 되겠다.

[본문과 사이드바 사이의 세로줄 숨기는 CSS 코드]

.fauxcolumn-left-outer .fauxcolumn-inner,
.fauxcolumn-right-outer .fauxcolumn-inner
{border:none;}

{~~} 안에, 선, 여백 등의 속성을 주어 세로선을 숨기거나 꾸미면 된다.
border: none; <= 세로선을 표시하지 않음
border: 1px dashed gold; <= 세로선의 굵기를 1px, 선종류는 dashed, 선색상은 금색으로 지정한 예
margin: 5px; <= 선의 바깥 여백을 5px로 설정
.... 등과 같이 블로그에 어울리도록 조절할 수 있다.

[예: 세로선의 굵기 1px, 선종류 dashed, 색상 #bbb, 바깥 여백 5px로 설정]

.fauxcolumn-left-outer .fauxcolumn-inner,
.fauxcolumn-right-outer .fauxcolumn-inner
{border: 1px dashed #bbb; margin:5px;}

참고: 선(border)에 관한 자세한 내용은 링크 페이지 참조

구글블로그 사용법: 블로그 타이틀(제목) 이미지 올리고 설정하는 방법

2015-03-18T02:00:00.000-04:00

블로그 타이틀(이름 또는 제목)에 그림 이미지를 만들어 올리려면;

=> 블로그 대시보드에서 레이아웃(Layout) 설정 페이지로 간다
=> 블로그 타이틀 가젯의 [편집(Edit)]을 눌러 가젯을 연다

ㅇ From your computer : 컴퓨터에서 그림을 불러 올린다. [Browse...] 버튼을 누르면 그림을 선택하는 윈도우 창이 열린다.
ㅇ From the web... : 웹서버에 있는 이미지를 불러 온다. 네모 입력상자에 그림의 주소(URL)을 입력한다.

Placement (이미지 위치 설정)
ㅇBehind title and description : 이미지가 블로그 타이틀(글자)과 설명문구의 배경으로 들어간다. 곧, 블로그의 이름과 설명문구가 그림위에 위치한다.

ㅇ Instead of title and description : 이미지가 블로그 타이틀과 설명문구 위에 위치한다. 곧, 블로그 이름과 설명문구는 이미지에 덮여 보이지 않는다.
ㅇ Have a description placed after image: 이미지를 놓고 그 뒤에 블로그 설명문구를 놓는다. 이미지가 작은 경우에 설정할 수 있는 옵션이다.

=> 저장을 눌러 설정을 저장한다.

도움이 되기를 바랍니다.

구글블로그 사용법: 블로그 페이저 (blog-pager) 네비게이션(Home, Newer post, Order post) 글자 폰트 꾸미는 방법

2015-03-17T02:00:00.000-04:00

블로그 글을 이동하는 Home(홈) Newer Post(최근게시물) Order Post(이전게시물) 네비게이터의 글자체 크기 배경색 이미지 등을 조절하여 꾸미려면 아래와 같은 CSS 코드를 추가하여 쉽게 할 수 있다.

위 그림의 첫 번째 모양은 아무것도 꾸미지 않은 모습이고,
두 번째 모양은 글자 크기를 조금 키우고 굵게 지정한 모습이고,
세 번재 모양은 두 번째 모양에 바탕색을 녹색으로 주고 테두리를 둥글게 지정한 모습이다.

[두 번째 모양에 준 CSS 코드]

.home-link, .blog-pager-older-link, .blog-pager-newer-link {
font-size:1.2em;
font-weight:bold;
}

[세 번째 모양에 준 CSS 코드]

.home-link, .blog-pager-older-link, .blog-pager-newer-link {
font-size:1.2em;
font-weight:bold;
background-color:green;
border-radius:50px;
}

링크를 지정하는 코드와 속성

링크를 지정하는 코드는 아래와 같고, 둘 이상을 한꺼번에 지정하려면 코드와 코드 사이에 콤마(,)를 넣어 주면 된다.
꾸미고자하는 링크 코드를 지정하고, 잘 어울리는 속성 항목을 추가하여 조절하면 된다.

[각 링크를 지정하는 코드]

.home-link {여기에 속성을 줌}
.blog-pager-older-link {여기에 속성을 줌}
.blog-pager-newer-link {여기에 속성을 줌}

[모두 한꺼번에 같은 모양으로 지정]

.home-link, .blog-pager-older-link, .blog-pager-newer-link {
여기에 꾸미고자 하는 속성을 준다
}

[링크를 꾸미는 속성]
아래는 많이 쓰이는 속성들을 열거한 것이므로, 그 외의 HTML 속성들을 써서 꾸미면 된다.

font-family: Arial
font-style: italic;
padding: 5px;
margin: 7px;
border-color: #bbb;
border-radius: 50px;
background-color: green;
url(그림 이미지 주소 URL) no-repeat left transparent;

정리하면 아래와 같다.

[네비게이터 자체를 제어하는 코드]

#blog-pager {
display: none;
text-align: center;
margin: 5px 0px -10px 0px;
}

[home, newer, older 링크 제어 하는 코드]

#blog-pager-newer-link { float: right; }
#blog-pager-older-link { float: left; }
.home-link { }

[home, newer, order 글자 앞 또는 뒤에 글자나 기호 또는 그림을 넣을 때의 코드]

.blog-pager-newer-link:before {
content: url('IMAGE URL HERE');
}
.blog-pager-older-link:before {
content: url('IMAGE URL HERE');
}

[예: newer, order 앞뒤에 기호를 넣은 코드]

.blog-pager-newer-link:before {content:'<< ';}
.blog-pager-older-link:after {content:' >>';}

newer 앞에 << 기호를 넣고, older 뒤에 >> 기호를 넣은 예이며, 결과는 아래 그림과 같이 보여지게 된다.

블로그에 CSS 코드를 추가하는 자세한 방법은 링크페이지에 설명되어 있다.

구글블로그 사용법: 블로그 최상단에 액센트(색상 있는 가로줄) 넣는 방법

2015-03-13T02:00:00.000-04:00

블로그의 최상단에 가로줄을 넣고 색상을 주어 블로그를 꾸미려면, 아래와 같이 CSS코드를 추가하고 블로그에 잘 어울리도록 속성을 조절하면 된다.

[블로그 상단 액센트 주기 CSS]

body {border-top: 5px solid #93C90B;}

ㅇ border-top: 선굵기 선종류 선색상

ㅇ 선(border)에 관한 자세한 내용은 링크페이지 참조1 링크페이지 참조2

ㅇ CSS코드 추가하는 방법은 링크페이지 참조

구글블로그 사용법: 모바일템플릿 꾸미기 - 테두리 배경 색상 폰트 버튼 등을 꾸미는 방법

2015-03-09T02:00:00.001-04:00

구글 블로그에서 제공하는 템플릿에는 기본적으로 모바일 템플릿이 포함되어 있으므로, 방문자가 스마트폰 등의 모바일 기기로 접속을 하면 자동으로 모바일 템플릿이 적용된다.

모바일 템플릿을 잘 어울리도록 꾸미려면 CSS 코드를 만들어 추가하면 간단하고 쉽다. (CSS 코드를 추가하는 방법은 링크 페이지 참조)

CSS 코드 예

CSS코드를 만드는 방법은 꾸미고자 하는 모바일템플릿 요소에 필요한 속성만을 넣어 주면 된다. 모바일템플릿의 요소와 요소에 설정할 수 있는 속성들은 아래쪽에 정리하였다.
모바일 템플릿 요소에는 앞에 " mobile "이 붙어 있다.

포스트-아웃트의 배경색을 흰색(#ffffff)으로 설정한 예

.mobile .post-outer { background: #ffffff; }

포스트-아웃트의 배경색을 흰색(#ffffff)으로 그리고 테두리의 모서리를 둥글게 설정한 예

.mobile .post-outer { background: #ffffff; border-radius: 5px;}

모바일 템플릿 요소

아래의 요소들 가운데, 꾸미고자 하는 요소만 쓰면 된다.

.mobile .content-inner{ }
.mobile .header-outer{ }
.mobile .main-outer { }

.mobile .tabs-inner .PageList .widget-content { }
.mobile .tabs-inner .PageList .widget-content .pagelist-arrow { }

.mobile .date-outer {}
.mobile .post-outer { }
.mobile-index-contents { }

.mobile-link-button { }

.mobile-link-button a:link { }
.mobile-link-button a:hover { }
.mobile-link-button a:visited { }
.mobile-link-button a:active { }

요소에 설정할 수 있는 속성

HTML에서 사용되는 속성들을 사용하면 된다. 아래는 그 가운데 자주 쓰이는 속성들을 정리한 것이다.

border: solid 1px #C6C6C6;
border-radius: 0;
border: none;

width: 300px;
max-width: 200px;
height: auto;
max-height: auto;

float: left;
align: center;

background: #ffffff;
background-color: #ffffff;

margin: 0 0 0 0;
padding: 0 0 0 0;

text-decoration: none;
text-transform: uppercase;

font-size: 12px;
font-weight: bold;
color: #666666;

모바일 템플릿 사용자 설정 적용하기

위에서와 같이 모바일 템플릿을 꾸민 다음, 그 내용이 적용되도록 하기 위해서는 아래와 같이 설정해 주어야 한다.

>> 블로그 대시보드 > 템플릿(Theme) > 모바일 설정 버튼을 눌러 설정창을 연다
>> 모바일기기에서는 모바일 템플릿을 적용하도록 선택 (Yes, Show mobile theme ......)
>> 모바일 테마 (theme) 선택 (Choose mobile theme)에서 사용자 설정 (Custom)을 선택하고 저장(Save) 한다.

구글블로그 사용법: 백그라운드 이미지 올리기와 바꾸는 방법

2015-02-22T22:54:00.001-05:00

*
구글 블로그들을 구경하다 보면 멋진 배경 그림을 흔히 볼 수 있다.
구글 블로그에 배경이미지를 넣는 방법은 간단하고 쉽다. 블로그에서 제공하는 다양한 이미지를 넣거나 다른 이미지로 바꾸기도 쉽고, 블로거가 자신의 이미지를 올리는 방법도 간단하다.

블로그 배경이미지 설정 방법

① 백그라운드 이미지 설정창 열기
=> 블로그 대시보드 > 템플릿(Template) > 사용자정의(Customise) 버튼을 눌러 "블로그 템플릿 디자이너(Blogger Template Designer)를 연다
=> 왼쪽 맨위의 항목에서 배경(Background) > 백그라운드 이미지의 삼각형 화살표를 클릭하여 백그라운드 설정창을 연다(팝업창이 뜸)

② 자신의 배경이미지를 올리기
팝업된 백그라운드 이미지 설정창의 왼쪽에 있는 항목에서 "이미지 올리기(Upload image)를 선택하고, 오른쪽 창에서 찾기(Browse...)를 클릭하면 자신의 이미지를 올릴 수 있다.

③ 블로그 제공 이미지를 넣거나 바꾸기
백그라운드 이미지 설정창의 왼쪽에 있는 분야별 항목을 클릭하면 오른쪽에 다양한 배경이미지들이 있다. 마음에 드는 것을 클릭하여 선택한다.

이미지를 클릭하면 즉시 미리보기가 적용되므로 편하다. 설정창의 맨아래에 있는 저장(Done) 버튼을 누르지 않으면 변경 내용이 저장되지 않으므로 부담없이 이런저런 이미지를 넣어 미리보기 하면서 고르면 된다.

④ 백그라운드 이미지 설정창의 오른쪽 맨아래에 있는 저장(Done) 버튼을 눌러 설정을 저장한다

구글블로그 사용법: 라벨(레이블 label) 검색결과 페이지의 "라벨이 ~인 게시물을 표시합니다. 모든 게시물 표시"문구 바꾸는 방법

2015-02-21T14:22:00.000-05:00

*
구글 블로그에서 라벨(레이블 label)을 클릭하면 해당 라벨이 붙여진 글을 검색하여 보여준다. 이 때 검색결과 페이지 상단에 아래 그림의 위쪽과 같이 "레이블이 XX인 게시물을 표시합니다. 모든 게시물 표시"와 같은 문구가 표시된다.

이 문구를 아래 그림의 두번 째 처럼 원하는 문구로 바꿀 수 있다.
그림에서는 " 태그가 [ XX ] 인 글입니다. "로 표시되게 문구를 바꾸었다.

문구 바꾸기
=> 블로그 대시보드 > 템플릿(Template) > HTML편집(Edit HTML) 버튼을 눌러 아래 그림과 같은 HTML 편집창을 연다

=> 키보드의 [컨트롤 + F]키를 쳐서 찾기창을 연다 (편집창의 오른쪽 위 부분에 열림).
=> 찾기 창에 <data:navMessage/> 를 복사하여 붙여 넣고, 엔터키를 치면 아래 그림과 같이 해당 위치로 이동되어 노랑색으로 표시된다.

=> <data:navMessage/> 를 삭제하고, 그 자리에 아래 그림과 같이 원하는 문구를 넣는다.
=> 편집창 윗쪽에 있는 저장(Save template)을 눌러 저장을 한다.

문구는 아래와 같이 <data:blog.searchLabel/> 를 넣어 만들면 된다.
<data:blog.searchLabel/> 자리에는 해당 레이블이 표시되므로, <data:blog.searchLabel/>를 포함하여 원하는 문구를 만들면 된다.

태그가 [ <data:blog.searchLabel/> ] 인 글입니다.

아래는 위의 코드가 있는 부분을 잘 볼 수 있도록 참고 삼아 첨부한 것이다.
<data:navMessage/> 가 두 곳에 표시되는데, 윗쪽 부분을 삭제하고 원하는 문구로 바꾼다.

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

※ 레이블 검색결과 문구가 표시되는 상자와 글자를 꾸밀 수도 있다. 꾸미는 방법은 링크페이지에 자세히 설명되어 있다. 태표시상자 Status Message Bar 꾸미기

구글블로그 사용법: 사이드바(Sidebar) 상하좌우 위치 조정과 꾸미는 방법

2015-02-19T04:43:00.000-05:00

구글 블로그에서 사이드바 위치를 위/아래 또는 왼쪽/오른쪽으로 이동시키거나 사이드바의 테두리선 배경색 등을 꾸미려면 아래와 같은 코드를 추가함으로써 간단히 할 수 있다.

코드를 추가하는 방법
블로그 대시보드 > 템플릿(Template) > 사용자정의(Customise) > 고급(Advanced) > 코드추가(Add CSS)로 이동하여 입력창에 추가하면 된다. (자세한 방법은 링크페이지 참조)

#sidebar-right-1{
margin: 1.0em;
margin-top: -30px;

padding:5px 5px 5px 5px;

background: transparent;

border-radius: 7px;
border:1px solid #ccc;
border-bottom:1px solid #bbb;
border-width:1px 1px 1px;
border-bottom:1px line #ddd;
}

ㅇ #Sidebar-right-1 : 블로그에 사이드바를 추가하면 각각의 사이드바에 고유한 이름이 붙여진다. 여기서는 오른쪽(right)에 하나의 사이드바만 추가하였으므로 번호 "1"이 붙은 것이다.

ㅇ 사이드바를 위/아래 또는 왼쪽/오른쪽으로 위치 이동을 시키려면 margin을 조절한다.
margin-top을 별도로 한 것은 사이드바를 위쪽으로 당겨 올리거나 내리기 위한 것이다. 수치를 마이너스(-)로 주면 위쪽을 당겨 올려지고, 반대로 플러스(+)로 주면 아래쪽으로 밀려 내리게 된다.

ㅇ 사이드바의 안쪽 여백을 조절하려면 padding을 조절한다.

ㅇ 사이드바의 배경색을 지정하려면 background에 어울리는 색상을 지정하면되고, 위와 같이 transparent로 지정하면, 블로그의 기본 바탕색(배경색)이 그대로 보여진다.

ㅇ 사이드바의 테두리를 꾸미려면 border의 항목들을 조절하면 된다. border-radius는 테두리의 네 가장자리를 둥글게 다듬는 태그이다.

ㅇ 수치 단위는 px, pt, em, % 등을 쓸 수 있다.

ㅇ 위의 항목들을 다 넣을 필요는 없고, 필요한 항목만 추가하면 된다.

구글블로그 사용법: 피드 구독링크(Subscribe to Posts(Atom) / Subscribe to Post Comments (Atom)) 표시 안되게 하는 방법

2015-01-23T04:28:00.003-05:00

구글블로그의 기본 템플릿을 적용하면, 아래 그림과 같이 피드 구독링크가 표시된다.
블로거에 따라 차이가 있겠지만, 구독링크가 블로그에 잘 어울리지 않는다고 생각되면 아래와 같은 두 가지 방법으로 해결할 수 있다. 첫 번 째 방법이 간편하고 쉽다.

[방법 1: 아래의 CSS코드를 추가한다]
코드를 추가하는 방법은
=> 대시보드 > 템플릿(Template) > 사용자정의(Customise) > 고급(Advanced) > 코드추가(Add CSS) 이다. (자세한 설명은 링크페이지 참조)

아래의 코드를 추가하면, 홈페이지 등과 같은 목록페이지에 표시되는 "Subscribe to: Post (Atom) "문구와 개별 글(포스트) 페이지의 댓글창 아래에 표시되는 " Subscribe to Post Comments (Atom) " 문구 모두 표시되지 않는다.

.feed-links{display:none !important;}

아래의 코드를 추가하면, 홈페이지 등과 같은 목록페이지에 표시되는 "Subscribe to: Post (Atom) "문구는 표시되지 않지만, 개별 글(포스트) 페이지의 댓글창 아래에 표시되는 " Subscribe to Post Comments (Atom) " 문구는 표시된다.

.blog-feeds {display:none !important;}

[방법 2: HTML에서 아래의 코드를 제거한다]
코드를 제거하는 방법은
=> 대시보드 > 템플릿(Template) >HTML편집(Edit HTML)
=> 키보드의 [컨트롤 + F]키를 쳐서 찾기상자를 열고 > 아래의 코드를 복사하여 붙여 넣고 [엔터]키를 친다. 그러면 해당 줄로 이동하여 노랑색으로 표시된다.
=> 해당 코드를 삭제한 다음 템플릿을 저장한다.

<b:include data='feedLinks' name='feedLinksBody'/>

구글블로그 사용법: 홈페이지(Home)에서 글 제목(Title)만 보이게 하는 방법

2015-01-20T01:34:00.001-05:00

블로그의 글들이 긴 경우에는, 방문자가 홈(Home)으로 들어 왔을 때 어떤 글들이 새로이 올라왔는지 한눈에 파악하기가 어렵다.
이럴 때는 홈(Home)에서는 글들의 제목(title)만 보여지고, 보고자 하는 글 제목을 클릭하면 해당 글의 페이지가 열리도록 하는 것도 하나의 좋은 방법이 될 것 같다.

[ Home 에서는 글 제목만 보이게 한 예]

방법은 아래의 코드를 </head> 위에 추가한다 (맨 아래 그림 참조).

=> 블로그 대시보드에서 템플릿(Template) > HTML편집(Edit HTML)을 선택하여 HTML 편집창을 연다

=> HTML이 있는 창의 아무곳에나 마우스를 한 번 클릭하여 편집창을 활성화 한 다음 > 키보드의 [컨트롤 + F]키를 쳐서 찾기상자를 연다 >

=> 찾기상자에 " </head> "를 입력하거나 복사하여 붙여 넣고 [엔터]키를 친다. 그러면 </head>가 있는 곳으로 이동되며, </head>에 노랑색 형광펜으로 표시가 된다.

=> 아래의 코드를 복사하여 </head> 바로 위에 추가한다.
즉, 아래와 같은 위치가 된다.

......................................
아래의 추가할 코드
</head>

=> 편집창 맨위의 왼쪽에 있는 저장(Save Template) 버튼을 눌러 저장을 하고 빠져 나온다.

아래의 코드를 그대로 붙여 넣었다면, 위 그림에서와 같은 모양이 될 것이다.
코드에 있는 숫자, 선종류와 색상, 글자크기와 색상 등을 블로그에 어울리도록 조정하여 적용하면 보다 멋진 Home 페이지가 될 것이다.

[추가할 코드]

[참고: HTML편집창과 코드 붙여 넣기]

구글블로그 사용법: 헤더(header)와 메인(main) 사이 여백(margin) 조정하기

2015-01-20T00:53:00.002-05:00

구글블로그의 템플릿을 사용할 때, 헤더(Header)영역과 메인(Main)영역 사이의 여백을 조절하려면, 아래의 코드를 HTML에 추가하면 된다.

[ 추가할 CSS 코드]

.header-inner {margin-bottom: -50px !important;}

코드에 있는 숫자("50")를 조절하여 블로그의 레이아웃이 잘 조화되도록 하면 된다.
숫자앞에 마이너스(-)를 붙인 것은 여백을 줄이기 위한 것이다. 거꾸로 여백을 넓히려면 숫자앞의 마이너스 부호를 없애면 된다.

CSS 코드를 추가하는 방법은 여러 글에서 설명하였으므로 생략하고, 코드 추가방법을 설명한 페이지 링크로 대신한다.
구글블로그 사용법: CSS코드 추가 변경하는 방법 2가지 >>

[위 코드로 조절되는 헤더와 메인 사이의 여백]

구글블로그 사용법: 템플릿 디자이너에 글제목(포스트 타이틀) 색상 선택상자 추가하는 방법

2014-10-19T08:50:00.001-04:00

구글블로그의 글(포스트)색상을 꾸미는 방법은 2가지로 생각해 볼 수 있겠다.
하나는, 템플릿디자이너에서 색상을 지정/변경할 수 있도록 색상선택상자를 표시되게 하는 방법이고, 또 하나는 간단히 CSS코드를 추가하고 색상코드를 직접 입력하는 방법이다.

방법 1. 템플릿디자이너에 색상선택상자 보이기

구글 블로그의 편리한 도구인 템플릿 디자이너(Template Designer)에서 포스트 타이틀의 색상을 바로 지정할 수 있도록 색상선택 상자를 추가하려면 아래와 같이 두 가지 코드를 추가하면 된다.

코드를 추가하기 위하여 블로그 대시보드 > 템플릿(Template) > HTML편집(Edit HTML)을 눌러 HTML편집창을 연다.

1. 첫 번째 코드 추가하기

아래의 그림을 참조하여 코드를 복사하여 붙여 넣는다.

ㅇ 코드를 추가할 위치를 찾는 방법은 HTML 편집창에서 [컨트롤+F]키를 쳐서 검색창을 열고 Group description="Post Title 을 복사하여 붙여 넣고 엔터키를 치면 해당 코드가 있는 위치로 이동하여 노랑색으로 표시가 된다. 그 보다는 첫 번째 코드는 위 그림에서 보듯이 60행 전후에 있기 때문에 그냥 찾는게 더 쉬울 수도 있겠다.

ㅇ 위 그림과 같이, </Group>바로 위에 아래의 코드를 복사하여 붙여 넣는다.

2. 두 번째 코드 추가하기

아래의 그림을 참조하여 두 번째 코드를 복사하여 붙여 넣는다.

ㅇ코드의 위치를 찾는 방법은 위와 같이 검색창을 열고 h3.post-title, .comments h4 { 을 복사하여 붙여 넣고 엔터키를 치면 해당 코드가 있는 위치로 이동하여 노랑색으로 표시된다. 두 번째 코드는 위 그림에서 보듯이 312행 전후에 있으므로 스크롤바로 내려서 찾아도 그리 어렵지 않을 것이다.

ㅇ 위 그림과 같이 font:~ 바로 밑에 아래의 코드를 복사하여 붙여 넣는다.

color: $(Post.title.color);

이제 두 가지 코드를 모두 추가 하였으므로 HTML편집창의 맨 위에 있는 [Save Template] 버튼을 눌러 저장을 한다. 저장을 하는데 한 참(약 1분정도) 걸릴 때도 있다.

저장이 되고 난 후에
=> 블로그 대시보드 > 템플릿 > Customise > Advanced > Post Title로 가면 이 글의 맨 처음에 있는 그림에서와 같이 색상선택 상자가 추가되어 있을 것이다.

※ 블로그의 글제목(포스트 타이틀)은 스태틱 페이지에서는 링크가 걸리게 되므로 설정된 링크 색상으로 표시된다. 위에서 설정한 색상은 해당 글(포스트) 페이지로 들어 갔을 때 적용이 된다.
포스트 타이틀 색상을 링크 색상과 관계없이 늘 일정하게 하는 방법은 아래의 링크 페이지에 설명되어 있다.
구글블로그 사용법: 글제목(포스트 타이틀) 색상을 일정하게 유지하는 방법 >>

※ "저장이 되지 않았다"는 경고 메시지
위에서와 같이 HTML 코드를 추가하고 저장을 한 뒤에 HTML편집창에서 빠져 나오려 하면 "저장이 되지 않았다"는 경고 메시지가 뜨는 경우가 흔히 있다. 실제로 저장이 되지 않은 경우도 있지만 저장이 되었음에도 그런 메시지가 뜨는 경우가 있다.

어느 쪽인지 확인 하는 방법은 HTML편집창이 열려있는 브라우저 창은 닫지 말고 그대로 둔 채로, 새로운 브라우저 창을 열어서 편집내용이 적용이 되었는지를 보면 알 수 있다.
편집내용이 정상적으로 적용되어 작동을 한다면, 변경내용이 저장이 된 것이므로 경고 메시지를 무시하고 HTML편집창에서 빠져 나오면 된다.

※ 참고 : 위 그림에서 보인 코드들

첫 번째 코드 - 추가하기 전

첫 번째 코드 - 추가한 뒤

두 번째 코드 - 추가하기 전

h3.post-title, .comments h4 {
font: $(post.title.font);
margin: .75em 0 0;
}

두 번째 코드 - 추가한 뒤

h3.post-title, .comments h4 {
font: $(post.title.font);
color: $(Post.title.color);
margin: .75em 0 0;
}

방법 2. CSS 코드 추가하는 방법

위와 같이 하면, 템플릿디자이너에서 쉽고 빠르게 글제목의 색상을 바꿀 있다.
또 하나의 방법은 아래와 같은 CSS 코드를 추가하고, 직접 HTML 색상코드를 주어도 된다. (CSS코드를 추가하는 자세한 방법은 링크페이지 참조)

h3.post-title {color: #008800; }

구글블로그 사용법: 목록페이지에서 글제목만 보이게 하는 방법

2014-04-12T11:09:00.003-04:00

차례: 블로그대시보드 > 템플릿 > HTML편집 > 해당코드를 바꾼다

블로그의 글이 긴 경우에는 검색결과 또는 라벨검색 등의 목록 페이지가 길어져서 방문자가 글을 찾기가 어렵게 된다. 목록페이지에서는 글의 제목만 보여지도록 함으로써 그러한 불편을 줄이고 글을 쉽게 찾을 수 있도록 하려면 아래와 같이 HTML코드를 바꾸면 된다.

코드를 바꾸는 방법은 위의 그림을 참조하여 아래와 같이 한다.

=> 블로그대시보드 > 템플릿(Template) > HTML편집(Edit HTML)으로 이동한다
=> HTML코드가 있는 곳에(아무곳이나) 마우스를 한 번 클릭해서 HTML코드 창을 활성화 한다. HTML편집창에 마우스 커스(포인트)가 있도록 한다.

=> [컨트롤 + F]키를 쳐서 검색상자를 열고, 아래의 코드를 복사하여 붙여 넣고 [엔터]키를 친다. 그러면, 해당 코드가 있는 곳으로 이동되고 아래의 그림에서와 같이 노랑색으로 표시된다.

[찾아서 지울 코드]

<b:include data='post' name='post'/>

=> 위에서 찾은 코드를 전부 지우고, 대신에 그 자리에 아래의 코드를 복사하여 붙여 넣는다.

[위의 코드를 지우고 그 자리에(대신에) 아래의 코드를 복사하여 붙여 넣음]

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<div style='padding:6px 0 6px 7px; border-right:1.5px solid #000; border-bottom:1.5px solid #000; margin-bottom:2px; background:#E6E4E4; color:#000000;'>
<data:post.title/></div></a>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

=> 템플릿저장(Save Template)를 눌러 저장을 한다.

글목록 꾸미기

붙여 넣는 코드의 중간 부분에 있는 <div style=" ~~~~>부분은 표시될 제목을 꾸미는 태그이다.
ㅇ padding: 글제목이 표시되는 영역의 안쪽 여백
ㅇ border-right: 글제목이 표시되는 영역의 오른쪽 테두리선
ㅇ border-bottom: 글제목이 표시되는 영역의 아래쪽 테두리선
ㅇ margin-bottom: 글제목이 표시되는 영역 사이이의 여백
ㅇ background: 글제목이 표시되는 영역의 배경색상
ㅇ color: 글제목의 글자 색상

구글블로그 사용법: 글제목(포스트 타이틀) 색상을 일정하게 유지하는 방법

2014-04-04T03:59:00.000-04:00

차례 : 블로그 대시보드 > 템플릿 > HTML편집 > 코드 추가

블로그의 글 제목은 목록페이지에서는 링크가 걸리기 때문에 링크 색상과 같게 된다.
글제목의 색상을 링크의 색상과 상관없이 일정하게 고정시키려면 아래의 코드를 추가하면 된다.

=> 블로그대시보드 > 템플릿(Template) >HTML편집(Edit HTML)을 눌러 HTML편집창을 연다

=> 아래의 그림과 같이, [컨트롤 + F ]키를 눌러 검색창을 열고
h3.post-title 을 복사하여 붙여 넣고 [엔터]키를 누른다. 그러면 포스트 타이틀 코드(h3.post-title)가 있는 위치로 이동되고 노랑색으로 표시된다.

=> 그림과 같이

h3.post-title {..........
............................
............................
}

코드 바로 밑에

아래의 코드를 복사하여 붙여 넣는다.
이 때 확인할 것은, 아래 그림에서 황토색으로 표시한 세 부분이 같아야 한다.
만약, 같지 않으면 황토색으로 표시한 것 가운데 제일 위(첫 번째)에 있는 것과 같게 수정을 한다.

h3.post-title a { color:$(post.title.color); }
h3.post-title a:hover { color:$(post.title.color); }

HTML편집창 맨 위에 있는[저장 Save template]버튼을 눌러 저장을 한다.

구글블로그 사용법: 블로그 레이아웃(짜임새) 및 너비 설정하는 방법

2014-04-01T07:00:00.000-04:00

차례 : 블로그대시보드 > 사용자정의(Customise) > 레이아웃(Layout) > 너비설정(Adjust width)

구글 블로그의 전체적인 틀과 헤드 메인 사이드바 풋터 등의 짜임새를 설정하고 너비를 조절하려면 템플릿디자이너(Template Ddsigner) 도구를 쓰면 아주 쉽고 편하게 할 수 있다.

왼쪽 그림과 같이,
=> 블로그 대시보드 > 템플릿(Template) > 사용자정의(Customise) 버튼을 눌러 블로그-템플릿-디자이너(Blogger Template Designer) 도구 창을 연다.

짜임새 설정하기
=> 아래 그림과 같이, 왼쪽의 메뉴에서 레이아웃(Layout)을 누른다.
=> 블로그의 사이드바 형태(Body layout)와 풋터 형태(Footer layout)를 선택(클릭)한다

너비 설정하기
레이아웃을 이용하여 블로그의 전체적인 짜임새를 설정하였으면,
=> "레이아웃(Layout)" 바로 위에 있는 "너비설정(Adjust Width)"을 누른다

아래 그림의 아랫쪽에서 보는 것처럼, 위에서 설정한 레이아웃에 따른 항목들이 표시된다. 예컨데, 사이드바를 좌우 두 개로 설정하였으면 왼쪽 사이드바(Left sidebar)와 오른쪽 사이드바(Right sidebar) 항목도 표시가 된다.

=> 각 항목별로 너비를 설정한다. 막대표시를 마우스로 좌우로 끌어 움직이면서 조절해도 되고, 입력란에 숫자를 직접입력해도 된다.

항목들을 조절하면, 그 즉시 아랫쪽에 있는 미리보기 창에 반영이 되므로, 미리보기를 보면서 잘 어울리도록 조절하면 된다. 다만, 다이나믹뷰 템플릿의 경우에는 미리보기 반영이 아주 느리고 어떤 때는 반영이 되지 않을 때도 있다.

구글블로그 사용법: 블로그 이름 등의 링크 점선테두리 안보이게 하는 방법

2014-03-26T07:00:00.000-04:00

차례 : 블로그 대시보드 > 템플릿 > HTML편집 > 코드 추가

구글 블로그의 블로그 이름 등과 같이 링크가 걸린 곳을 클릭하면 링크 주위에 점선 테두리가 생긴다. 이 점선 테두리를 보이지 않게 하려면, 블로그 HTML에 아래의 코드를 추가하면 된다.

1. HTML편집창으로 가기
=> 블로그 대시보드 > 템플릿(Template) > HTML편집(Edit HTML)
※ HTML편집창으로 가는 자세한 방법은 다음 페이지를 참조: 구글블로그 사용법: CSS코드 추가 변경하는 방법 2가지

2. 코드 추가하기
아래 그림과 같은 HTML 편집창이 열리면,
=> [컨트롤 + F]키를 쳐서 검색(Search)창을 열고

=> 아래의 코드를 복사하여 붙여 넣은 다음 [엔터]키를 친다. 그러면 그림에서 노랑색으로 표시된 " a: link { " 부분으로 이동된다.

a: link {

=> 그림과 같이, 아래의 코드를 복사하여 붙여 넣고, 저장(Save template)를 누른다.
아래 그림은 "outline: none"을 추가한 뒤의 모습이다.

[추가할 코드]

outline: none;

구글블로그 사용법: 블로그 아래에 있는 구독링크 Subscribe to: Posts (Atom) 없애는 방법

2014-03-25T07:00:00.000-04:00

차례 : 블로그 > 템플릿 > HTML편집 > 피드링크 표시 코드 삭제

구글 블로그 아래에 표시되는 피드링크(Subscribe to: Posts (Atom))를 없애려면 블로그 HTML에서 피드링크표시 코드를 지우면 된다.

=> 블로그 대시보드 > 템플릿(Template) > HTML편집(Edit HTML)으로 이동한다.

[HTML 편집창으로 가는 경로]

아래 그림과 같은 HTML편집창이 열리면,

=> [컨트롤 + F]키를 쳐서 검색(Search)창을 연다
=> 검색창에 아래의 코드를 복사하여 붙여 넣고 [엔터]키를 치면, 그림에서 보는 것처럼, 해당코드 부분으로 이동하여 노랑색으로 표시된다

=> 해당 코드 부분을 삭제한 다음 저장(Save template)을 한다

[찾아서 삭제할 코드]

<b:include data="feedLinks" name="feedLinksBody">

구글블로그 사용법: CSS코드 추가 변경하는 방법 2가지

2014-02-15T04:15:00.003-05:00

사용법과 팁: 구글블로그, 텀블러, 크롬, 파이어폭스, 애드센스, HTML...

구글 블로그에서 제공되는 템플릿은 여러가지가 있다. 어느 것을 사용하든, 블로그를 꾸미다 보면 CSS코드를 추가하거나 변경하게 된다.

구글 블로그에서 CSS코드를 추가하거나 변경하는 방법은 2가지가 있다. 하나는 템플릿디자이너(Template Designer)에서 하는 방법이고, 다른 하나는 HTML편집창에서 직접하는 방법이다. 첫 번째 방법이 쉽고 편하다.

템플릿디자이너와 HTML편집창으로 가는 경로는 아래 그림과 같다.
=> 블로그 대시보드 > 템플릿(Template)

1. 템플릿 디자이너에서 CSS코드 추가하기

=> 그림과 같이 고급설정(Advanced) > CSS추가(Add CSS) 를 눌러 입력창을 연다
=> 입력창에 CSS코드를 붙여 넣는다.
그러면, 적용된 모습을 아래쪽의 미리보기 창에서 바로 볼 수 있다. 다이나믹 뷰 템플릿에서는 미리보기가 한 참 시간이 걸린다.

CSS코드를 추가할 때, 나중에 알아보기 쉽도록 하기 위해 주석을 붙이는 것이 일반적이다. 주석은 혼동을 일으키는 등과 같은 문제가 없다면, 굳이 붙이지 않아도 된다.

위의 그림에서 보이는 CSS코드를 예로 들면,

/* Hide Date and Author
------------------------------- */
.publish-info { display: none!important; }

[주석 부분 : 이 주석 부분은 굳이 붙이지 않아도 된다]

/* Hide Date and Author
------------------------------- */

[코드 부분]

.publish-info { display: none!important; }

2. HTML편집창에서 직접 CSS코드 추가하기

위의 그림과 같이 HTML편집창이 열리면,
=> [컨트롤 + F]키를 쳐서 그림에서 연두색으로 표시한 것과 같은 검색창을 연다

=> 검색창에 ]]></b:skin> 을 복사하여 붙여 넣고 엔터키를 쳐서 그림과 같이 ]]></b:skin> 이 있는 위치로 이동한다
=> 추가할 CSS코드를
]]></b:skin> 바로 위에 붙여 넣고 저장(Save template)을 한다

그러면, 아래와 같은 모양이 된다.

주석부분
추가한 CSS코드
]]></b:skin>

주석부분은 혼동을 피하기 위한 것이므로, 혼동의 우려가 없다면 굳이 붙이지 않아도 된다.

※ 위 그림(HTML편집창)의 버튼 기능
[Back] 현재의 HTML편집창에서 빠져 나간다
[Save template] 변경한 내용을 저장한다
[Jump to widget] 특정한 위젯코드가 있는 위치로 이동한다
[Eidt template] HTML 편집모드로 전환한다
[Preview template] 추가 또는 변경된 내용을 적용하여 미리보기 한다
[Revert changes] 추가 또는 변경된 내용을 이전의 상태로 되돌린다

구글블로그 사용법: 템플릿 디자이너에 블로그 디스크립션(설명) 폰트(글자 종류와 크기) 선택기능 넣기

2014-02-15T02:35:00.003-05:00

사용법과 팁: 구글블로그, 텀블러, 크롬, 파이어폭스, 애드센스, HTML...

구글 블로그는 템플릿디자이너(Template Designer)에서 글꼴, 색상 등을 자유로이 꾸밀 수 있다. 하지만, 블로그 디스크립션의 글자 색상을 바꾸는 도구는 나오지만, 폰트의 글꼴과 글자 크기를 바꾸는 기능은 나오지 않는다.

블로그 HTML에 코드를 추가함으로써, 아래 그림과 같이 폰트의 글꼴과 크기를 바꾸는 도구가 템플릿 디자이너에 표시되도록 할 수 있다. 아래의 두 단계를 차례로 하면 된다.

1. 블로그 디스크립션의 폰트를 조절할 수 있는 코드 추가

=> 블로그 대시보드 > 템플릿(Template) > HTML편집(Eidt HTML)으로 이동한다.
=> [컨트롤 + F]키로 검색창을 연 다음
<Group description="Blog Description" selector=".header .description"> 을 복사하여 붙여 넣고 엔터키를 쳐서 아래 그림과 같은 위치로 이동한다.

=> 원 상태의 코드를 확인하고, 추가할 코드를 복사하여 붙여 넣는다.
아래 그림에서와 같이 추가할 코드를
<Group description="Blog Description" selector=".header .description">
의 바로 아래에 붙여 넣는다.

[코드를 추가하기 전과 후의 모양]

[원 상태의 코드 모양]

[추가할 코드 모양]

[추가한 뒤의 코드 모양]

2. 코드 수정

=> 현재 작업중인 HTML 편집창에서 [컨트롤 +F] 키를 쳐서 검색창을 열고
.Header .description { 을 복사하여 붙여 넣고 엔터키를 쳐서 아래 그림과 같은 위치로 이동한다.

=> 원 상태의 코드를 확인한 다음, 원상태의 코드를 삭제하고
=> 변경할 코드를 그 자리에 붙여 넣는다. 즉,
font-size: $(description.text.size); 를 font: $(description.font); 로 바꾼다.

[코드를 변경하기 전과 후의 모양]

[원 상태의 코드 모양]

.Header .description {
font-size: $(description.text.size);
color: $(description.text.color);
}

[변경할 코드 모양]

font: $(description.font);

[코드를 변경한 뒤의 코드 모양]

.Header .description {
font: $(description.font);
color: $(description.text.color);
}

위의 두 가지 작업을 마쳤으면, 템플릿저장(Save template)을 눌러 작업내용을 저장한다. 어떤 때는 한 참 걸리기도 하므로, 저장이 될 때까지 기다린다.

현재 창의 위쪽에 있는 [뒤로(Back)] 버턴을 눌러 템플릿(Template) 창으로 빠져나온 다음, 사용자정의(Customise)를 눌러 템플릿디자이너로 들어 간다.

템플릿 디자이너의
왼쪽에 있는 메뉴 막대의 가장 아래에 있는 고급설정(Advanced) > 블로그 디스크립션(Blog description)으로 들어가면, 이 페이지의 맨 위에 있는 그림처럼, 오른쪽에 폰트의 글꼴과 크기를 조절할 수 있는 도구상자가 추가되어 있을 것이다.

이 상태에서, 글꼴과 크기를 변경하여 보면, 템플릿디자이너 아래쪽의 미리보기 창에서 적용되는 것을 볼 수 있다.

구글블로그 사용법: 사이드바의 안팎 마진(여백) 조절하는 방법

2014-02-11T02:10:00.001-05:00

사용법과 팁: 구글블로그, 텀블러, 크롬, 파이어폭스, 애드센스, HTML...

블로그의 메인 영역과 사이드바 영역간의 여백(마진)은 아래의 코드를 추가하여 조절할 수 있습니다.

1. 오른쪽 사이드바

/* Right Sidebar
---------------------------------------- */
. column-right-inner{ padding: 3px !important;}
#sidebar-right-1{ margin: 1px 2px 3px 4px !important;}

2. 왼쪽 사이드바

/* Left Sidebar
---------------------------------------- */
. column-left-inner{ padding: 3px !important;}
#sidebar-left-1{ margin: 1px 2px 3px 4px !important;}

※ 위의 코드들은 구글 블로그 템플릿 가운데 심플-템플릿에서만 작동합니다.

※ 수치는 픽셀(px), 포인트(pt), 퍼센트(%) 또는 em으로 주면 됩니다.
수치는 -5px 과 같이 음수(마이너스)로 지정을 해도 됩니다.

※ 수치 단위에 대한 자세한 내용은 여기를 참조하세요 >>
※ 코드를 추가하는 방법은 여기를 참조하세요 >>

구글블로그 사용법: 블로그 헤더 이름옆에 그림, 가젯, 위젯, 애드센스, 광고 ... 넣기

2013-12-22T09:56:00.001-05:00

구글 블로그의 블로그 이름(이미지) 옆에 애드센스 광고를 넣거나, 트위트나 페이스북 같은 소셜버튼을 달아 놓은 경우를 볼 수 있다.

사용법 어찌

여기에 그림, 가젯, 위젯, 애드센스..... 등 원하는 것을 넣음

블로그 헤드 공간을 블로그 이름 공간과 가젯 공간으로 나누어, 블로그 이름 옆에 가젯을 추가하려면 아래와 같이 하면 된다.

1. 헤더에 공간 나누기

=> 블로그 대시보드 > 템플릿(Template) > HTML편집(Edit HTML)을 눌러 위의 그림과 같은 HTML 편집창을 연다.
=> 위젯 바로가기(Jump to widget) > 헤더1(Header1)을 선택하여, 아래와 같은 '헤드(Header1) 코드부분으로 이동한다.

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='자신의 블로그 이름 또는 이미지' type='Header'/>...</b:widget>
</b:section>

=> 위의 코드 바로 아래에, 아래의 코드를 붙여 넣는다.

<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>

=> 그러면, 아래와 같이 된다.

=> 저장하기(Save Template)를 눌러 추가한 내용을 저장한다.

2. 블로그 이름(또는 이미지) 공간과 가젯 공간 속성 설정코드 넣기

#header, body#layout #header {width: 30%; display: inline-block; float: left;}
#header-right, body#layout #header-right {width: 60%; display: inline-block; float: right; padding: 3px 5px 5px 3px;}
#header-right .widget {margin: 0;}

CSS 코드를 넣는 방법은 2가지가 있다.

1) HTML 편집창에서 직접 넣기
현재 작업중인 HTML 편집창에서, [컨트롤 + F] 키를 쳐서 '찾기' 입력란을 열고,
" ]]></b:skin> "을 찾은 다음, 아래와 같이, 바로 그 위에 코드를 붙여 넣어면 된다.

여기에 위의 코드
]]></b:skin>

=> 저장하기(Save Template)를 눌러 저장한다.

※ 이 방법으로 하면, 템플릿 저장이 잘 안되거나, 저장하는데 시간이 한 참 걸리기도 하므로, 가급적이면, 아래의 두 번째 방법으로 하는 것이 편하다.

2) 템플릿 디자이너에서 넣기
현재 작업중인 HTML 편집창의 저장(Save Template)을 눌러 위 "1. 헤드 공간 나누기"에서 추가한 내용을 저장하고
=> 뒤로가기(Back)를 눌러 이전단계로 빠져 나온다

=> 템플릿(Template) > 사용자정의(Customise)를 눌러 아래와 같은 블로그 템플릿 디자이너(Blogger Template Designer)를 연다

=> 왼쪽 항목에서 고급(Advance) > 세부메뉴의 맨 아래에 있는 CSS 추가(Add CSS)를 눌러 입력창을 연다
=> 입력창에 위의 코드를 붙여 넣고, 블로그에 적용(Apply to Blog)를 눌러 저장한다.

※ 위의 코드에서, 각 공간의 너비(width)와 안쪽 여백(padding), 바깥 여백 (margin)을 알맞게 조정하여 맞추면 된다.

3. 가젯 넣기
블로그 대시보드 > 짜임새(Layout) >를 눌러 레이아웃 페이지로 가보면,

=> 옆의 그림과 같이 블로그 이름(Header) 가젯 아래에 새로운 가젯을 추가할 수 있는 "가젯 추가(Add a Gadget)" 버튼이 추가 되어 있다.

=> 이제는 다른 가젯을 추가하듯이 원하는 가젯을 추가하면 된다.

※ 다른 기능도 마찬가지지만, 이 기능도 다이나믹 템플릿(Dynamic Template)에서는 적용이 되지 않는다.

구글블로그 사용법: 링크 새 창(탭)에 열기

2013-11-28T21:04:00.002-05:00

구글블로그의 "링크 리스트(Link List)" 가젯으로 링크를 달았을 때, 링크를 클릭하면 현재 보고 있는 창에 링크 페이지가 열린다. 그렇게 되면, 방문자는 뜻하지 않게 현재 보고 있는 페이지에서 벗어나게 되는 불편을 겪게 된다.

링크 페이지를 새로운 창(탭)에 열리도록 하는 방법은 해당 링크 리스트 가젯에 target='_blank' 속성을 추가해 주면 된다.

=> 아래 그림과 같이 템플릿 HTML 편집창을 연다.

=> HTML 편집창의 [위젯 바로가기: Jump to widget]에서 링크리스트(LinkList)를 클릭하여, 링크리스트 위젯부분으로 간다.
링크리스트 가젯을 여러개 추가하였다면, LinkList1, LinkList2, ....와 같이 일련번호가 붙여 진다.
링크리스트 가젯에 이름을 붙여 주었다면, 아래 그림에서와 같이 title="소셜 팔로우...."와 같이 이름이 표시된다.

=> 두 번째 그림에서 주황색으로 표시한 부분에서 보는 것 처럼 아래의 태그를 추가해 준다.

target='_blank'

원래의 모습

태그를 추가한 뒤의 모습

단, 다이나믹 뷰는 태그나 스크립트를 변경하거나 추가하여도 적용되지 않으므로, 위와 같이 태그를 추가하여도 다이나믹 뷰에서는 작동하지 않는다.

아래는 블로그 전체의 링크를 기본적으로 새 창(탭)에서 열리게 하는 태그이다.

아래 처럼 하면, 링크리스트의 링크뿐만 아니라, 라벨, 아카이브, 페이지 등 모든 링크가 새 창(탭)에서 열린다.
이 경우에는, 다이나믹 뷰에서도 적용이 된다.

방법은 아래의 태그를 복사하여, 템플릿 HTML에 붙여 넣으면 된다.
위치는, 아래 그림과 같이, <head> 영역의 <b:skin> 바로 위에 붙여 넣으면 된다.

구글블로그 사용법: 템플릿(스킨) 백업과 복구(BackUp / Restore) 하기

2013-11-05T06:25:00.000-05:00

블로그나 홈페이지 템플릿(또는 스킨)에 위젯이나 HTML코드를 변경하거나 추가하기 전에 백업을 해 두면 마음이 편하다. 예상치 못한 오류가 발생했을 때 이전 상태로 복구할 수 있기 때문이다.

구글블로그는 버튼 한번으로 템플릿을 백업하고 복구할 수 있도록 되어 있다.
아래의 그림만 보면 별다른 설명 없이도 금방 알 수 있을 만큼 간단하다.

백업하기

==> 블로그 대시보드 > 템플릿(Template) 창으로 간다.
==> 창 오른쪽위에 [백업/복구 Backup/Restore] 버턴을 누르면, 아래의 첫번째 그림에서 주황색으로 표시된 것과 같은 "백업/복구"창이 뜬다.

==> 백업/복구창에서 위쪽에 있는 [템플릿 코드를 모두 내려받기 Download full template]를 클릭하면 .xml 형식의 파일이 내려받아 진다.

==> 특별한 설정이 없다면, 백업파일은 두 번째 그림과 같이 "다운로드 Download" 폴더에 저장되고, 파일은 "template-1234567.xml"모양으로 되어 있다.

==> 백업파일의 뒷 부분에 백업한 날짜를 붙여 놓으면 나중에 최근의 백업파일을 찾기가 편하다. 예컨데 "template-12345789-20131105.xml" 과 같이 해두면 되겠다. 나중에 복구할 때 날짜가 추가된 상태로 그대로 복구하면 된다.

복구하기

==> 백업할 때와 같은 방법으로 백업/복구창을 연다.
==> 창의 아래쪽에 있는 [파일찾기 Browse...]를 눌러 백업해둔 파일을 선택한다.
==> 파일이 선택되면 바로 아래의 [올리기 Upload]를 누르면 백업해둔 파일이 올려지고, 현재의 템플릿을 덮어 써서 이전 상태로 복구된다.

HTML A tag: 위로 / 아래로 가기 버튼 달기 - 가장 간단한 방법

2013-10-28T00:01:00.000-04:00

블로그의 위아래 길이가 긴 때에는 마우스바퀴(휠)를 움직이거나, 오르내림막대(스크롤바)를 끌면 되지만, 한 번에 위로/ 아래로 갈 수 있는 단추가 있으면 좀 더 편한 것 같다.

여기서는 가장 단순하지만, 편한 방법을 설명한다.
작동 방식도 간단하지만,단추를 다는 방법도 간단하니 누구나 쉽게 할 수 있을 것이다.
아래의 태그를 적당한 위치에 넣어주면 된다.

구글블로그에서는
=> 블로그 대시보드 > 레이아웃(Layout) > 가젯넣기(Add Gadget) > HTML/Java Script 를 선택> 아래의 코드를 복사하여 넣고 > 저장하면 된다.

[아래의 코드를 넣은 뒤의 단추 모습]

위로/ 아래로 가기 태그

<a style="display:scroll;position:fixed;bottom:30px;right:3px;" rel="nofollow"
href="#" title="Back to Top" style="font-size:2.0em">위로↑</a>
<br />
<a style="display:scroll;position:fixed;bottom:10px;right:3px;" rel="nofollow"
href="#scrollbottom" title="Go to Bottom" style="font-size:2.0em">아래↓</a>

태그 설명

<a style="display:scroll;position:fixed;bottom:30px;right:3px;" rel="nofollow"
href="#" title="Back to Top" style="font-size:2em">위로↑</a>

속성 지정

bottom: 30px <= 블로그 창의 맨 아래에서 위쪽으로 30px
right: 3px <= 블로그 창의 맨 오른쪽에서 왼쪽으로 3px. 위치는 블로그에 잘 어울리고 방문자를 성가시게 하지 않는 곳에 정해 주면 된다.

href="#" <= 이동할 지점을 말하며, "#"으로 지정하면 보통의 경우 페이지의 맨위로 이동한다. 웬만한 템플릿에서는 잘 작동하는 것 같다. 아래로 가기에서는 위치를 지정해 주어야하는대 아래에서 설명한다.

font-size:2.0em <= [위로↑]의 글자크기를 본문 글자크기의 2배로 지정한 것인데, 템플릿에 따라 적용이 안되는 경우도 있다.

아래로 가기

'아래로 가기'의 경우도 기본적으로는 위로가기와 같지만, '아래로 갈 지점'을 정해 주어야 한다. 아래와 같은 방법으로 하면 된다.

=> 블로그 대시보드 > 템플릿 > HTML편집 창으로 간다

=> [컨트롤 + F ]키로 찾기상자를 열어 </body> 위치로 간다.
=> </body>바로 위에 <div id="scrollbottom"></div> 등과 같이 아래로 갈 위치를 지정해주고 템플릿을 저장한다.

예)
<div id="scrollbottom"></div>
</body>

※ <div id="scrollbottom"></div>에서 따옴표 안에 들어 있는 scrollbottom 부분은 규칙이 있는게 아니고 자기가 알아볼 수 있는 이름을 붙이면 된다.

정리하면 아래와 같이 되는 것이고, [아래↓]를 누르면 <div id="scrollbottom"></div>이 있는 곳까지 아래로 내려가는 뜻이다.

<div id="scrollbottom"></div>
</body>

<a style="display:scroll;position:fixed;bottom:10px;right:3px;" rel="nofollow"
href="#scrollbottom" title="Go to Bottom" style="font-size:2.0em">아래↓</a>

[아래↓]를 누르면 <div id="scrollbottom"></div>이 있는 곳까지 아래로 내려가는 뜻이다.

그림(이미지) 버튼 넣기

위의 예에서는 [ 위로↑ ]와 같이 그냥 글자와 기호를 넣었다. 이곳에 그림을 넣고 싶으면,
[ 위로↑ ]자리에 이미지 주소를 넣어 주면 된다.

아래의 예에서 그림주소URL 부분을 실제 이미지 주소로 바꾸어 주면 된다.

예)
<a style="display:scroll;position:fixed;bottom:30px;right:3px;" rel="nofollow"
href="#" title="Back to Top" style="font-size:2em">위로↑</a>

<a style="display:scroll;position:fixed;bottom:30px;right:3px;" rel="nofollow"
href="#" title="Back to Top" style="font-size:2em"><img src="그림주소URL" border="0"/></a>

>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...

구글블로그 사용법: 네비게이션바(Navigation bar: Navbar) 안보이게 하는 방법 2가지

2013-10-27T00:05:00.000-04:00

구글 블로그의 기본 템플릿(스킨)에는 블로그 제일 위에 네비게이션바(Navigation bar)라는 도구상자가 있다.

위 그림에서 보는 것처럼 유용한 기능들이 잘 담겨 있다. 이를 순서대로 살펴보면,
[블로그로 가기] [검색창] [구글+에 글 공유] [트위트나 페이이스북에 글 공유] [이웃 블로그 가기] [새글 쓰기] [ 템플릿 디자인으로 가기] [로그 아웃] 등이다.

좋은 기능에도 불구하고 템플릿에 따라서는 어울리지 않는 단점으로 인해 나타나지 않게 하고 싶을 때가 있는 것 같다. 네비게이션바를 나타나지 않게 하는 방법은 2가지가 있는데, 하나씩 살펴보자.

방법1. 블로그의 기본 기능으로 네비게이션 끄기(Off)

=> 블로그 대시보드 > 레이아웃(Layout) > 오른쪽 위에 있는 [Navbar]를 누르면, 아래그림에서와 같은 네비게이션 설정창이 뜬다.

=> 창의 맨아래에 있는 [Off]를 선택하고 저장(Save)를 누른다.

=> 이 기능으로 네비게이션 바를 간단히 끄고 켤 수가 있다. 단점은 템플릿(스킨)에 따라서는 제대로 작동하지 않는 경우가 있고, 어떤 경우는 네비게이션이 작동은 하지 않지만 그 자리가 흰색의 공백으로 보이기도 한다.

=> 이 기능으로 네비게이션바가 깔끔하게 숨겨지면 좋지만, 만약에 그렇지 않으면 아래 2.번에서 설명하는 방법으로 하면 된다.

방법2. 템플릿에 CSS코드를 넣어서 네비게이션바 안보이게 하기

=> 블로그 대시보드 > 템플릿(Template) > 사용자설정(Customise)을 눌러 아래 그림과 같이 블로그 템플릿 디자이너 창으로 간다.

=> 왼쪽 메뉴바의 고급설정(Advanced) > CSS추가(Add CSS)를 눌러 아래 그림의 오른쪽 부분과 같은 CSS코드 입력창을 연다.

=> 그림 아래에 있는 CSS코드를 아래 그림과 같이 붙여 넣는다.
스크롤바를 당겨서, 맨 아래쪽에 붙여 넣고, 창 오른쪽 위에 있는 적용하기(Add to Blogger)를 눌러 저장을 한다. 이제 블로그로 가서 확인을 해보자.

입력란에는 이전에 넣은 다른 CSS코드가 모두 보일 것이다. 그러한 CSS코드들이 손상되지 않도록 주의하자.

블로그 네비게이션바를 나타나지 않게 하는 CSS코드

/* Nav Bar
------------------------------------------------ */
#navbar { height: 0px; visibility: hidden; display: none;}
#navbar-iframe { height: 0px; visibility: hidden; display: none;}

위의 코드를 설명하면 다음과 같다.
/* Nav Bar
------------------------------------------------ */
#navbar { height: 0px; visibility: hidden; display: none;} <= 네비게이션바(Navbar)의 높이를 0px, 보여줄지 여부는 숨김, 화면에 보일지는 아니오

#navbar-iframe { height: 0px; visibility: hidden; display: none;} <= 네비게인션을 나타나게 하는 영역의 높이는 0px, 보여줄지 여부는 숨김, 화면에 표시할지 여부는 아니오

다시 내비게이션을 보이게 하려면

언제든 내비게이션 바를 보이게 할 수 있다.

첫번째 방법으로 보이지 않게 하였으면, 설정할 때와 마찬가지 방법으로 [Off]를 풀어주면 된다.
두번째 방법으로 보이지 않게 하였으면, 설정할 때와 마찬가지 방법으로 추가한 CSS코드를 지워주면 된다.

구글블로그 사용법: 상태표시상자 (Status Message Bar, 검색결과 메지시) 꾸미기

2013-10-26T02:46:00.000-04:00

상태표시상자는 아예 성가신 것만은 아니다. 방문자가 검색을 하거나 라벨(태그)를 클릭하였을 때 지금 있는 위치가 어디인지 등을 알려주기 때문에 편리함도 있다.

지난 번에 구글 블로그 상태표시상자(Status Message Bar)를 나타나지 않게 하는 방법을 설명했고, 이어서 이번에는 꾸미는 방법을 설명한다.(참고: 상태표시상자 보이지 않게 하기)

아래와 같이 상태표시(Status Message)에 대한 CSS를 작성하여 추가해 주면된다.
아래의 코드는 Blog and Web에서 예로 들어 설명한 것을 가져왔다.

코드는 HTML의 스킨 설정영역의 맨아래 부분이다. 즉, HTML편집창에서 ]]></b:skin> 코드 바로 위에 넣으면 된다.

추가할 CSS 코드
]]></b:skin>

코드를 넣는 방법은 템플릿디자이너나 HTML편집창을 이용하면 되는데, 템플릿디자이너를 이용하여 코드를 넣는 방법을 이 글 아래부분에서 설명한다.

[아래 코드를 입력하기 전과 후의 모습]

CSS 코 드

#main .status-msg-wrap {
width:90%;
padding:5px;
}
#main .status-msg-body {
font-size:80%;
text-align:left;
padding:5px 5px 5px 30px;
width:auto;
}
#main .status-msg-border {
border:1px solid #a19a36;
opacity:1;
}
#main .status-msg-bg {
background: #FFF9B3 url(배경이미지 URL) center left no-repeat; opacity:1;
}

CSS 코드 설명
아래 설명을 참조하여, 코드에서 숫자나 색상코드를 수정하여 꾸미면 된다.

#main .status-msg-wrap { <= 상태표시상자의 바깥 테두리
width:90%; <= 블로그 글이 표시되는 메인(main) 너비의 90%
padding:5px; <= 테두리의 안쪽에 두는 여백
}
#main .status-msg-body { <= 상태표시 문구가 표시되는 영역이며, 위의 바깥 테두리 안에 있음
font-size:80%; <= 글자 크기는 본문 글자 크기의 80%
text-align:left; <= 표시 문구를 왼쪽으로 정렬
padding:5px 5px 5px 30px; <= 안쪽 여백으로 각각 위쪽 오른쪽 아래쪽 왼쪽
width:auto; <= 너비는 바깥 테두리에 맞춰 자동으로 함
}
#main .status-msg-border { <= 테두리선
border:1px solid #a19a36; <= 선: 굵기 1px, 선종류는 직선, 색상은 #a19a36
opacity:1; <= 투명도
}
#main .status-msg-bg { <=배경
background: #FFF9B3 url(배경이미지 URL) center left no-repeat; opacity:1; <= 색상은 #fff9b3 (이미지를 넣으려면 이미지 주소를 넣음. 이미지를 넣지 않으려면 url 부터 opacity:1; 까지를 지우고, 색상코드 #XXXXXX뒤에 세미콜론(;)을 붙여준다 즉 #XXXXXX; )
}

코드 넣기 : 템플릿디자이너를 사용

블로그의 대시보드 > 템플릿 > Customise 로 가면 아래 그림과 같은 '블로거 템플릿 디자이너'창이 열린다.

=>왼쪽 항목의 고급설정(Advanced) > CSS추가(Add CSS)로 가면 아래 그림과 같이 오른쪽에 CSS코드를 입력하는 창이 있다.

=> 그림에서 처름 위의 코드를 붙여넣고, 화면 오른쪽 위에 있는 [블로그에 적용 Apply to Blog]를 누르면 된다.

이제 코드를 넣었으니 블로그로 가서, 라벨(태그)을 클릭하거나 검색을 해보면 넣은 CSS코드가 적용되어 표시될 것이다.

참고: 템플릿디자이너 및 HTML편집창 사용법은 다음 글을 참고하면 된다. 블로그 템플릿(스킨 또는 테마) 수정 및 HTML 편집하기

구글블로그 사용법: 템플릿(스킨 또는 테마) 수정 및 HTML 편집하기

2013-10-25T22:02:00.000-04:00

블로그의 짜임이나 색상 또는 기능 등을 설정하거나 변경하려면 HTML을 편집해야 한다. 구글 블로그는 '블로그 템플릿 디자이너 (Blogger Template Designer)'가 있어서 초보자들도 쉽게 디자인을 수정하거나 기능을 넣을 수 있다. 또한 HTML을 직접 편집할 수 있는 'HTML편집창'도 있으므로 초보자 뿐만아니라 HTML에 능숙한 블로거에게도 편리하다.

이를 하나씩 살펴보자.
우선 블로그의 대시보드 > 템플릿(Template)으로 들어간다.
그러면 현재 적용되어 있는 템플릿의 축약된 모습이 보이고, 그 아래에 [사용자설정 Customise] 버튼과 'HTML편집 Edit HTML' 버튼이 보인다.

들어가기

사용자설정(Customise)은 마우스 선택만으로 디자인을 변경할 수 있도록 한 것으로 초보자에게는 아주 편리하고 강력한 기능이다.

HTML편집(Edit HTML)은 HTML을 어느 정도 다룰 수 있는 사용자에게 편리한 방법일 것이다.

블로거 템플릿 디자이너 (Blogger Template Designer)

위의 그림에서 '사용자설정:Customise'를 선택하여 들어가면 아래 그림과 같은 창이 있다. 윗쪽은 분야별로 설정을 하는 기능부분이고 아랫쪽은 변경된 사항을 즉시 반영하여 미리 볼수 있는 창이다.

변경 사항 적용은 변경하는 즉시 자동으로 적용되므로 별도로 버튼을 누를 필요가 없다.
오른쪽 위에 있는 [블로그에 적용 Apply to Blog] 버튼을 누르지 않으면 실제 블로그에는 전혀 영향이 없기 때문에, 마음 놓고 원하는 대로 변경해 보면 된다.

또한, 각 항목을 변경해보고 원래대로 되돌리고 싶으면, '원래대로 되돌리기 Use Default'를 클릭하면 된다.

상세 기능 살펴보면 아래와 같다.

1. 템플릿(Templates)
윗쪽의 오른쪽에는 여러가지 템플릿들이 있다. 이들 가운데 마음에 드는 것을 마우스로 클릭하여 적용해 보고, 사용할 템플릿을 결정한다.

2. 배경(Background)
배경으로 그림(이미지)를 넣을 수도 있고 색상을 넣을 수도 있다.

배경그림(Background Image)를 클릭하면, 여러가지 그림들을 분류화 시켜 놓았는데, 이들 가운데 원하는 것을 선택하면된다.

색상을 넣고 싶으면, 옆에 있는 색상 버튼으로 색상을 변경할 수 있다.

3. 너비 설정(Adjust widths)
블로그의 전체 너비와 사이드바의 너비를 설정할 수 있다.

마우스로 끌어 맞추어도 되고, 오른쪽에 있는 수치 상자에 직접 너비를 입력해도 된다.
윗쪽은 블로그 전체 너비이고, 아랫쪽은 사이드바 너비이므로, 본문의 너비는 윗쪽의 전체너비에서 아랫쪽의 사이드바 너비를 빼면 된다.

4. 레이아웃 (Layout)
전체적인 짜임새를 설정한다.
사이드바를 어느쪽에 둘 것인지, 몇 개를 둘 것인지..... 블로그 발(foot)는 짜임새를 어떻게 할 것인지를 선택한다.

몸통 짜임새(Body Layout)에서 블로그의 몸통부분의 짜임새를 선택하고,
몸통 아래에 붙는 발(foot)의 짜임새를 선택하면 된다.

5. 고급설정(Advanced) : 아래 그림 참고
이 곳에서는 배경, 글씨의 크기와 색상, 링크 색상, 제목의 크기와 색상..... 등등을 상세하게 설정할 수 있다.

또, 맨 아래에 있는 'CSS 추가하기'를 사용하면 아래 그림과 같이 HTML편집창을 사용하지 않고도 CSS코드를 제자리에 넣을 수 있다.

HTML편집창(Edit HTML)

HTML편집창은 어느 정도 HTML에 익숙한 블로거들에게는 편리한 도구일 것이므로, 자세한 설명은 하지 않기로 한다. 모양새와 기능들은 아래 그림에서 보는 것과 같다.

구글블로그 사용법: 상태표시상자(Status Message Bar) 안보이게 하기

2013-10-24T13:04:00.000-04:00

구글 블로그에는 검색결과나 라벨에 의한 목록 등을 보여 주는 페이지에는 아래 [그림1]과 같은 상태표시상자가 나타난다.
기능적으로는 좋지만 보기에는 그리 어울리지 않기 때문에 블로거들을 성가시게 하는 것 같다.

이를 해결하는 방법은 두 가지가 있을 것 같다.
이 상태표시상자를 아예 보이지 않도록 하는 것이 하나 일 것이고, 또 다른 하나는 보이되 모양을 잘 꾸며서 블로그에 어울리도록 수정을 하면 될 것이다. 여기서는 상태표시상자를 안보이게 하는 방법을 설명하고, 꾸미는 방법은 별도의 페이지에서 설명한다. (참고: 상태표시상자 꾸미기)

[그림 1 : 블로그 상태표시상자 ]

블로그 템플릿(스킨)에 다음과 같은 CSS코드를 추가한다.
참고: CSS는 Cascading Style Sheets의 약어이며, HTML이나 XML에서 위치나 모양새를 지정하는 언어이다.

/* Hide Status Message bar
------------------------------- */
.status-msg-wrap {
display: none;
}

코드를 추가하는 방법은 2가지가 있다.

블로그의 템플릿-디자이너 도구를 이용하는 방법과 직접 템플릿의 HTML을 수정/추가하는 방법이 있다. 어느 쪽이든 결과는 같으므로 편한 방법으로 하면된다.

먼저, 현재의 템플릿을 백업한다.

=> 블로그 대시보드 > 템플릿(Template) > 화면 오른쪽 위에 있는 백업/복구(Backup/restore)를 클릭하면, 아래그림의 아랫부분에서 보는 것과 같은 백업/복구 창이 뜬다.

==>백업/복구 창에서, 윗쪽 버튼(템플릿 내려받기: Download full template)를 클릭한다.

==>특별한 설정이 없다면, 컴퓨터의 내문서 > 다운로드 (또는 Download) 폴더에 저장되며, 파일이름은 " template-xxxxxxxxxxxx.xml "형식으로 되어 있다. xxxx부분은 숫자로 되어 있다. 이 파일은 나중에 템플릿을 현재상태로 되돌릴 때 필요하므로 잘 보관한다.

방법1: 템플릿-디자이너 도구로 코드 넣기(아래 그림중 윗쪽 부분 참고)

==> 블로그 대시보드 > 템플릿(Template) > 사용자설정(Cusomise)을 클릭하여, 템플릿-디자이너를 연다.

==> 열린 템플릿-디자이너에서 고급설정(Advanced) > CSS추가(Add CSS)를 클릭하여 아래 그림의 윗쪽 부분처럼 코드를 붙여넣고 저장한다.

방법2: 직접 템플릿 HTML 수정 (위 그림중 아래쪽 부분 참조)

==> 블로그 대시보드 > 템플릿(Template) >HTML편집(Edit HTML)을 클릭하여 HTML편집창을 연다

==> HTML편집창에서 템플릿편집(Edit template) > 마우스로 HTML코드가 있는 부분을 클릭하여 창을 활성화 > [컨트롤 + F]키로 찾기 박스를 연다

=> 찾기박스에 " ]]></b:skin> "를 입력하고 엔터키를 누르면, " ]]></b:skin> "에 노랑색 표시가 되면서 해당위치로 이동된다.

=> 위 그림의 아랫쪽 부분에서 보는 것처럼 ]]></b:skin> 코드 바로 위에 코드를 붙여 넣고, 저장한다. 경우에 따라서는 시간이 조금 걸릴 수 있다.

이제 코드 넣기가 끝났으니, 블로그로 가서 검색을 하거나 라벨을 선택해서 상태표시상자가 나타나는지 확인해 보자.

[그림: 코드를 넣기 전의 상태표시상자 모습 ]

[그림: 코드를 넣은후 상태표시상자가 보이지 않음 ]