Липкая записка поверх страницы блога


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

Как и во многих случаях, код такого окна реализуется тремя частями: джаваскриптом, которой здесь захватывает и перемещает мышью "всплывающее" окно, разметкой css и html кодом. Последний тесно связывается с двумя предыдущими и "выдаёт" готовый результат.

Демо, как вы скорее всего заметили, - с правой стороны. Это окно перемещается по мере прокрутки вниз или вверх, содержит ссылки, либо ссылки с картинками, и обязательно в нём присутствует кнопка или ссылка "закрыть" (иначе посетителя ваша "находка" будет раздражать, особенно постоянных подписчиков). Здесь, главное, не переусердствовать с навязыванием своих уникальных предложений. Ведь всего хорошего должно быть в меру.

На повестке дня:

Заголовки как в LiveStreet?
Можно ли сделать заголовки в Blogger такими же, как в LiveStreet

 Счётчик скачанных файлов для блога
Как правильно организовать и оформить ссылки на загрузку афйлов с вашего блога



Установка.
Разговор о настройке и установке такого рекламного окна стоит начать с таблицы стилей (css):
<style>
#postit{
position:absolute;
width:240px;
height:300px;
padding:15px;
background-color:white;
border:1px solid gray;
color:#57bbea;
visibility:hidden;
z-index:100;
cursor:hand;
cursor: pointer;
-moz-border-radius: 18px;
-webkit-border-radius: 18px;
border-radius: 18px;
-moz-box-shadow: 0 2px 10px #999999;
-webkit-box-shadow: 0 2px 8px #999999;
box-shadow: 0 2px 8px #000000; 
}
</style>
Её вы можете скопипастить в отдельный файл, отправить на хостинг и прописать в <head></head><head></head> или в таком виде вставить в тело html виджета.

Расшифровка и настройки css (внешний вид блока (липкой записки) я подгонял под дизайн своего шаблона):
position - позиция "абсолютная; если поставить fixed, то получится неподвижный при прокрутки страницы блок
width - ширина блока
height - высота блока
padding - отступ с четырёх сторон от стенок блока до текста
background-color - цвет заднего фона блока
border - цвет "бордюра" (рамки или обводки)
color - цвет шрифта текста (цвет ссылок зависит от цвета ссылок в шаблоне вашего блока)
-moz-border-radius и т.д. - настройки закругления бордюра и тени (в т.ч. для Opera)

Javascript. На самом деле здесь два скрипта ↓
<script>
//Post-it only once per browser session? (0=no, 1=yes)
//Specifying 0 will cause postit to display every time page is loaded
var once_per_browser=0

///No need to edit beyond here///

var ns4=document.layers
var ie4=document.all
var ns6=document.getElementById&&!document.all

if (ns4)
crossobj=document.layers.postit
else if (ie4||ns6)
crossobj=ns6? document.getElementById("postit") : document.all.postit


function closeit(){
if (ie4||ns6)
crossobj.style.visibility="hidden"
else if (ns4)
crossobj.visibility="hide"
}

function get_cookie(Name) {
  var search = Name + "="
  var returnvalue = "";
  if (document.cookie.length > 0) {
    offset = document.cookie.indexOf(search)
    if (offset != -1) { // if cookie exists
      offset += search.length
      // set index of beginning of value
      end = document.cookie.indexOf(";", offset);
      // set index of end of cookie value
      if (end == -1)
         end = document.cookie.length;
      returnvalue=unescape(document.cookie.substring(offset, end))
      }
   }
  return returnvalue;
}

function showornot(){
if (get_cookie('postdisplay')==''){
showit()
document.cookie="postdisplay=yes"
}
}

function showit(){
if (ie4||ns6)
crossobj.style.visibility="visible"
else if (ns4)
crossobj.visibility="show"
}

if (once_per_browser)
showornot()
else
showit()
</script>

<script language="JavaScript1.2">
function drag_drop(e){
if (ie4&&dragapproved){
crossobj.style.left=tempx+event.clientX-offsetx+'px'
crossobj.style.top=tempy+event.clientY-offsety+'px'
return false
}
else if (ns6&&dragapproved){
crossobj.style.left=tempx+e.clientX-offsetx+'px'
crossobj.style.top=tempy+e.clientY-offsety+'px'
return false
}
}

function initializedrag(e){
if (ie4&&event.srcElement.id=="postit"||ns6&&e.target.id=="postit"){
offsetx=ie4? event.clientX : e.clientX
offsety=ie4? event.clientY : e.clientY

tempx=parseInt(crossobj.style.left)
tempy=parseInt(crossobj.style.top)

dragapproved=true
document.onmousemove=drag_drop
}
}
document.onmousedown=initializedrag
document.onmouseup=new Function("dragapproved=false")
</script>
С js можете "поступить" так же, как и со стилями.

И наконец, сам html код, в который вы вставите ссылки, текст и может даже картинки, как я это сделал на демо:
<div id="postit" style="left:850px;top:0px">
<div align="right">
<b><a href="javascript:closeit()">убрать?</a></b></div>
<b>На повестке дня:</b>

<p>
<a href="http://blogger.omg-linux.ru/2011/11/zagolovki-kak-v-livestreet-cms.html" target="_new">Заголовки как в LiveStreet?
</a><i>Можно ли сделать заголовки в Blogger такими же, как в LiveStreet</i></p>
<p>
<a href="http://blogger.omg-linux.ru/2011/10/download-counter-for-blogger.html" target="_new">Счётчик скачанных файлов для блога
</a><i>Как правильно организовать и оформить ссылки на загрузку афйлов с вашего блога</i></p>
</div>

Самая важная опция - позиционирование блока (липкой записки) вынесена сюда, это:
left - отступ по оси X
top - отступ по оси Y
В зависимости от шаблона, используемого в блоге и виджета, куда вы вероятно будете вставлять коды "липкой записки", её координаты надо будет подбирать вручную.
С остальным, текстом и ссылками, надеюсь, вопросов возникнуть не должно.

Основу для "липкой записки" угнал отсюда.

2 комментария:

  1. А слишком много кодов всяких это не вред блогу в смысле отношения Яндекса, например?

    ОтветитьУдалить
  2. Вы всегда можете воспользоваться тегом noindex и запретить к индексированию какую-либо часть, если возникают сомнения.
    Если же боитесь, что что яндекс "не найдёт статью", помещайте скрипты и стили в отдельный файл, а в шаблон прописывайте ссылку.
    Что может навредить - это неуникальный контент и нетематические статьи.

    ОтветитьУдалить