Шаг 3. Интерактивнось. Гаджеты HTML

Гаджеты HTML
Подборка Александры Потапенко
Вставка гаджетов HTML
Алгоритм:
  • Среда администрирования блога, Вкладка Дизайн
  • Добавить гаджет
  • Основные гаджеты, выбрать HTML-гаджет
  • Вставить заранее скопированный код вставки объекта 
  • Сохранить

Рассмотрим примеры
Кнопка Scroll To Top (наверх) 
Стрелочка верх, есть множество вариантов. Один из них «Бабочка»
<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>

источник http://blogodel.com/2013/03/Unikalnaja-knopka-Scroll-To-Top-naverh-dlja-Blogspot-Blogger.html

Гаджет «Бегущая строка»

<marquee>Текст бегущей строки</marquee>
Размещаем гаджет в верхней части шаблона (над страницами, если они размещены сверху)

Источник  http://gadgetsprof.blogspot.ru/2012/12/blog-post_4907.html


«Облако ярлыков»
1.В пустое поле "Введите URL гаджета, который Вы хотите добавить в блог" копируем и вставляем вот этот код:
2. Нажимаем Добавить по URL.
3. Настраиваем flash облако тегов.

1 вариант:  http://b-cumulus.googlecode.com/svn/tags/3.0/b-cumulus.xml
2 вариант: http://alexdioso.github.com/LabelSphere/LabelSphere.xml


источник 1 - http://samasajt.blogspot.ru/2012/08/blogger.html
источник 2 - http://samasajt.blogspot.ru/2013/02/flash-oblako-tegov.html

генератор кода цвета http://shkolablogger.ru/generator-tsveta

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

<b:if cond='data:blog.pageType == "item"'>
<script>
var linkwithin_site_id = 2253285;
linkwithin_text='Похожие сообщения:';
</script>
<script src="http://www.linkwithin.com/widget.js"></script>
<a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Related Posts Plugin for WordPress, Blogger..." style="border: 0" /></a>
</b:if>
Как установить http://shkolablogger.ru/kak-ustanovit-vidzhet-linkwithin-v-blogger.html
Виджет посетителей сайта в реальном времени
Глобус 1  http://www.revolvermaps.com/ на этой странице щёлкаем  widget gallery. И переходим «классический вариант» http://www.revolvermaps.com/?target=setupmini
Карта - http://www.revolvermaps.com/?target=setup2d
Красивые древовидные комментарии
Источник - http://blogodel.com/2012/12/drevovidnye-kommentarii-blogspot-blogger.html
Код:
<style>

.comments .comment .comment-actions a, .comments .continue a {box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 5px rgba(0, 0, 0, 0.1) inset;

   border: 1px solid #DDD;

   margin: 0 2px;
   text-decoration: none;
   border-radius: 4px;
   text-shadow: 0 1px 1px white;

   font: bold 11px Sans-Serif;
   padding: 2px 10px;
   white-space: nowrap;
   vertical-align: middle;
   color: #666;
   background: -webkit-linear-gradient(top, #fbfaf8, gainsboro);
   background:    -moz-linear-gradient(top, #fbfaf8, gainsboro);
   background:     -ms-linear-gradient(top, #fbfaf8, gainsboro);
   background:      -o-linear-gradient(top, #fbfaf8, gainsboro);
   text-transform: lowercase;}

.comments .comment .comment-actions a:hover, .comments .continue a:hover {
   box-shadow:         inset 0 1px 2px #c4c4c4;
   border: 1px solid #AAA;
   border-top-color: #999;
   text-decoration: none;}



.thread-toggle {
   border-radius: 4px 4px 0 0;
   border-top: 2px solid $(link.hover.color);
   text-shadow: 0 1px 1px white;
   font: bold 11px Sans-Serif;
   padding: 2px 10px;
   white-space: nowrap;
   vertical-align: middle;
   color: #666;
   text-transform: lowercase;}

.thread-toggle a{text-decoration: none;}

.comments .continue a {
   float: right;
   border-radius: 0 0 4px 4px;}
.comments .comments-content .avatar-image-container{border: 4px solid #fcfbf5;border-radius: 5px;box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 5px rgba(0, 0, 0, 0.1) inset;}

.comments .comments-content .comment-thread ol li, .comments .comments-content .comment-thread ol li ol li{
  border: 1px groove #acacac;
  padding: 10px;
  border-radius: 5px;
  box-shadow: -moz-box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5);
-webkid-box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5);
box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5);
}

.comments .comments-content .comment-thread ol li:last-child { padding-bottom: 5px; }

.comments .comments-content .comment-thread ol li:nth-of-type(even) { background: #9bffff; }

.comments .comments-content .comment-thread ol li:nth-of-type(odd) { background: #a3ffa3; }

.comments .comments-content .comment-thread ol li ol li:nth-of-type(odd), .comments .comments-content .comment-thread ol li ol li:nth-of-type(even){ background: #fcfc89; }</style>

Снежная пыль и снежинки - http://blogodel.com/2012/01/blog-post.html





Гаджеты - http://gadgets.sterno.ru/taxonomy/term/7

Комментариев нет:

Отправить комментарий

Подписаться на: Сообщения (Atom)