사용법어찌?

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

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"' 조건을 설정합니다.

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

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

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

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

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

구글 블로그 인라인 애드 In-Line Ads 원하는 광고 단위 형식 코드로 변경 하는 방법 - 네이티브 인피드 광고 (Native In-feed ads)로 대체하기

2019-04-10T23:30:00.002-04:00

구글 애드센스를 게제하는 경우에, 구글 블로그는 여러 모로 편리한 점이 많습니다. 그 가운데 하나가 인라인 애드(In Line Ads)일 것 같습니다.

인라인 애드 기능을 사용하면, 글 목록 페이지에서 애드센스 광고 노출 개수, 몇 개의 글 마다 광고를 노출 할 지 등을 자유로이 설정할 수 고, 메인 페이지 하단에도 광고가 들어 갑니다.

단점으로는, 인-아티클 애드, 인-피드 애드, 반응형 링크 광고 등 새로운 광고단위들을 적용할 수 없습니다. 또한, 애드센스 홈페이지 보고서에서, 노출 수, 클릭, 수입등 통계가 표시되지 않습니다.

인라인 애드의 장점을 그대로 사용하면서, 새로운 광고단위를 자유로이 적용하려면 아래와 같이 하는 길이 있습니다. 이렇게 하면, 애드센스 홈페이지 보고서에서 인라인 애드 상황도 파악할 수 있습니다.

방법은 간단하여 누구나 쉽게 할 수 있습니다.
구글 블로그에서 인라인 애드를 활성화 시켜 놓고, 인라인 애드 광고코드 부분을 원하는 광고 코드로 대체하는 것입니다.

1) 인라인 애드 코드를 찾습니다.
블로그 대시보드에서, HTML 편집창을 열고 > [컨트롤 F, Ctrl + F] 키를 쳐서 검색창을 열고 > 아래의 코드를 복사하여 붙여 넣고, 검색(엔터 키를 침)하여, 해당 위치로 이동합니다. 아래 코드를 검색하면, 2개가 나옵니다. 둘 다 대체를 해 주어야 합니다.

<b:include data='post' name='super.inlineAd'/>

2) 위 코드가 작동하지 않도록 합니다.
위 코드는 자동으로 인라인 애드 코드가 삽입되게 하는 코드입니다. 그러므로, 일단 이 코드의 작동을 중단시켜야 합니다.

코드가 작동하지 않게 하려면, (1) 해당 부분을 삭제하여도 되고, (2) 아래에서 빨강색으로 표시한 것과 같이, 주석으로 처리하여도 됩니다.

다시 원상회복할 것을 생각한다면, 아예 삭제하기 보다는, 아래와 같이 주석처리 하는 것이 더 나을 것 같습니다. 아래에서, 앞 쪽의 !-- 와 뒤 쪽의 -- 부분이 추가 된 것입니다.

3) 원하는 광고 코드를 붙여 넣습니다.
위 2)와 같이 해당 코드를 삭제 또는 주석처리하고, 바로 그 아래에 원하는 광고 코드를 넣습니다. 애드센스 홈페이지에서 원하는 광고단위 코드를 복사하여 붙여 넣으면 됩니다. 그리고 [저장]을 하면, 작업 끝입니다.

주의 할 것은, 애드센스 코드의 async 에 ="async"를 추가하여 async="async" 모양으로 수정해 주어야 합니다. 아래에서 빨강색으로 표시한 부분입니다.

아래를 보면 금방 이해가 될 것입니다.

[ 원래의 HTML 코드 모양]

[ 광고 코드를 넣은 뒤의 모양]

<b:includable id='inlineAd' var='post'>
          <div>
            <b:class cond='data:post.adNumber + data:numDesktopAds lt data:maxNumAds' name='desktop-ad'/>
            <b:class cond='data:post.adNumber + data:numMobileAds lt data:maxNumAds' name='mobile-ad'/>

<script async='async' src="//pagead2.googlesyndication........"></script>
<ins class="adsbygoogl...."
...........
<script>
     (adsbygoogle = window.adsbygoogle.......;
</script>
          </div>
        </b:includable>
      </b:defaultmarkup>

[인라인 애드 광고코드를 원하는 광고단위 코드로 변경한 모양]

>> 인라인 애드 (InLine Ads) 넣고 설정하는 방법 - 글과 글 사이에 애드센스 넣기와 가로 위치 (왼쪽 가운데 오른쪽 등) 조절하기
>> 애드센스 최대 허용/노출 개수 설정 방법 maxNumAds : 반응형 테마 - 콘템포, 엠포리오, 소호, 노터블

블로그 애드센스 가젯 asynchronous 경고 해결 방법 - Speed up page loading times : Use asynchronous ad code to make your site faster - Blogger AdSense gadget

2019-04-10T02:28:00.003-04:00

구글 블로그 레이아웃(Layout)에서, 애드센스 가젯(AdSense gadget)으로 광고 단위를 넣으면, 아래 그림과 같은 최적화 안내가 표시되는 경우가 있습니다.

애드센스, 구글 블로그, 인터냇... 해결 방법을 설명한 글을 찾을 수가 없습니다. 아래와 같은 경우가 아주 드물기 때문이 아닌가 싶습니다. 이 페이지는 나름의 해결 방법을 설명한 것입니다.

[ 애드센스 asynchronous 안내]

한마디로 말하자면, 애드센스 홈페이지에서 해당 광고코드를 복사하여, 블로그 HTML 편집창에서 직접 붙여 넣는 것입니다.

1) 구글 블로그 > 대시 보드 > 레이아웃 에서 애드센스 가젯으로 애드센스를 넣는다

2) 애드센스 계정 홈페이지에서, 해당 광고 단위의 광고코드(스크립트)를 복사한다
3) 광고코드의 async 에 ="async" 를 추가하여, async="async" 모양으로 수정한다

4) 구글 블로그 > HTML 편집창에서, 광고단위를 넣은 해당 가젯의 광고 코드 부분을 아래 그림과 같이 수정한다.

적고 보니, 무척 어려운 것 처럼 느껴집니다. 하지만, 아주 간단합니다. 아래 그림을 보면, 금방 이해가 되지 싶습니다.

=> 애드센스 광고단위를 넣은 해당 가젯의 HTML코드에서 <data:adCode/> 부문을 삭제하고,
=> 애드센스 홈페이지에서 복사한 광고코드로 대체합니다.
=> 변경사항을 저장하고, HTML 편집창을 닫습니다.

          <b:widget id='AdSense1' locked='true' title='' type='AdSense' version='2' visible='true'>
             <b:widget-settings>.....</b:widget-settings>
             <b:includable id='main'>
<div class='widget-content'>
    <b:if cond='data:adCode'>
      <data:adCode/>
    <b:else/>
      <b:include name='defaultAdUnit'/>
    </b:if>
</div>
</b:includable>

=> 다시 원상복원 하려면, 위와 반대로 하면 됩니다.
삽입한 애드센스 코드를 삭제하고, 그 자리에, 원래 있던 <data:adCode/> 를 넣어주면 됩니다.

=> 이 방법은 나름의 해결책이고, 명확한 설명을 찾을 수 없으므로, 이렇게 하여도 별다른 문제가 없는지는 알 수 없습니다. 그러므로, 하나의 참고로 삼기 바랍니다.

구글 블로그 사용법: 반응형 테마 라벨 가젯 꾸미기 - Show More / Less 버튼, 배경 색상 폰트 테두리 ...

2018-03-08T19:09:00.004-05:00

반응형 테마의 라벨(Label) 가젯은 이전 테마에서와는 달리, 2단으로 열리게 되어 있습니다.

라벨가젯을 클릭하면, 기본적으로 몇 개의 라벨을 표시하고, 그 아래에 라벨을 모두 펼치는 "Show More" 링크 버튼이 표시됩니다.

이 버튼에 그림에서와 같이 글자(텍스트)를 CSS를 통하여 간단하게 추가할 수 있습니다.

링크 페이지의 맨 상단에 있는 라벨 가젯 (상품목록 카테고리)을 클릭하면 실제 적용한 모습을 볼 수 있습니다.
>> 시장통 쪽지 : 라벨 가젯 펼침 버튼 꾸미기

그 외에 CSS를 추가하여 라벨 가젯을 꾸미는 방법은 기존 테마에서와 기본적으로 동일하므로, 링크 페이지를 참조하면 되겠습니다.

>> 라벨가젯(Label gadget) 꾸미기 - 여백 마진 패딩 폰트 테두리 배경 색상 등
>> 구글블로그 사용법: CSS코드 추가 변경하는 방법 2가지

추가하는 글자가 앞쪽 또는 뒤쪽에 위치할 수 있도록 할 수 있습니다.
아래 CSS에서 .show-more:before의 before를 after로 바꾸면, 추가하는 글자가 뒤쪽에 표시됩니다.

[링크 버튼 앞/뒤에 글자(텍스트) 추가하는 CSS]

.show-more:before {content:'모두 보기 ';}
.show-less:before {content:'창 닫기 ';}

[각각의 버튼을 꾸미는 CSS]

