설문지를 블로그에 넣으시려면 폴대디를 사용하세요. 이 폴대디에서는 css 로 설문지 스킨을 꾸밀 수 있습니다. 하얀색 바탕과 검정색 바탕 두가지 스타일로 설문지 스킨을 만들어 보았습니다. 필요하신 분들은 이 코드를 복사하셔서 폴대디 설문지 스타일에 추가하셔서 사용하시면 됩니다.
<하얀색 바탕>
css 코드 보기
/* PD01 CSS Document "Grey Plastic Standard" */
/* ----------- Background Box Div styles ----------- */
.pds-box {
width: 450px; /* for fixed width enter value here, max width 700px */
color: #fff;
background: #fff;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: left;
border-style: solid;
border-width: 1px;
border-color: #4f5e5e;
}
.pds-box-outer {
background:;
}
.pds-box-inner {
background:;
}
.pds-box-top {
background: ;
padding: 10px 10px 10px 10px;
}
/* ----------- Question Box Div styles ----------- */
.pds-question {
background: ;
}
.pds-question-outer {
background:;
padding-bottom: 15px;
}
.pds-question-inner {
background: ;
}
.pds-question-top {
background: ;
padding: 15px 15px 0px 15px;
font-size: 12px;
color: #e45a49;
}
/* ----------- Answer Box Div styles ----------- */
.pds-answer {
font-size: 12px;
/*line-height: 20px; */
color: #222d2d;
padding: 10px 20px 15px 20px;
}
.pds-answer label{
/* currently left unstyled to maximise compatibilty */
}
.pds-radiobutton {
border:0px;
/* currently left unstyled to maximise compatibilty */
}
.pds-checkbox {
/* currently left unstyled to maximise compatibilty */
}
.pds-textfield {
width: 100%;
font-size: 12px;
color: #ffffff;
background-color: #fff;
border: 0px;
border-color: #666;
padding: 1px 1px 1px 1px;
margin: 5px 0px 0px 0px;
}
.pds-answer-feedback {
background-color: #666;
padding: 0px 0px 0px 0px;
height:18px;
margin: 2px 0px 5px 0px;
}
.pds-answer-feedback-bar {
background: url(images/pd01-bargif.gif) repeat-x;
margin: 3px;
padding: 0px;
height:12px;
border: 0px;
}
.pds-answer-feedback img {
background: url(images/pd01-bargif.gif) repeat-x;
margin: 3px;
padding: 0px;
height:12px;
border: 0px;
}
/* ----------- Vote Box Div styles ----------- */
.pds-vote {
font-size: 12px;
color: #c3C4c7;
line-height: 17px;
padding: 0px 20px 10px 20px;
}
.pds-votebutton-outer {
height:61px;
}
.pds-vote a {
font-size: 12px;
color: #333;
text-decoration: none;
border-top: 0px;
border-bottom: 0px;
border-top-color: #666;
border-bottom-color: #666;
border-top-style: solid;
border-bottom-style: solid;
padding: 2px 0px 2px 0px;
}
input.pds-votebutton {
width: 61px;
height: 61px;
background: url(images/pd00-votebutton.gif) no-repeat;
outline: none;
float: right;
border:0px;
}
input.pds-votebutton:hover {
background: url(images/pd00-votebutton.gif) no-repeat 0 -60px;
}
.pds-totalvotes-outer {
}
.pds-totalvotes-inner {
font-size: 12px;
color: #ffb400;
background-color: #666;
padding: 3px 6px 3px 3px;
margin: 0px 0px 10px 0px;
text-transform: uppercase;
letter-spacing: 1px;
}
/* ----------- Background Box Div styles ----------- */
.pds-box {
width: 450px; /* for fixed width enter value here, max width 700px */
color: #fff;
background: #fff;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: left;
border-style: solid;
border-width: 1px;
border-color: #4f5e5e;
}
.pds-box-outer {
background:;
}
.pds-box-inner {
background:;
}
.pds-box-top {
background: ;
padding: 10px 10px 10px 10px;
}
/* ----------- Question Box Div styles ----------- */
.pds-question {
background: ;
}
.pds-question-outer {
background:;
padding-bottom: 15px;
}
.pds-question-inner {
background: ;
}
.pds-question-top {
background: ;
padding: 15px 15px 0px 15px;
font-size: 12px;
color: #e45a49;
}
/* ----------- Answer Box Div styles ----------- */
.pds-answer {
font-size: 12px;
/*line-height: 20px; */
color: #222d2d;
padding: 10px 20px 15px 20px;
}
.pds-answer label{
/* currently left unstyled to maximise compatibilty */
}
.pds-radiobutton {
border:0px;
/* currently left unstyled to maximise compatibilty */
}
.pds-checkbox {
/* currently left unstyled to maximise compatibilty */
}
.pds-textfield {
width: 100%;
font-size: 12px;
color: #ffffff;
background-color: #fff;
border: 0px;
border-color: #666;
padding: 1px 1px 1px 1px;
margin: 5px 0px 0px 0px;
}
.pds-answer-feedback {
background-color: #666;
padding: 0px 0px 0px 0px;
height:18px;
margin: 2px 0px 5px 0px;
}
.pds-answer-feedback-bar {
background: url(images/pd01-bargif.gif) repeat-x;
margin: 3px;
padding: 0px;
height:12px;
border: 0px;
}
.pds-answer-feedback img {
background: url(images/pd01-bargif.gif) repeat-x;
margin: 3px;
padding: 0px;
height:12px;
border: 0px;
}
/* ----------- Vote Box Div styles ----------- */
.pds-vote {
font-size: 12px;
color: #c3C4c7;
line-height: 17px;
padding: 0px 20px 10px 20px;
}
.pds-votebutton-outer {
height:61px;
}
.pds-vote a {
font-size: 12px;
color: #333;
text-decoration: none;
border-top: 0px;
border-bottom: 0px;
border-top-color: #666;
border-bottom-color: #666;
border-top-style: solid;
border-bottom-style: solid;
padding: 2px 0px 2px 0px;
}
input.pds-votebutton {
width: 61px;
height: 61px;
background: url(images/pd00-votebutton.gif) no-repeat;
outline: none;
float: right;
border:0px;
}
input.pds-votebutton:hover {
background: url(images/pd00-votebutton.gif) no-repeat 0 -60px;
}
.pds-totalvotes-outer {
}
.pds-totalvotes-inner {
font-size: 12px;
color: #ffb400;
background-color: #666;
padding: 3px 6px 3px 3px;
margin: 0px 0px 10px 0px;
text-transform: uppercase;
letter-spacing: 1px;
}
위 설문지는 이미지입니다. 아래 것이 진짜 설문조사입니다. 참여해 주세요.
<어두운 바탕>
css 코드 보기
/* PD01 CSS Document "Grey Plastic Standard" */
/* ----------- Background Box Div styles ----------- */
.pds-box {
width: 450px; /* for fixed width enter value here, max width 700px */
color: #fff;
background: #2f3e3e;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: left;
border-style: solid;
border-width: 1px;
border-color: #4f5e5e;
}
.pds-box-outer {
background:;
}
.pds-box-inner {
background:;
}
.pds-box-top {
background: ;
padding: 10px 10px 10px 10px;
}
/* ----------- Question Box Div styles ----------- */
.pds-question {
background: ;
}
.pds-question-outer {
background:;
padding-bottom: 15px;
}
.pds-question-inner {
background: ;
}
.pds-question-top {
background: ;
padding: 15px 15px 0px 15px;
font-size: 12px;
color: #ECBF00;
}
/* ----------- Answer Box Div styles ----------- */
.pds-answer {
font-size: 12px;
/*line-height: 20px; */
color: #fff;
padding: 10px 20px 15px 20px;
}
.pds-answer label{
/* currently left unstyled to maximise compatibilty */
}
.pds-radiobutton {
border:0px;
/* currently left unstyled to maximise compatibilty */
}
.pds-checkbox {
/* currently left unstyled to maximise compatibilty */
}
.pds-textfield {
width: 100%;
font-size: 12px;
color: #fff;
background-color: #666;
border: 0px;
border-color: #666;
padding: 1px 1px 1px 1px;
margin: 5px 0px 0px 0px;
}
.pds-answer-feedback {
background-color: #666;
padding: 0px 0px 0px 0px;
height:18px;
margin: 2px 0px 5px 0px;
}
.pds-answer-feedback-bar {
background: url(images/pd01-bargif.gif) repeat-x;
margin: 3px;
padding: 0px;
height:12px;
border: 0px;
}
.pds-answer-feedback img {
background: url(images/pd01-bargif.gif) repeat-x;
margin: 3px;
padding: 0px;
height:12px;
border: 0px;
}
/* ----------- Vote Box Div styles ----------- */
.pds-vote {
font-size: 12px;
color: #c3C4c7;
line-height: 17px;
padding: 0px 20px 10px 20px;
}
.pds-votebutton-outer {
height:61px;
}
.pds-vote a {
font-size: 12px;
color: #333;
text-decoration: none;
border-top: 0px;
border-bottom: 0px;
border-top-color: #666;
border-bottom-color: #666;
border-top-style: solid;
border-bottom-style: solid;
padding: 2px 0px 2px 0px;
}
input.pds-votebutton {
width: 61px;
height: 61px;
background: url(images/pd00-votebutton.gif) no-repeat;
outline: none;
float: right;
border:0px;
}
input.pds-votebutton:hover {
background: url(images/pd00-votebutton.gif) no-repeat 0 -60px;
}
.pds-totalvotes-outer {
}
.pds-totalvotes-inner {
font-size: 12px;
color: #ffb400;
background-color: #666;
padding: 3px 6px 3px 3px;
margin: 0px 0px 10px 0px;
text-transform: uppercase;
letter-spacing: 1px;
}
/* ----------- Background Box Div styles ----------- */
.pds-box {
width: 450px; /* for fixed width enter value here, max width 700px */
color: #fff;
background: #2f3e3e;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: left;
border-style: solid;
border-width: 1px;
border-color: #4f5e5e;
}
.pds-box-outer {
background:;
}
.pds-box-inner {
background:;
}
.pds-box-top {
background: ;
padding: 10px 10px 10px 10px;
}
/* ----------- Question Box Div styles ----------- */
.pds-question {
background: ;
}
.pds-question-outer {
background:;
padding-bottom: 15px;
}
.pds-question-inner {
background: ;
}
.pds-question-top {
background: ;
padding: 15px 15px 0px 15px;
font-size: 12px;
color: #ECBF00;
}
/* ----------- Answer Box Div styles ----------- */
.pds-answer {
font-size: 12px;
/*line-height: 20px; */
color: #fff;
padding: 10px 20px 15px 20px;
}
.pds-answer label{
/* currently left unstyled to maximise compatibilty */
}
.pds-radiobutton {
border:0px;
/* currently left unstyled to maximise compatibilty */
}
.pds-checkbox {
/* currently left unstyled to maximise compatibilty */
}
.pds-textfield {
width: 100%;
font-size: 12px;
color: #fff;
background-color: #666;
border: 0px;
border-color: #666;
padding: 1px 1px 1px 1px;
margin: 5px 0px 0px 0px;
}
.pds-answer-feedback {
background-color: #666;
padding: 0px 0px 0px 0px;
height:18px;
margin: 2px 0px 5px 0px;
}
.pds-answer-feedback-bar {
background: url(images/pd01-bargif.gif) repeat-x;
margin: 3px;
padding: 0px;
height:12px;
border: 0px;
}
.pds-answer-feedback img {
background: url(images/pd01-bargif.gif) repeat-x;
margin: 3px;
padding: 0px;
height:12px;
border: 0px;
}
/* ----------- Vote Box Div styles ----------- */
.pds-vote {
font-size: 12px;
color: #c3C4c7;
line-height: 17px;
padding: 0px 20px 10px 20px;
}
.pds-votebutton-outer {
height:61px;
}
.pds-vote a {
font-size: 12px;
color: #333;
text-decoration: none;
border-top: 0px;
border-bottom: 0px;
border-top-color: #666;
border-bottom-color: #666;
border-top-style: solid;
border-bottom-style: solid;
padding: 2px 0px 2px 0px;
}
input.pds-votebutton {
width: 61px;
height: 61px;
background: url(images/pd00-votebutton.gif) no-repeat;
outline: none;
float: right;
border:0px;
}
input.pds-votebutton:hover {
background: url(images/pd00-votebutton.gif) no-repeat 0 -60px;
}
.pds-totalvotes-outer {
}
.pds-totalvotes-inner {
font-size: 12px;
color: #ffb400;
background-color: #666;
padding: 3px 6px 3px 3px;
margin: 0px 0px 10px 0px;
text-transform: uppercase;
letter-spacing: 1px;
}
폴대디에 위 css 코드를 넣는 방법과 설문지를 만드는 과정을 동영상으로 담아봤습니다. 아래 동영상을 보시면 쉽게 이해하실 것입니다.
그리고 설문지를 만드는 과정에서 1인당 다수 투표 혹은 1인당 1 투표만 가능하게 설정할 수 있습니다. 아래 그림이 설정하는 모습인데요,
맨 위에 것이 여러번 투표를 가능하게 할 수 있는 설정이구요, 두번째 것은 쿠키로 중복투표를 못하게 하는 설정입니다. 자신이 사용하는 웹브라우져 쿠키를 지우면 중복투표를 할 수 있습니다. 세번째 것은 쿠키와 아이피로 중복투표를 못하게 하는 설정입니다. 아이피까지 확인하니 중복투표를 확실하게 못하게하도록 하는 강력한 방법일텐데요, 대신에 ip를 공유해서 인터넷을 사용하는 회사 내의 여러 대의 컴퓨터에서는 한번 밖에 투표를 못하게 되겠지요. 두번째 설정방법을 추천합니다. 웹브라우져 쿠키를 지우면 다시 또 투표할 수 있지만 그래도 가장 괜찮은 방법인 것 같내요.
트랙백 주소 :: http://leegh.com/trackback/2694083
트랙백과 댓글 RSS :: http://leegh.com/rss/response/2694083
댓글을 달아 주세요
2007/10/27 01:42 댓글주소 수정/삭제 댓글쓰기
오 깔끔합니다~
저도 가끔씩 polldaddy 기능 사용하는데, 스킨 얻어 써도 될까요?
굽실굽실 모드~
그리고 이참에 제 블로그에서 진행하는 대선 여론조사도 심심하시면 참여해주시면 감사하구요~^ㅡ^
http://dudtn.tistory.com/78
글 잘보고 갑니다.~
2007/10/27 22:42 댓글주소 수정/삭제
사용하시라고 css 코드를 올린건데 당연히 되지요. ^_^
저는 문국현 후보에 투표했습니다.
2008/03/04 18:46 댓글주소 수정/삭제 댓글쓰기
안녕하세요.. 폴대디로 검색해서 들어왔습니다.
제가 css를 직접 만져도 그러더니 지인우인님의 코드를 그냥 갖다붙여도 같은 현상이 발생하네요.
미리보기에선 분명 정상으로 보이는데 글쓰기에 코드만 붙이면 그림이 이상해져요.
버튼마진이랄까... 각 항목의 동그란 부분의 좌우마진이 엄청 커져서 체크할 수있는 동그라미가 가운데 와 있고 각 항목들은 오른쪽 구석으로 몰리네요...
혹 시간여유 되시면 무엇이 문제인지 봐주실수 있는지요...
이름 누르시면 시험용으로 포스팅해놓은 글로 링크될거예요. 초면에 송구하네요...
2008/03/05 07:35 댓글주소 수정/삭제
input {
background-color:#FAF9F8;
border:1px solid #DDDDDD;
color:#666666;
padding:2px 0.5em;
vertical-align:middle;
width:180px;
}
위 코드가 style.css (line 603) <== 이 부분인데요, 적용하시고 계신 텍스트큐브 스킨 input 에 매겨진 css 코드가 폴대디 스킨과 중첩되는 것 같습니다. 위 코드 중에서 0.5em 을 0em 으로 바꾸시거나 넓이를 5px 정도로 줄여보세요.
2008/03/05 09:23 댓글주소 수정/삭제 댓글쓰기
그런문제가 있었군요~ 덕분에 잘 해결했습니다. 고맙습니다.
저는 width를 30으로 줄여놓기는 했는데 혹여 다른 게시물에 어떤 영향이 있는지 알 수 있을까요?
2008/03/06 19:29 댓글주소 수정/삭제
input 태그의 css 를 변경했으니 input 태그가 적용된 곳은 변경된 css 가 적용되겠지요. 블로그 스킨 중에 input 태그가 들어간 곳이 어디일련지요. skin.html 파일에서 한번 찾아보셔서 확인해 보심이 좋을듯 합니다.