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

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

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



Если уже хочется установить у себя такую же , идём во вкладку ДИЗАЙН-ДОБАВИТЬ ГАДЖЕТ выбираем 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. Вика, у меня с картой и сейчас проблемы. Аккордеоном недавно слетела. Сейчас вставила новый скрипт, не знаю надолго ли. Так что скучать не приходится. Каждый день несет нам новые сюрпризы, которые Увы необходимо решать.

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

Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML

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