.show-more {margin: 5px; background:#efefef;}
.show-less {margin: 5px; background:#efefef;}

두 개의 버튼을 각각 꾸미려면, 위와 같이, 각각에 속성을 주면 되고, 두 버튼에 같은 속성을 한 꺼번에 주려면, 아래와 같이 하면 됩니다.

[두 버튼을 한 꺼번에 꾸미는 CSS]

.show-more, .show-less {margin:15px; background:#efefef;}

[라벨 가젯 꾸미는 CSS]

#Label1 {background:#fff; border-bottom:3px solid #EFEFEF; padding:0px 40px;}
#Label1 h3 {color:#2883f3; text-align:center; margin:5px 0px;}
#Label1 a {color:#333; font-size:0.9em;}
#Label1 a:hover {color:#2883f3;}

#Label1 에서, 맨 앞의 #은 가젯의 id(아이디)를 지정하기 위한 것이고, 맨 뒤의 수자 1은 첫 번째 라벨 가젯을 의미합니다. 라벨 가젯을 여러개 넣으면 Label1 Label2 Label3 ... 와 같이 수자가 붙습니다.

#Label1 h3 는 라벨 가젯에 사용자가 붙인 이름을 말합니다.
#Label1 a 각각의 라벨 속성을 지정하는 것이고, #Label1 a:hover은 라벨에 마우스가 올라갔을 때의 동작 속성을 지정하는 것입니다.

속성은 필요에 따라, 테두리(border), 배경색(background), 글자크기(font-size), 글자굵기(font-weight), 색상(color) 등을 사용하여 잘 어울리도록 설정하면 됩니다.

[라벨 가젯 추가 하기]

도움이 되기를 바랍니다.

구글 블로그 반응형 테마 사용법: 이메일 구독 신청폼에 글자 텍스트 추가하는 방법

2018-03-08T01:23:00.002-05:00

반응형 테마에 기본적으로 들어 있는 이메일 구독 신청 (Subscribe) 폼에, HTML 편집을 하지 않고, 간단하게 글자(텍스트)를 간단하게 삽입할 수 있습니다.

아래 그림에서, 주황색 동그라미로 표시한 "이메일 구독신청"이라는 문구는 추가하여 넣은 것입니다.

[반응형 테마의 이메일 구독신청폼에 글자를 추가한 모습]

이메일 구독신청 폼에 글자 넣는 방법

>> 테마 디자이너 > Advanced > Add CSS 로 이동하여, 사용자 CSS 입력창을 열고, 아래와 같이 입력하면 됩니다.
>> '이메일 구독신청' 대신에 원하는 문구(텍스트)로 바꾸면 됩니다.

.subscribe-title:after {content:'이메일구독신청';}

.subscribe-title:after 에서 after 대신에 before 로 바꾸면, 추가되는 텍스트가 앞쪽에 들어 갑니다.

[추가하는 텍스트를 앞쪽에 넣기]

.subscribe-title:before{content:'이메일구독신청';}

[테마 디자이너에서, 사용자 CSS 입력하는 방법]

참고:
이메일 구독신청 폼에 글자를 추가한 실제 모습은 아래 링크 페이지에서 볼 수 있습니다.
>> 시장통
페이지의 맨 상단에 있는 "Subscribe" 버튼을 누르면 됩니다.

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

도움이 되기를 바랍니다.

구글 블로그 사용법 : 페이지(pages) 가젯 메뉴바 (PageList)를 개별 포스트(글)에도 보이게 하는 방법

2017-08-09T17:52:00.001-04:00

블로그 반응형 테마에서는 페이지(pages) 가젯으로 만든 상단 메뉴바가 개별 포스트 (글) 페이지에서는 표시되지 않는 경우가 있습니다.

블로그에 따라서는 개별 포스트 페이지에서는 메뉴바가 표시되지 않는 것이 더 깔끔하고 잘 어울리는 측면이 있을 수 있고, 반면에 메뉴바가 있는 것이 더 편리하면서도 잘 어울릴 수도 있을 것 같습니다.

반응형 테마를 적용하였을 때, 개별 포스트에서 페이지 가젯 (PageList) 메뉴가 표시되지 않는 경우는 아래 그림에서 보는 것과 같이 가젯을 제어하는 cond='!data:view.isPost' 코드가 들어가 있기 때문입니다.

HTML 편집창에서 이 코드 부분을 삭제하면, 개별 포스트에서도 메뉴바가 표시됩니다.
아래 그림에서 위 쪽은 가젯을 제어하는 코드가 들어가 있는 모습이고, 아래쪽은 해당 코드를 삭제한 모습입니다.

<b:widget cond='!data:view.isPost' id='PageList1' locked='true' title='' type='PageList' visible='true'>

HTML 편집창에서 페이지 가젯을 제어하는 코드 부분을 추가하거나 삭제하려면,
=> 블로그 대시보드 > 테마(Theme) > HTML편집 (Edit HTML) 버튼을 눌러 편집창을 엽니다
=> 편집창에서 위젯 바로가기 (Jump to widget) > 페이지 리스트 (PageList1)를 선택합니다

그러면, 해당 코드 위치로 이동되고, 페이지 가젯에 노랑색으로 표시가 됩니다.
위에서 설명한 것처럼, 필요에 따라 가젯을 제어하는 코드를 삭제하거나 추가하고, 편집창 위쪽에 있는 저장(Save theme) 버튼을 눌러 저장을 하면 작업이 완료 됩니다.

구글 블로그에서는 가젯(gadget)을 특정한 페이지에서만 보이게 하거나 또는 숨길 수 있습니다. 이에 대한 자세한 설명은 아래 링크 페이지를 참조하면 되겠습니다.
>> 구글블로그 사용법: 가젯(위젯)을 특정한 페이지에만 보이거나 숨기는 방법

도움이 되기를 바랍니다.

구글 블로거 사용법: 새로운 반응형 테마 (템플릿)에서 가젯추가 버튼 (Add a Gadget) 잠금 해제 및 해당 영역 바로 가기 방법 showaddelement=true

2017-05-29T01:06:00.001-04:00

구글 블로거에서 새로 제공하는 Contempo, Shoho, Emporio, Notable 등의 반응형 테마(템플릿)는 틀과 각 영역을 고정시켜 놓았습니다. 가젯추가 버튼도 잠궈 놓았고 가젯의 이동이나 삭제도 되지 않도록 되어 있습니다.

잠겨서 표시되지 않은 [+ 가젯추가(Add a Gadget)] 버튼을 활성화 시켜 표시되도록 하려면 다음과 같이 하면 됩니다.

[새로운 반응형 테마에서 가젯추가(add a Gadget) 버튼]

HTML 편집창에서 해당 위치로 찾아 가는 쉬운 방법은 2가지를 생각해 볼 수 있겠습니다.
하나는, 아래 그림과 같이 가젯추가(Add a Gadget) 기능을 잠그거나 푸는 요소인 showaddelement 통해서 모든 영역을 한꺼번에 찾는 것이고, 둘째는 영역의 이름으로 특정한 영역만 찾아 가는 것입니다.

1. showaddelement (추가요소보이기)로 모든 영역 찾기

>> 블로그 대시보드에서, 테마(theme) > HTML편집(Edit HTML) 버튼을 눌러, HTML 편집창을 연다

>> HTML 편집창에서, 아무곳에나 마우스 포인트를 두고, 왼쪽 버튼을 한 번 클릭하여 HTML 편집창을 활성화 시킨 다음, 키보드에서 [컨트롤 + F ]를 쳐서, 아래 그림의 오른쪽 위와 같은 검색상자를 연다

>> 검색상자에 showaddelement 를 입력(복사하여 붙여 넣어도 됨)하고, [엔터]키를 치면, 아래 그림과 같이, 모든 영역의 가젯추가요소가 노랑색으로 표시된다.

>> showaddelement='false' 라고 되어 있는 것을, 그림과 같이, showaddelement='true'로 바꾼다. 곧, showaddelement가 false로 되어 있는 것을 true로 바꾸는 것이다.

[showaddelement로 모든 영역 찾아 가기]

2. 영역이름으로 특정 영역만 찾아 가기

>> 위에서 설명한 것과 같이, HTML 편집창의 검색상자를 연다
>> 검색상자에 찾아 가고자 하는 영역 이름을 입력하고, [엔터] 키를 치면, 아래 그림과 같이 해당 영역으로 바로 이동 된다

각 영역의 이름은 그림 아래쪽에 있는 [구글 반응형 테마의 각 영역과 이름 목록]을 보고 입력하거나, 복사하여 붙여 넣으면 된다.

>> showaddelement='false' 라고 되어 있는 것을, 그림과 같이, showaddelement='true'로 바꾼다.

[영역 이름으로 해당 영역 바로 찾아 가기]

[구글 반응형 테마의 각 영역과 이름 목록]

showaddelement

name='Search (Top)'

name='Header'

name='Subscription'

name='Page List (Top)'

name='Ads'

name='Page Body'

name='Footer'

도움이 되기를 바랍니다.

구글 블로거 사용법: 새로운 반응형 테마 (템플릿)에서 가젯 잠금 해제 방법 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 편집창으로 들어가 보면 제대로 저장되어 있다.

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

도움이 되기를 바랍니다.

구글 블로거 사용법: 이메일 구독 가젯 (Email Subscription gadget) 꾸미는 방법

2017-02-26T23:15:00.002-05:00

구글 블로거에는 그림의 위쪽에 있는 것과 같은 이메일 구독 (Email Subscription) 가젯이 있다.

이 가젯은 피드버너(FeedBurner)와 연동되어 작동하고, 가젯을 블로거에 추가하면 자동으로 피드버너 계정이 만들어지고 연동된다.

방문자가 이메일 구독을 신청하면, 블로거의 구글계정 이메일로 내용을 알려 주고, 이메일 구독 신청자 현황은 피드버너에서 볼 수 있다.

가젯을 추가하는 경로는 블로거 대시보드에서
>> 레이아웃 > 가젯추가 (Add Gadget) 이다.

아래는 이메일 구독 가젯을 꾸미는 CSS 코드이다.
하나씩 적용하면서 테두리, 여백, 색상, 폰트 등을 블로거에 어울리게 꾸미면 된다.
CSS 코드를 추가하는 방법은 아래 링크 페이지를 참조하면 되겠다.

>> CSS코드 추가 변경하는 방법 2가지

[이메일 가젯 꾸미는 CSS]

#FollowByEmail1 {margin-top:15px; padding:0px; border:1px solid gold;}
#FollowByEmail1 h2 { ~~}
.follow-by-email-inner { ~~ }
#FollowByEmail1 .follow-by-email-address { ~~ }
#FollowByEmail1 .follow-by-email-submit { ~~ }

도움이 되기를 바랍니다.

구글 블로그 사용법: 피쳐드 포스트 (Featured Post) 가젯 속성 제어와 꾸미는 방법 - CSS 코드 추가

2017-02-18T08:33:00.002-05:00

구글 블로그가 비교적 최근에 제공한 피쳐드 포스트 가젯 (Featured Post gadget)은 블로거가 늘 게재하고자 하는 글 하나를 올려 놓는 도구이다.

이 가젯을 통하여 글을 게제한 모습은 옆의 그림과 같이 글 제목, 글 본문의 앞 부분 그리고 본문 안의 첫 번째 그림을 보여준다.

쓰임은 여러가지가 있겠다. 예컨데, 년말년시에 이전에 작성한 관련 글 가운데 하나를 게제해 두는 등으로 사용하면 좋을 것 같다.

이 가젯을 사용하면서 아쉬운 것이 있다.
기왕에 만들려면, 여러개의 글을 등록하고 순차적으로 또는 무작위적으로 돌아가면서 게제되도록 하면 더 좋을 것 같다.

물론, 글을 하나만 등록하면 그 하나의 글만 지속적으로 보여지도록 하면, 현재의 기능과 같게 될 것이다.

이와 관련하여, 구글 블로그를 사용하면서 생각하게 되는 것이 있다.
위에서 말한 바와 같이, 블로거가 지정한 글들을 돌려 보여주는 가젯이 있으면 좋겠다는 것과, 블로거가 지정한 라벨(태그)이 포함된 글들을 돌려 보여주는 가젯이 있으면 좋겠다는 것이다.
아마도, 사용자들이 늘어나면 좋은 의견이 나오게 마련이고, 기술적으로도 그렇게 어려운 것이 아닌 것 같으므로, 그에 따라 개선되리라 생각한다.

아래는 피쳐드 포스트 가젯을 추가하고 속성을 제어하는 CSS코드이다.

피쳐드 포스트 가젯 추가하기

>> 블로그 대시보드 > 레이아웃 > [+Add a Gadget / 가젯추가] > 피쳐드 포스트 가젯(Featured Post)
>> 가젯이 열리면, 게제하고자 하는 글을 등록할 수 있도록 검색창과 글 목록이 펼쳐진다. 원하는 글을 클릭하여 선택하고 저장하면 된다.

[피쳐드 포스트 가젯 추가하기]

피쳐드 포스트 가젯 제어하는 CSS 코드

아래의 CSS코드 가운데 제어하고자 하는 용도에 맞는 코드를 추가하고, 테두리, 색상, 글꼴, 배경, 줄간격 ... 등의 속성을 설정하여 꾸미면 된다. (참고: CSS코드 추가 변경하는 방법 2가지)

[피쳐드 포스트 가젯 속성 제어 CSS코드]

#FeaturedPost1 { ~~ }
#FeaturedPost1 h3 { ~~ }
#FeaturedPost1 post-summary { ~~ }
#FeaturedPost1 img { ~~ }
.widget FeaturedPost { ~~ }

구글 블로그 사용법: 사이드바 가젯(위젯) 일괄적으로 꾸미기와 타이틀 글자 크기 조절하기

2017-02-16T12:40:00.003-05:00

구글 블로그에서 사이드바에 추가한 가젯의 타이틀(제목)을 일괄적으로 제어하여 꾸미려면 .sidebar h2 { ~~ } CSS 코드를 추가하여 속성을 주면 된다.

.sidebar h2 { ~~ }

코드 추가는 위의 그림에서 처럼 "블로그 템플릿 디자이너"를 이용하면 간단하다. (참고: CSS코드 추가 변경하는 방법 2가지)

오른쪽 그림은 위 그림에서 처럼 .sidebar h2 { ~~ }에 백그라운드 색상을 지정하고, 글자를 가운데 정렬한 것이다.

다만, 오른쪽 그림에서 보듯이, 가젯의 타이틀 글자 크기는 .sidebar h2 { ~~ } 코드로는 제어되지 않는다.

맨 아래의 Popular Posts 가젯의 타이틀 글자가 다른 가젯의 타이틀 글자 보다 큰 것은 위쪽 그림의 CSS 코드란 두 번째 줄에서 보는 것처럼 별도로 타이틀 글자 크기를 지정해 주었기 때문이다.

#PopularPosts1 h2 {font-size: 2.0em;}

가젯의 타이틀 글자 크기 속성을 주려는 가젯의 이름 (위 예에서는 #PopularPosts1) 뒤에 h2 를 붙여 주면 된다.

구글 블로그에는 여러가지 템플릿들이 있고, 모든 템플릿을 대상으로 테스트를 해 보지 않아 모두 다 그렇게 되는지는 알 수 없지만, 대체로 비슷하므로 될 것으로 여겨진다.

만약에 작동하지 않으면, 위의 설명을 참고하여, 브라우저에서 웹페이지 속성보기를 하여, 해당 가젯의 HTML 구조를 살펴 보면 쉽게 방법을 찾을 수 있을 것이다.

도움이 되기를 바랍니다.

구글블로그 사용법: 블로그 리스트 가젯 (Blog List Gadget) 추가 및 설정하고 꾸미는 방법

2016-06-04T05:08:00.001-04:00

블로그에 외부의 홈페이지나 블로그의 최근 글이 보여지도록 하려면, 블로그 리스트 가젯 (Blog List Gadget)을 이용하면 편하고 쉽게 할 수 있다. 이전에는 불편하고 오류도 잦았는대, 지금은 개선이 되어 잘 작동한다.

옆의 그림은 이 블로그의 오른쪽 사이드바 맨 아래에 있는 블로그-리스트 가젯이다.

가젯에 홈페이지나 블로그를 추가하고 설정하는 방법은 아주 간단하고, 반면에 CSS 코드를 추가하여 폰트, 색상, 테두리, 여백, 이미지 등을 다양하게 꾸밀 수 있으므로 블로그에 잘 어울리게 할 수 있다.

1. 블로그 리스트 가젯 추가하기

블로그-리스트 가젯을 추가하는 경로는
=> 블로그 대시보드 > 레이아웃 (Layout) > 가젯추가 (Add a Gadget) 링크를 클릭한다
=> 가젯 추가 (Add a Gadget) 창이 열리면 > 스크롤바를 아래로 내리면 중간쯤에 그림과 같은 블로그-리스트 가젯이 있다

=> 가젯 이름 (Blog List)을 클릭하거나, 가젯의 오른쪽에 있는 플러스(+) 를 클릭하면 아래 두번 째 그림과 같은 블로그-리스트 가젯 설정창이 뜬다

2. 블로그 리스트 가젯 설정하기

가젯 설정은 두 가지로 나누어 생각해 볼 수 있다.우선은 아래 그림의 주황색으로 표시한 기본적인 사항을 설정하는 것이고, 둘은 파랑색으로 표시한 보여줄 홈페이지나 블로그 주소를 입력하는 것이다.

1) 기본사항 설정하기
ㅇ 가젯 이름 (Title) : 적어도 되고 비워 두어도 된다
ㅇ 정렬 (Sort) : 최근 글 순서 (Most recently updated)와 보여줄 블로그나 홈페이지 이름의 알파벳 순 (Alphabetically by blog title) 가운데서 선택한다
ㅇ 보여주기 (Show) : 드랍박스에서 가젯에 보여줄 갯수를 설정하고, 블로그 아이콘, 글 제목, 짧은 내용 보이기, 이미지 표시, 글 업데이트 날짜 등의 항목을 체크하거나 풀어서 선택한다.
=> 설정은 언제든 자유로이 바꿀 수 있으므로, 일단 생각대로 설정을 하여 가젯을 추가하여 보고, 잘 헤아려 다시 설정하는 것이 편하다.

2) 보여줄 홈페이지나 블로그 주소 입력하기
=> 위 그림의 아래 부분에 녹색으로 표시된 것과 같이 [목록추가 Add to List]를 클릭하면, 파랑색으로 표시한 것과 같은 주소입력창이 뜬다.
=> 주소는 예컨데, http://abcdefg.com 과 같이 URL을 입력한다.

URL을 입력하고 [추가 Add] 버튼을 누르면, 정상적으로 작동을 하면 저장이 되고, 그렇지 않으면 '입력한 URL 페이지를 읽을 수 없다'는 오류메시지가 뜬다.
이럴 때는 홈페이지나 블로그의 피드(RSS, XML) 주소링크를 찾아서 그 피드 주소를 입력해 주면 정상적으로 작동한다.

해당 홈페이지나 블로그에서 피드(RSS,Feed)의 접근 자체를 막는 경우는 어쩔 수 없다. 피드를 제한하는 경우가 드물지만 간혹 있는 듯 하다.

기본설정과 주소입력을 마쳤으면, 가젯창 맨 아래의 [저장, Save] 버튼을 눌러 저장을 한다.
입력한 주소가 많을 경우에는 저장하는 데 시간이 한 참 걸리기도 하고, 오류가 나기도 한다. 한참을 기다려도 반응이 없거나 오류가 나면, 다시 저장을 하면 저장이 된다.

3. 블로그-리스트 가젯 꾸미는 CSS 코드

블로그-리스트 가젯을 추가하면, 1, 2, 3 .... 의 숫자를 붙여, 가젯 아이디(ID)가 BlogList1 처름 자동으로 부여 된다.

[블로그-리스트 가젯 꾸미는 CSS 코드 모양]

#BlogList1 {
width: 390px;
margin: 0px 0px 0px -17px;
padding:0px;
border: 1px solid #efefef;
background-color: #eee;
..........
}

#BlogList1 a {color: #333;}
#BlogList1 a:hover {color: #222; background-color: #555;}

ㅇ BlogList1 { ~~ } 는 블로그-리스트 전반에 적용된다
ㅇ BlogList1 a { ~~ } 는 가젯에 보여지는 내용 가운데 링크가 걸린 곳에 적용된다
ㅇ BlogList1 a:hover { ~~ } 는 가젯에 보여지는 목록에서 링크에 마우스가 올라 갔을 때 적용된다

[BlogList 가젯을 제어할 수 있는 항목]

#BlogList1 {width:360px; margin: 0px; padding: 0px;}
#BlogList1_container {margin: 0px; padding:0px;}
#BlogList1_blogs {margin: 0px; padding:0px;}
#BlogList1_show-all {font-size:0.7em;}

#BlogList1 .blog-content {margin: 0px; padding:0px;}
#BlogList1 .blog-title {margin: 0px; padding:0px;}

#BlogList1 .item-content {width:336px; padding: 0px;}
#BlogList1 .item-title {width:336px; padding: 0px;}
#BlogList1 .item-thumbnail {width:336px; padding: 0px;}
#BlogList1 .item-snippet {width:336px; padding: 0px;}

#BlogList1 ul {width:360px; margin: 0px; padding: 0px;}
#BlogList1 ul li {width:376px; margin: 0px; padding: 0px;}

너비(width), 높이(height), 바깥여백(margin), 안여백(padding), 색상(color), 폰트(font-size), 테두리(border), .... 등의 속성을 꾸미고자 하는 대로 사용하면 된다.
(CSS 코드를 넣는 방법은 링크 페이지 참조)

도움이 되기를 바랍니다.

구글블로그 애드센스 사용법: 인라인 애드 (InLine Ads) 넣고 설정하는 방법 - 글과 글 사이에 애드센스 넣기와 가로 위치 (왼쪽 가운데 오른쪽 등) 조절하기

2016-05-24T06:10:00.000-04:00

구글 블로그에서 글(post)과 글 사이에 애드센스가 보이도록 하려면, 아래와 같이 블로그 포스트 (Blog posts) 가젯에서 간단히 설정할 수 있다.

1. 인라인 애드 넣는 방법

=> 블로그 대시보드 > 레이아웃 (Layout) > 블로그 포스트 (Blog Posts) 가젯의 [편집/Eidt] 버튼을 눌러 가젯 편집창을 연다

=> 가젯 설정항목의 맨 아래에 있는 "글사이에 애드센스 보이기 / Show Ads Between Posts" 항목에 체크를 한다. 그러면 애드센스 설정 항목들이 보여진다.
=> 애드센스 설정항목들을 설정한 다음, 가젯의 맨 아래에 있는 저장(Save)를 눌러 저장한다. 이렇게 하면, 글과 글 사이에 애드센스가 게시된다.

2. 인라인 애드 주의할 점

1) 애드센스 게시 간격 (Show after every XX posts (up to 3 ads can be placed on a page)
구글블로그는 블로그의 레이아웃(Layout)에서 애드센스 가젯 (AdSense gadget)으로 넣은 애드센스 갯수를 헤아려서, 한 페이지에 애드센스가 3개를 넘지 않도록 인라인애드의 수를 조절하도록 되어 있다.

예컨데, 애드센스 계정에서 광고코드를 가져와 HTML/Java Script 가젯으로 애드센스를 넣은 상태에서 인라인애드를 설정하면 한 페이지에 애드센스가 3개 이상 게제될 수 있다. 그렇게 되면, 한 페이지에 3개 까지만 허용하는 정책에 위반되게 된다.

그러므로, 인라인 애드 기능을 사용하려면, 블로그의 애드센스가젯을 사용하고 직접 애드센스 코드를 넣는 것은 주의를 해야 하겠다.

2) 광고 형식 (Format), 색상 (Color) 등의 설정
인라인애드 기능을 처음으로 활성화 할 때는 제반 설정을 하여도 상관이 없다.
그러나, 일단 인라인 애드를 게시한 뒤에 설정을 변경하면 이런저런 오류가 발생한다. 그러므로, 일단 인라인애드를 게시한 뒤에 설정을 변경하려면, 애드센스 계정으로 가서, 인라인애드로 추가한 광고단위의 설정을 변경하는 것이 좋겠다.

