사용법어찌?

구글 블로그 다이나믹 템플릿의 매거진 뷰 글제목 꾸미는 방법

2015-12-19T09:25:00.002-05:00

구글 블로거의 다이나믹뷰 템플릿에서 뷰(View)를 매거진(Magazine)으로 하였을 때 글제목(Post Title)의 색상, 글꼴, 글자크기, 줄간격 등을 꾸미려면 아래와 같이 CSS코드를 추가하면 된다.

[추가할 코드]

.magazine .item .title a{
color : blue ;
font-size : 1.5em ;
}

괄호{ }안에 꾸미고자 하는 HTML 속성들을 추가하고 알맞게 인수를 조절하여 주면 된다.
위의 그림에서는 검정색이던 글제목을 파랑색으로 바꾸고 글자크기를 1.5em으로 조절한 예이다.
CSS코드를 추가하는 방법을 설명한 페이지 >>

구글블로그 다이나믹뷰 검색결과 및 라벨 목록 유지하는 방법 : /ncr

2015-06-13T10:24:00.002-04:00

이 블로그는 구글블로그에서 제공하는 다이나믹뷰 템플릿의 사이드바 보기가 기본으로 설정되어 있습니다.

라벨(Label/태그)을 선택하거나 검색기에서 검색을 하면 창의 왼쪽 사이드바에 검색결과 목록이 만들어 지고, 결과 목록에서 글을 선택하면 창의 오른쪽에 해당 글을 보여주는 구조입니다.
그런데, 언제부터인가 글이 펼쳐짐과 동시에 왼쪽 사이드바의 검색결과 목록이 흩으러 지는 문제가 생겼습니다.

구글블로그는 방문자의 위치에 따라 특정 국가도메인으로 리다이렉트 되는데, 이 과정에서 오류가 발생하는 것으로 보입니다. 블로그가 리다이렉트 되지 않도록 하면 검색결과 목록이 정상적으로 유지됩니다.

방법은 아래 링크와 같이 블로그 주소 뒤에 /ncr 을 붙여서 아무 페이지나 하나를 열면, 그 다음 부터는 리다이렉트 되지 않기 때문에 결과 목록이 정상적으로 유지 됩니다.

http://howways.blogspot.com/ncr

즉, 주소창에 위와 같이 입력을 하거나, 아니면 위 주소링크를 한번 클릭하여 페이지를 연 다음에, 검색기에서 검색을 하거나 라벨(태그)목록을 열면 됩니다.

구글블로그의 방문자 위치에 따른 리다이렉트에 대한 자세한 설명은 링크 페이지 참조 : 구글블로그 리다이렉트에 대한 자세한 설명 페이지

구글블로그 사용법: 다이나믹뷰(DynamicView) 포스트 이미지 크기 자동 조절 - 크롬과 파이어폭스

2015-03-22T14:38:00.000-04:00

브라우저에 따라 같은 페이지도 다르게 보이는 예다.
이 블로그에 적용된 템플릿은 다이나믹뷰 템플릿이다. 같은 페이지를 구글크롬으로 볼 때와 모질라 파이어폭스로 볼 때 차이가 있다.

그림의 윗쪽은 크롬이고, 아래쪽은 파이어폭스이다.
크롬에서는 브라우저의 폭을 줄이면 본문의 글(텍스트)과 그림이 같이 줄여지지만, 파이어폭스에서는 글(텍스트)은 줄여지지만 그림은 그대로 있다.

왜 그런지를 정확하게 알지는 못하기에 그 해결책 또한 모르지만, 이 페이지를 올리는 것은 구글블로그의 다이나믹뷰 템플릿을 사용하는 블로거들에게 참고가 될 듯 하여서이다.

구글블로그 사용법: 다이나믹뷰(Dynamic View)의 각종 컨트롤과 도구요소를 숨기는(표시되지 않게 하는) 방법 정리

2014-10-17T23:58:00.001-04:00

다이나믹 뷰를 컨트롤하는 코드들을 정리한 것이다.
코드는 블로그의 "블로거 템플릿 디자이너, Blogger Template Designer"에서 간단히 추가할 수 있다. 템플릿디자이너의 코드 입력창을 여는 경로는 블로그 대시보드에서 템플릿(Template) > Customise > Advanced > Add CSS 이다.

