Как-то мы уже делали кнопку случайный пост. Тем, кто это пропустил можно ознакомиться здесь. Она очень приглянулась многим. Этот виджет, как и кнопка, будет при каждой перезагрузке страницы выводить всегда другие случайные сообщения. Что очень удобно для наших посетителей.
Это код для него. Настройки разберём ниже, чтобы подогнать их под ваш дизайн.
<style>.random-post-rounded-list ol{
counter-reset: li;
list-style: none;
*list-style: decimal;
font: 15px 'trebuchet MS', 'lucida sans';
padding: 0;
margin-bottom: 4em;
text-shadow: 0 1px 0 rgba(255,255,255,.5);}
.random-post-rounded-list a{
position: relative;
display: block;
padding: .4em .4em .4em 2em;
margin: .5em 0;
background: #CC9999 ;
color: #EDE2E2;
text-decoration: none;
border-radius: .3em;
transition: all .3s ease-out;}
.random-post-rounded-list a:hover{background: #eee;}
.random-post-rounded-list a:hover:before{ transform: rotate(360deg);}
.random-post-rounded-list a:before{
content: counter(li);
counter-increment: li;
position: absolute;
left: -0.8em;
top: 50%;
margin-top: -1.3em;
height: 2em;
width: 2em;
line-height: 2em;
border: .2em solid #FFCCCC;
text-align: center;
font-weight: bold;
border-radius: 2em;
transition: all .3s ease-out;
background-color: #9999CC;
color: #F5F3F3;}</style>
<div class="random-post-rounded-list"><ol>
<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=5;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write();
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item ="<li>" + "<a href=" + entry.link[k].href + " title=" + entry.link[k].href +">" + entry.title.$t + "</a></li>";
document.write(item);}}
}document.write();}</script>
<script src="http://www.shpargalochki.ru//feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script></ol></div>
counter-reset: li;
list-style: none;
*list-style: decimal;
font: 15px 'trebuchet MS', 'lucida sans';
padding: 0;
margin-bottom: 4em;
text-shadow: 0 1px 0 rgba(255,255,255,.5);}
.random-post-rounded-list a{
position: relative;
display: block;
padding: .4em .4em .4em 2em;
margin: .5em 0;
background: #CC9999 ;
color: #EDE2E2;
text-decoration: none;
border-radius: .3em;
transition: all .3s ease-out;}
.random-post-rounded-list a:hover{background: #eee;}
.random-post-rounded-list a:hover:before{ transform: rotate(360deg);}
.random-post-rounded-list a:before{
content: counter(li);
counter-increment: li;
position: absolute;
left: -0.8em;
top: 50%;
margin-top: -1.3em;
height: 2em;
width: 2em;
line-height: 2em;
border: .2em solid #FFCCCC;
text-align: center;
font-weight: bold;
border-radius: 2em;
transition: all .3s ease-out;
background-color: #9999CC;
color: #F5F3F3;}</style>
<div class="random-post-rounded-list"><ol>
<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=5;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write();
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item ="<li>" + "<a href=" + entry.link[k].href + " title=" + entry.link[k].href +">" + entry.title.$t + "</a></li>";
document.write(item);}}
}document.write();}</script>
<script src="http://www.shpargalochki.ru//feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script></ol></div>
Красным цветом в первом случая я выделила фон анонса сообщения и синим цвет шрифта. В конце кода -красным фон кружочка с номером . Зелёным-размер и цвет его рамки. Значение left: -0.8em;-возможно, придётся немного его уменьшить или увеличить. Это расстояние от границы виджета.
Готовый код устанавливаем в гаджет HTML/JavaScript, даём название виджету и перемещаем в нужное место шаблона.
Сегодня у меня всё. Ставлю точку в очередной шпаргалке. Спасибо, что читаете мой блог.
Удачи нам всем.
Готовый код устанавливаем в гаджет HTML/JavaScript, даём название виджету и перемещаем в нужное место шаблона.
Сегодня у меня всё. Ставлю точку в очередной шпаргалке. Спасибо, что читаете мой блог.
Удачи нам всем.
оформите подписку на новые шпаргалки
Здравствуйте. Классный виджет. Установил, но название статей не отображается. Вроде все работает, но названий нет. При наведении на строку всплывает только подсказка ссылки. Может поможете.
ОтветитьУдалитьВячеслав , если Вы имеете ввиду свой блог http://www.sokmen.in.ua/ то даётся мне , что конфликт идёт из-за кнопки случайный пост. Которая у Вас уже установлена. Или с другим. Такое бывает.У Вас достаточно много там скриптов установлено. А зачем 2 одинаковых практически.
УдалитьПонял я. Была примерно такая мысль. Спасибо.
ОтветитьУдалитьЗдравствуйте. Мне очень нравится этот виджет. Он(вариант круглый) стоит на обеих моих блогах и хорошо работает. Хотела добавить вариант квадратный, но он всё равно становиться круглым. Я очень слабо разбираюсь в кодах и переделать, чтобы были квадратные фото не умею. Помогите, если можно)))
ОтветитьУдалитьЗдравствуйте, Людмила. Значение border-radius: 2em; уберите в двух местах и всё. Тут нужно понимать. Посмотрите вот здесь http://www.internet-technologies.ru/articles/article_3115.html более понятно написано.
Удалить