인라인애드로 추가한 광고단위는 애드센스 계정에서 "블로그 이름_main_Blog1_1x1_광고 형식" 와 같은 이름으로 표시된다.

3. 인라인 애드 광고 규격설정과 배치 설정

인라인 애드는 기본적으로 영역의 가운데(center)에 배치된다. 광고의 좌우 위치, 위/아래 여백, 테두리, 배경색 등을 설정하려면 아래의 CSS 코드를 사용하면 된다.

[인라인애드 제어 CSS 코드 모양]

.inline-ad {
여기에 필요한 설정 항목들을 적어 줌
}

설정항목은 필요한 것만 추가하면 된다. 예컨데,
ㅇ 가로 너비 설정 => width: 300px;
ㅇ 바깥 여백 설정 => margin: 50px
ㅇ 안쪽 여백 설정 => padding: 5px;
ㅇ 좌우 배치 설정 => text-align: left 또는 center 또는 right;
ㅇ 테두리 설정 => border: 1px solid #efefef;
ㅇ 배경색 설정 => background-color: #ababab;

애드센스 광고를 가로의 가운데에 배치하기

애드센스 광고단위를 300x250 또는 336x280 등으로 하였을 경우나, 반응형 광고단위(Responisve)를 넣은 뒤에 가로폭(width)을 조절한 경우에, 애드센스를 가로의 가운데로 배치하려면 바깥여백 (margin)을 다음과 같이 설정해 주면 된다.
=> margin: 0px auto 0px auto; 또는 margin: 0px auto;

애드센스의 상하 여백은 손대지 않고 좌우 가운데로 배치하려면
=> margin-left:auto; margin-right:auto;

그러면 아래와 같은 모양이 된다.
.inline-ad {margin: 0px auto; }
또는
.inline-ad {margin-left:auto; margin-right:auto;}

CSS 코드를 추가하는 방법은 링크를 참조하세요.
구글블로그 사용법: CSS코드 추가 변경하는 방법 2가지 >>

>> 인라인 애드 In-Line Ads 원하는 광고 단위 형식 코드로 변경 하는 방법 - 네이티브 인피드 광고 (Native In-feed ads)로 대체하기
>> 애드센스 최대 허용/노출 개수 설정 방법 maxNumAds : 반응형 테마 - 콘템포, 엠포리오, 소호, 노터블

구글블로그 애드센스 사용법: 애드센스 가젯 (AdSense Gadget) 넣기와 가로 위치 (왼쪽 가운데 오른쪽 등) 조절하는 방법

2016-05-24T05:56:00.001-04:00

구글 블로그에서 애드센스를 넣을 때 애드센스 가젯 (AdSense gadget)을 이용하면 편리하다. 가젯추가는 헤더(Header), 메인(Main), 사이드바(Sidebar), 푸트(Footer) 영역에서 할 수 있고, 어느 영역에서 추가를 하였더라도, 다른 영역으로 옮겨도 상관이 없다.

1. 애드센스 가젯 넣기

=> 블로그 대시보드 > 레이아웃 (Layout) > 가젯추가 (+Add a Gadget)
=> 베이직 (Basics) > 애드센스 (AdSense) > 애드센스 광고단위 설정 (Configure AdSense)

2. 애드센스 가젯 설정하기

애드센스 가젯을 CSS코드로 설정할 수 있다. 애드센스 가젯을 추가하면 가젯 아이디(ID)가 자동으로 부여 되며, 추가한 순서대로 번호를 붙여서 AdSense1, AdSense2 .... 등으로 된다.
애드센스 가젯을 제어하는 CSS 코드는 아래와 같은 모양이다.

[애드센스 제어 CSS 코드 모양]

#AdSense1 {
여기에 필요한 항목을 적고 인자를 조절한다
}

항목과 인자 설정을 예로 들면 아래와 같다.
ㅇ 가로 너비 => width: 336px;
ㅇ 바깥 여백 => margin: 10px;
ㅇ 안쪽 여백 => padding: 5px;
ㅇ 테두리 => border: 1px solid blue;

애드센스 광고를 가로의 가운데에 배치하기

애드센스 광고단위를 300x250 또는 336x280 등으로 하였을 경우나, 반응형 광고단위(Responisve)를 넣은 뒤에 가로폭(width)을 조절한 경우에, 애드센스를 가로의 가운데로 배치하려면 바깥여백 (margin)을 다음과 같이 설정해 주면 된다.
=> margin: 0px auto 0px auto; 또는 margin: 0px auto;

그러면 아래와 같은 모양이 된다.
#AdSense1 {margin: 0px auto; }

CSS 코드를 추가하는 방법은 링크를 참조하세요.
구글블로그 사용법: CSS코드 추가 변경하는 방법 2가지 >>

[애드센스 가젯을 가로의 가운데에 배치한 모양]

도움이 되기를 바랍니다.

가젯 위젯 (Gadget Widget ), 섹션 (Section) 고유 아이디 (ID) 이름을 쉽게 찾는 방법

2016-05-18T01:36:00.001-04:00

블로그는 여러개의 섹션으로 나뉘어 있고, 가젯도 여러개 들어 가게 된다.
특정한 섹션이나 가젯을 CSS 코드로 꾸미거나 제어하려면, 해당 섹션이나 가젯의 고유식별자인 아이디 (ID)를 통해서 하게 된다. 꾸미고자 하는 가젯의 아이디 (ID)를 찾는 방법은 아래와 같이 두 가지로 할 수 있겠다.

1. 템플릿 HTML 편집창에서 바로가기 (Jump to Widget) 기능을 사용

사용되는 가젯의 수가 한 두 개일 때는 아래 그림과 같이 템플릿 HTML 편집창에서 바로가기 (Jump to Widget) 기능을 사용하면 쉽다. 가젯이 여러개 일 때는 아래의 두 번째 방법이 더 편하다.

=> 블로그 대시보드 > 템플릿 > HTML 편집 > Jump to Widget을 선택하여 나열된 가젯 목록에서 ID를 찾고자 하는 가젯을 선택한다. 그러면, 해당 가젯 코드 위치로 이동되어 노랑색 형광펜으로 표시된다.
=> 가젯의 아이디(ID)를 보는 방법은 아래 두 번째 방법을 참조 하면 되겠다.

2. 가젯에 이름을 주어 찾는 방법

사용되는 가젯의 수가 많을 때는 위와 같은 방법으로는 제대로 찾기가 어렵다. 이럴 때는, 아이디를 찾고자 하는 가젯에 이름을 준 다음, 템플릿 HTML 편집창에서 검색하면 쉽게 찾을 수 있다.

1) 가젯에 이름 주기
=> 대시보드 > 레이아웃 > 아이디를 찾고자 하는 가젯의 [편집/Edit] 링크를 눌러 가젯 창을 연다
=> 가젯의 이름(Title)을 적어 준다. 이름은 검색을 하기 위한 것이므로 아무 것이나 간단하게 적으면 된다. 아래 그림의 예에서는 "검색기"라고 이름을 붙였다
=> 가젯을 저장(Save)한다.

2) 가젯 아이디 (ID) 찾기
=> 대시보드에서 레이아웃 바로 아래의 템플릿 > HTML 편집을 눌러 편집창을 연다
=> HTML 코드가 있는 영역의 아무곳에나 마우스를 한 번 클릭하여 편집창을 활성화 한다. 그렇게 하는 이유는 단순히 편집창 검색기를 사용하기 위해서이다.

=> 키보드의 [컨트롤 (Ctrl) + F ]키를 쳐서 편집창 검색박스를 열고 > 찾고자 하는 가젯의 이름을 입력한 뒤에 > [엔터]키를 치면, 해당 가젯의 코드로 이동된다
=> 아래 그림에서, 맨 아래쪽에 주황색 네모로 표시한 곳을 보면, 가젯의 이름인 "검색기"에 노랑 형광색 표시가 되어 있고, 그 앞쪽에 Widget id=' HTML2 '라고 적혀 있다. 곧, 찾고자 하는 '검색기' 가젯의 아이디(ID)는 HTML2 이다.

위와 같이 찾은 가젯 아이디는 해당 가젯을 CSS코드로 꾸미거나 제어할 때 사용하게 된다.
예컨데, 위의 검색기 가젯 (아이디 = HTML2)의 여백을 조절하려 한다면,
#HTML2 { margin: 10px; }
등과 같이 쓰게 된다.

도움이 되기를 바랍니다.

구글블로그 사용법: 애드센스를 본문 상단에 나란히 끼워 왼쪽 또는 오른쪽에 배치하는 방법 (플로팅 / 감싸기)

2016-05-17T16:28:00.001-04:00

