피드버너 사용법: 부즈부스트 (FeedBurner BuzzBoost) 글 목록 꾸미기 - 테두리, 글자 크기, 색상, 배경색, 안팎 여백 등

피드버너의 부즈부스트 (BuzzBoost)를 꾸미는 방법은, 부즈부스트 코드 위에 스타일(style)을 추가해 주면 된다.

[코드 구조]

<style>
여기에 부즈부스트를 꾸미고자 하는 항목과 속성을 넣는다
</style>
여기에 피드버너의 부즈부스트에서 복사한 코드를 넣는다

스타일 항목과 속성
각 항목의 속성은 HTML의 스타일(style)에서 쓸 수 있는 것들을 쓰면 된다. 아래는 간단한 예를 보인 것이다.

[부즈부스트 전체 영역]

div.feedburnerFeedBlock {
border:2px solid #ddd;
background-color:#ffe;
padding:12px;margin-top: -10px;
font-family: Verdana, arial, sans;
font-size: 12px;
width: 100%;
background-color: #fff;
overflow:hidden;
}

배경에 그림을 넣으려면, background: url(그림주소 URL) no-repeat 3px; 형식으로 하면 된다.


[부즈부스트 제목]

div.feedburnerFeedBlock p.feedTitle {
font-size: 100%;
font-weight: bold;
}

[부즈부스트 제목 색상]

div.feedburnerFeedBlock p.feedTitle a {
color: orange;
}

[글 제목 앞의 기호 (점, 동그라미, 네모 등)]

div.feedburnerFeedBlock ul {
margin-left: 0px;
padding-left: 0px;
list-style-type: none
}

div.feedburnerFeedBlock ul li {
list-style-type: disc;
}

div.feedburnerFeedBlock ul ol {
list-style-type: decimal;
}

세 가지 가운데 한 가지만 쓰도 같은 결과가 된다.


[글 제목 : 방법 1]

div.feedburnerFeedBlock ul li {
background: #f1f1f1;
list-style-type: none;
margin:0px 0px 5px 0px;
padding:5px 5px 5px 10px;
border: 1px solid #ccc;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

[글 제목 색상]

div.feedburnerFeedBlock ul li a {
color: green;
}

[글 제목 : 방법 2]

div.feedburnerFeedBlock ul li span.headline {
font-weight:bold;
display:block;
margin:12px 0 0 0;
}

[글 제목 색상]

div.feedburnerFeedBlock ul li span a {
color: green;
}

[글 발행 날짜]

div.feedburnerFeedBlock p.date {
margin: 0em;
font-size: 0.9em;
color: #eee ;
}

[그림 이미지]

div.feedburnerFeedBlock img {
display: none;
}

[피드버너 로고]

div  #creditfooter{
display: none;
}

실제 적용 예제

부즈부스트에 스타일 속성을 추가하여 꾸민 실제 예는 별도의 일반 템플릿에 만들어 놓았으니 참조하면 되겠다.
실제 적용 예제 보기


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


도움이 되기를 바랍니다.