наверняка захочется кликнуть по ней. Каждый раз она перенаправляет посетителей на разные посты . Выглядит она вот так.

Если уже хочется установить у себя такую же , идём во вкладку ДИЗАЙН-ДОБАВИТЬ ГАДЖЕТ выбираем 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>
#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. Так что её легко можно подогнать для своего блога.
Установите готовый гаджет в нужное место на блоге.
На этом на сегодня ставим точку. Пробуйте.
хотите оформить подписку на новые шпаргалки
Вика, очень интересное решение.Только где эта кнопочка у вас? Не вижу.
ОтветитьУдалитьСергей. Я ей установила пока на этом блоге http://poluhka.blogspot.ru/ в тексте есть ссылка. Спасибо за комментарий.
ОтветитьУдалитьКак интересно! Заберу! Спасибо!
ОтветитьУдалитьПользуйтесь.
ОтветитьУдалитьПОЛУЧИЛОСЬ ! Спасибо !
ОтветитьУдалитьJeka, да не за что. Хорошо что получилось.
ОтветитьУдалитьВика, прошу прощения не заметил ссылку. Просто она с основным текстом сливается (может только у меня).
ОтветитьУдалитьПосмотрел, замечательно.
ОтветитьУдалитьСергей, мне очень приятно, что Вам понравилось.Спасибо.
ОтветитьУдалитьЭх, забыл я уже платформу Блогспот, но в общем такая кнопочка довольно интересное решение для улучшения юзабилити блога. Возможно и текст на самой кнопке можно будет как-то "обыграть" по законам копирайтерского мастерства и придать еще бОльшей интриги...
ОтветитьУдалитьРуслан, да запросто. Это я насчёт текста. Кстати тоже забыла на этот момент обратить внимание.
ОтветитьУдалитьВика, спасибо! Взяла себе!
ОтветитьУдалитьВас сегодня с праздником поздравляю, Международным днём блогера!
Ольга и Вас с праздником. А кнопка правда классная. Мне самой нравится.
ОтветитьУдалитьВика, здравствуйте! А как поставить вместо оранжевого цвета своё цветовое решение или картинку, на которой будет надпись? Или это не очень реально?
ОтветитьУдалитьЛилия Павловна. К сожалению никак. Код прописан именно для такого варианта.
ОтветитьУдалитьВика, спасибо! Все получилось!
ОтветитьУдалитьЕлена. Пожалуйста. Рада за Вас.
ОтветитьУдалитьВика, благодарю за кнопку. Вставила в свой блог. Оригинально смотрится. Будем надеяться, что еще и пользу принесет. Во всяком случае мне в твоем блоге очень хочется на неё нажать.
ОтветитьУдалитьОля, а у меня она почему-то на этом блоге глючить начала.Вроде ничего нового и не вносила в шаблон. И беда с последними комментами. Один за другим слетают. вот опять пришлось новый сделать.
ОтветитьУдалитьВика у меня кнопка пока работает на обоих блогах. Проверила сейчас твою кнопку, открывает один и тот же пост "Красивая кнопка случайный пост". Странно вчера еще работала. Вспоминай какие вставляла скрипты-добавить гаджет. Какой то скрипт стал конкурентом. Что касается комментов, то же самое. Вчера вставила новый скрипт, сегодня уже не работает. Сейчас решаю проблему.
ОтветитьУдалитьОля, похоже что из-за комментариев. Больше ничего не меняла и не добавляла. Но от комментов не откажешься. Понаблюдаю. А комментарии -уже что только не ставила. Слетают. Это , как у тебя с картой блога было.
ОтветитьУдалитьВика, у меня с картой и сейчас проблемы. Аккордеоном недавно слетела. Сейчас вставила новый скрипт, не знаю надолго ли. Так что скучать не приходится. Каждый день несет нам новые сюрпризы, которые Увы необходимо решать.
ОтветитьУдалить