애드센스를 본문의 왼쪽이나 오른쪽에 끼워서 나란히 배치하는 경우를 흔히 볼 수 있다. 그렇게 하면 아무래도 효과가 높을 것 같고, 반면에 글을 읽는 데는 아무래도 거추장스러울 것 같다. 어쨋거나, 구글 블로그에서 아래 그림과 같이 배치하는 것은 가젯과 CSS를 통해 간단하게 할 수 있다.

아래 그림에서, 주황색으로 표시한 부분이 애드센스 광고이다.
애드센스 영역에 CSS를 주어 페이지 오른쪽에 배치하고, 그 왼쪽으로 본문이 따라 올라 오도록 한 것이다.

애드센스 본문과 나란히 배치하는 방법
방법은 아래와 같이 두 단계로 간단하다.

1. 애드센스 가젯 추가하기
=> 블로그 대시보드 > 레이아웃 (Layout) > 메인 (Main) 영역으로 간다
=> 가젯추가 (+ Add Gadget)를 통하여, 애드센스 가젯을 추가하거나, 또는 애드센스 코드를 담은 HTML 가젯을 추가한다. 이 때, 가젯을 블로그 포스트 (Blog Posts) 가젯 바로 위에 놓아야 한다.

2. CSS 코드 넣기
=> 위 그림에서 레이아웃 (Layout) 바로 아래에 있는 > 템플릿 (Template) > 사용자설정 (Customise) 을 선택하여 > 블로그 템플릿 디자이너 (Blogger Template Designer)를 연다
=> 왼쪽 메뉴바의 맨 아래에 있는 > 고급설정 (Advanced) > 열린 하위 메뉴에서 맨 아래에 있는 CSS추가 (Add CSS)를 선택하여 입력창을 연다

=> 아래의 코드를 복사하여 붙여 넣고, 위치와 수자를 조절한다
=> 저장 (Apply to blog)을 한다. 이로써 작업은 완료 되었다.
(CSS 코드 넣기에 대한 자세한 설명을 보려면 링크페이지 참조)

#HTML3 {
width: 336px;
float: right;
margin:30px 0px 10px 15px;
}

위의 코드는 첫 번째 그림에 본 예제를 만들 때 실제로 입력한 CSS의 모양이다.
1) #HTML3:
예에서는 애드센스 가젯을 추가하지 않고, 애드센스 코드를 복사하여, HTML 가젯에 넣어 추가 하였으므로, 그 가젯 고유이름인 HTML3 를 지정한 것이다.
애드센스 가젯을 직접 추가하였다면, #AdSense1 과 같은 모양이 될 것이다.

2) width:
애드센스의 가로 너비를 지정한 것이다.

3) float:
애드센스 가젯을 왼쪽 오른쪽 가운데 어디에 놓을 것인가를 지정하는 것이다. 왼쪽에 놓으려면 left 라고 적고, 오른쪽에 놓으려면 right 라고 적어 주면 된다.

4) margin:
여백을 주어 나란히 올려 붙는 본문과 어울리게 조절한다. 숫자가 지정하는 위치는
" margin: 위쪽 여백 - 오른쪽 여백 - 아래쪽 여백 - 왼쪽 여백 " 순이다. 곧, 위에서 부터 시계 방향 이다.
위의 예제에서는 가젯을 오른쪽에 두었으므로, 가젯의 아래쪽과 왼쪽에 여백을 주었고, 따라 올라 오는 본문과 키를 맞추기 위해 위쪽여백을 주었다.

도움이 되기를 바랍니다.

구글 블로그 사용법: 가젯(위젯)을 특정한 페이지 또는 모바일에만 보이거나 숨기는 방법

2016-03-25T01:55:00.002-04:00

구글 블로그에서, 특정한 가젯을 특정한 페이지, 특정한 라벨(태그) 페이지, 또는 첫 페이, 모바일과 데스크탑 등을 선택적으로 보이게 하거나 숨길 수 있습니다.

가젯뿐만 아니라, 특정한 영역도 설정하여 적용할 수 있고, 특정한 페이지에만 적용되는 CSS나 스크립트를 해당 페이지에만 적용되게 할 수도 있습니다. 이러한 기능은 구글 블로그가 가지고 있는 큰 장점 가운데 하나라 할 수 있습니다.

방법은 간단히 태그만 설정해 주면 됩니다.
HTML 편집창에서, 숨기거나 보이게 하려는 가젯에 특정성을 주는 태그와 해당 주소(URL)를 넣어 주면 됩니다.

다만, 도메인 주소(URL)를 사용하는 것이므로, 방문자의 접속 위치에 따라 도메인주소가 바뀌는 blogspot 주소에서는 작동을 하지 못합니. 블로그에 자신의 도메인을 연결 시킨 경우에만 사용할 수 있습니다.

태크는 구형과 신형 두 가지가 있습니다. 어느쪽을 사용하여도 잘 작동합니다. 새로이 태그를 설정할 때는 가급적이면, 신형 태그를 사용하는 것이 낫지 않나 싶습니다. 아래의 각 태그에서, 위쪽은 신형 태그이고, 아래쪽은 구형 태그 입니다. 신형 태그는 data:view~ 로 되어 있고, 구형 태그는 data:blog~ 로 되어 있습니다.

1. 가젯에 추가할 태그 선택
어떤 페이지에서 보이거나 숨길지를 생각하고 아래에서 적당한 코드를 선택한다.

[홈페이지 (첫 페이지)에만 보이게 하는 태그]
이 코드를 추가하면 블로그의 첫페이지(홈페이지)에만 해당 가젯이 보인다.

신형 태그
<b:if cond="data:view.isHomepage">.....</b:if>

구형 태그
<b:if cond='data:blog.url == data:blog.homepageUrl'>.....</b:if>

[인덱스(목록) 페이지에만 보이게 하는 태그]
이 코드를 추가하면 블로그의 글 목록이 표시되는 모든 페이지에만 해당 가젯이 보인다.

<b:if cond='data:view.isMultipleItems'>.....</b:if>
<b:if cond='data:blog.pageType == "index"'>.....</b:if>

[개별 글 (포스트) 페이지에만 보이게 하는 태그]
이 코드를 추가하면, 개별 글 페이지에만 보인다.

<b:if cond='data:view.isPost'>.....</b:if>
<b:if cond='data:blog.pageType == "item"'>.....</b:if>

[스태틱 페이지에서만 가젯이 보이게 하는 태그]
이 코드는 스태틱 페이지, 일반 글(post)쓰기가 아니라, pages로 만든 페이지에만 보인다.

<b:if cond='data:view.isPage'>.....</b:if>
<b:if cond='data:blog.pageType == "static_page"'>.....</b:if>

[싱글 페이지에서만 가젯이 보이게 하는 태그]
이 코드는 싱글 페이지에서만 가젯을 보이게 하고, 목록 페이지에서는 가젯이 보이지 않게 된다. 싱글 페이지는 일반 글(post)와 pages로 만든 페이지를 모두 지칭한다.

<b:if cond='data:view.isSingleItem'>.....</b:if> (신형)
<b:if cond='data:blog.pageType in ["item", "static_page"]'>.....</b:if> (구형)
<b:if cond='data:blog.url == data:post.url'>.....</b:if> (구형)

[아카이브 (Archive) 페이지에만 보이게 하는 태그]
이 코드는 아카이브 페이지에서만 가젯을 보이게 한다.

<b:if cond='data:view.isArchive'>.....</b:if>
<b:if cond='data:blog.pageType == "archive"'>.....</b:if>

[라벨 검색 결과 페이지에만 보이게 하는 태그]
이 코드는 라벨을 클릭하여 라벨 검색 결과 페이지에서만 가젯을 보이게 한다.

<b:if cond='data:view.isLabelSearch'>.....</b:if>
<b:if cond='data:blog.searchLabel'>.....</b:if>

[특정 라벨 검색 결과 페이지에만 보이게 하는 태그]
이 코드는 블로그스팟 이라는 라벨을 클릭하였을 때, 그 검색 결과 페이지에서만 해당 가젯을 보이게 한다.

<b:if cond='data:blog.searchLabel == "블로그스팟"'>....</b:if>

[검색어 검색 결과 페이지에만 보이게 하는 태그]
이 코드는 바로 위의 코드와 정 반대로, 개별 글 페이지에서는 가젯이 보이지 않고 검색결과나 라벨 페이지 등에서만 보이게 한다.

<b:if cond='data:view.isSearch'>.....</b:if>
<b:if cond='data:blog.searchQuery'>.....</b:if>

[특정 검색어 검색 결과 페이지에만 보이게 하는 태그]
이 코드는 블로그스팟 이라는 라벨을 클릭하였을 때, 그 검색 결과 페이지에서만 해당 가젯을 보이게 한다.

<b:if cond='data:blog.searchQuery == "블로그스팟"'>....</b:if>

[글(post) 가운데 첫 번째 포스트 페이지에만 보이게 하는 태그]
이 코드는 포스트가 여러개 나열 될 때, 첫 번째 포스트 페이지에서만 가젯을 보이게 한다.

<b:if cond='data:post.isFirstPost'>.....</b:if>

[특정한 글 (포스트)이나 라벨 등 지정된 주소(URL) 페이지에만 보이게 하는 태그]
이 코드는 지정된 주소 페이지에만 가젯을 보인다. 빨강색 부분은 지정할 페이지의 주소(URL)를 넣는 곳이므로, 원하는 주소로 대체를 하면 된다. (자세한 설명은 아래에서 설명)

<b:if cond='data:blog.url == "URL of the page"'>.....</b:if>

[오류 페이지에만 보이게 하는 태그]
이 코드는 페이지가 없는 등 오류가 발생하였을 때만, 보이게 한다.

<b:if cond='data:blog.pageType == "error_page"'>.....</b:if>

[미리보기(preview) 페이지에만 보이게 하는 태그]
이 코드는 페이지가 없는 등 오류가 발생하였을 때만, 보이게 한다.

<b:if cond='data:view.isPreview'>.....</b:if>

[모바일에서만 보이는 태그]
이 코드는 모바일 기기에서만 보이게 한다.

<b:if cond='data:view.isMobile'>.....</b:if>
<b:if cond='data:blog.isMobileRequest'>.....</b:if>

[모바일에서는 숨기는 태그]
이 코드는 모바일 기기에서는 표시되지 않도록 숨기는 코드이다. 신형 태그에서는 ! 를 붙이고, 구형 태그에서는 false 를 추가한다.

<b:if cond='!data:view.isMobile'>.....</b:if>
<b:if cond='data:blog.isMobileRequest == "false"'>.....</b:if>

[목록 페이지에서, 첫 번째 포스트에만 보이는 태그]
이 코드는 홈페이지, 라벨 검색 페이지, 검색 페이지 등과 같은 목록 페이지에서, 첫 번째 글(포스트)에서만 가젯을 보이게 한다. 예를 들어, 광고나 특정한 안내문 등이 목록 페이지의 첫번째 글 위 또는 아래에만 보여지도록 할 때 사용하면 된다.

<b:if cond='data:post.isFirstPost'> ..... </b:if>

[신형 태그 부정문 : 조건을 부정하여 기능을 뒤집는 태그]
아래는 위에서 나열한 태그들 가운데, 개별 글(post)에만 보이도록 하는 신형 태그(위쪽)와 그 기능을 뒤집어 개별 글(post)에서는 보이지 않게 숨기도록 한 태그(아래쪽) 이다. 빨강색으로 표시한 !을 추가하면 된다. 신형 태그들은 모두 이와 같이 하면 된다.

<b:if cond='data:view.isPost'>.....</b:if>
<b:if cond='!data:view.isPost'>.....</b:if>

[구형 태그 부정문 : 조건을 부정하여 기능을 뒤집는 태그]
아래는 위에서 나열한 태그들 가운데, 개별 글(post)에만 보이도록 하는 구형 태그(위쪽)와 그 기능을 뒤집어 개별 글(post)에서는 보이지 않게 숨기도록 한 태그(아래쪽) 이다. 빨강색으로 표시한 !을 추가하면 된다. 구형 태그들은 모두 이와 같이 하면 된다.

<b:if cond='data:blog.pageType= "item"'>.....</b:if>
<b:if cond='data:blog.pageType!= "item"'>.....</b:if>

[복수 조건 설정 태그]
이 코드는 개별 글(포스트) 페이지와 페이지(pages)로 만든 스태틱 페이지 등 싱글 페이지 에서는 가젯을 나타나지 않도록, 복수의 조건을 설정한 태그이다. 복수의 조건은 and 로 연결한다.

<b:if cond='!data:view.isPost and !data:view.isPage'>
</b:if>

[복수 조건 태그 예 2]
"모바일이 아니면 + 그리고 + 홈페이지에만" 보이게 하는 예이다. 곧, 데스크탑 홈페이지에만 보이게 하는 태그이다.

<b:if cond="!data:view.isMobile and data:view.isHomepage">.....</b:if>

2. 특정할 주소를 찾아 코드 만들기

위에서 끝에 있는 두 종류의 태그를 사용하려면, 특정하려는 페이지의 주소(URL)가 있어야 하므로 아래와 같이 주소를 찾아 코드를 만들면 되고, 다른 태그를 사용하려는 경우에는 이 단계가 필요 없으므로 넘어 가면 된다.

주소를 찾는 방법은 아래 그림과 같이 해당 페이지를 열어 놓고 브라우저 주소창의 주소를 복사하면 된다.
방법은 브라우저 주소창을 마우스로 클릭하면 주소가 선택되어 색상이 반전된다. 그러면 키보드에서 [컨트롤+C]를 치면 복사가 되고, 메모장 등에 붙여 넣기 (컨트롤+V) 하면 된다.

특정한 주소 페이지에만 가젯을 보이려 한다면, 아래와 같은 코드를 선택하고, 복사한 주소(URL)로 빨강색 부분을 대체하여 코드를 완성한다.

[코드 완성 전의 모습]

<b:if cond='data:blog.url == "URL of the page"'>

