Кнопка для перехода к случайной записи в Blogger

Всем привет!

На улице страшно жарко, но на IPetrenko.ru не перестают публиковаться новые посты. Сегодня я расскажу, как на блог-платформе Blogger сделать крутую кнопку, при нажатии на которую мы переместимся на случайную запись.

Суть работы кнопки заключается в фиде блога, с которого скрипт случайным образом выбирает ссылку на запись. И так этот скрипт делает каждый раз при нажатии кнопки.

Собственно ниже код стиля кнопки, который нужно поместить в хедере шаблона, там где находиться остальной css-код шаблона или же в любом удобно для вас месте между тегами <style type="text/css"> и </style>.

#myLuckyPost  a{-moz-border-radius:8px;-moz-box-shadow:0 9px 0 #2f6ae0, 0 9px 10px  rgba(0,0,0,.7);-moz-transition:all .1s ease;-ms-transition:all .1s  ease;-o-transition:all .1s  ease;-webkit-border-radius:8px;-webkit-box-shadow:0 9px 0 #2f6ae0, 0 9px  10px rgba(0,0,0,.7);-webkit-transition:all .1s  ease;background-color:#497ce5;border-radius:8px;box-shadow:0 9px 0  #2f6ae0, 0 9px 10px  rgba(0,0,0,.7);color:rgba(255,255,255,1);display:block;font-size:25px;font-weight:700;height:40px;margin:10px  auto;padding:10px 2px  2px;position:relative;text-align:center;text-decoration:none;transition:all  .1s ease;width:200px}

#myLuckyPost a:active{-moz-box-shadow:0 3px 0  #2f6ae0, 0 3px 6px rgba(0,0,0,.9);-webkit-box-shadow:0 3px 0 #2f6ae0, 0  3px 6px rgba(0,0,0,.9);box-shadow:0 3px 0 #2f6ae0, 0 3px 6px  rgba(0,0,0,.9);font-size:25px;position:relative;top:6px}

А вот это код скрипта, который отвечает за случайную запись. Его можно разместить в виджете типа HTML-код.

<div id="myLuckyPost"></div>
<script type="text/javascript">function showLucky(e){var t=e.feed;var  n=t.entry||[];var r=t.entry[0];for(var  i=0;i<r.link.length;++i){if(r.link[i].rel=="alternate"){window.location=r.link[i].href}}}function   fetchLuck(e){script=document.createElement("script");script.src="/feeds/posts/summary?start-index="+e+"&max-results=1&alt=json-in-script&callback=showLucky";script.type="text/javascript";document.getElementsByTagName("head")[0].appendChild(script)}function  feelingLucky(e){var t=e.feed;var  n=parseInt(t.openSearch$totalResults.$t,10);var  r=Math.floor(Math.random()*n);r++;a=document.createElement("a");a.href="#random";a.rel=r;a.onclick=function(){fetchLuck(this.rel)};a.innerHTML="Случайная запись";document.getElementById("myLuckyPost").appendChild(a)}</script>

<script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky"></script>

На этом всё. Демонстрацию кнопки можно посмотреть здесь (кнопка НАЖМИТЕ по центру).
Свои вопросы по работе скрипта оставляйте ниже в комментариях. До новых встреч


Если вам понравиласть эта статья, то поделитесь ей с друзьями. Вам не сложно, а мне приятно ;)
Присоединяйтесь к 200+ блоггерам и получите полезный в подарок
    Blogger комменты
    Facebook комменты

0 коммент. :

Отправить комментарий