구글블로그 사용법: 파퓰러 포스트 (많이 읽은 글, 인기있는 글) 꾸미기
차례 : 블로그 대시보드 > 템플릿 > 사용자정의 > 고급설정 > CSS추가
왼쪽의 그림은 파퓰러가젯의 글자크기, 배경색, 테두리, 안과 밖이 여백등을 설정한 뒤의 모습이고, 오른쪽은 설정하기 전의 모습이다.
파퓰러가젯을 블로그에 추가하려면,
=> 블로그 대시보드 > 레이아웃(Layout) > 가젯추가(Add a gadget) > 파퓰러 포스트(Poular Posts)를 선택한다.
구글블로그의 파퓰러가젯을 블로그와 잘 어울리도록 꾸미려면, 아래와 같이 필요한 코드를 추가하면 된다.
=> 블로그 대시보드 > 템플릿(Template) > 사용자정의(Customise) > 고급설정(Advanced) > CSS코드추가(Add CSS)로 이동하여 아래 그림과 같이 입력란에 코드를 추가한다.
[추가할 코드]
padding => 안 여백
border => 테두리
background-color => 배경색
font-size => 글자 크기
블로그와 잘 어울리도록 필요한 항목만 추가하고 숫자를 적절히 조절하면 된다.
파퓰러 포스트를 제어하는 방법은 기본적으로 위와 같다.
포퓰러 가젯을 여러 개 추가하였을 경우에는 모든 파퓰러 포스트 가젯을 한 꺼번에 제어하거나, 또는 각각 제어할 필요가 있을 수 있다. 이를 때는 아래와 같이 코드를 상황별로 사용함으로써 가능하다.
[파퓰러 포스트 가젯 전체를 제어하는 코드]
[파퓰러 포스트 가젯을 개별적으로 제어 하는 코드]
가젯을 여러 개 추가하면 가젯의 아이디(ID)가 1 2 3 ... 과 같이 일련번호로 자동부여 되므로, 첫 번째 추가한 파퓰러 포스트 가젯의 아이디는 PopularPosts1 이고, 두 번째 추가한 가젯의 아이디는 PopularPosts2 ..... 와 같이 되므로, 꾸미고자 하는 가젯의 아디를 사용하면 된다.
[파퓰러 포스트 이미지 제어하는 코드]
radius 는 이미지의 네 꼭지를 둥글게 하는 인자이고, shadow 는 이미지의 테두리에 그림자 효과를 주는 인자이다. 블로그에 어울리도록 수자를 조절하여 적용하면 된다.
왼쪽의 그림은 파퓰러가젯의 글자크기, 배경색, 테두리, 안과 밖이 여백등을 설정한 뒤의 모습이고, 오른쪽은 설정하기 전의 모습이다.
파퓰러가젯을 블로그에 추가하려면,
=> 블로그 대시보드 > 레이아웃(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 => 바깥 여백------------------------------- */
.widget .popular-posts ul {
margin: 10 10 10 10;
padding: 15 15 15 15;
border: 1px solid gold;
background-color: silver;
font-size: 13px;
}
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 { ~~~ }
------------------------------- */
.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 { ~~~ }
#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);
}
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 는 이미지의 테두리에 그림자 효과를 주는 인자이다. 블로그에 어울리도록 수자를 조절하여 적용하면 된다.