코드를 추가하는 자세한 방법은 아래의 링크 페이지를 참조하면 된다.
구글블로그 CSS코드 추가하는 방법 2가지 http://howways.blogspot.kr/2014/02/Google-Blogger-how-to-Add-or-Customize-CSS-code.html >>

각코드에 대한 대한 상세한 내용은 각각의 페이지에서 설명되어 있으므로 이 블로그에서 찾을 수 있다.

공유버튼(Sharing buttons)
글(포스트) 맨 아래에 있는 페이스북, 트위터, 구글플러스 등의 공유버튼을 표시되지 않게 하는 코드

.share-controls { display: none !important; }

[HOME]버튼
블로그 왼쪽 맨 위에 있는 [Home]버튼을 표시되지 않게 하는 코드

#pages ul li:first-child { display: none !important; }

가젯상자(Gadget Dock)
블로그 오른쪽에 보여지는 가젯상자를 표시되지 않게 하는 코드

#gadget-dock { display: none !important; }

피드백(Feedback)
블로그 오른쪽 맨 아래의 피드백 링크를 표시되지 않게 하는 코드

a.feedback { display: none !important; }

플립카드 컨트롤(Flipcard Controls)
플립카드 뷰로 볼 때, 윗 부분에 있는 컨트롤 란을 표시되지 않게 하는 코드

.flipcard #controls{ display: none !important; }

검색창(Search Box)
블로그 오른쪽 맨 위에 있는 검색창을 표시되지 않게 하는 코드

.header-bar #search{ display: none !important; }

뷰(Views)
블로그 오른쪽 맨 위의 메뉴바에 있는 뷰 선택기능을 표시되지 않게 하는 코드

#views { display: none !important; }

날짜 리본(Date Ribbon)
클래식 뷰 등에서 글(포스트) 왼쪽 맨 위에 보여지는 날짜표를 표시되지 않게 하는 코드

.ribbon.date { display: none !important; }

발행정보(Publish Information)
글(포스트) 맨 아래에 보여지는 글쓴이, 날짜 등의 발행정보를 표시되지 않게 하는 코드

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

가젯상자(Gadget Dock) 항상 펼침
블로그 오른쪽에 보여지는 가젯상자가 항상 펼쳐 있게 하는 코드

#gadget-dock {right:0px !important;}

구글블로그 사용법: 다이나믹뷰 네비게이션 및 애드센스 표시오류 해결방법

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

차례 : 블로그 대시보드 > 템플릿 > HTML편집 > 코드의 숫자를 바꿈

구글블로그의 다이나믹뷰(Dynamic View) 템플릿은 좋은 기능을 가지고 있지만, 아직은 불안정한 면이 있다.

그 가운데서 가장 신경쓰이는 것은 어떤 때는 블로그가 정상적으로 표시되지 않는 것이다.

블로그 이름 밑의 네비게이션바, 블로그 오른쪽 위에 있는 네비게이션상자, 애드센스 등이 표시되지 않거나 불안정하게 표시되는 경우를 가끔 볼 수 있다.

이 오류는 이미 잘 알려져 있으므로, 해결이 될 것으로 생각된다. 네티즌이 찾은 해결방법은 아래 그림과 같다.

이 해결방법을 적용해도 가끔은 오류가 발생하는 것으로 보아 완전한 해결책이 되지는 못하는 것 같다. 하지만, 구글에서 근본적인 해결을 할 때까지는 적용해 볼 만하다는 생각이 든다. 방법은,

=> 블로그 대시보드 > 템플릿(Template) > HTML편집(Edit HTML)으로 이동하여 편집창을 연다
=> 편집창의 스크롤바를 당겨 맨 아래로 이동하면, 아래 그림에서 보는 것과 같은 HTML코드가 있다
=> 노랑색 부분을 보면 " }, 0 ); "과 같이 숫자부분이 " 0 "으로 되어 있다.
이 숫자를 그림과 같이 " 1000 "으로 바꾸고 편집창의 맨 위에 있는 [저장: save template]버튼을 눌러 저장한다

구글블로그 사용법: 다이나믹뷰 템플릿에서 소셜링크 표시 안하기

2014-03-17T20:15:00.000-04:00

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

