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

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

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

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

В Блоггере он устанавливается через, любимый многими, гаджет 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 ...: