Хотелось бы представить вам красивый и достаточно интересный вид опроса для сайта ucoz.
Такой вид опроса улучшит дизайн вашего сайта в целом. Так как он выполнен очень стильно и элегантно. Этот вид опроса будет являться прекрасной заменой стандартного дизайна опросов ucoz.
Установка: В вид
формы опросов вставляем код:
Код
<div class="pollBlock">
<div class="titles" style="text-align: center;">$QUESTION$</div>
<div class="pollAns">$ANSWERS$</div>
<center>
<a id="arch" class="button_poll arhiv_rez_poll" href="$ARCHIVE_LINK$">Архив</a>
<a id="resLink" class="button_poll arhiv_rez_poll" href="$RESULTS_LINK$">Результат</a>
</center>
<div class="pollTot">Всего ответов: <b>$TOTAL_VOTES$</b></div>
</div>
<script type="text/javascript">
var a = ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15'];
for(var i = 0; i < a.length; i++){$('div.answer div').eq(i).addClass('progress');$('div.answer div div').eq(i).addClass('progress-'+[i]);}
$('div.answer span').each(function(){$(this).html($(this).html()+' - <span class="procent">'+$(this).attr('title').split(':')[1]+'</span>')});
</script>
<script>
$(function () {
if($('.pollBut').size() > 0) {
$('#arch, #resLink').hide();
}
})
</script>
В
css Вашего сайта вставляем код:
Код
.progress {
height: 15px;
overflow: hidden;
margin: 5px 0px 5px 0px;
height: 15px!important;
background: #F4F8F9!important;
}
.progress-0,
.progress-1,
.progress-2,
.progress-3,
.progress-4,
.progress-5,
.progress-6,
.progress-7,
.progress-8,
.progress-9,
.progress-10,
.progress-11,
.progress-12,
.progress-13,
.progress-14 {
height: 18px!important;
display: block!important;
overflow: hidden!important;
margin-top: -3px;
}
.progress-0 {background: #5D9AD3!important;}
.progress-1 {background: #E96465!important;}
.progress-2 {background: #F6954E!important;}
.progress-3 {background: #dd8cd2!important;}
.progress-4 {background: #75D0ED!important;}
.progress-5 {background: #5BC254!important;}
.progress-6 {background: #CFC72D!important;}
.progress-7 {background: #DD3344!important;}
.progress-8 {background: #FE9B6F!important;}
.progress-9 {background: #8CC84B!important;}
.progress-10 {background: #DD8CD2!important;}
.progress-11 {background: #e9eb5b!important;}
.progress-12 {background: #E96465!important;}
.progress-13 {background: #75D0ED!important;}
.progress-14 {background: #5D9AD3!important;}
.answer {
color: black;
background-image: none;
background-repeat: no-repeat;
background-position: bottom left;
line-height: 22px;
display: block;
text-align: left;
font-size: 11px;
}
.pollAns {margin: 0 3px 4px 3px;padding: 5px;text-align: center!important;}
.titles {display: block;-moz-border-radius: 3px;-webkit-border-radius: 3px;-khtml-border-radius: 3px; border-radius: 3px;background: #22A5DC;color: white;text-shadow: 0 1px 0 #22A5DC;padding: 4px 5px 5px 5px;font-size: 13px;
}
.button_poll {
cursor:pointer;
text-decoration:none!important;
display:inline-block;
font-size: 13px;
margin:0 10px 20px 0;
padding: 7px 11px 7px;
position:relative;
outline:none;
border:none;
-webkit-transition:all 0.2s linear;
-moz-transition:all 0.2s linear;
-o-transition:all 0.2s linear;
transition:all 0.2s linear;
}
.arhiv_rez_poll {
background:#3C75CE;
color: #fff;
}
.arhiv_rez_poll:hover {
background:#2859A3;
color:#fff;
}
.pollTot {
border: 0;
background:#006EEE;
color: #fff;
font-size: 13px;
padding: 5px 10px;
margin-top: 0px;
text-align:center;
}
Поделиться новостью в социальной сети.
Добавлять комментарии могут только зарегистрированные пользователи.
[
Регистрация |
Вход ]