구글 블로그의 다이나믹뷰(Dynamic View) 템플릿을 사용하면, 글의 맨 아래에 그림과 같이 소셜공유버튼이 표시된다.

이들 공유버튼이 표시되지 않게 하려면, 아래의 CSS코드를 블로그의 HTML에 추가하면 된다.
=> 블로그 대시보드 > 템플릿(Template) > 사용자설정(Customise) > 고급설정(Advanced) > CSS추가(Add CSS)로 이동하여
오른쪽에 있는 입력창에 아래의 코드를 붙여넣고 저장한다.

.share-controls { display: none !important; }

코드를 추가하는 방법은 아래의 링크된 페이지에 자세히 설명되어 있으니 참고하면 된다.
구글블로그 사용법: CSS코드 추가 변경하는 방법 2가지 >>

구글블로그 사용법: 다이나믹뷰 배경색 및 사이드바 색상 바꾸는 방법

2014-02-26T01:26:00.004-05:00

구글 블로그 다이나믹뷰(Dynamic View)의 배경색을 바꾸어 꾸미는 일은 템플릿-디자이너를 활용하면 간단히 할 수 있다.

=> 블로그 대시보드 > 템플릿(Template) > 사용자정의(Customise)를 눌러 아래 그림과 같은 템플릿-디자이너(Template Designer)를 연다

[구글 블로그 다이나믹뷰 배경색 꾸미기]

=> 왼쪽 메뉴에서 고급설성(Advanced) > 페이지(Page)를 선택하면, 왼쪽 끝에 배경색상(Background Colour)을 지정하는 도구가 있다.

그림에서 보는 것처럼 앞쪽의 입력상자 안에 #xxxx와 같이 색상코드를 직접 입력해도 되고, 뒷쪽의 색상선택기에서 선택을 해도 된다.

아래쪽에 나열된 색상은 현재 템플릿에 사용된 색상(Colours from this template)과 추천색상(Suggested colours)인데, 여기서 선택을 해도 된다.

위 그림에서 보는 것처럼 사이드바로 보기 상태에서는 왼쪽에 있는 글목록 사이드바의 바탕색에 적용된다. 바꾸어 말하면, 사이드바의 색상을 바꾸어 꾸미려면 위와 같이 하면 된다.

구글블로그 사용법: 다이나믹 뷰 사이드바 너비 조절과 자동 펼침

2014-02-19T06:00:00.000-05:00

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

이 블로그에 현재 적용된 템플릿이 다이나믹 뷰(Dynamic View) 템플릿이다. 왼쪽에 있는 사이드바의 너비를 조절하는 방법은 두 가지를 생각해 볼 수 있겠다.

하나는, 사이드바의 기본 너비는 좁게 설정하되, 마우스가 올라가면 펼쳐지게 하는 것이다.
사이드바가 넓어지면 그만큼 본문 폭이 좁아지게 되므로, 작은 모니터 사용자는 글을 읽기가 아주 불편해진다. 따라서, 이 방법이 방문자에게 편할 것 같다.

다른 하나는, 사이드바의 너비를 블로그에 잘 어울리도록 적절한 너비로 고정시키는 것이다.
글의 제목이 길지 않다면, 이 방법도 좋은 것 같다.

방법은
=> 블로그 대시보드 > 템플릿(Template) > 사용자정의(Customise)를 통해 템플릿 디자이너(Template Designer)를 연다
=> 왼쪽 메뉴의 맨 아래에 있는 고급설정(Advanced) > CSS추가(Add CSS)를 클릭하여 입력창을 열고, 입력창에 아래의 CSS를 복사하여 붙여 넣는다

너비 수치는 블로그에 잘 어울리도록 조절하면 된다.
코드를 추가하는 자세한 방법은 이 페이지를 참고하면 된다.

[사이드바 너비 지정: 자동 펼침 코드]

/* Sidebar Auto Expand
-------------------------------------------------------- */
#sidebar:hover {width: 350px;}
#sidebar {-webkit-transition: width 500ms ease-in;z-index: 99;}

※ 위 코드는 Nerds To Geeks 블로그에서 가져옴
※ 수치는 윗쪽에 있는 " 350 " 을 절절하게 조절하면 된다.

[사이드바 너비 지정: 고정 코드]

