простая прокрутка списка
Привет, друзья. Для более компактного размещения длинных списков хорошо подойдёт обычная прокрутка. Сегодня хочу предложить вам такой вариант прокрутки списка. Так можно оформить ссылки на ваши любимые блоги или на какие - то посты опубликованные у вас. Может быть вы сами ещё что - нибудь придумаете.
Привет, друзья. Как встроить видео  Youtube в сообщение блога знают все. Но вот как разместить видео из социальных сетей Facebook, ВКонтакте и Твиттер в тело поста на Блоггер, оказывается не всем понятно, поскольку, буквально на днях мне задали в очередной раз такой вопрос.
панель для блога
Привет, друзья. Поделюсь с вами, как сделать красивую анимированную панель, которая будет содержать в себе какую - то полезную информацию и открываться вверху блога при нажатии на кнопку.

Разместить внутри панели можно всю что угодно. Мне кажется, что проявив фантазию, каждый сможет реализовать что - то полезное. Например, что пришло первое в голову.

Загадать какие - то загадки и дать разгадки.
Сделать расписание уроков или заданий.
Устроить розыгрыши и назвать победителей.
Дать биографию поэта, художника и др...
Умные советы для кулинарных блогов.
Так же, как на примере, дать просто какую-то информацию.



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

Код.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript">
var myMessages = ['afrika','arktika','indonesy','evraziy','antarktida' ]; //
function hideAllMessages()
{
   var messagesHeights = new Array();
   for (i=0; i<myMessages.length; i++)
   {
      messagesHeights[i] = $('.' + myMessages[i]).outerHeight();
      $('.' + myMessages[i]).css('top', -messagesHeights[i]);
   }
}
function showMessage(type)
{
 $('.'+ type +'-trigger').click(function(){
    hideAllMessages();
    $('.'+type).animate({top:"0"}, 500);
 });
}
$(document).ready(function(){
   hideAllMessages();
   for(var i=0;i<myMessages.length;i++)
   {
   showMessage(myMessages[i]);
   }
   $('.message').click(function(){
      $(this).animate({top: -$(this).outerHeight()}, 500);
    });
});
</script>

<!-- Кнопки -->

<ul id="trigger-list">
   <li><a href="#" class="trigger afrika-trigger">Африка</a></li>
   <li><a href="#" class="trigger   indonesy-trigger">Индонезия</a></li>
   <li><a href="#" class="trigger arktika-trigger">Арктика</a></li>
   <li><a href="#" class="trigger evraziy-trigger">Евразия</a></li>
<li><a href="#" class="trigger antarktida-trigger">Антарктида</a></li>
</ul>

<!-- Панели -->

<div class="afrika message">
   <h3>Африка</h3>
   <p>Текст в выпадающей панели</p>
</div>
<div class="indonesy message">
   <h3>Индонезия </h3>
   <p>Текст в выпадающей панели</p>
</div>
<div class="arktika message">
   <h3>Арктика</h3>
   <p>Текст в выпадающей панели</p>
</div>
<div class="evraziy message">
   <h3>Евразия</h3>
   <p>Текст в выпадающей панели</p>
</div>
<div class="antarktida  message">
<h3>Антарктида</h3>
<p>Текст в выпадающей панели</p>
</div>

<style>
.message {
 font: 12px Arial, Helvetica, sans-serif;
 -webkit-background-size: 40px 40px;
 -moz-background-size: 40px 40px;
 background-size: 40px 40px;
 background-image: -webkit-gradient(linear, left top, right bottom,
       color-stop(.25, rgba(255, 255, 255, .05)), color-stop(.25, transparent),
       color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .05)),
       color-stop(.75, rgba(255, 255, 255, .05)), color-stop(.75, transparent),
       to(transparent));
 background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
      transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
      transparent 75%, transparent);
 background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
      transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
      transparent 75%, transparent);
 background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
      transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
      transparent 75%, transparent);
 background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
      transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
      transparent 75%, transparent);
 background-image: linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
      transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
      transparent 75%, transparent);
 -moz-box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
 -webkit-box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
 box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
 width: 100%;
 border: 1px solid;
 color: #fff;
 padding: 15px;
 position: fixed;
 left: 0;
 text-shadow: 0 1px 0 rgba(0,0,0,.5);
 -webkit-animation: animate-bg 5s linear infinite;
 -moz-animation: animate-bg 5s linear infinite;
 }
.afrika {
 background-color: #009933 ;
 border-color: #3b8eb5;
 }
.indonesy {
 background-color: #006666;
 border-color: #c43d3d;
 }
.arktika {
 background-color: #9999CC;
 border-color: #d99a36;
 }
.evraziy {
 background-color: #CC6633;
 border-color: #55a12c;
 }
.antarktida {
 background-color: #996666 ;
 border-color: #55a12c;
 }
.message h3 {
 margin: 0 0 5px 0;
 }
.message p {
 margin: 0;
 }
@-webkit-keyframes animate-bg {
    from {
        background-position: 0 0;
    }
    to {
       background-position: -80px 0;
    }
 }
@-moz-keyframes animate-bg {
    from {
        background-position: 0 0;
    }
    to {
       background-position: -80px 0;
    }
 }
#trigger-list {
 text-align: center;
 margin: 100px 0;
 padding: 0;
 }
#trigger-list li {
 display: inline-block;
 *display: inline;
 zoom: 1;
 }
#trigger-list .trigger {
 display: inline-block;
 background: #999999;
 border: 1px solid #777;
 padding: 10px 20px;
 margin: 0 5px;
 font: bold 12px Arial, Helvetica;
 text-decoration: none;
 color: #333;
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
 border-radius: 3px;
 }
#trigger-list .trigger:hover {
 background: #f5f5f5;
 }
</style>


В начале кода красным цветом скрипт библиотеки jquery. Прочитайте о ней в этом сообщении.

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

В стилях CSS зелёным я отметила фон для каждой панельки. Вообще, очень много можно поменять на свой вкус. Можно добавлять или убирать кнопки и панели. В коде это отмечено жирным шрифтом 4 раза (на примере Антарктида). Если с этим возникнут трудности, пишите в комментариях. Тут главное понять что за что отвечает.

Готовый код устанавливаем в редакторе сообщений, перейдя в режим HTML.

Лучше эта панелька будет смотреться при отключенном навбаре. Читаем об этом здесь.

И на сегодня всё. Спасибо, что читаете мои шпаргалки блогерши и до встречи.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


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

форма связи
Здравствуйте, все кто читает мои шпаргалки. Спасибо новым читателям, кто недавно присоединился к моему блогу. Я обычно просматриваю профиль новых ПЧ и их блоги. И обратила внимание на то, что многие новички игнорируют гаджет Форма связи.

Пользовательский поиск