Выскальзывающие ссылки в верхней части блога.

Всем доброго времени суток. Предлагаю вашему вниманию код, с помощью которого сделаем выскальзывающие ссылки над сообщениями блога. Посетители обязательно обратят на это внимание. Вообще, реализовать то, о чём сегодня пойдёт речь, можно и для вывода важных объявлений или каких-то напоминаний.

Всё то, на чём хочется заострить внимание читателей. Код выскальзывающих ссылок неплохо смотрится и в гаджете на боковой панели. Тут уж вы сами определитесь где и что вам нужно. А я попрошу вас перейти на тестовый блог и посмотреть такие ссылки над сообщениями.

Сразу обратите внимание, что одна из них оформлена без условия читать далее (подробнее). Это тоже на ваше усмотрение. Разберём ниже.

Код.

<div style="position:relative;left:0px;top:0px">
<span id="highlighter" style="position:absolute;left:0;top:0;font-size:16px;font-family:Verdana;clip:rect(0px 0px auto 0px)"></span>
</div>
<script type="text/javascript">
var tickercontents=new Array()
tickercontents[0]=' <a href="http://www.shpargalochki.ru/2016/02/Jeffekt-pojavljajushhegosja-opisanija-u-kartinki.html#more  ">эффект появляющегося описания у картинки </a>...'
tickercontents[1]=' полоса прокрутки для длинного списка ярлыков <a href=" http://www.shpargalochki.ru/2016/02/Polosa-prokrutki-dlja-dlinnogo-spiska-jarlykov..html#more  ">подробнее</a>...'
tickercontents[2]='код самопечатающегося текста  <a href="http://www.shpargalochki.ru/2016/01/Kod-samopechatajushhegosja-teksta.html#more ">подробнее...</a>'
var tickdelay=3000
var highlightspeed=10
var currentmessage=0
var clipwidth=0
function changetickercontent(){crosstick.style.clip="rect(0px 0px auto 0px)"
crosstick.innerHTML=tickercontents[currentmessage]
highlightmsg()}
function highlightmsg(){var msgwidth=crosstick.offsetWidth
if(clipwidth<msgwidth){clipwidth+=highlightspeed
crosstick.style.clip="rect(0px "+clipwidth+"px auto 0px)"
beginclip=setTimeout("highlightmsg()",20)}
else{clipwidth=0
clearTimeout(beginclip)
if(currentmessage==tickercontents.length-1)currentmessage=0
else currentmessage++
setTimeout("changetickercontent()",tickdelay)}}
function start_ticking(){crosstick=document.getElementById?document.getElementById("highlighter"):document.all.highlighter
crosstickParent=crosstick.parentNode?crosstick.parentNode:crosstick.parentElement
if(parseInt(crosstick.offsetHeight)>0)
crosstickParent.style.height=crosstick.offsetHeight+'px'
else
setTimeout("crosstickParent.style.height=crosstick.offsetHeight+'px'",100)
changetickercontent()}
if(document.all||document.getElementById)
window.onload=start_ticking
</script>

А теперь о том, что и как. Сами ссылки оформлены таким образом.

tickercontents[1]=' полоса прокрутки для длинного списка ярлыков <a href=" ссылка на статью ">подробнее</a>...'

Можно эти строчки добавлять ещё и ещё. При этом прописывая, соответственно, tickercontents[3] , tickercontents[4] и так далее. Как я писала выше, можете убрать строку ПОДРОБНЕЕ. Вместо неё пишем название сообщения, а то что я отметила красным просто удаляем. То есть создаём просто кликабельную ссылку. Должно получиться так

<a href="ссылка на статью ">название статьи</a>...'

Вот вроде как и весь разбор кода выскальзывающих над сообщениями блога важных ссылок. Теперь остаётся только добавить весь код в гаджет HTML/JavaScript и переместить его над гаджетом сообщения блога.

Пробуйте на своих тестовых блогах. Код не сложный и всё получиться. Забыла сказать, что можно выделить фоном строку. Всего-то добавить в стили значение.

<span id="highlighter" style="position:absolute;background:#0099DD;left:0;top:0;font-size:16px;font-family:Verdana;clip:rect(0px 0px auto 0px)"></span>

И у меня сегодня всё. Всем удачи в блоговедении и спасибо за ваше внимание.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email