Многие зарубежные блоги используют эту фишку, чтобы рекламировать свои услуги. Например, видеоуроки, или вообще вставляют рекламный банер.
Делается такой плавающий блок с помощью css и javascript. Особых навыков, кроме примерного представления о работе каскадных таблиц стилей (принцип css) не требуется.
Как и во многих случаях, код такого окна реализуется тремя частями: джаваскриптом, которой здесь захватывает и перемещает мышью "всплывающее" окно, разметкой css и html кодом. Последний тесно связывается с двумя предыдущими и "выдаёт" готовый результат.
Демо, как вы скорее всего заметили, - с правой стороны. Это окно перемещается по мере прокрутки вниз или вверх, содержит ссылки, либо ссылки с картинками, и обязательно в нём присутствует кнопка или ссылка "закрыть" (иначе посетителя ваша "находка" будет раздражать, особенно постоянных подписчиков). Здесь, главное, не переусердствовать с навязыванием своих уникальных предложений. Ведь всего хорошего должно быть в меру.
На повестке дня:
Заголовки как в LiveStreet?
Можно ли сделать заголовки в Blogger такими же, как в LiveStreet
Счётчик скачанных файлов для блога
Как правильно организовать и оформить ссылки на загрузку афйлов с вашего блога
Заголовки как в 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 код, в который вы вставите ссылки, текст и может даже картинки, как я это сделал на демо:
Самая важная опция - позиционирование блока (липкой записки) вынесена сюда, это:
left - отступ по оси X
top - отступ по оси Y
В зависимости от шаблона, используемого в блоге и виджета, куда вы вероятно будете вставлять коды "липкой записки", её координаты надо будет подбирать вручную.
С остальным, текстом и ссылками, надеюсь, вопросов возникнуть не должно.
Основу для "липкой записки" угнал отсюда.
А слишком много кодов всяких это не вред блогу в смысле отношения Яндекса, например?
ОтветитьУдалитьВы всегда можете воспользоваться тегом noindex и запретить к индексированию какую-либо часть, если возникают сомнения.
ОтветитьУдалитьЕсли же боитесь, что что яндекс "не найдёт статью", помещайте скрипты и стили в отдельный файл, а в шаблон прописывайте ссылку.
Что может навредить - это неуникальный контент и нетематические статьи.