Полезности для блога

Мастер-класс по программе Единого методического дня в гимназии

«Использование ИКТ в образовательном процессе»

Иванова И.А., блогер-любитель

 Полезности для блога

Доброго времени суток, уважаемые коллеги – блогеры! Приглашаю на мастер-класс по улучшению, украшению и наполнению ваших блогов. Сегодня поделюсь своими находками, может быть, вам что-нибудь понравится и вы поставите это в свой блог.

Гаджет часы на блог на blogger.

Сайт clocklink.com предоставляет огромный выбор красивых часов на ваш блог.

Установка

1.  Кликаем на View HTML TAG под часами, которые вам понравились.

2.Соглашаемся с условиями "Accept"

3. Выбираем цвет, часовой пояс Екатеринбурга.

4.Копируем код HTML

5.Идем  Дизайн-Элементы страницы-Добавить гаджет-HTML/Javascript

6. Сохраняем и смотрим:)

Как поставить на блог гаджет подписки на канал YouTube

Продолжаю тему гаджетов для блога. Четыре года назад создала свой канал на YouTube, чтобы попробовать закачать видео на свой блог «Уроки естествознания». Как пример, взяла видео «Домино» , которое сделали Ирина Ивановна с Маришкой.Стыдно, но больше руки не дошли до этого ресурса, хотя возможности хранения и встраивания в контент блога фильмов здесь благоприятные. Теперь попробовала поставить отдельно окно канала в дизайн блога «Уроки естествознания», вы увидите,   что в правом  сайдбаре у меня появился новый гаджет: «Мой канал» от YouTube.

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

Эта процедура будет очень быстрой, так как я сразу дам Вам код, который Вы вставите в гаджет, код нашла на блоге «Мой путь к успеху!» Нужно зайти в дизайн – гаджеты – ява-скрипт:
<iframe id="fr" style="overflow: hidden; height: 125px; width: 198px; border: 1px solid #3B5998;" src="http://www.youtube.com/subscribe_widget?p=Irinaanatol" scrolling="no" frameborder="0"></iframe>
 В этом коде Вам надо заменить мое имя Irinaanatol на YouTube на Ваше и, возможно, размеры гаджета. Высоту (height ) можно оставить как есть, а ширину (width) измените в соответствии с шириной сайдбара. Также я оставила обводку синего цвета с помощью стиля css:

border: 1px solid #3B5998;

Если обводка Вам не нужна, то этот стиль удалите из кода совсем, а если нужна, но другого цвета, то код цвета можно узнать в какой-нибудь из графических программ, например в программе ColorMania.

Не забудьте сохранить гаджет, затем перетащите его на свое место и сохраните расположение. Затем просмотрите блог. У Вас должен стоять такой же гаджет, как у меня.

Кнопка наверх в виде бабочки – работает!

Работаем по прежней схеме: заходим в дизайн – добавить гаджет – ява-скрипт и вставляем код. Перетаскиваем гаджет на нужное место. Не забываем щелкнуть кнопочку «сохранить расположение»!

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/></script>

<style>.b-top {z-index:2600;position:fixed;left:0;bottom:10px;width:34%;margin-left:50%;opacity: 0.5;filter:alpha(opacity=50);}

.b-top:hover {opacity:1;filter:alpha(opacity=100);cursor:pointer;}

.b-top-but {z-index:2600;position:absolute;display:block;left:56px;bottom:0;margin:0 0 0 100%;padding:79px 12px 4px;

color:black;background: url(http://i037.radikal.ru/1303/8e/c701ebd202c1.gif) no-repeat 50% 11px;border-radius:7px;}</style><script type="text/javascript">$(document).ready(function(){

$(window).scroll(function () {if ($(this).scrollTop() > 1000) {$('#scroller').fadeIn();} else {$('#scroller').fadeOut();}});

$('#scroller').click(function () {$('body,html').animate({scrollTop: 0}, 400); return false;});

});</script>

<div id="scroller" class="b-top" style="display: none;"><span class="b-top-but">Наверх</span></div>

Бегущая строка

<script src="http://blogger.com.md/uploads/demo/scroll/scroll.js"></script>

<script>

   var nMaxPosts = 10; var sBgColor; var nWidth; var nScrollDelay = 175; var sDirection="left"; var sOpenLinkLocation="N"; var sBulletChar="»»";

</script>

 <script src="http://blogodel.com/feeds/posts/default?alt=json-in-script&amp;callback=RecentPostsScrollerv2"></script>

Вместо жирного вставить адрес своего блога. Код вставляем в дизайн.

Книга с изображениями ваших постов

(жирненько размер картинки и адрес своего блога)

    <script type="text/javascript">

     // 7 variables to control behavior

     var Book_Image_Width    =140;

     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>

     <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 src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHRnR0iedkYUYpPnWCBXuIXiPGheDMAj_3Mt262YhDxytXdGLPo4D5X8KEU3Xawvpf2xbeQsPIylE5gOxPFGmDKG7tFK-L5a1g72o1f9llvV26Hklxi8bKRBEUgupMBXsCPz1I9XWFfJnT/s1600/placeholder.gif" width="144" height="227">

     </div>

     <script src="http://blogodel.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script>

     <script type="text/javascript">

     ImageBook();

     </script>

Как поставить на блоге кнопки социальных сетей.

Как использовать  эти кнопки?

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

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

А теперь перейдем к установке кнопок. Сама я использую на своем блоге социальные кнопки от Yandex, об этом варианте и расскажу.

    Зайдите на Yandex по ссылке http://api.yandex.ru/share/?ncrnd=6702.

    Откроется страница «Блок «Поделиться» для вашего сайта».

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

В правой колонке выберите внешний вид блока кнопок. По умолчанию стоит первый, я его и выбрала.

Ниже в рамочке Вы увидите код для этих кнопок. Скопируйте его.

В панели Блоггера «Мои блоги» выберите Настройки, а затем «Сообщения и комментарии».

В рамочке «Шаблон сообщения» вставьте скопированный код. Если Блоггер вставил туда код подписки, значит, Вы скопированный код должны вставить либо до кода подписки, либо после.

Нажмите Сохранить настройки.

Протестировать кнопочки можно будет только после того, как Вы опубликуете новое сообщение. Так чего же ждать?! Украшаем свой блог и пишем новые посты!

Всем творческих успехов!