[코드 완성 후의 모습]

<b:if cond='data:blog.url == "http://howways.blogspot.com/2016/03/How-to-Show-AppData-folder-on-Windows-Explorer.html"'>

3. 가젯에 이름 붙여 쉽게 찾아가기

위에서 사용할 코드를 만들었으니, 이제 HTML에 추가하면 된다. HTML 편집창을 열기에 앞서 해당 가젯에 이름을 붙여 주면 편집창에서 찾기가 쉽다.

가젯 이름은 간단하게 "안내" "작업" .... 등과 같이 편한대로 붙여 주면 되고, 방법은
=> 블로그 대시보드 > 레이아웃(Layout) 창을 열고 > 해당 가젯의 [편집: Edit] 버튼을 눌러 가젯 편집창을 연다
=> 가젯 이름(Title)에 적당한 이름을 넣고, 저장을 한다. 그림의 예에서는 '길안내'라고 이름을 붙였다.

4. HTML 편집창을 열고 해당 가젯에 준비한 태그 추가

=> 블로그 대시보드 > 템플릿 > HTML편집(Edit HTML)을 눌러 편집창을 엽니다.
=> 편집창의 빈 곳 아무데나에 마우스로 클릭하여 편집창을 활성화 한 다음 > [컨트롤+F]키를 쳐서 검색창을 열고 > 해당 가젯 이름을 입력하고 [엔터]키를 치면 > 해당 가젯으로 이동되고 가젯의 이름에 노랑색 표시가 됩니다.

태그를 삽입하는 방법은 두 가지가 있습니다. 아래에서 설명하는 첫 번째 방법은 새로 알게 된 방법이고, 두 번째 방법은 이전에 알게 된 방법입니다. 개인적인 생각으로는 첫 번째 방법이 더 나은 것 같습니다. 왜 그런가는 이 페이지 맨 아래에 비교하여 설명하도록 합니다.

1) 첫 번째 방법 : <b:widget ~ 코드 부분에 직접 추가

=> 해당 가젯으로 이동하면, 해당 가젯은 아래 그림에서 보는 것처름
<b:widget id='HTML6' locked='true' ~~> 로 되어 있습니다. 이 코드에 직접 코드를 추가합니다. 추가하는 위치는 <b:widget 바로 뒤에 추가합니다.

=> 위에서 설명한 여러가지 코드들은
<b:if cond='data:blog.pageType == "index"'> 모양입니다. <b:if 부분은 빼고, 안의 cond='~~~~~~' 부분만 추가해야 합니다. 예컨데, 아래의 빨강색 부분만 추가하는 것입니다.
<b:if cond='data:blog.pageType == "index"'>

=> 그러면, 아래 그림에서 노랑색으로 표시한 부분과 같이,
<b:widget cond='data:blog.pageType == "index"' id='HTML6' ~~~~~와 같은 모습이 됩니다.

=> 이로서 작업이 끝났고, HTML 편집창의 맨위에 있는 저장(Save) 버튼을 눌러 저장을 하고 편집창을 닫으면 됩니다.

2) 두 번째 방법: <b:includable id='main'> 코드 바로 아래에 추가

=> 해당 가젯의 태그들이 닫혀 있으므로, 왼쪽에 있는 화살표(▶)를 눌러 닫힌 태그를 엽니다. 화살표를 한 번 누르면 그 안에 또 같은 화살표가 나옵니다. 그러면 또 눌러 아래 두번째 그림과 같이 태그를 활짝 엽니다.

=> 가젯 이름(그림의 예에서는 '길안내')의 바로 아래 줄 <b:includable id='main'>의 바로 아래에 그림과 같이 준비한 태그를 추가 합니다.
그러면, <b:> 태그의 쌍이 맞지 않으므로, 그 아래의 </b:includable> 부분이 빨강색으로 표시됩니다.

=> 그림과 같이 </b:includable> 바로 위에 곧, <b:include name='quickedit' /> 바로 아래에 </b:if> 를 추가하여 <b:> 태그를 닫아 줍니다. 그러면, 빨강색 경고 표시가 녹색으로 바뀝니다.

=> 코드 추가가 끝났으므로, 편집창 맨 위의 [저장: Save template] 버튼을 눌러 저장을 하고 편집창을 닫습니다.

저장을 하면 아무런 응답이 없는 경우도 있고, 저장이 되었는데도 편집창을 닫으면 저장되지 않았다는 경고 메시지가 뜨기도 하지만, 대체로 정상적으로 저장이 됩니다.
일단 편집창을 닫은 다음, 다시 편집창을 열어 확인을 해 보고 만약 저장이 안되었으면, 다시 추가 하고 저장하면 됩니다.

=> 편집창에서 나왔으면, 블로그 대시보드 > 레이아웃(Layout)으로 가서, 가젯에 붙였던 이름을 삭제하고 저장을 합니다. 가젯의 이름을 삭제해도 위에서 설정한 기능은 정상적으로 작동합니다. 가젯의 이름이 블로그에 그대로 보이게 하고 싶으면 그냥 두면 됩니다.

=> 페이지 맨 위에서 본 여러가지 코드들도 코드를 추가하는 위치와 방법은 모두 같습니다.

어떻게 보면 아주 복잡한 것 같지만, 실제로 해보면 간단합니다.
이 기능을 잘 활용하면 여러가지 가젯을 필요한 페이지에만 보이게 함으로써 방문자에게 좀 더 깔끔하고 편리한 블로그를 만드는 데에 도움이 될 것입니다.

3) 위 첫 번째 방법과 두 번째 방법의 차이점

아래의 두 그림에서 각각 하단 부분에 녹색 사각형으로 표시한 부분을 보면 두 방법의 차이를 알 수 있습니다. 녹색 사갹형으로 표시한 부분은 페이지의 소스보기에서 해당 가젯이 위치하는 부분입니다.

첫 번째 방법으로 하면, 그림의 녹색 사각형 부분에서 보듯이, 가젯 자체가 아예 표시되지 않아 깔끔합니다. 예에서 추가한 가젯 아이디는 HTML6 이고, 아래 녹색 사각형으로 표시한 소스에서 두 줄 가운데에 위치하고 있지만, 표시되지 않습니다.

[첫 번째 방법]

두 번째 방법으로 하면, 아래 그림의 녹색 사각형 부분에서 보듯이, 페이지 소스보기를 해 보면 가젯 영역이 표시됩니다. 다만, 가젯에 들어 있는 내용부분은 표시되지 않습니다.

[두 번째 방법]

한마디로 말하자면, 첫 번째 방법은 가젯 영역자체가 아예 표시되지 않는 것이고, 두 번째 방법은 가젯영역은 표시되지만 그 내용은 표시되지 않는 것입니다. 그러므로, 첫 번째 방법이 더 깔끔하고 나은 것으로 생각됩니다.

참고 : 구글 도움말
>> https://support.google.com/blogger/answer/47270?hl=ko
>> https://support.google.com/blogger/answer/47270?hl=en
>> https://support.google.com/blogger/answer/176245?hl=ko&ref_topic=6321969

구글블로그 사용법: 특정 라벨(Label)별 글 목록 만들기 - 피드버너 부즈부스트 (FeedBurner BuzzBoost)

2015-04-13T07:06:00.002-04:00

구글 블로그에서 특정한 라벨(Label)이 붙은 글만 뽑아 목록을 만드는 방법은 여러가지를 생각해 볼 수 있겠다. 자바스크립트로 직접 코드를 만드는 방법도 있고, 피드버너(FeedBurner)의 부즈부스트 (BuzzBoost) 기능을 이용하는 방법도 있다.

직접 코드를 만드는 방법은 원하는 대로 만들 수 있는 장점이 있지만, 블로그에 어떤 변경사항이 발생하면 오류가 생겨 제대로 작동하지 않게 되므로, 그에 따라 코드를 수정해 주어야 하는 불편함이 있다.

반면에, 피드버너를 이용하면 쉽고 간단하면서도 코드 등을 수정해야 하는 번거로움에서 벗어 날 수 있다. 이 기능은 구글 블로그의 Feed URL 가운데서 특정-라벨-피드(Label-Specific-Site-Feed)와 피드버너의 부즈부스트를 이용하며, 방법은 다음과 같다.

1. 구글 블로그의 특정 라벨 피드 주소 만들기
특정 라벨의 피드주소는 아래와 같은 모양이며, 자신의 블로그 주소와 원하는 라벨을 적어 주면 된다.

[구글 블로그의 특정 라벨 피드 주소]

http://XXXXX.blogspot.com/feeds/posts/default/-/YYYYY

XXXXX <= 자신의 블로그 고유 주소 부분이다.
예컨데, 이 블로그의 주소는 http://howways.blogspot.com 이므로 고유주소는 howways 이다.
YYYYY <= 뽑고자 하는 라벨(Label)이다.
예컨데, 라벨에 자바스크립트 가 붙여진 글들을 뽑으려면, YYYYY 대신에 자바스크립트 를 써주면 된다. 그러면 아래와 같은 모양이 된다.
=> http://howways.blogspot.com/feeds/posts/default/-/자바스크립트

주의할 것은 한글로 된 라벨이름은 제대로 작동하지 않으므로, 영문자로 된 라벨을 만드는 것이 좋다.

2. 피드버너로 피드 굽기(burn)
피드버너에서 위에서 만든 주소를 굽는다. 즉, 위의 주소로 피드버너의 피드 주소를 만든다.
이에 대한 자세한 설명은 링크 페이지를 참조하면 되겠다.

3. 피드버너의 부즈부스트로 목록 만들기
피드버너의 부즈부스트(BuzzBoost) 기능을 이용하여 목록을 만들고, 스크립트를 복사하여 블로그의 원하는 위치에 추가하면 된다.
부즈부스트로 목록을 만드는 자세한 방법은 링크 페이지를 참조하면 되겠다.

실제 스크립트와 적용한 모습
이 블로그의 맨 위에 있는 메뉴를 클릭하면 보여지는 글 목록들은 위에서 설명한 방법으로 만들었으니, 메뉴 페이지들을 잘 살펴 보면 도움이 될 것이다.

참고: 부즈부스트의 스크립트는 아래와 같이 생겼다.

>> 피드버너 사용법 글 목록

구글블로그 사용법: 링크리스트(LinkList)가젯 꾸미기 - 점, 테두리, 배경, 폰트, 밑줄, 여백, 새창에 열기 등

2015-04-02T01:00:00.000-04:00

구글 블로그의 링크목록(Link List)가젯은 여러개를 달 수 있고, 링크는 기본적으로 같은 창에 열린다.

왼쪽 그림의 위는 구글 블로그 심플템플릿의 링크리스트 기본 모습이고, 아래는 CSS를 추가하여 바꾼 모습이다.

링크리스트를 여러개 달고, 각각의 링크리스트 마다 다르게 꾸밀 수 있고, 링크가 새 창(탭)에서 열리도록 할 수도 있다.

예컨데, 링크리스트를 두 개 달고, 하나는 블로그 안의 글을 링크하여 현재 창에서 열리도록 하고, 또 하나는 외부 글이나 블로그 등을 링크하여 새 창(탭)에서 열리도록 하는 것이다.

아래에서는 먼저 링크리스트의 점, 테두리, 배경, 폰트, 색상, 밑줄, 여백 등을 꾸미는 CSS코드를 설명하고, 그 다음에 특정한 링크리스트를 새 창에서 열리게 하는 HTML코드 넣는 방법을 설명한다.

1. 링크리스트 꾸미기 (CSS 코드)
위 그림의 아래쪽에 있는 두 번재 링크리스트는 아래의 CSS코드를 추가한 것이다.

[예]

#LinkList2 {border:2px solid green; background:#BEF3AE; padding:5px; font-size: 1.3em;}
#LinkList2 ul li {list-style:square; color:orange; border-bottom:1px dashed orange;}
#LinkList2 ul li a {text-decoration:none; color:Chocolate;}
#LinkList2 ul li a hovor {text-decoration:none; }

#LinkList2 의 수자 "2"는 링크리스트를 여러개 넣으면 붙여지는 일련 번호이다. 첫 번째 넣은 링크리스트는 LinkList1, 두 번째 넣은 링크리스트는 LinkList2, 세 번째 넣은 링크리스트는 LinkList3, ... 로 된다.

#LinkList2 {~~~} 는 링크리스트 가젯 자체의 전체적인 속성을 지정한다.
   border: 은 가젯의 테두리를 지정한다
   background: 는 가젯의 배경색을 지정한다
   padding: 은 안쪽 여백을 지정한다
   font-size: 는 글자 크기를 지정한다

#LinkList2 ul li {~~~}는 LinkList2 안에 있는 목록을 지정한다. 곧, 각 목록의 테두리, 배경색, 안팍여백 등을 지정한다.
   list-style: 은 목록 앞에 붙어 있는 단추를 지정한다. 기본은 위 그림의 위쪽에 있는 것과 같은 점이 표시된다.
list-style: circle;     <= 동그라미 표시
list-style: square;   <= 네모 표시
list-style: number; <= 수자 1 2 3 .... 표시
list-style: none; <= 단추를 표시하지 않고 숨긴다. 단추를 숨기면 그 자리가 공백이 남게 되므로 margin: 15px; 등과 같이 마진을 주어 여백을 조절하면 된다.
   color: 은 목록 앞의 단추 색상을 지정한다.
   border: 은 각 목록을 둘러싸는 테두리를 지정한다. 위 그림에서는 border-bottom을 써서 각 목록 아래쪽에만 점선을 표시했다.

#LinkList2 ul li a {~~~} 는 링크의 기본 설정을 지정한다.
   text-decoration: none; <= 링크에 밑줄 등이 표시되지 않게 한다
   color: 목록의 색상을 지정한다

#LinkList2 ul li a hovor {~~~} 는 링크목록에 마우스가 올라 갔을 때의 속성을 지정한다
   text-decoration: none; 목록에 마우스가 올라 갔을 때 밑줄이 표시되지 않도록 한다

