Наведите курсор на участок текста ниже.
Однажды Раневская поскользнулась на улице и упала. Навстречу ей шел какой-то незнакомый мужчина. — Поднимите меня! — попросила Раневская. — Народные артистки на дороге не валяются…
Находим строку ]]></b: skin>.Над ней вставляем следующий код.
blockquote {
width: 90%;
margin:10px auto;
border-top: solid 10px #666;border-left: solid 1px #ccc;border-bottom: solid 1px #ccc;border-right: solid 1px #ccc;
box-shadow:100 2px #999;
background-color: #eee;
padding: 10px;
font-family: "Courier New", Courier, monospace;
font-size: 12px;
color: #333333;
line-height: 15px;
word-wrap: break-word;
text-align: left;
}
blockquote:hover {
border-top: solid 10px #3A74C9;
color: #000000;
background-color: #FFFFFF;
box-shadow:0 0 5px #999;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhswcvQRo6k007DAsk0Ko8D9XhJRjnActT1iOR0F5YWAng48BNMdfxKWO-reqaWJ2NyH1Sb2ge4OAVdyI1nKMhaIhrTmLZ-3z_6sPF83qn-aBOJX0Iudp6VU0HqZw3kJMmVzCeVLeOHwM-r/s1600/hover-bg.gif") repeat;
}
Теперь, когда захочется что-то выделить при написании поста, нужно перейти в редакторе сообщений из режима создать в режим HTML и заключить этот текст вот так.
<blockquote>здесь ваш текст </blockquote>
Ещё один вариант оформления цитаты, кода или участка текста. Также с эффектом анимации. Как это работает можно посмотреть на тестовом блоге(http://smotritetyt.blogspot.ru/)
Код для него:
blockquote { line-height: 20px; background: url([url]https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJcELJ3WjSng28Ks1_NUswT6L-1WM9en1udNfGkGmH5jbtU7q9TACXUqq1A3rXLBy6OrV1nGOg-Ydq4kiLXHAc7OwVEo3ZFeY1DhwRn5Y6GA-aKk5ceFb0hvXhaawDrVSNNaESgDFzxHs/s1600/black.png[/url]); font-family: "Courier New", Courier, monospace; font-size: 12px; color: #000000; border:solid #999999 1px; border-left:solid #990000 15px; padding: 0 5px 0 10px; margin-left:30px; } blockquote:hover{ background: #FFFFFF; box-shadow:0 0 7px #999; }
источник: http://www.shpargalochki.ru/2014/05/animirovannyj-fon.html
|
|
0 коммент.:
Отправить комментарий