구글블로그 사용법: 링크리스트(LinkList)가젯 꾸미기 - 점, 테두리, 배경, 폰트, 밑줄, 여백, 새창에 열기 등
구글 블로그의 링크목록(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 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)한다
[추가하기 전]
<li><a expr:href='data:link.target'>
[추가한후]
<li><a expr:href='data:link.target' target='_blank'>
아래의 코드를 블로그 템플릿디자이너에서 추가하면, 블로그의 모든 링크는 새창에서 열린다.
<base target="_blank" />