피드버너 사용법: 부즈부스트 (FeedBurner BuzzBoost) 글 목록 꾸미기 - 테두리, 글자 크기, 색상, 배경색, 안팎 여백 등
피드버너의 부즈부스트 (BuzzBoost)를 꾸미는 방법은, 부즈부스트 코드 위에 스타일(style)을 추가해 주면 된다.
[코드 구조]
스타일 항목과 속성
각 항목의 속성은 HTML의 스타일(style)에서 쓸 수 있는 것들을 쓰면 된다. 아래는 간단한 예를 보인 것이다.
[부즈부스트 전체 영역]
[부즈부스트 제목]
[부즈부스트 제목 색상]
[글 제목 앞의 기호 (점, 동그라미, 네모 등)]
[글 제목 : 방법 1]
[글 제목 색상]
[글 제목 : 방법 2]
[글 제목 색상]
[글 발행 날짜]
[그림 이미지]
[피드버너 로고]
실제 적용 예제
부즈부스트에 스타일 속성을 추가하여 꾸민 실제 예는 별도의 일반 템플릿에 만들어 놓았으니 참조하면 되겠다.
실제 적용 예제 보기
>> 피드버너 사용법 글 목록
도움이 되기를 바랍니다.
[코드 구조]
<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; 형식으로 하면 된다.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;
}
[부즈부스트 제목]
div.feedburnerFeedBlock p.feedTitle {
font-size: 100%;
font-weight: bold;
}
font-size: 100%;
font-weight: bold;
}
[부즈부스트 제목 색상]
div.feedburnerFeedBlock p.feedTitle a {
color: orange;
}
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;
}
세 가지 가운데 한 가지만 쓰도 같은 결과가 된다.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;
}
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;
}
color: green;
}
[글 제목 : 방법 2]
div.feedburnerFeedBlock ul li span.headline {
font-weight:bold;
display:block;
margin:12px 0 0 0;
}
font-weight:bold;
display:block;
margin:12px 0 0 0;
}
[글 제목 색상]
div.feedburnerFeedBlock ul li span a {
color: green;
}
color: green;
}
[글 발행 날짜]
div.feedburnerFeedBlock p.date {
margin: 0em;
font-size: 0.9em;
color: #eee ;
}
margin: 0em;
font-size: 0.9em;
color: #eee ;
}
[그림 이미지]
div.feedburnerFeedBlock img {
display: none;
}
display: none;
}
[피드버너 로고]
div #creditfooter{
display: none;
}
display: none;
}
실제 적용 예제
부즈부스트에 스타일 속성을 추가하여 꾸민 실제 예는 별도의 일반 템플릿에 만들어 놓았으니 참조하면 되겠다.
실제 적용 예제 보기
>> 피드버너 사용법 글 목록
도움이 되기를 바랍니다.