Красивая кнопка случайный пост

кнопка случайный пост

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



Если уже хочется установить у себя такую же , идём во вкладку ДИЗАЙН-ДОБАВИТЬ ГАДЖЕТ выбираем HTML/JavaScript и вставляем следующий код.

<style>
#abt-random{position:relative;color:rgba(255,255,255,1);text-decoration:none;background-color:rgba(219,87,5,1);font-family:'Yanone Kaffeesatz';font-weight:700;font-size:20px;display:block;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;-webkit-box-shadow:0 9px 0 rgba(219,31,5,1), 0 9px 25px rgba(0,0,0,.7);-moz-box-shadow:0 9px 0 rgba(219,31,5,1), 0 9px 25px rgba(0,0,0,.7);box-shadow:0 9px 0 rgba(219,31,5,1), 0 9px 25px rgba(0,0,0,.7);margin-bottom:10px;margin-top:10px;width:220px;text-align:center;-webkit-transition:all .1s ease;-moz-transition:all .1s ease;-ms-transition:all .1s ease;-o-transition:all .1s ease;transition:all .1s ease;padding:4px}
#abt-random:active{-webkit-box-shadow:0 3px 0 rgba(219,31,5,1), 0 3px 6px rgba(0,0,0,.9);-moz-box-shadow:0 3px 0 rgba(219,31,5,1), 0 3px 6px rgba(0,0,0,.9);box-shadow:0 3px 0 rgba(219,31,5,1), 0 3px 6px rgba(0,0,0,.9);position:relative;top:6px}
#abt-random a{color: #fff;}
</style>

<center><div id="abt-random"></div></center>
<script type="text/javascript">
function showLucky(root){ var feed = root.feed; var entries = feed.entry || []; var entry = feed.entry[0]; for (var j = 0; j < entry.link.length; ++j){if (entry.link[j].rel == 'alternate'){window.location = entry.link[j].href;}}} function fetchLuck(luck){ script = document.createElement('script'); script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } function feelingLucky(root){ var feed = root.feed; var total = parseInt(feed.openSearch$totalResults.$t,10); var luckyNumber = Math.floor(Math.random()*total);luckyNumber++; a = document.createElement('a'); a.href = '#random'; a.rel = luckyNumber; a.onclick = function(){fetchLuck(this.rel);}; a.innerHTML = 'случайный пост '; document.getElementById('abt-random').appendChild(a); } </script><script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky">
</script>


Ширина шаблонов и боковых колонок у всех разная . В коде я выделили красным цветом именно ширину кнопки. если поиграться со стилями легко добиться другого цветового решения. Цвета в коде заданы в формате rgba. Так что её легко можно подогнать для своего блога.
Установите готовый гаджет в нужное место на блоге.

На этом на сегодня ставим точку. Пробуйте.



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

введите пожалуйста свой email :

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

  1. Вика, очень интересное решение.Только где эта кнопочка у вас? Не вижу.

    ОтветитьУдалить
  2. Сергей. Я ей установила пока на этом блоге http://poluhka.blogspot.ru/ в тексте есть ссылка. Спасибо за комментарий.

    ОтветитьУдалить
  3. Как интересно! Заберу! Спасибо!

    ОтветитьУдалить
  4. ПОЛУЧИЛОСЬ ! Спасибо !

    ОтветитьУдалить
  5. Jeka, да не за что. Хорошо что получилось.

    ОтветитьУдалить
  6. Вика, прошу прощения не заметил ссылку. Просто она с основным текстом сливается (может только у меня).

    ОтветитьУдалить
  7. Сергей, мне очень приятно, что Вам понравилось.Спасибо.

    ОтветитьУдалить
  8. Эх, забыл я уже платформу Блогспот, но в общем такая кнопочка довольно интересное решение для улучшения юзабилити блога. Возможно и текст на самой кнопке можно будет как-то "обыграть" по законам копирайтерского мастерства и придать еще бОльшей интриги...

    ОтветитьУдалить
  9. Руслан, да запросто. Это я насчёт текста. Кстати тоже забыла на этот момент обратить внимание.

    ОтветитьУдалить
  10. Вика, спасибо! Взяла себе!
    Вас сегодня с праздником поздравляю, Международным днём блогера!

    ОтветитьУдалить
  11. Ольга и Вас с праздником. А кнопка правда классная. Мне самой нравится.

    ОтветитьУдалить
  12. Вика, здравствуйте! А как поставить вместо оранжевого цвета своё цветовое решение или картинку, на которой будет надпись? Или это не очень реально?

    ОтветитьУдалить
  13. Лилия Павловна. К сожалению никак. Код прописан именно для такого варианта.

    ОтветитьУдалить
  14. Вика, спасибо! Все получилось!

    ОтветитьУдалить
  15. Елена. Пожалуйста. Рада за Вас.

    ОтветитьУдалить
  16. Вика, благодарю за кнопку. Вставила в свой блог. Оригинально смотрится. Будем надеяться, что еще и пользу принесет. Во всяком случае мне в твоем блоге очень хочется на неё нажать.

    ОтветитьУдалить
  17. Оля, а у меня она почему-то на этом блоге глючить начала.Вроде ничего нового и не вносила в шаблон. И беда с последними комментами. Один за другим слетают. вот опять пришлось новый сделать.

    ОтветитьУдалить
  18. Вика у меня кнопка пока работает на обоих блогах. Проверила сейчас твою кнопку, открывает один и тот же пост "Красивая кнопка случайный пост". Странно вчера еще работала. Вспоминай какие вставляла скрипты-добавить гаджет. Какой то скрипт стал конкурентом. Что касается комментов, то же самое. Вчера вставила новый скрипт, сегодня уже не работает. Сейчас решаю проблему.

    ОтветитьУдалить
  19. Оля, похоже что из-за комментариев. Больше ничего не меняла и не добавляла. Но от комментов не откажешься. Понаблюдаю. А комментарии -уже что только не ставила. Слетают. Это , как у тебя с картой блога было.

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

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

Пользовательский поиск
Foto Saya
My Photo