꾸밈에는 위의 예에서 보인 속성 뿐만이 아니라 HTML의 여러가지 속성들을 줄 수 있으므로, 필요한 속성을 주고 조절하여 꾸미면 된다.

위와 같이 만든 속성은, 블로그 템플릿디자이너에서 추가하면 되고, 자세한 방법은 링크 페이지에 자세히 설명되어 있으니 참조하면 된다.

2. 특정 링크리스트를 새 창(탭)에서 열기
구글 블로그에서 모든 링크는 기본적으로 현재 창에서 열린다.
블로그의 특정한 페이지 또는 외부 블로그나 사이트로 가는 링크는 새 창에서 열리게 하고 싶을 때가 있다.

새창에서 열고자 하는 링크리스트 가젯의 링크 코드에 "target='_blank'"를 추가하면 된다.
=> 블로그 대시보드 > 템플릿(Template) > HTML편집(Edit HTML)
=> 열린 HTML편집창에서, 꾸미고자 하는 링크리스트가젯으로 이동 (예에서는 LinkList2)
=> 아래와 같이 코드에 target='_blank' 를 추가하고 저장(Save template)한다

[추가하기 전]

[추가한후]

※ 참고
아래의 코드를 블로그 템플릿디자이너에서 추가하면, 블로그의 모든 링크는 새창에서 열린다.

구글블로그 사용법: 라벨가젯(Label gadget) 꾸미기 - 여백 마진 패딩 폰트 테두리 배경 색상 등

2015-04-01T01:00:00.000-04:00

구글블로그의 라벨가젯(Label Gadget)이 어떻게 보면 좀 멋이 없는 듯하다. 그래서인지 라벨가젯을 아예 새로 만들어 붙이는 블로거들이 많이 보이고 HTML 코드도 많이 있다.

굳이 별도로 만들지 않더라도, 간단한 CSS 코드 추가만으로도 어느 정도까지는 블로그에 어울리도록 꾸밀 수 있다. (CSS코드를 추가하는 방법은 링크 페이지 참조)

아래 그림의 왼쪽은 구글블로그 심플템플릿의 기본 가젯 모습이고, 아래는 배경색, 테두리 그리고 글자크기의 세 항목만 추가하여 꾸민 예이다.

1. 라벨가젯 꾸미기

[라벨가젯을 꾸미는 CSS 코드]

#Label1 { ~~~~~ }

ㅇ Label1의 수자 "1"은 첫번째로 추가한 라벨가젯을 지칭한다. 블로그에 라벨가젯을 여러개 달았다면, 첫 번째 단 것은 " Label1 ", 두 번째 단 것은 " Label2 ".... 식으로 번호가 붙여진다.

ㅇ ~~~ 부분에는 HTML에서 쓸 수 있는 여러가지 속성들을 추가하여 꾸미면 된다. 아래는 흔히 쓰이는 속성들을 보인 것이다.

border: 3px solid #82D200; <= 테두리
border-radius: 0px;   <= 테두리 둥글게
background: #E0FFAE;    <= 배경색
margin: 0px;   <= 바깥 여백
padding: 7px;   <= 안 여백
font-size:1.3em; <= 글자 크기
font-family: 바탕;   <= 글꼴
text-decoration: none; <= 글자 꾸밈

ㅇ 위와 같이 하면, 왠 만한 것은 꾸밀 수가 있다. 하지만 color 속성을 주어도 글자의 색상은 바뀌지 않는다. 라벨에는 링크가 걸리기 때문에, 블로그의 기본 링크 속성이 그대로 적용되기 때문이다. 글자의 색상도 바꾸려면 아래와 같이 하면 된다.

2. 라벨가젯 꾸미기 - 폰트 색상도 바꾸기

[라벨가젯을 꾸미는 CSS 코드 - 폰트 색상도 바꾸기]

#Label1 {margin: 0px; padding: 10px; border: 1px dashed #bbb; border-radius:5px; ~~~}
#Label1 a {~~~}
#Label1 a:visited {~~~}
#Label1 a:active {~~~}
#Label1 a:hover {~~~}

#Label1 h2 {~~~}

ㅇ Label1 h2 는 라벨 가젯 타이틀 속성을 제어한다.
ㅇ ~~~ 부분은 위에서와 같이 꾸미고자 하는 속성들을 추가하여 블로그에 어울리도록 조절하면 된다.
ㅇ 위에서는 적용되지 않는 color도 지정할 수 있으므로 아래와 같이 색상을 주면 된다.
color: #0055E5;
ㅇ CSS코드를 추가하는 방법은 위와 같이 블로그 템플릿디자이너에서 하면 쉽다.

구글블로그 사용법: 위젯(가젯) 사이의 여백 조절하는 방법

2015-02-22T18:23:00.000-05:00

블로그의 꾸밈새에 따라 가젯(gadget) 또는 위젯(widget) 사이의 간격을 조절할 필요가 있을 때가 있다. 아래와 같이 간단한 코드를 추가함으로써 쉽게 그리고 잘 어울리도록 조절할 수 있다.

블로그의 모든 가젯에 같은 간격을 주고자 할 때

.widget {margin:10px 0px;}

오른쪽(right) 사이드바에 있는 가젯의 간격만 조절하고자 할 때

#sidebar-right-1 .widget {margin:10px 0px;}

왼쪽(left) 사이드바에 있는 가젯의 간격만 조절하고자 할 때

#sidebar-left-1 .widget {margin:10px 0px;}

ㅇ #sidebar-right-1 의 숫자 " 1"은 사이드바 갯수에 따라 달라진다. 사이드바가 하나만 있다면 " 1"이지만 사이드바 영역을 여러개로 한 다중 사이드바의 경우 숫자는 "1", "2"...와 같이 붙여진다.

ㅇ 코드를 추가하는 방법은 링크페이지에 자세히 설명되어 있으니 참고하면 된다.
CSS코드 추가 변경하는 방법 2가지

구글블로그 사용법: 애드센스 가젯 또는 위젯(Gadget / Widget)의 여백을 조절하는 방법

2015-01-25T13:17:00.003-05:00

구글 블로그의 애드센스 가젯(위젯)을 사용하여 애드센스를 추가하면, 블로그 템플릿의 여백이 적용된다.
애드센스 가젯(위젯)의 위치나 여백을 조정함으로써 블로그에 잘 어울리도록 꾸미려면 아래의 코드를 추가하여 조절할 수 있다.

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

[추가할 코드]

#AdSense1{margin: 0px 0px 0px -15px; padding: 0 0 0 0;}

ㅇ 위 코드의 AdSense 다음에 붙어 있는 숫자 " 1 "은 애드센스 가젯(위젯)을 몇 개 추가하는가에 따라 달라진다. 즉, 첫번재 추가한 애드센스 가젯(위젯)은 " AdSense1 "이고, 두 번째 추가한 가젯(위젯)은 " AdSense2 "가 된다.

ㅇ margin과 padding의 숫자를 블로그에 잘 어울리도록 적절히 조절하면 된다. 단위는 px, pt, % em 등을 사용할 수 있다.

ㅇ 참 고:
- 블로그의 애드센스 가젯(위젯)으로 애드센스를 추가할 때, 링크-애드센스(Link units)는 추가가 되지 않고 오류가 난다. 이 오류는 이미 알려진 오류이라고 하니, 수정이 될 것이다.
- 가젯의 영역보다 큰 사이즈의 애드센스 단위를 추가하면, 블로그에 애드센스가 보여지지 않는다.

구글블로그 사용법: 라벨 클라우드 글자 크기(font-size) 설정 및 정렬하는 방법

2015-01-23T03:26:00.003-05:00

구글 블로그에서 라벨가젯(Labels Gadget)을 추가하면, 왼쪽 그림에서 보는 것과 같이, 해당 라벨에 해당하는 글 수에 따라 라벨의 글자크기가 5단계로 표시된다.

라벨 글자크기를 조절하고 정렬을 하여 블로그에 잘 어울리도록 꾸미려면 아래의 코드를 추가하여 조절하면 된다

ㅇ 아래의 코드들에서 폰트 사이즈 단위는 %, px, pt, em 등을 사용할 수 있다. (사이즈 단위에 대한 자세한 설명은 링크페이지 참조 )

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

[라벨의 글자 크기를 일정하게(같게) 하는 코드]
라벨에 해당하는 글 수에 관계없이 라벨의 글자 크기를 일정하게 하려면 아래의 코드를 추가하면 된다.

.label-size {font-size:1em;}

[라벨의 글자크기를 단계별로 조절하는 코드]

.label-size-1 {font-size:0.8em; opacity:0.8;}
.label-size-2 {font-size:0.9em; opacity:0.9;}
.label-size-3 {font-size:1.0em;}
.label-size-4 {font-size:1.2em;}
.label-size-5 {font-size:1.5em;}

[라벨 정렬하는 코드]
라벨을 왼쪽, 오른쪽, 가운데 또는 알맞게 등으로 조절하려면, 아래의 코드를 추가하면 된다.
>> 왼쪽정렬 left, 오른쪽정렬 right, 가운데정렬 center, 자동으로정렬 justify

.cloud-label-widget-content {
text-align:justify;}

[라벨가젯 추가하는 방법]

=> 블로그의 대시보드 > 레이아웃(Layout) > 가젯추가(Add A Gadget)
=> 가젯추가 창이 열리면, 라벨(Labels)가젯을 선택
=> 표시(Display)란에서 클라우드(Cloud)를 선택하고 저장(Save)

구글블로그 사용법: 페이지가젯(Pages Gadget)으로 카테고리 메뉴 만들기

2014-09-29T23:55:00.001-04:00

경로: 블로그대시보드 > 레이아웃 > 가젯 > 페이지 가젯

구글 블로그에서는 라벨이나 검색결과 링크를 페이지가젯에 연결하여 아래 그림과 같은 메뉴바나 카테고리를 만들 수 있습니다.

목록(카테고리,메뉴) 만들기

1.목록(카테고리,메뉴) 이름과 링크할 주소(URL)를 만듭니다.

ㅇ 라벨을 이용할 때 주소 모양은 아래와 같습니다. 맨 끝의 한글 부분이 라벨이름입니다.

http://howways.blogspot.com/search/label/구글블로그

ㅇ 검색을 이용하여 만든 주소 모양은 아래와 같습니다. 맨 끝의 한글 부분이 '검색어'입니다.

http://howways.blogspot.com/search?q=구글블로그

검색어 링크는 복수 낱말을 AND 및 OR검색을 하여 만들 수도 있습니다. 링크 페이지에 자세한 설명이 있습니다. 복수 낱말 AND / OR 검색하는 방법 >>

2.페이지 가젯으로 카테고리(메뉴)를 만듭니다(아래 그림 참조)

=> 블로그 대시보드 > 레이아웃(Layout) > 가젯추가(Add a Gadget) > 가젯선택창에서 [Pages]가젯을 선택하고 저장을 눌러 페이지가젯을 추가합니다.
기존에 추가한 것이 있으면 그것을 사용하면 됩니다.

=> 페이지가젯(Pages)의 편집(Edit)을 눌러 가젯설정(Configure Page List)창을 엽니다
=> 외부링크추가(Add external link)를 눌러 입력창을 열고 > 카테고리(메뉴) 이름과 주소(URL)를 입력하고 > 저장(Save Link)을 누릅니다. 위에서 미리 준비한 것을 복사하여 붙여 넣어면 됩니다.
=> 추가된 항목을 마우스로 끌어서 순서를 조정하고 > 저장(Save)을 누릅니다.

* 홈(HOME) 메뉴도 넣고 싶으면, [HOME]에 체크를 합니다.

페이지가젯에는 꼭 구글블로그 안의 라벨이나 검색결과 링크 뿐만 아니라 블로그 밖의 모든 주소(URL)을 추가할 수 있습니다. 예컨데, 블로그를 여러개 가지고 있을 때, 다른 블로그로 가는 링크도 추가할 수 있습니다.

구글블로그 사용법: 페이지(pages)가젯 링크페이지 추가/삭제 오류 해결하기

2014-04-05T04:12:00.003-04:00

차례: 페이지가젯의 주소(URL)를 브라우저 새창에서 열고 링크페이지를 삭제/추가한다

얼마전에 다이나믹뷰 템플릿이 업그레이드 되면서, 페이지(Pages) 기능이 크게 변경되었다.

이와 함께, 이전에 페이지(Pages)에서 링크를 걸어 놓았던 부분이 페이지가젯에서 삭제되지 않고, 또 새로운 링크페이지가 등록되지 않는 오류가 생겼다.

왼쪽 그림에서 윗쪽에 있는 "글 쉽게 찾기"는 템플릿 업그레이드 이전에 페이지(Pages)에서 링크를 단 것인데, 업그레이드 이후에는 페이지가젯에서 삭제되지도 않고, 새로운 링크페이지가 등록되지도 않는 것이다.

해결방법은 2가지를 생각해 볼 수 있겠다. 우선은 간단한 첫번째 방법으로 해보고 안되면, 2번째 방법으로 해보면 해결이 될 것이다.

방법 1: HTML의 PageList 위젯 번호를 수정한다

=> 블로그대시보드 > 템플릿(Template) > HTML편집(Edit HTML)을 눌러 HTML편집창을 연다
=> 위 그림과 같이, [위젯바로가기 : Jump to widget]버튼의 드랍다운 메뉴에서 "PageList2"를 선택한다. 그러면 PageList2가 있는 곳으로 이동된다.

=> PageList2의 맨 끝에 있는 "2"를 그림과 같이 "1"로 고친 다음에, 템플릿저장(Save template)를 눌러 저장한다.

주) 위 그림에서는 "PageList2"로 되어 있던 것을 "PageList1"으로 고친 후의 모습입니다.

방법 2:

주) 아래는 Zorrofresh2님이 공개한 방법을 그림을 덧붙여 설명한 것입니다.

왼쪽 그림과 같이;

=> 블로그 대시보드 > 레이아웃(Layout) > 페이지가젯(Pages)의 편집(Edit)을 눌러 가젯창을 연다

