Всем привет!
На улице страшно жарко, но на ipetrenko.com не перестают публиковаться новые посты. Сегодня я расскажу, как на блог-платформе 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>
На этом всё. Демонстрацию кнопки можно посмотреть здесь (кнопка НАЖМИТЕ по центру).
Свои вопросы по работе скрипта оставляйте ниже в комментариях. До новых встреч
📣 Дописати коментар