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

차례 : 블로그 대시보드 > 템플릿 > 사용자정의 > 고급설정 > 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 는 이미지의 테두리에 그림자 효과를 주는 인자이다. 블로그에 어울리도록 수자를 조절하여 적용하면 된다.

도움이 되기를 바랍니다.