Онлайн-генератор веб-цветов
Онлайн-подбор оптимальных веб-цветов для сайта
Онлайн-редактор HTML
Цветовой онлайн-калькулятор
Онлайн-калькулятор
Онлайн-рисовалка PencilMadness
  • Web
  • Images
  • News
  • Videos
  вторник, июля 26, 2011  

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

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

Разработчик данного виджета достаточно интересный человек и, как приятное, автор замечательного блога "Немецкий дневник". Он предлагает два варианта установки, кои я и рассмотрю ниже.

Установка виджета случайных статей.

Способ первый (для ленивых):

В этом варианте скрипт виджета случайных статей располагается на внешнем ресурсе, отчего достаточно вписать код, указанный далее, в поле гаджета HTML/JavaScript и будет вам счастье. Однако для надежности вы можете скачать скрипт автора по ссылке из кода http://ametov.net/widgets/widget_random_posts.js и залить его на свой хостинг, после чего заменить аналогичную строку в коде виджета.

Код виджета случайных статей:
<script type='text/javascript'>
var blog_url = 'http://bloggarolla.ru';
var randomCnt = 5;
var donate = true;
</script>
<script src='http://ametov.net/widgets/widget_random_posts.js' type='text/javascript'></script>
<script type='text/javascript'>
// main function call
showRandomPosts();
</script>
<ul id='widget_random_posts'>
</ul>
Немного о настройках списка случайных статей.

  • var blog_url - адрес вашего блога; 
  • var randomCnt - количество выводимых случайных статей.
Сохраните элемент HTML/JavaScript и проверьте блог на наличие требуемого виджета.

Способ второй (долгий, нудный, эстетичный и, как следствие, практичный):

Из административной панели вашего блога переместитесь по пути Дизайн > Изменить HTML и в шаблоне найдите строку </head>. По прошествии поисков прямо перед указанной строкой добавьте следующий скрипт:
<script type="'text/javascript'">
//<![CDATA[
// declare some variables
var blog_url = 'http://АДРЕС_ВАШЕГО_БЛОГА.blogger.com'; // blog main url -> don't forget write your blog url
var randomCnt = 5; // number of random links
var donate = true; // if you want to say thank you, let this variable be true
// tests, if an element exists in given array
function in_array(test_arr, test_number)
{
// create from array a string separated by #
test_arr_str = test_arr.join('#');
test_arr_str = '#' + test_arr_str + '#';

// create search item to search in converted string
test_number_str = '#' + test_number + '#';

// look for search item in converted string
test = test_arr_str.indexOf(test_number_str);
return test;
}
// show donate url
function showDonatePost()
{
// url of donate post
url = 'http://ametov.net';

// get title of a post
title = 'Ametov.net';

titleData = document.createTextNode(title);
tag_a = document.createElement('a');
tag_a.href = url;
tag_li = document.createElement('li');
tag_li.id = 'donate_widget_random_posts';
tag_a.appendChild(titleData);
tag_li.appendChild(tag_a);
document.getElementById('widget_random_posts').appendChild(tag_li);
}
// make a post visible - show post url and title
function showPost(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')
{
// get url of a post
url = entry.link[j].href;

// get title of a post
title = entry.link[j].title;

// if there is no title replace it with url
if (title == '') title = url;

titleData = document.createTextNode(title);
tag_a = document.createElement('a');
tag_a.href = url;
tag_li = document.createElement('li');
tag_a.appendChild(titleData);
tag_li.appendChild(tag_a);
if (donate)
{
document.getElementById('widget_random_posts').insertBefore(tag_li, document.getElementById('donate_widget_random_posts'));
}
else
{
document.getElementById('widget_random_posts').appendChild(tag_li);
} 
}
}
}
// get info as json string for given post
function getPost(postNumber)
{
script = document.createElement('script');
script.src = blog_url + '/feeds/posts/summary?start-index='+postNumber+'&amp;max-results=1&amp;alt=json-in-script&amp;callback=showPost';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);
}
// get random posts for given blog
function getRandomPosts(root)
{
var feed = root.feed;
var total = parseInt(feed.openSearch$totalResults.$t,10);
var randomNumber, test;

var random_numbers = new Array(randomCnt);
if (donate) showDonatePost();

for (var i=0; i<randomCnt; i++)
{
randomNumber = -1;
test = -1;
// this cicle is to avoid of post repeats
do
{
randomNumber = Math.ceil(Math.random()*total);
test = in_array(random_numbers, randomNumber);
}
while(test != -1)

random_numbers[i] = randomNumber;
getPost(randomNumber); 
} 
}

// the main function, which get first number of posts and from which
// would be called all other functions above
function showRandomPosts()
{ 
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = blog_url + '/feeds/posts/summary?max-results=0&amp;alt=json-in-script&amp;callback=getRandomPosts';
document.getElementsByTagName('head')[0].appendChild(script);
}
//]]>
</script>
Здесь также настройте виджет аналогично определениям первого способа установки.

Сохраните шаблон. Далее перейдите во вкладку Дизайн > Элементы страницы и добавьте гаджет HTML/JavaScript в том месте блога, где хотели бы видеть отображение виджета сообщений. В поле элемента впишите код:
<script type='text/javascript'>
// main function call
showRandomPosts();
</script>
<ul id='widget_random_posts'>
</ul>
Сохраните шаблон и наслаждайтесь работой виджета случайных статей в блоге.



Понравилась статья? Поделись ею с друзьями!

Не забудь подписаться на обновления блога:


Вы можете оставить свой отзыв через блок комментариев Вконтакте. При отсутствии профиля в этой социальной сети, воспользуйтесь удобной формой Disqus ниже.