Коды для вставки на сайт

Виджеты для сайтов предоставлены в 2 вариантах: свежие посты и новые темы.

В виджетах Вы можете настроить любой внешний вид и именно так, как Вам необходимо:

• 1. Количество выводимых записей.
• 2. Изменять ширину и высоту виджета.
• 3. Обрезать ссылки по заданному количеству символов.
• 4. Включать/отключать время написания темы/постов.
• 5. Подключать свой файл с CSS.

Благодаря этим возможностям Вы можете встроить эти виджеты в любой сайт и органично вставить их в своих сайты вне зависимости от дизайна

Стандартные коды виджетов

Новые темы: <script language="JavaScript"> //Основные настройки var webmasters_posts_size_X=250; //Ширина виджета var webmasters_posts_size_Y=350; //Высота виджета var webmasters_posts_style_url=''; //URL к файлу с Вашими стилями. Вы можете по примеру стилей отсюда var webmasters_posts_count=10; //Количество выводимых постов. Можно выводить от 5 до 25 постов. //Дополнительные настройки var webmasters_posts_max_len=0; //Если текст больше указанной длины, то он обрезается до этой длины, а вместо остаточного текста пишется многоточие. При webmasters_topics_widget_max_len=0 тексты не обрезаются. var webmasters_posts_hidetime=0; //Отображение времени. Когда значение равно 0 - время показывается, 1 - время не показывается. </script> <script language="JavaScript"> var webmasters_posts_data_url='http://widgets.webmasters.ru/topics_export.php?style='+webmasters_posts_style_url+'&count='+webmasters_posts_count+'&max_len='+webmasters_posts_max_len+'&hidetime='+webmasters_posts_hidetime+'&referer='+escape(location.href); document.write('<if'+'rame src="'+webmasters_posts_data_url+'" width="'+webmasters_posts_size_X+'" height="'+webmasters_posts_size_Y+'" scrolling="no" frameborder="no"></if'+'rame>'); </script>

Свежие посты: <script language="JavaScript"> //Основные настройки var webmasters_posts_size_X=250; //Ширина виджета var webmasters_posts_size_Y=350; //Высота виджета var webmasters_posts_style_url=''; //URL к файлу с Вашими стилями (файл должен иметь разширение .css). Вы можете по примеру стилей отсюда var webmasters_posts_count=10; //Количество выводимых постов. Можно выводить от 5 до 25 постов. //Дополнительные настройки var webmasters_posts_max_len=0; //Если текст больше указанной длины, то он обрезается до этой длины, а вместо остаточного текста пишется многоточие. При webmasters_posts_max_len=0 тексты не обрезаются. var webmasters_posts_hidetime=0; //Отображение времени. Когда значение равно 0 - время показывается, 1 - время не показывается. </script> <script language="JavaScript"> var webmasters_posts_data_url='http://widgets.webmasters.ru/posts_export.php?style='+webmasters_posts_style_url+'&count='+webmasters_posts_count+'&max_len='+webmasters_posts_max_len+'&hidetime='+webmasters_posts_hidetime+'&referer='+escape(location.href); document.write('<if'+'rame src="'+webmasters_posts_data_url+'" width="'+webmasters_posts_size_X+'" height="'+webmasters_posts_size_Y+'" scrolling="no" frameborder="no"></if'+'rame>'); </script>

Вот так будет выглядеть виджет у Вас на сайте:

Вывод виджета осуществляется через iframe. Это сделано специально для того, чтобы данные обновлялись автоматически без перезагрузок страниц. При использовании виджета есть один небольшой недостаток: нужно не забывать соотносить размер виджета и количество выводимых постов. Т.е. если вы указали вывод 15 постов и установили высоту виджета в 50 пикселей, то у Вас выведутся не все записи. Необходимо будет вручную подобрать нужную высоту и количество сообщений

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

CSS по умолчанию, который используется в виджетах: html { padding: 0px; margin: 0px; height: 100%; width: 100%; } body { height: 100%; width: 100%; font: normal 11px Verdana; color: #4f4938; line-height: 135%; margin: 0px; padding: 0px; } a:link, a:visited, a:active { background: transparent; color: #4f4938; text-decoration: underline; } a:hover { background: transparent; text-decoration: none; } .wm_item_link { list-style-type: none; font-size:110%; padding-bottom:7px; } .wm_container { width: 85%; padding:5px; margin-bottom:5px; line-height: 140%; } .update_field { font-size:90%; } .links-area { margin: 0; padding: 0; } .wm_header { font-size: 8pt; padding:7px; }

Иходный код виджета во фрейме: <html> <head> <title></title> <style type="text/css">/*Стили, указанные выше*/</style> <script language="JavaScript" src="http://webmasters.ru/forum/js/jquery-1.3.2.min.js"></script> <script language="JavaScript"> function show_posts() { $.ajax({ url: "/posts_export.php?style=&count=15&type=ajax_out&max_len=0", cache: false, success: function(html){ $("#mw_container").html(html); } }); } $(document).ready(function(){ setInterval('show_posts()',30000); }); </script> </head> <body> <b class="wm_header"><a href="http://webmasters.ru/" target="_blank">Webmasters.RU</a> - Новые темы</b> <div class="wm_container" id="wm_container"><b class="update_field">Обновлено - 2013-04-25 15:50:28 мск</b><p></p><li class="wm_item_link">15:38 → <a href="http://webmasters.ru/forum/showthread.php?p=456160" class="previewtitl" id="thread_456160">Помощь с шаблоном (платно)</a></li><li class="wm_item_link">15:37 → <a href="http://webmasters.ru/forum/showthread.php?p=456159" class="previewtitl" id="thread_456159">Android для вебмастера. Доводы + подборка приложений</a></li><li class="wm_item_link">15:28 → <a href="http://webmasters.ru/forum/showthread.php?p=456158" class="previewtitl" id="thread_456158">10 лучших (женских) посещаемых пабликов</a></li><li class="wm_item_link">15:28 → <a href="http://webmasters.ru/forum/showthread.php?p=456157" class="previewtitl" id="thread_456157">Бесплатная помощь по wordpress</a></li><li class="wm_item_link">15:27 → <a href="http://webmasters.ru/forum/showthread.php?p=456156" class="previewtitl" id="thread_456156">просадка Яндекса 1-3 апреля кто заметил?</a></li></div>

Если Вы знаете css, то для Вас не будет особой проблемы гармонично встроить виджеты в дизайн. Благодаря подключению своего файла стилей Вы сможете настроить виджеты под дизайн Вашего сайтах. После создания файла со стилями Вам необходимо поместить его на свой хост, а в код виджета (в параметр webmasters_posts_widget_style_url) вписать путь к файлу с расширением .css.

Примеры блогов с установленными виджетами Вы можете посмотреть в этом топике.