Плавающее сообщение для блога

Плавающих меню (об одном уже писал) и других элементов (стыренный у Борисова уголок) описано в блогах предостаточно.
Этот вариантик, который рассмотрим ниже, немного отличается тем, что основан он не только на CSS, но и использует лёгкую анимашку через библиотеку jQuery.

Демо можно увидеть прям на этой странице, оно плавает и мешает читать эту заметку. Можете нажать на красный крестик, и плавающая фигулина стильно исчезнет. Для чего может пригодится плавающее безобразие, думайте сами...

Установка в Blogger или куда-либо ещё (пофиг) ↓

1) jQuery (если не знаете, что это, внизу есть поиск по блогу от Яндекса, ищет всё)
2) CSS:

style media="all" type="text/css">
      #message_box { 
       position: absolute; 
       top: 0; left: 0; 
       z-index: 10; 
   background: #3f4345;
   background: -webkit-gradient(linear, left top, left bottom, from(#a1a4a6), to(#3f4345));
   background: -webkit-linear-gradient(top, #a1a4a6, #3f4345);
   background: -moz-linear-gradient(top, #a1a4a6, #3f4345);
   background: -ms-linear-gradient(top, #a1a4a6, #3f4345);
   background: -o-linear-gradient(top, #a1a4a6, #3f4345);
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
       padding:5px;
       border:1px solid #CCCCCC;
       text-align:center; 
       font-weight:bold; 
       width:99%;
      }
</style>

Посмотрите на форматирование кода. Его центральная часть выступает, я специально её так выделил. Это цвет фона (background), цвет текста (color), закругление (border-radius) и градиенты (сделал в генераторе). Конечно последнее не нужно в таких плавающих формах, но для демо так нагляднее.

Стили (CSS) вписываются в шаблон к остальным стилям (если у вас Blogger) или файл с общими стилями блога. Отдельный создавать не надо. Ширина (width) относительная, указана в процентах.
Здесь, в примере, она привязана к ширине контейнера поста, сама форма к верхнему его краю.
Позинионируется при помощи top и left.

3) Скрипт с анимацией (ставится в шаблоне пред /head):

<script type="text/javascript" language="javascript">
//  Developed by Roshan Bhattarai 
//  Visit http://roshanbh.com.np for this script and more.
//  This notice MUST stay intact for legal use
$(document).ready(function()
{
	//scroll the message box to the top offset of browser's scrool bar
	$(window).scroll(function()
	{
  		$('#message_box').animate({top:$(window).scrollTop()+"px" },{queue: false, duration: 350});  
	});
    //when the close button at right corner of the message box is clicked 
	$('#close_message').click(function()
	{
  		//the messagebox gets scrool down with top property and gets hidden with zero opacity 
		$('#message_box').animate({ top:"+=15px",opacity:0 }, "slow");
	});
});
 </script>

Где:
duration: 350 означает скорость, с которой элемент "доплывёт" с прокрученной до актуальной области.

4) HTML код, который видимо лучше разместить перед тегом /body в шаблоне (плавающий блок изначально будет прижат к верхней части страницы):

<div id="message_box"><img id="close_message" style="float:right;cursor:pointer"  src="http://3.bp.blogspot.com/-9ZvB20ZXvak/T2W29GEzliI/AAAAAAAAJYc/0Y4MaI6a4Wk/s1600/12-em-cross.png" />Здесь можно написать какую-нибудь фигню!!!</div>

Здесь мы видим путь к картинке-крестику (копка "закрыть) и текст для нашей плавающей формы.

Здесь можно написать какую-нибудь фигню!!!

Источник разработки.