=> 열린 가젯창의 주소(URL) 위에 마우스를 올려 놓고 오른쪽 버튼을 눌러 주소(URL)를 복사(Copy)한다

아래 그림과 같이;

=> 브라우저의 새창을 하나 열고, 브라우저 주소창에 마우스를 올려 놓고 오른쪽 버튼을 누른 다음 붙여넣기(Paste)를 한다

=> 붙여 넣은 주소의 맨 오른쪽 끝 부분을 보면 "~~ =PageList2"라고 되어 있을 것이다.
숫자 "2"를 "1"로 바꾼 다음 엔터키를 쳐서 페이지리스트 관리창을 연다.

=> 삭제하고자 하는 링크페이지의 오른쪽 위에 있는 "X"버튼을 눌러 삭제하고자 하는 링크페이지를 삭제한다.

=> 확인창이 뜨면, [OK]를 누른다

=> [저장(Save)] 버튼을 누른다

이제 블로그에서 새로고침을 하면, 이전의 링크페이지가 삭제되어 있을 것이다.

위와 같이 하여도 되지 않으면;

=> 블로그 대시보드 > 레이아웃(Layout) 창에서 모든 페이지가젯(Pages)을 삭제한 다음 저장을 하고 레이아웃에서 완전히 빠져 나온다
=> 다시 레이아웃으로 가서, 페이지가젯(Pages)을 하나 추가한 다음에, 위와 같이 하면 해결이 될 것이다.

페이지가젯(Pages)에 새로운 링크페이지를 넣으려면,위에서와 마찬가지로;

=> 페이지가젯창의 주소(URL)를 복사하여
=> 브라우저 새 페이지에 붙여 넣고 엔터키를 쳐서 페이지리스트(Configure Page List) 관리창을 열고
=> 페이지 가젯에 링크페이지를 추가(Add Link Page) 한다.

구글블로그 사용법: 파퓰러 포스트 (많이 읽은 글, 인기있는 글) 꾸미기

2014-04-04T04:27:00.002-04:00

차례 : 블로그 대시보드 > 템플릿 > 사용자정의 > 고급설정 > CSS추가

왼쪽의 그림은 파퓰러가젯의 글자크기, 배경색, 테두리, 안과 밖이 여백등을 설정한 뒤의 모습이고, 오른쪽은 설정하기 전의 모습이다.

파퓰러가젯을 블로그에 추가하려면,
=> 블로그 대시보드 > 레이아웃(Layout) > 가젯추가(Add a gadget) > 파퓰러 포스트(Poular Posts)를 선택한다.

구글블로그의 파퓰러가젯을 블로그와 잘 어울리도록 꾸미려면, 아래와 같이 필요한 코드를 추가하면 된다.

=> 블로그 대시보드 > 템플릿(Template) > 사용자정의(Customise) > 고급설정(Advanced) > CSS코드추가(Add CSS)로 이동하여 아래 그림과 같이 입력란에 코드를 추가한다.

[추가할 코드]

/* Popular Posts
------------------------------- */
.widget .popular-posts ul {
margin: 10 10 10 10;
padding: 15 15 15 15;
border: 1px solid gold;
background-color: silver;
font-size: 13px;
}

margin => 바깥 여백
padding => 안 여백
border => 테두리
background-color => 배경색
font-size => 글자 크기
블로그와 잘 어울리도록 필요한 항목만 추가하고 숫자를 적절히 조절하면 된다.

파퓰러 포스트를 제어하는 방법은 기본적으로 위와 같다.
포퓰러 가젯을 여러 개 추가하였을 경우에는 모든 파퓰러 포스트 가젯을 한 꺼번에 제어하거나, 또는 각각 제어할 필요가 있을 수 있다. 이를 때는 아래와 같이 코드를 상황별로 사용함으로써 가능하다.

[파퓰러 포스트 가젯 전체를 제어하는 코드]

/* Popular Posts
------------------------------- */
.widget .popular-posts { ~~~ }
.widget .popular-posts ul { ~~~ }
.widget .popular-posts ul li { ~~~ }
.widget .popular-posts ul li:hover { ~~~ }
.widget .popular-posts a { ~~~ }

.widget PopularPosts { ~~~ }
.widget-content popular-posts { ~~~ }

[파퓰러 포스트 가젯을 개별적으로 제어 하는 코드]

#PopularPosts1 { ~~~ }
#PopularPosts1 ul { ~~~ }
#PopularPosts1 ul li { ~~~ }
#PopularPosts1 ul li:hover { ~~~ }
#PopularPosts1 a { ~~~ }

#PopularPosts1 .item-content { ~~~ }
#PopularPosts1 .item-thumbnail { ~~~ }
#PopularPosts1 .item-title { ~~~ }
#PopularPosts1 .item-snippet { ~~~ }

가젯을 여러 개 추가하면 가젯의 아이디(ID)가 1 2 3 ... 과 같이 일련번호로 자동부여 되므로, 첫 번째 추가한 파퓰러 포스트 가젯의 아이디는 PopularPosts1 이고, 두 번째 추가한 가젯의 아이디는 PopularPosts2 ..... 와 같이 되므로, 꾸미고자 하는 가젯의 아디를 사용하면 된다.

[파퓰러 포스트 이미지 제어하는 코드]

.popular-posts .item-thumbnail img {
   webkit-border-radius: 100px;
   -moz-border-radius: 100px;
   border-radius: 100px;
   -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
   -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
   box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

radius 는 이미지의 네 꼭지를 둥글게 하는 인자이고, shadow 는 이미지의 테두리에 그림자 효과를 주는 인자이다. 블로그에 어울리도록 수자를 조절하여 적용하면 된다.

구글블로그 사용법: 블로그 아래에 카피라이트(copyright) 나 문구 넣는 방법

2014-02-15T00:23:00.004-05:00

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

구글 블로그에서 맨 아래에 카피라이트(copyright)나 문구를 넣으려면 애트리뷰션(Attribution) 가젯을 이용하면 된다.

경로는
=> 블로그 대시보드 > 레이아웃(Layout) > 가젯추가(Add a Gadget) > 열린 가젯추가 창에서 "Attribution"가젯 선택 > Attribution 창에서 카피라이트나 문구 입력 > 저장(Save)

애트리뷰션(Attribution) 가젯을 이용하면, 위에서와 같이 카피라이트나 문구를 넣을 수 있지만, 그 옆에는 애트리뷰션(........Powered by Blogger.)도 같이 표시된다.
표시하지 않게 하려면, 애트리뷰션 가젯을 제거(remove)하면 된다.

구글블로그 사용법: 애트리뷰션(Attribution: ....Powered by Blogger) 안보이게 제거 (remove) 하는 방법

2014-02-14T23:51:00.000-05:00

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

블로그 툴이 대부분 그렇듯이, 구글 블로그에도 맨 아래에 "Simple template. Powered by Blogger."와 같이 애트리뷰션(Attribution)이 표시된다.

블로그의 구조에 따라서는 그냥 두어도 보기에 거슬리지 않기도 하지만, 다이나믹 뷰(Dynamic View)에서는 위의 그림에서 보는 것처럼 조금 거슬린다. 이 애트리뷰션을 표시되지 않도록 하는 방법은 아래와 같이 3가지가 있다.

방법 1: CSS코드 추가

블로그 템플릿디자이너나 HTML편집창에서 아래의 CSS코드를 추가해 주면된다.
(CSS코드를 추가하는 자세한 방법은 링크 페이지 참조)

#Attribution1 {display:none;}

CSS코드를 추가하는 방법이 가장 간편하고 확실하다.
아래 방법2는 템플릿에 따라 제대로 작동이 안되는 경우도 있는 것 같고, 특히, HTML편집창에서 애트리뷰션 제거 버튼을 활성화 시키고 제거를 하여도 되지 않는 템플릿이 있다.

방법 2: 애트리뷰션 가젯의 제거 버튼 활성화 및 제거
=> 블로그 대시보드 > 레이아웃(Layout) > "Attribution"가젯의 편집(Edit) > 열린 가젯창에서 [제거.Remove] > 안내창에서 [확인.OK]

템플릿에 따라 위 그림에서와 같은 [제거: Remove] 버튼이 안 보일 수 도 있다. 이럴 때는 HTML편집창에서 버튼을 보이게 설정한 다음에 애트리뷰션을 해제하면 된다.

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

애트리뷰션(Attribution) 코드 설정하기
=> 위젯바로가기(Jump to widget) > 애트리뷰션(Atrribution1)을 누르면, 그림에서 보는 것처럼, 애트리뷰션 코드가 있는 곳으로 이동된다.

=> 노랑색으로 표시한 코드를 찾아서, "locked='true' 부분의 true 를 false 로 바꾼다
=> 창의 맨위에 있는 [저장: Save template] 버튼을 눌러 저장한다.

이제, 애트리뷰션 제거버튼이 표시되도록 설정되었으므로
=> 블로그대시보드 > 레이아웃(Layout) > 애트리뷰션(Attribution)으로 가면, 위에서 설명한 것과 같이 [제거: Remove]버튼이 표시되어 있을 것이다.

애트리뷰션코드가 다이나믹뷰에서는, 그림의 아래쪽에서 보는 것처럼, HTML의 맨 아래 부분에 있다.

위와 같은 방법으로 애트리뷰션 코드를 찾기가 어려우면, 아래 그림과 같이,
HTML편집창에서 [컨트롤 + F]키를 눌러 검색창을 연 다음, 검색창에 아래의 코드를 복사하여 붙여 넣고 [엔터]키를 치면, 코드가 있는 위치로 이동되어 노랑색으로 표시가 된다.

<b:widget id="Attribution1" locked="true" title="" type="Attribution">

방법 3: 애트리뷰션 코드 부분을 주석 태그로 감싸기
템플릿에 따라서는 위와 같이 애트리뷰션 제거(remove)버튼을 활성화 시키면 템플릿이 아예 저장되지 않기도 하고, 레이아웃에서는 제거가 되었지만 블로그에는 그대로 표시되는 경우도 있다. 이런 경우에는 위에서 살펴본 방법으로는 해결이 되지 않는다.
그럴 때는 블로그 HTML 편집창에서 애트리뷰션 코드 부분을  의 주석 태그로 감싸면 된다. 곧, 애트리뷰션 코드를 주석처리 하는 것이다.

1) HTML편집창에서 애트리뷰션 태그 위치로 가기
=> 위에서 마찬가지로, 블로그 대시보드 > 템플릿 > HTML 편집 으로 이동하여 HTML 편집창을 열고
> 위젯 바로가기 (Jump to Widget) 버튼을 눌러 애트리뷰션(Attribution1)을 선택하여, 아래 두 번째 그림과 같이 애트리뷰션 태그 위치로 이동한다.

2) 애트리뷰션 태그를 주석 태그로 감싸기
주석태그로 쌓인 부분은 HTML에서 주석으로 처리하므로, 표시되지 않게 되는 것이다.
=> 아래 그림과 같이 애트리뷰션 태그 부분을 주석태그로 감싼다. 애트리뷰션 태그는
<b:section ~ 에서 부터 </b:section> 까지이다.
=> 주석태그의 시작 부분은  이다. 이 부분을 키보드로 입력해도 되고, 빨강색으로 표시된 주석태그를 복사하여 붙여 넣어도 된다.
=> HTML 편집창의 맨 위에 있는 저장 (Save template)를 눌러 저장을 하고, 편집창을 닫는다. 편집창을 닫으면, 변경된 내용이 저장되지 않았다는 오류 메시지가 뜰 경우가 있는대, 일단 저장 버튼을 누른 다음에, 편집창에서 빠져 나와, 애트리뷰션이 제거 되었는지 확인해 보면, 된다.

구글블로그 사용법: 가젯.위젯(gadget.widget)의 안팎 마진(여백) 조절하는 방법

2014-02-11T01:52:00.002-05:00

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

구글 블로그의 템플릿을 적용하여 보면, 블로그 구조에 따라 위젯(가젯)의 안팎 여백을 조절할 필요가 있을 때가 있다. 아래와 같이 코드를 추가해 주면 간단히 해결할 수 있다.

1. 메인과 사이드바의 모든 위젯에 적용

/* Main and Sidebar widget
---------------------------------------- */

.sidebar .widget, .main .widget { 

border-bottom:1px dotted $bordercolor;
margin:1px 2px 3px 4px;

padding:1px 2px 3px 4px;
}

2. 메인의 모든 위젯에만 적용

/* Main widget
---------------------------------------- */

.main .widget {

border-bottom:1px dotted $bordercolor;
margin:

1px 2px 3px 4px;
padding:1px 2px 3px 4px;
}

3. 사이드바의 모든 위젯에만 적용

/* Sidebar widget
---------------------------------------- */

.sidebar .widget{ 

border-bottom:1px dotted $bordercolor;
margin:

1px 2px 3px 4px;
padding:1px 2px 3px 4px;

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

※ border-bottom:1px dotted $bordercolor;
이 코드는 위젯의 아랫쪽 테두리선을 지정하는 것이므로 필요에 따라 삭제해도 됩니다.
코드의 " $bordercolor "부분은 #123456 과 같은 색상코드로 바꾸어도 됩니다.

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

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

구글블로그 사용법: 페이지(즈) 가젯 (pages gadget)으로 상단 헤더(header) 및 사이드바 메뉴 만들기와 꾸미기

2014-01-04T09:46:00.001-05:00

페이지 가젯을 사용하면 아래 그림과 같은 메뉴바를 쉽게 만들 수 있다.

페이지 가젯으로 만든 메뉴와 다른 가젯으로 만든 메뉴의 차이점
메뉴는 라벨 가젯 (Label gadget), 링크리스트 가젯 (Link List gadget), HTML/Java script 가젯 등으로도 만들 수 있지만, 페이지 가젯으로 만드는 것과 차이가 있다. 페이지 가젯으로 만든 메뉴는 모바일 템플릿에도 그대로 적용이 되므로 모바일 기기에서도 메뉴가 보여지는 반면에 다른 가젯으로 만든 메뉴는 그렇지 않다.

[페이지 가젯으로 만든 상단 메뉴의 예]

페이지가젯으로 메뉴 만들기

페이지 가젯의 두 가지 기능: 페이지 가젯에서 메뉴 링크를 만드는 방법에는 페이지가젯에서 직접 링크를 걸어 주는 방법과 페이지즈(pages)로 만든 페이지에 링크를 거는 방법이 있다.

1) 페이지 가젯에서 직접 링크를 거는 방법
아래 그림에서 초록색 ① ② ③ 경로를 통해 가젯에서 직접 링크를 만들 수 있다.
=> ① 외부링크 추가 (+Add external link) > ② 페이지 타이틀 (메뉴 이름)과 연결 될 주소(URL)을 입력하고 저장(Save Link)
=> 그러면, ③과 같이 메뉴목록에 추가 된다. 예에서는 메뉴이름을 HTML 로 하였다.
=> 이 기능은 블로그 내의 글 뿐만이 아니라, 블로그 밖의 어떤 링크도 걸 수 있다.

