Стильный и элегантный виджет вывода последних сообщений на блоге в форме открывающейся книги в 3Д. Довольно простая,но тем не менее очень интересная форма подачи информации о последних постах для привлечения внимания посетителей к другим сообщениям блога.
Сама идея виджета не моя,а взята с блога блогодел. Сама подача вывода сообщений лишь
в форме картинки мало информативна и не привлекает к себе внимания.Но если не
полениться и добавить к изображению подпись и затем сделать скриншот,то получиться
не плохой тизер с минимальной информацией раскрывающей суть поста.Сделать скрин не сложно и существует много программ позволяющих с лёгкостью проделывать эту процедуру.
Установка виджета последние сообщения.
Установить подобный виджет можно как в гаджет НТМЛ и ява скрипт,так и не
посредственно в тело сообщения в редакторе.Всё зависит от фантазии и того где и
как должен показываться виджет. Здесь приведён код виджета,установленного на этой
странице.При копировании и установке себе на страницу необходимо изменить название
выделенное жёлтым на имя своего блога.
<script type="text/javascript">
// 10 variables to control behavior
var Book_Image_Width =180;
var Book_Image_Height =225;
var Book_Border =true;
var Book_Border_Color ="gray";
var Book_Speed =15;
var Book_NextPage_Delay =1500; //1 second=1000
var Book_Vertical_Turn =0;
// variables for content
var random_posts = true; // random posts
var numposts_gal = 10; // number of posts
</script>
<div class="my-ribbon">
<span style="font-size: large;">Популярные темы на блоге.</span></div>
<script src="http://yourjavascript.com/308313822/bookflip.txt.js" type="text/javascript"></script>
<script src="http://yourjavascript.com/223538418/bookflip_btt.txt.js" type="text/javascript"></script>
<div id="Book" style="position: relative;">
<img height="227" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqqs_YW4fxKJaTC1LRTTqnaJo4TD06mHGAn4vFaGkSuKJvWnRHOrEq9D7kH6CqBg1ZlI9iZV9BQfNcHOIO4zSu4G5kZCRT9xxL4icy0wfhhyphenhyphenAuSZjFBpuqSjcRzEGHIbFCAWczYUm0MMHN/s1600/placeholder.gif" width="182" /></div>
<script src="http://v-gol.ru/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script>
<script type="text/javascript">
ImageBook();
</script>
// 10 variables to control behavior
var Book_Image_Width =180;
var Book_Image_Height =225;
var Book_Border =true;
var Book_Border_Color ="gray";
var Book_Speed =15;
var Book_NextPage_Delay =1500; //1 second=1000
var Book_Vertical_Turn =0;
// variables for content
var random_posts = true; // random posts
var numposts_gal = 10; // number of posts
</script>
<div class="my-ribbon">
<span style="font-size: large;">Популярные темы на блоге.</span></div>
<script src="http://yourjavascript.com/308313822/bookflip.txt.js" type="text/javascript"></script>
<script src="http://yourjavascript.com/223538418/bookflip_btt.txt.js" type="text/javascript"></script>
<div id="Book" style="position: relative;">
<img height="227" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqqs_YW4fxKJaTC1LRTTqnaJo4TD06mHGAn4vFaGkSuKJvWnRHOrEq9D7kH6CqBg1ZlI9iZV9BQfNcHOIO4zSu4G5kZCRT9xxL4icy0wfhhyphenhyphenAuSZjFBpuqSjcRzEGHIbFCAWczYUm0MMHN/s1600/placeholder.gif" width="182" /></div>
<script src="http://v-gol.ru/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script>
<script type="text/javascript">
ImageBook();
</script>
Виджет можно изменять и подстраивать размер и цвет контура книги.Также можно изменить скорость с которой перелистываются страницы.Значение выделенное зелёным отвечает за частоту вращения, а то выделено красным за размеры. Цифра синего цвета это количество сообщений в ротации.
Для придания объёма нашей книге необходимо будет также добавить скрипт для плавного увеличения изображений. Иначе страницы будут иметь бледный вид старой потрёпанной книги.Ну вот и весь процесс установки виджета последних или свежих сообщений. Поскриптум: плюсик уж точно мне не помешает - не забывайте.
Популярные темы на блоге.
Отправить комментарий