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

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

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

Код.
<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


16 комментариев:

  1. Интересный способ перелинковки на сайте :) Вот только у меня уже нет места под меню блога для таких ссылок. Где бы можно было бы ещё вывести такой виджет, чтобы он оказался также эффективен?

    ОтветитьУдалить
    Ответы
    1. Привет, Игорь. Я в сайдбаре пробовала, но это на любителя. А вообще у тебя сегодня прочитала рондомные посты внутри сообщения. Думаю, как в блоггере сделать. Чтобы не руками, а автоматом.

      Удалить
  2. Ну этот вопрос точно не адресуется мне )))
    А в блоггере нет совсем никаких плагинов как в Вордпресс? Там что, только все кодами выводится?

    ОтветитьУдалить
    Ответы
    1. Да, Игорь.Блоггер без плагинов. Коды, гаджеты. Но многим это интереснее.

      Удалить
    2. Я ни капли не сомневаюсь, что многим это интересно! Даже в Wordpress многим это интересно, а если в блогере нет совсем плагинов, то и подавно )))

      Удалить
    3. Да, согласна с тобой. По мне бы покопаться в шаблоне.

      Удалить
  3. столько данных. сложно выбрать что-то для себя. каждый урок - новая фишка.

    ОтветитьУдалить
    Ответы
    1. Да Семён, вот за это и нравится мне платформа. Шаблон гибкий, легко настраиваемый. И конечно же всё не впихать в один блог. Но всёравно хорошо когда есть выбор.

      Удалить
  4. Очень интересная штука. Спасибо! Еще одна закладка в мою кладовочку)
    Люблю полезности, которые можно применять, не внося изменения в сам шаблон. Вика, не вижу куда еще можно написать, спрошу тут. Речь как раз таки о шаблоне.. Я как то у себя установила для коментов возможность добавлять картинки, смайлы, и замену стандартной аватарки анонима на свою картинку. Сперва перестала отображаться эта картинка (вообще пусто рядом с именами незарегистрированных), затем перестали работать смайлы и добавление изображения в комент. Картинки лежат у меня в облаке, пропасть не могли. Получается дело в кодах? Но почему тогда все одновременно не стало глючить, а как бы по очереди.. Библиотека устарела (не помню как она называется). Про нее мне написал отчет один сайт, где я проверяла блог на наличие неполадок (твоя была идея, а что и где уже тоже не помню)). В общем, это может быть причиной неполадок? Подскажи, пожалуйста.

    ОтветитьУдалить
  5. Наташа привет. Что касается библиотеки jQuery она у тебя в коде дважды- в гаджете похожие сообщения и по-моему в бабочке-наверх. Сообщение моё про библиотеку здесь http://www.shpargalochki.ru/2014/07/biblioteka-jquery-v-bloge.html.
    Смайлики не мои и ничего по этому поводу не скажу. Кстати, когда я впервые к тебе попала хотела установить в комментарии они уже дёргались -у меня не получилось. Про мои статья вот http://www.shpargalochki.ru/2015/08/vesjolye-smajly-dlja-kommentariev-BLOGGER.html работают нормально.
    А насчёт картинок в комментариях- у тебя перед body нет нужного кода. http://www.shpargalochki.ru/2015/07/kak-vstavit-izobrazhenie-v-kommentarii-bloga.html
    У тебя в шаблоне jQuery строка 2131 и 591. Что делать-попробуй скопировать и убрать пока бабочку. Напиши потом мне в любом случае. Можешь через форму связи ниже.

    ОтветитьУдалить
    Ответы
    1. Сообщение про библиотеку http://www.shpargalochki.ru/2014/07/biblioteka-jquery-v-bloge.html

      Удалить
    2. Вика, большущее спасибо тебе за отзывчивость и помощь!
      Буду смотреть, читать, разбираться.
      Вот почему я и не люблю в коде шаблона изменения делать.. Бывает, найду что-то, сделаю, а потом оно не работает. И разбирайся-мучайся) Куда приятней коды в гаджеты добавлять. Но, я понимаю, не со всякой фишкой этот фокус проходит.

      Удалить
    3. Да не за что Наташа. Понимаешь, даже то, что мы устанавливаем в гаджеты всё ведь это в самом шаблоне отображается. Да, много талкать всего не стоит. К тому же у тебя фото блог. Много картинок. Ему бедненькому и так тяжело. Кстати, ты их сжимаешь где-нибудь, чтобы размер уменьшить.

      Удалить
    4. Специально ничего не делаю, просто загружаю в пост из альбомов пикаса. Это они не сжатые получаются?

      Удалить
    5. Я вот Пикассо не очень люблю и не знаю сжимает он или нет.Скорее всего да.

      Удалить
    6. Я по твоей ссылке http://pr-cy.ru проверила свой блог. Там среди прочего пишут, что изображения оптимизируются, то есть сжатие есть, ну и славно, еще одной проблемой меньше.
      Спасибо!

      Удалить

Пользовательский поиск