2) 페이지즈 (pages)로 만든 페이지에 링크를 거는 방법
아래 그림에서 주황색 ① ② 경로를 통해 링크를 만든다.
=> 블로그 대시보드 > 페이지즈 (Pages) > 새 페이지 (New Page)를 선택하면, 블로그 글(post) 쓰기 창과 같은 모양의 페이지 작성 창이 열린다.
=> 페이지 작성에서 적은 글 제목이 곧 페이지가젯의 메뉴이름이 된다. (페이지 작성과 특성에 관한 자세한 내용은 링크 페이지 참조)
=> 페이지즈로 만든 페이지들은 주황색 ② 번과 같이 페이지가젯에 표시 된다. 메뉴바에 링크를 걸고자 하는 페이지 앞의 사각형 체크박스를 클릭하여 체크를 하면, 아래 쪽의 메뉴목록에 추가된다.

3) 메뉴 순서 조절하기
=> 아래 그램에서 초록색 ③ 번 (메뉴이름 "HTML")의 앞쪽에 보라색으로 표시한 것과 같이, 점으로 된 사각형 조정자를 마우스로 잡아 아래/위로 끌어 순서를 조절하면 된다.
=> 작업이 완료 되었으면 가젯의 맨 아래에 있는 저장(Save)을 눌러 가젯 창을 닫는다.

4) 페이지 가젯을 배치하는 위치와 모양
페이지가젯을 헤더(header) 영역에 넣으면, 맨 위의 그럼처럼, 가로 모양의 메뉴바가 되고, 페이지가젯을 사이드바 영역에 넣으면 세로 모양이 되어 링크리스트(Link List) 가젯과 같은 모양이 된다.
블로그 대시보드 > 레이아웃(Layout)에서 헤더 영역은 헤드(Header), 크로스-칼럼(Cross-column)이다. 곧, 이 영역에 페이지 가젯을 넣으면, 가로 모양의 메뉴바가 된다.

5) 페이지 가젯을 CSS로 꾸미거나 제어하기
페이지 가젯의 고유 아이디(ID)는 PageList1 PageList2 PageList3 ... 로 부여되므로, 아래와 같이 CSS를 설정하면 된다.

#PageList1 {margin: 0px; padding: 0px;}
#PageList1 ul {margin: 0px; padding: 0px;}
#PageList1 ul li {margin: 0px; padding: 0px;}
#PageList1 ul li a {margin: 0px; padding: 0px;}
#PageList1 ul li a:hover {margin: 0px; padding: 0px;}

첫번째는 페이지 가젯 영역 전체를 제어 하는 것이고, 두 번째는 링크를 제어하는 것이고, 세번째는 마우스가 올라 갔을 때를 제어하는 것이다. (CSS코드를 넣는 방법은 링크페이지 참조)

6) 아래의 이전 버전 내용 가운데서,
3. 메뉴 링크 만들기(위의 웹주소 : Web address를 이용)는 변함이 없으므로 참고 하면 되겠다.

<< (주) 아래는 기능이 변경되기 이전의 내용입니다. >>

구글 블로그의 페이지즈(pages)는 두 가지 기능을 가지고 있다.
하나는 일반 글(posts)쓰기와 같이 글을 쓸 수 있는 기능이고, 또 하나는 특정 주소(URL)로 연결(redirect)시킬 수 있는 링크를 걸어 메뉴를 만드는 기능이다.

1. 페이지(pages) 만들기 창으로 가기

옆의 그림과 같이
=> 블로그 대시보드 > 페이지(Pages)를 누르면, 그림의 오른쪽에 보이는 것과 같은 페이지를 만드는 창이 열린다.

아무런 페이지를 만들지 않았다면 즉 초기 상태라면, 기본적으로 [Home] 하나만 만들어져 있다.

[Home] 페이지의 편집(Edit)을 누르면, 그림의 오른쪽 아래에 주황색으로 표시한 것과 같은 창이 뜬다.

[Home]은 최신 글을 맨위로 하여 지정된 숫자만큼 보여지도록 되어 있으므로, 변경이 되지 않는다. 다만, 그림에서 보듯이 "Home"라는 글자는 "대문" "나들문" 등과 같이 원하는 대로 변경할 수 있다.

2. 새 페이지 만들기(New Page)

아래 그림처럼, 새페이지(New page)를 누르면, 두 가지 메뉴가 있다.
ㅇ 빈페이지 : 텍스트나 미디어를 올림 (Blank page : Add text and media)
ㅇ 웹 주소 : 방문자를 다른 웹주소로 연결시킴(Web address : Send reader to another web address)

1) 빈페이지(Blank page): 일반적인 글 올리기
빈페이지는 일반 글쓰기(posts)와 같이 글이나 그림 동영상 등을 넣어서 웹페이지를 만들 수 있지만, 일반 글쓰기(posts)와는 목적과 기능에 차이가 있다. 자세한 내용은 다음 페이지를 참고 하기 바란다.
글(posts)과 페이지즈(pages) 차이점 >>

2) 웹 주소(Web Address) : 메뉴 만들기
=>대시보드 > 페이지(pages) > 새페이지(New page) > 웹주소(Web address)를 누르면, 아래 그림과 같이 웹주소를 연결(리다이렉트)할 수 있는 창이 열린다.

두 개의 입력란 가운데
ㅇ 첫 번째 입력란에는 만드는 페이지의 이름을 입력한다. 페이지의 이름은 블로그 상단(헤더)나 사이드바의 메뉴 이름이 되므로, 그 점을 고려하여 알맞게 만들면 된다.
ㅇ 두 번째 입력란에는 메뉴를 눌렀을 때 연결될 목적지 페이지의 주소(URL)을 입력한다.

창의 맨 아래에 있는 저장(Save)을 누르면, 위 그림에서 본 [Home] 아래에 새로 만든 페이지 이름이 표시된다.

3. 메뉴 링크 만들기(위의 웹주소 : Web address를 이용)

1) 블로그 밖의 웹주소 연결 메뉴
위의 그림에서 웹주소(URL)는 블로그 안에 있는 글의 주소 뿐만이 아니라 블로그 밖의 주소도 허용이 된다. 예컨데, 친구의 블로그 주소나 트위트 주소도 연결 시킬 수 있다.

2) 구글 블로그에서 메뉴 링크를 만드는 방법은 라벨(Label)검색을 이용하는 방법과 글 검색을 이용하는 방법이 있다. 물론 외부의 API를 이용하면 다양한 링크를 만들 수 도 있다.

2-1) 라벨검색 링크 만들기
블로그 글이나 라벨가젯에서 메뉴링크로 만들고자 하는 라벨을 클릭한 다음, 브라우저의 주소창에 있는 주소(URL)를 복사하여 넣으면 된다. 라벨검색결과 페이지의 주소 모양새는 아래와 같다.

http://howways.blogspot.kr/search/label/구글블로그

빨강색 부분이 라벨 이름이며, 라벨검색에서는 정확히 일치하지 않으면 검색이 되지 않는다. 라벨검색 링크는 하나의 라벨만을 검색하여 만들 수도 있고, 여러개의 라벨을 그리고(AND)로직이나 또는(OR)로직으로 검색하여 만들 수도 있다. 라벨과 관련된 상세한 내용은 다음 글을 참조하기 바란다.

메뉴(카테고리/ 목록) 만들 때 주의사항 - 라벨(Label) 및 검색 페이지 링크 >>
복수 라벨(Label) 검색 - 그리고(and) / 또는(or) 검색 >>
글에 라벨(Label) 달기/넣기 방법 >>

2-2) 글 검색 링크 만들기
블로그 검색결과 페이지를 메뉴링크로 만들고자 한다면, 검색창에서 원하는 검색을 한 다음, 브라우저의 주소(URL)를 복사하여 넣으면 된다. 주소 모양새는 아래와 같다.

http://howways.blogspot.com/search?q=구글블로그

빨강색 부분이 입력한 검색어이다. 위의 라벨검색에서와 마찬가지로, 검색어 검색에서도 하나의 검색어를 검색하여 메뉴링크를 만들 수도 있고, 여러개의 검색어를 그리고(AND)로직이나 또는(OR)로직으로 검색하여 메뉴링크를 만들 수도 있다.

검색에 관한 자세한 내용은 아래의 글을 참고하기 바란다.
검색창에서 그리고(AND)로직과 또는(OR)로직으로 검색하기 - 복수 검색어 검색 >>

4. 페이지 순서 바꾸기

페이지가젯으로 만든 메뉴바에는 왼쪽 그림과 같은 페이지 목록에 있는 순서대 로 표시된다.

페이지의 순서를 바꾸려면,

옆의 그림에서 초록색으로 표시한 것과 같이 각각의 페이지 이름 왼쪽에 있는 회색부분을 마우스로 끌어서 위/아래로 움직여 원하는 위치에 놓으면 된다.

5. 메뉴 위치 설정하기(상단 헤더 / 사이드바)

메뉴바에 표시할 메뉴페이지가 모두 만들어 졌으면, 메뉴바를 표시할 위치를 지정한다.

옆의 그림과 같이 "Show pages as"옆에 있는 버튼을 누르면 세 가지 위치를 선택할 수 있는 창이 열린다.

첫 번째의 상단 탭(Top tabs)은 블로그의 이름과 설명(Blog Title, Description)이 들어 있는 헤더(Header) 바로 아래에 메뉴바가 표시된다.

두 번째의 사이드바(Side links)는 블로그에 사이드바가 있을 경우에 사이드바에 표시된다.

세 번째의 보이지 않음(Don't show)은 페이지로 메뉴를 만들어 놓았지만, 블로그에는 표시되지 않는다.

이 설정에서 상단 헤더나 사이드바에 표시되도록 선택하였다면,
블로그 대시보드 > 짜임새(Layout) 페이지에 아래와 같이 [페이지 가젯: Pages]이 만들어져 있다.

페이지가젯은 메뉴바의 위치를 상단탭(Top tabs)로 설정하면 블로그 이름이 표시된 헤더(Header)가젯 바로 아래에 추가되고, 사이드바(Side links)로 설정하면 사이드바 가젯란에 추가된다.

※ 아래의 그림은 이 블로그의 상단 메뉴바를 페이지(pages)의 웹주소(Web address) 기능으로 만든 것이다. 링크는 라벨검색 링크를 사용하였다.

구글블로그 사용법: 메뉴(카테고리/ 목록) 만들 때 주의사항 - 라벨(Label) 및 검색 페이지 링크

2013-11-28T11:54:00.001-05:00

구글블로그에는 카테고리나 폴더라는 개념이 없으므로, 메뉴를 만들 때 주로 라벨(Label)페이지 링크나 검색페이지 링크를 이용하게 된다. 라벨페이지를 링크로 걸 때에 주의할 것이 있다.

첫번째는 대소문자 구분이다.
라벨 검색에서는 대문자와 소문자를 구분하므로, 대문자와 소문자를 구분해서 라벨페이지 링크를 만들어야 한다.

예컨데, 라벨이 "blogger"로 되어 있을 경우, 라벨검색에서 "blogger"로 검색하면 해당 글이 검색되 되지만, "Blogger"로 검색하면 해당 글이 검색되지 않는다.
따라서, 글을 쓸 때 라벨을 소문자로 할 것인지 대문자로 할 것인지를 생각해서 붙여야 한다.

둘째는, 라벨페이지 링크 주소이다.
블로그 안에서 라벨페이지 링크를 하는 경우에는 링크주소를

" http://howways.blogspot.com/search/label/구글블로그 "와 같이 모두 적을 필요가 없으므로,
" /search/label/구글블로그 "처럼 적으면 된다.

그러나 라벨페이지 주소를 모두 적어야 할 때도 있다. 이럴 때는 블로그 도메인에 주의를 해야 한다. 구글블로그의 원래 주소는
" http://howways.blogspot.com "이다.

하지만,"com" 부분은 방문자가 위치하고 있는 국가에 따라 달라진다. 방문자가
미국에서 방문하였다면 " http://howways.blogspot.com "
호주에서 방문하였다면 " http://howways.blogspot.au "
일본에서 방문하였다면 " http://howways.blogspot.jp "
한국에서 방문하였다면 " http://howways.blogspot.kr " 등으로 바뀌게 된다.

따라서, 라벨페이지나 검색페이지의 주소를 브라우저의 주소창에서 복사해 사용할 때는 도메인의 끝부분이 "com"인지 확인하고, "com"으로 바꾸어 주어야 한다.
구글블로그 시스템의 내부 구조를 알 지 못하기 때문에 정확하게 이렇다 저렇다 말할 수는 없지만, "com"으로 바꾸지 않고 링크를 걸면 (드물지만) 오류가 나는 경우를 볼 수 있다.

이 부분은 검색페이지 링크도 마찬가지다.
검색결과 페이지의 주소는 " http://howways.blogspot.com/search?q=구글블로그 "와 같다.
주소의 "com" 부분을 확인하고 "com"으로 바꾸어 주어야 한다.