Выезжающая панель как на DD

[Juzilkree]

Выезжающая панель которую видят не зарегистрированые пользователи в правом нижнем углу.

#slideout {
  position: fixed;
  bottom:-3px;
  right: 0;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  z-index:3;
}
#slideout_inner {
  position: fixed;
  bottom:0px;
  right: -280px;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  background-color: #FFF4E5;
  border-radius: 0px;
  border:10px solid #D88B25;
  opacity:0.6;
  filter:alpha(opacity=60);
  width: 250px;
  color:#000000;
  height: 180px;
  padding-left: 10px;
  z-index:3;
}
#slideout_inner h3{
  padding-left: 10px;
  padding-top: 10px;
}
#slideout_inner p{
  padding-left: 10px;
}
.pannelok{
  width: 185px;
  float: left;
}
#slideout:hover {
  right: 250px;
}
#slideout:hover #slideout_inner {
  right: 0;
}[CODE]
 
[code]<xen:if is="!{$visitor.user_id}">

<script charset="utf-8" type="text/javascript">
$(function() {
$("img.posters").lazyload({
//effect : "fadeIn"
});
$("img.feachers").lazyload({
effect : "fadeIn"
});
});
</script>

<div id="slideout">
  <div><img src="styles/default/xenforo/oga.png" alt="{xen:phrase hi_die}"></div>
  <div id="slideout_inner">
<h3>{xen:phrase hi_die}</h3>
<br>
	  <div class="pannelok"><p class='bbc_center'>{xen:phrase reg_or_die}</p></div>
  </div>
</div>

</xen:if>

Вставляем весь этот код в шаблон footer в самый низ.
Картинку кому надо, вытащите сами.

 

[Unix]

Не против, если себе поставлю?)

 

[Vieraw]

Не против, если себе поставлю?)

Для этого его сюда и выложили.

 

[Juzilkree]

Обновлено. Добавил css код.