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

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

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