/* Sidebar Width
------------------------------------------ */
.sidebar #sidebar{width: 250px !important;}
.sidebar #content{margin-left: 250px;}

※ 이 코드의 두 수치는 같아야 한다.

구글블로그 사용법: 다이나믹뷰 블로그 글 찾기

2014-02-15T00:58:00.001-05:00

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

이 블로그에 현재 적용된 템플릿은 다이나믹 뷰(Dynamic View) 템플릿입니다.
이 템플릿은 해당되는 글을 한꺼번에 모두 불러오므로 로딩시간이 꽤 긴 단점이 있지만, 일단 글을 불러 오고 나면, 왼쪽 글목록에서 글을 선택하여 읽을 때는 페이지가 즉각 열리는 장점이 있습니다.

[라벨(Label) 또는 태그(Tag)로 글 찾기]

블로그 창의 오른쪽 위에 있는 가젯상자(gadget dock)에서 연필모양의 아이콘을 클릭하면, 꼬리말(라벨.Label) 목록창이 열립니다.

꼬리말을 선택(클릭)하면, 해당 글들이 블로그의 왼쪽 글 목록창에 나열됩니다.
글은 글이 올라온 순서대로 나열됩니다(최근의 글이 맨 위).

[검색어로 글 찾기]

블로그 오른쪽 위에 있는 검색창에 검색어를 입력하면,
위 그림과 같이 해당 검색어가 들어 있는 글 목록의 보여집니다.

엔터키를 치면, 검색된 글들이 블로그의 왼쪽에 있는 글 목록창에 나열됩니다.
글은 글이 올라온 순서대로 나열됩니다(최근의 글이 맨 위).
검색에 관한 자세한 내용은 이 페이지를 참조하세요.

구글블로그 사용법: 다이나믹 뷰(Dynamic View)에서 [Send Feedback] 링크 숨기기

2014-02-14T02:12:00.000-05:00

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

구글 블로그의 다이나믹 뷰 템플릿의 오른쪽 아래에는 [Send feedback]라는 링크가 나타난다. 이 링크표시를 없애려면 아래의 CSS코드를 추가하면 된다.

"Send Feedback" 버튼 표시 안하기

/* Hide Send-feedback
---------------------------------- */
.feedback {display:none !important;}

CSS코드를 추가하는 방법은 여기를 참조하세요 >>

구글블로그 사용법: 다이나믹뷰 템플릿 - 발행정보(날짜와 글쓴이) 숨기기

2014-02-14T01:55:00.002-05:00

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

구글 블로그의 글쓴이, 발행날짜 등과 같은 글 발행정보를 표시할지 여부를 설정하려면,
대시보드 > 레이아웃(Layout) > 블로그 글(Blog Posts) 위젯의 오른쪽 아래에 있는 편집(Eidt)을 통해서 할 수 있다.

하지만, 다이나믹 뷰(Dynamic View) 템플릿에서는 그러한 설정이 작동하지 않으므로, 아래와 같이 CSS코드를 추가함으로써 할 수 있다.

발행정보(글 발행 날짜와 글쓴이) 표시 않하기

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

글쓴이 표시 안하기

/* Hide Author
----------------------------------------------------------------------- */
.publish-info{font-size: 0px;} .publish-info .time{font-size: 14px !important;} .publish-info .time:before, .ss{content: "Posted "; color: #808080; font-size: 14px !important; }

뷰스타일의 "클래식(Class)"으로 보기에서 날짜표시 리본 표시 안하기

/* Hide Ribbon
--------------------------------- */
.ribbon{ display: none !important; }

CSS코드를 추가하는 방법은 여기를 참고하세요 >>

참고:
위의 코드를 추가하여도 다이나믹뷰 모바일(mobile) 템플릿에서는 적용이 되지 않아 발행정보와 리본 등이 모두 표시된다. 모바일 템플릿을 다이나믹뷰 모바일 템플릿 대신에 기본 템플릿 등과 같은 다른 모바일 템플릿으로 설정하면, 위의 코드들이 적용이 된다.

구글블로그 사용법: 다이나믹 뷰 - 가젯상자(가젯독) 항상 펼치기

2014-02-13T20:55:00.002-05:00

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

구글 블로그의 다이나믹 뷰(Dynamic View) 템플릿의 오른쪽 위에는 가젯상자(gadget dock)가 있다.

가젯상자는 페이지가 열릴 때 펼쳐졌다가 잠시 뒤에 닫히며, 방문자가 마우스를 올리면 다시 펼쳐지도록 기본설정되어 있다.

방문자가 쉽게 가젯상자의 메뉴를 사용할 수 있도록 가젯상자가 항상 열려 있도록 하려면, 아래의 코드를 추가하면 된다.

[다이나믹 뷰 가젯상자를 열린상태로 유지하는 코드]

/* Keep Gadget opened
------------------------------------ */
#gadget-dock {right:0px !important;}

코드를 추가하는 방법은

1) 대시보드 > 템플릿(Template) > HTML편집(Edit HTML) 창을 열고 ]]></b:skin> 코드 바로 앞에 추가하고 저장한다.

