воскресенье, 17 октября 2010 г.

CSS. Код для стилей спойлера в Blogger

CSS на странице всегда вставляется внутри тегов <style type="text/css">...стили CSS...</style>
Даже псевдотег b:skin трансформируется движком Блоггер в тег style:
<style id='page-skin-1' type='text/css'>...</style>
1. Дизайн - Шаблон - Изменить HTML
2. В поле шаблона находим закрывающий тег </head>
3. <style type="text/css">здесь прописываются стили</style>
/* Стили для спойлера */
.bar {
  background:#B2BDCB url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFSZhQjQcbFwJHUZ-Or4x0AV1C_xv-R9lAiEK8tDJuX5hZUhAa7qMmzNd6DMH32ciVFvj7u05eOfF2Ec1Ll42jTmft_2m1lEBtuolNFpn6RmQTeePZzpd3DOJLwyGCL56aPzlaZWcVJaMz/') no-repeat;
  padding-left: 30px;
  color: #1A3457;
  height:26px;
  font-weight:bold;
  cursor:pointer;
}
/* Скрытый спойлер */
.spoiler-hidden .bar {
  background-position: 0 0;
}
.spoiler, .spoiler-hidden .text {
  display: none;
}
/* Открытый спойлер */
.spoiler-visible .bar {
  background-position: 0 -26px;
}
.spoiler-visible .copy {
  text-align:right; font-size:0.6em;
}
.spoiler-visible .text {
  display:visible;
  padding: 0 1em;
  border: 1px dashed #B2BDCB;
  border-top-width:0;
}

1 комментарий: