Анимированный виджет-информер для блога.

Доброго времени суток, читатели и гости блога. Сегодня я предложу вам интересный виджет, с помощью которого можно создать блок самых лучших статей. Сделать блок для показа  рекламы или просто какую-то галерею. Здесь в статье был предложен подобный код.
Этот же анимированный виджет с большими возможностями достаточно красиво будет смотреться над сообщениями блога. Или под ними.
Несмотря на то, что код для него на первый взгляд достаточно объёмный, пусть вас это не пугает. Он совершенно несложный и достаточно просто настраивается.



Давайте уже посмотрим о чём я веду речь. Попрошу вас перейти по этой ссылке. Я расположила его в самом верху над сообщениями.

В Блоггере он устанавливается через, любимый многими, гаджет HTML/JavaScript. И путём перетаскивания в разделе дизайн, в нужное место блога. Подобных секций можно сделать сколько угодно. И вот буквально только сейчас пришла в голову мысль, что подобным образом можно оформить главную страницу блога. Ну это так, мысли вслух. Итак код-

<div align='center'>
<div id='background'>
<table>
  <tr><td>
  <div class='view view-first'>
                    <img src=' адрес изображения'/>
                    <div class='mask'>
                        <h2>заголовок сообщения</h2>
                      <p>
анонс
  </p>
                        <a class='info' href='адрес страницы '>Дальше</a>
                    </div>
                </div>  </td>
 <td> <div class='view view-first'>
                    <img src='адрес изображения   '/>
                    <div class='mask'>
                        <h2>Заголовок поста  </h2>
                        <p>Небольшой анонс поста .</p>
                        <a class='info' href=' адрес страницы '>Дальше</a>
                    </div>
                </div>
   </td>
  </tr>
  <tr>
    <td>
      <div class='view view-first'>
                    <img src=' адрес изображения'/>
                    <div class='mask'>
                        <h2>заголовок сообщения </h2>
                        <p>  анонс</p>
                        <a class='info' href=' адрес страницы'>Дальше</a>
                    </div>
    </div>
 
    </td>
    <td>
      <div class='view view-first'>
                    <img src='адрес изображения '>
                    <div class='mask'>
                        <h2> заголовок сообщения </h2>
                        <p>анонс </p>
                        <a class='info' href=' адрес страницы'>Дальше</a>
                    </div></div>
    </td>
  </tr>
</table>
</div>
</div>

<style>
#background {
background: #CCCCCC ; width:100%; border: 1px solid #C9C299;
}
.view-first img {
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
.view-first .mask {
   -ms-filter: &quot;progid: DXImageTransform.Microsoft.Alpha(Opacity=0)&quot;;
   filter: alpha(opacity=0);
   opacity: 0;
   background-color: rgba(219,127,8, 0.7);
   -webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
   -ms-transition: all 0.4s ease-in-out;
   transition: all 0.4s ease-in-out;
}
.view-first h2 {
   -webkit-transform: translateY(-100px);
   -moz-transform: translateY(-100px);
   -o-transform: translateY(-100px);
   -ms-transform: translateY(-100px);
   transform: translateY(-100px);
   -ms-filter: &quot;progid: DXImageTransform.Microsoft.Alpha(Opacity=0)&quot;;
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-first p {
   -webkit-transform: translateY(100px);
   -moz-transform: translateY(100px);
   -o-transform: translateY(100px);
   -ms-transform: translateY(100px);
   transform: translateY(100px);
   -ms-filter: &quot;progid: DXImageTransform.Microsoft.Alpha(Opacity=0)&quot;;
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
.view-first:hover img {
   -webkit-transform: scale(1.1,1.1);
   -moz-transform: scale(1.1,1.1);
   -o-transform: scale(1.1,1.1);
   -ms-transform: scale(1.1,1.1);
   transform: scale(1.1,1.1);
}
.view-first a.info {
   -ms-filter: &quot;progid: DXImageTransform.Microsoft.Alpha(Opacity=0)&quot;;
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-first:hover .mask {
   -ms-filter: &quot;progid: DXImageTransform.Microsoft.Alpha(Opacity=100)&quot;;
   filter: alpha(opacity=100);
   opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
   -ms-filter: &quot;progid: DXImageTransform.Microsoft.Alpha(Opacity=100)&quot;;
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
}
.view-first:hover p {
   -webkit-transition-delay: 0.1s;
   -moz-transition-delay: 0.1s;
   -o-transition-delay: 0.1s;
   -ms-transition-delay: 0.1s;
   transition-delay: 0.1s;
}
.view-first:hover a.info {
   -webkit-transition-delay: 0.2s;
   -moz-transition-delay: 0.2s;
   -o-transition-delay: 0.2s;
   -ms-transition-delay: 0.2s;
   transition-delay: 0.2s;
}
        .view {
   width: 270px;
   height: 200px;
   margin: 10px;

   border: 2px solid #000000;
   overflow: hidden;
   position: relative;
   text-align: center;
   -webkit-box-shadow: 1px 1px 2px #e6e6e6;
   -moz-box-shadow: 1px 1px 2px #e6e6e6;
   box-shadow: 1px 1px 2px #e6e6e6;
   cursor: default;
   background:#fff url(../images/bgimg.jpg) no-repeat center center;
}
.view .mask,.view .content {
   width: 270px;
   height: 200px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.view img {
   display: block;
   position: relative;
}
.view h2 {
   text-transform: uppercase;
   color: #fff;
   text-align: center;
   position: relative;
   font-size: 17px;
   padding: 10px;
   background: rgba(0, 0, 0, 0.8);
   margin: 8px 0 0 0;
}
.view p {
   font-family: Georgia, serif;
   font-style: italic;
   font-size: 12px;
   position: relative;
   color: #fff;
   padding: 10px 20px 20px;
   text-align: center;
}
.view a.info {
   display: inline-block;
   text-decoration: none;
   padding: 5px 40px ;
   background: #000;
   color: #fff;
   text-transform: uppercase;
   -webkit-box-shadow: 0 0 1px #000;
   -moz-box-shadow: 0 0 1px #000;
   box-shadow: 0 0 1px #000;
}
.view a.info: hover {
   -webkit-box-shadow: 0 0 5px #000;
   -moz-box-shadow: 0 0 5px #000;
   box-shadow: 0 0 5px #000;
}
</style>


Копируем код в блокнот и приступим к настройкам. В строку, которая выделена красным цветом вставляем адрес изображения. Синим-это заголовок сообщения. Он у меня прописан в теги H2 . Зелёным цветом выделен анонс сообщения. Тут хочу обратить ваше внимание. Не пишите большой текст, чтобы всё отображалось корректно. Максимум 50-70 знаков. Ну и зелёным-это адрес страницы, куда мы перенаправляем читателей. 

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

Ну и в CSS коде самые основные настройки - background: #90ee90 -общий фон блока.   width: 270px;
   height: 200px;- размеры ячейки. Если другие непонятны, спрашивайте в комментариях.

Когда код готов, устанавливаем его в гаджет HTML/JavaScript и перемещаем выше гаджета сообщения(или ниже).


Вот такой у нас сегодня универсальный виджет-информер. Думаю, что реализовать его можно на любом блоге и для разных целей. Подумайте. Идею подсказал автор блога http://www.bloggingehow.com/.


А мне было очень приятно, что посетили мой блог. Если что-то непонятно, отвечу на ваши вопросы.
Удачи всем нам.
Ой, а что это там ниже? Ну надо же! Нажимаем!

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

Введите Ваш email ...:


4 комментария:

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

    ОтветитьУдалить
  2. Оль, приятно слышать. Мы на одной волне. А ты знаешь, я пробовала сделать вниз 10 ячеек установила на главную его. Здорово смотрится. Только тут надо в настройках сколько отображать на главной поставить 0, и сделать отображать гаджет только на главной. Ну ты знаешь о чём я.

    ОтветитьУдалить
    Ответы
    1. Вика, я тебя поняла, выберу время, надо будет у себя попробовать. Хотя в последнее время что то уже не хочется ничего менять, и даже писать. Темы есть, а собираюсь долго. Не знаю почему, может у каждого блоггера бывает такой период. Или на праздники расслабилась.

      Удалить
    2. Знакомо. Менять не хочется это да. А вот когда темы есть не знаешь что сначала, что потом. Поэтому и голову забиваем. И уже ничего не охота.

      Удалить

Пользовательский поиск
Foto Saya
My Photo