2) 대시보드 > 템플릿(Template) > 사용자 최적화(Customise) > 고급설정(Advanced) > CSS추가(Add CSS) 창을 열고 코드를 추가한다.

두 번째 방법이 쉽고 오류도 적으므로, 두 번째 방법으로 하는 것이 편하다.
CSS코드 추가하는 방법 자세히 보기 >>

구글블로그 사용법: 다이나믹 뷰 - 가젯상자(가젯독) 세로 위치 조정하는 방법

2014-02-13T20:54:00.004-05:00

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

구글 블로그 다이나믹 뷰(Dynamic View) 템플릿의 오른쪽 위에 있는 가젯상자(gadget dock)의 세로 위치를 조절하려면, 아래의 코드를 추가하면 된다. (코드 출처: Southern Speakers)

[다이나믹 뷰 가젯상자 세로 위치 조절하는 코드]
코드의 수치부분(200px)을 블로그에 잘 어울리도록 조절한다.

/* Adjust Gadget vertical position
------------------------------------- */
#gadget-dock, .ss{ top: 200px !important; }

코드를 추가하는 방법은
=> 대시보드 > 템플릿(Template) > 사용자 최적화(Customise) > 고급설정(Advanced) > CSS추가(Add CSS) 창을 열고 코드를 추가한다.

자세한 방법은 여기를 참고하세요(블로그 HTML편집 및 템플릿 디자이너)>>

구글블로그 사용법: 다이나믹 뷰 템플릿에 트위트 팔로우 링크 달기

2013-11-26T23:27:00.001-05:00

다이나믹-뷰(Dynamic View)에서는 사용자가 코드를 직접 입력하는데 제약이 있으므로, 직접 트위트 팔로우 버튼 스크립트를 넣기는 어렵지만 링크를 넣을 수는 있다.

아래 그림과 같이, 오른쪽의 툴바에 트위트 팔로우 링크를 담은 가젯을 다는 방법을 생각해 볼 수 있겠다. 방문자가 트위트 링크를 누르면, 트위트 팔로우 페이지로 연결된다(아래 두 번째 그림).

[그림: 트위트 팔로우 링크를 클릭하였을 때 연결된 창]

링크 가젯 넣기

=> 블로그 > 짜임새(Layout) > 가젯추가(Add a Gadget)를 누르면
아래의 두 번째 그림에서 윗쪽에 있는 것과 같은 가젯 선택창이 뜬다.

=> 가젯 가운데서"링크 리스트(Link List)를 선택한다.
=> 링크 리스트 가젯에 그림과 같이 트위트 팔로우 링크를 추가하고 저장한다.
그러면, 위의 첫번째 그림과 같이 오른쪽 툴바에 링크버튼이 달린다.

[가젯 추가하기]

[가젯 선택창과 "링크 리스트"가젯 설정하기]

트위트 팔로우 링크 만들기

https://twitter.com/intent/follow?original_referer=http://howways.blogspot.com&screen_name=sarangchaetalk&tw_p=followbutton&variant=2.0

위의 링크에서
빨강색 부분을 자신의 블로그주소로 바꾸고
연두색부분을 자신의 트위트 계정 이름(ID)로 바꾼 다음,
"링크리스트"가젯(바로 위의 그림)의 링크주소(New Site URL)란에 붙여 넣는다.

링크할 사이트 이름(New Site Name)은 "트위트 팔로우" "트위트"..... 등과 같이 적당한 이름을 입력한다.