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

Хлопот и так более чем предостаточно в предновогодние дни. За всё время собралось достаточно много вариантов Новогоднего оформления страниц сайта и, чтобы не искать по всему блогу, представляю вам некоторые идеи.

украшения для блога


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

1. http://www.shpargalochki.ru/2014/12/novogodnie-ukrashenija-bloga.html

 - картинки, веточки, бегущий Дед Мороз. Простые но вполне интересные идеи для тех, кто любит что попроще.

2. http://www.shpargalochki.ru/2014/11/novogodnie-ukrashenija-dlja-bloga.html#more 

-Новогодние украшения для блога - обзор сервисов, которые предлагают оригинальные Новогодние украшения для сайта. Готовые коды легко устанавливаются на странице.

3. http://www.shpargalochki.ru/2016/12/novogodnie-ukrashenija-bloga.html

-Идеи Новогодних украшений - таймер отсчёта, новогодние веточки, шишки, шары по всем углам страницы, фиксированная гирлянда, меняющийся задний фон со снежинками

4. http://www.shpargalochki.ru/2014/12/novogodnij-pejzazh-v-bloge.html

-Красивый Новогодний пейзаж на сайте - это просто сказка на странице. Можно применить не только к Новому году, но и к Рождеству. И ещё кое - что.

5. http://www.shpargalochki.ru/2017/12/originalnoe-vsplyvayushee-okno-k-novomu-godu-blogger.html

-Оригинальное поздравление для читателей которое поднимет настроение ещё во время оформления. И ещё много всяких идей - гирлянды, надписи, веточки.


6. http://www.shpargalochki.ru/2015/12/Novogodnij-tajmer-otschjota-vremen.html#more

-Новогодний таймер отсчёта времени - его можно устанавливать уже сейчас. Найдите свою картинку и вуаля. Часики будут тикать до самого Нового года.

7. http://www.shpargalochki.ru/2018/11/animirovannyj-fon-dlya-otdelno-stranitse-blogger.html

-Анимированный фон для страницы - прекрасное решение для оформления отдельной страницы с поздравлениями для читателей. Новогодние картинки буду меняться одна за другой.

8. http://www.shpargalochki.ru/2016/01/Kod-samopechatajushhegosja-teksta.html
-
Самопечатающийся текст - почему бы и не применить для поздравлений, вполне оригинально.

9. http://www.shpargalochki.ru/2016/07/animirovannoe-privetstvie-v-bloge.html

-Анимированное приветствие - тоже, как вариант. 

Очень надеюсь, что из всего предложенного здесь, вы решите реализовать в блоге и создать для читателей предпраздничное, и что уж там, самое праздничное настроение.

Всем приятных предпраздничных хлопот и вдохновения.


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

введите пожалуйста свой email :

Давайте сегодня немного повеселимся с CSS и создадим разноцветные фоны для блоков, в которых можно разместить текст. Начнём с самого простого и перейдём к более сложному. Хотя, при понимании того, что делаем, можно создать уникальные переходы цвета. Во всех примерах будет использовано свойство  gradient.

Вообще, самый простой код для созданий цвета фона отдельного блога будет выглядеть так

<style>
.elemento {
background-color:red;
}
</style>
<div class="elemento">Здесь любой ваш текст</div>


Как видно код совершенно простой. В стилях задан цвет блока background-color:red; и в тегах div нужный текст.

Но играться - то мы будем с CSS-градиентом, который  представляет собой переходы от одного цвета к другому. Можете задать первый цвет в одном из четырех направлений или с одного из четырех углов. В целом, восемь различных вариантов градиента: топ, top left, top, right, bottom, bottom left, bottom, right, left, right.

Допустим, берём такой код

<style>
.element {          color: #191919; 
        height: 13em;
        width: 35em;
        font-family: Georgia; 
        background: linear-gradient(to top right, yellow 0%, red 100%);
        font-size: 16px;
}
</style>

<div class="element">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam gravida magna malesuada urna iaculis fringilla. Maecenas sed varius elit. Proin sem sem, gravida a diam scelerisque, pharetra finibus urna. Morbi dictum scelerisque rhoncus. Quisque vestibulum vel turpis at tempus. Suspendisse luctus nisl odio, pharetra efficitur dolor egestas dictum. Sed aliquam sit amet dui ac porta. Pellentesque quam augue, vestibulum eget congue in, interdum tempor urna. Aliquam in vulputate nisi. Nullam sagittis risus vitae enim molestie, ut pulvinar diam dignissim..</div>



Результат


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam gravida magna malesuada urna iaculis fringilla. Maecenas sed varius elit. Proin sem sem, gravida a diam scelerisque, pharetra finibus urna. Morbi dictum scelerisque rhoncus. Quisque vestibulum vel turpis at tempus. Suspendisse luctus nisl odio, pharetra efficitur dolor egestas dictum. Sed aliquam sit amet dui ac porta. Pellentesque quam augue, vestibulum eget congue in, interdum tempor urna. Aliquam in vulputate nisi. Nullam sagittis risus vitae enim molestie, ut pulvinar diam dignissim..


Желтый цвет у нас  в нижнем левом углу , который переходит в красный в правом верхнем углу(to top right). Вы, конечно, можете сделать подобные примеры для всех остальных семи направлений.

Можно задать несколько оттенков фону, используя следующий код

<style>
.element 1 {   
        color: #000;
        max-width:600px;
        font-family: Georgia;
        text-align:justify;   
        background: linear-gradient(to left, #0FF 0%, #DF15AA 33%, #FF0 66%,  #AACFEF 100%);
        font-size: 18px;
}
</style>
<div class='element 1'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam gravida magna malesuada urna iaculis fringilla. Maecenas sed varius elit. Proin sem sem, gravida a diam scelerisque, pharetra finibus urna. Morbi dictum scelerisque rhoncus. Quisque vestibulum vel turpis at tempus. Suspendisse luctus nisl odio, pharetra efficitur dolor egestas dictum. Sed aliquam sit amet dui ac porta. Pellentesque quam augue, vestibulum eget congue in, interdum tempor urna. Aliquam in vulputate nisi. Nullam sagittis risus vitae enim molestie, ut pulvinar diam dignissim.</div>


В результате имеем


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam gravida magna malesuada urna iaculis fringilla. Maecenas sed varius elit. Proin sem sem, gravida a diam scelerisque, pharetra finibus urna. Morbi dictum scelerisque rhoncus. Quisque vestibulum vel turpis at tempus. Suspendisse luctus nisl odio, pharetra efficitur dolor egestas dictum. Sed aliquam sit amet dui ac porta. Pellentesque quam augue, vestibulum eget congue in, interdum tempor urna. Aliquam in vulputate nisi. Nullam sagittis risus vitae enim molestie, ut pulvinar diam dignissim.


В тегах  <style> вы можете делать свои настройки ширины и высоты блока. Изменить стили шрифта. Пишите свой текст в соответствии с классом элемента - .element, element 1.
В этих примерах мы использовали свойство linear-gradient .

Теперь попробуем заменить linear-gradient на radial-gradient, чтобы задать направление цвета от центра вр всех направлениях.

Понадобится такой код

<style>
.element2 {   
        color: #000;
        max-width:500px;
        font-family: Georgia;   
         background: radial-gradient(#FFF 0%, Beige 30%, Pink 50%, #0FF 70%, Orange 100%);
        font-size: 20px;
        text-align:justify;
}
</style>
<div class='element2'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi gravida libero nec velit. Morbi scelerisque luctus velit. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam. Proin mattis lacinia justo. Vestibulum facilisis auctor urna. Aliquam in lorem sit amet leo accumsan lacinia. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Phasellus et lorem id felis nonummy placerat. Fusce dui leo, imperdiet in, aliquam sit amet, feugiat eu, orci. Aenean vel massa quis mauris vehicula lacinia.</div>


Результат



Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi gravida libero nec velit. Morbi scelerisque luctus velit. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam. Proin mattis lacinia justo. Vestibulum facilisis auctor urna. Aliquam in lorem sit amet leo accumsan lacinia. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Phasellus et lorem id felis nonummy placerat. Fusce dui leo, imperdiet in, aliquam sit amet, feugiat eu, orci. Aenean vel massa quis mauris vehicula lacinia.


Можно создавать радиальные градиенты и выбрать форму градиента. По умолчанию - это эллипс, как вы видели выше. Однако мы можем создать круговой градиент с тегом circle. Вы можете также добавить прозрачности элементу в формате RGBA.

Попробуем с прозрачностью и используем такой код

<style>
.element3{   
        color: #000;
        max-width:500px;
        font-family: Georgia;   
        background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
        font-size: 20px;
        text-align:justify;
}
</style>
<div class='elemento3'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi gravida libero nec velit. Morbi scelerisque luctus velit. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam. Proin mattis lacinia justo. Vestibulum facilisis auctor urna. Aliquam in lorem sit amet leo accumsan lacinia. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Phasellus et lorem id felis nonummy placerat. Fusce dui leo, imperdiet in, aliquam sit amet, feugiat eu, orci. Aenean vel massa quis mauris vehicula lacinia.</div>


Использует только красный цвет , который начинается с левой стороны и полностью прозрачным (0) и прибывает в правом углу полностью непрозрачным (1).

Получаем



Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi gravida libero nec velit. Morbi scelerisque luctus velit. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam. Proin mattis lacinia justo. Vestibulum facilisis auctor urna. Aliquam in lorem sit amet leo accumsan lacinia. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Phasellus et lorem id felis nonummy placerat. Fusce dui leo, imperdiet in, aliquam sit amet, feugiat eu, orci. Aenean vel massa quis mauris vehicula lacinia.


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

Код

<style>
.element4 {   
        color: #000;
        max-width:500px;
        font-family: Georgia;   
         background: radial-gradient(circle, Pink, yellow, green, Gray);
        font-size: 20px;
        text-align:justify;
}
</style>
<div class='element4'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi gravida libero nec velit. Morbi scelerisque luctus velit. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam. Proin mattis lacinia justo. Vestibulum facilisis auctor urna. Aliquam in lorem sit amet leo accumsan lacinia. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Phasellus et lorem id felis nonummy placerat. Fusce dui leo, imperdiet in, aliquam sit amet, feugiat eu, orci. Aenean vel massa quis mauris vehicula lacinia.</div>


итог

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi gravida libero nec velit. Morbi scelerisque luctus velit. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam. Proin mattis lacinia justo. Vestibulum facilisis auctor urna. Aliquam in lorem sit amet leo accumsan lacinia. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Phasellus et lorem id felis nonummy placerat. Fusce dui leo, imperdiet in, aliquam sit amet, feugiat eu, orci. Aenean vel massa quis mauris vehicula lacinia.


Вы также можете создать фоны в 4 полосы горизонтальные или вертикальные. Например этот с такими кодами

<style>
.quattro-strisce-verticali {
height: 15em;
width: 20em;
font-size:1.2em;
text-align:justify;
background: linear-gradient(
to right,#E0E0E0 25%, #BCAAA4 25%, #FFAB91 50%, #FF9E80 50%, #FF9E80 75%, #009246 25%, #F1F2F1 25%, #F1F2F1 50%, #CE2B37 50%, #CE2B37 75%, wheat 75% );
}
</style>
<div class="quattro-strisce-verticali">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi gravida libero nec velit. Morbi scelerisque luctus velit. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam. Proin mattis lacinia justo. Vestibulum facilisis auctor urna. Aliquam in lorem sit amet leo accumsan lacinia. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Phasellus et lorem id felis nonummy placerat. Fusce dui leo, imperdiet in, aliquam sit amet, feugiat eu, orci. Aenean vel massa quis mauris vehicula lacinia.
</div>


Получаем


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi gravida libero nec velit. Morbi scelerisque luctus velit. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam. Proin mattis lacinia justo. Vestibulum facilisis auctor urna. Aliquam in lorem sit amet leo accumsan lacinia. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Phasellus et lorem id felis nonummy placerat. Fusce dui leo, imperdiet in, aliquam sit amet, feugiat eu, orci. Aenean vel massa quis mauris vehicula lacinia.


Или так

<style>
  .quattro-strisce-orizzontali {
  height: 20em;
  width: 30em;
  font-size:1.2em;
  text-align:justify;
  background: linear-gradient(#A5D6A7 25%, #DCE775 25%, #A7FFEB 50%, #CE2B37 50%, #80D8FF 75%, wheat 75%);
  }
  </style>
  <div class="quattro-strisce-orizzontali">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi gravida libero nec velit. Morbi scelerisque luctus velit. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam. Proin mattis lacinia justo. Vestibulum facilisis auctor urna. Aliquam in lorem sit amet leo accumsan lacinia. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Phasellus et lorem id felis nonummy placerat. Fusce dui leo, imperdiet in, aliquam sit amet, feugiat eu, orci. Aenean vel massa quis mauris vehicula lacinia.
  </div>


Результат



Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi gravida libero nec velit. Morbi scelerisque luctus velit. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam. Proin mattis lacinia justo. Vestibulum facilisis auctor urna. Aliquam in lorem sit amet leo accumsan lacinia. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Phasellus et lorem id felis nonummy placerat. Fusce dui leo, imperdiet in, aliquam sit amet, feugiat eu, orci. Aenean vel massa quis mauris vehicula lacinia.


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

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

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

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

введите пожалуйста свой адрес электронной почты :

Друзья, приветствую вас. И опять пост про оформление карточки профиля автора. Предложу вам сегодня ещё 2 варианта. Можно оформить карточку профиля автора или любое другое изображение в блоге. Можно сделать переходы на другие сайты, оформить баннеры, сделать обложки книг. Варианты оригинальны по своему с красивым и современным дизайном.

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


Вариант 1. Ваша фотография или любая другая картинка. В состоянии покоя будет выглядеть примерно так

профиль автора
ДО

После наведения курсора, происходит красивый эффект подчёркивания и появляется нужное описание с кликабельным тестом на полупрозрачном фоне.

профиль автора
ПОСЛЕ

Чтобы увидеть в работе скопируйте код приведённый ниже и установите для просмотра в этом редакторе.

<figure class="snip1477">
  <img alt="" src="http://www.shpargalochki.ru/"></a><img src="https://pp.userapi.com/c635100/v635100635/2830c/jvJe_ugaJhE.jpg
" />
  <div class="title">
<div>
<h3>
Привет</h3>
<h4>
Я Виктория Барад</h4>
</div>
</div>
<figcaption>
    я автор блога шпаргалки блогерши.Добро пожаловать!

  </figcaption>
  <a href="http://www.shpargalochki.ru/"></a>
</figure>

<style>
figure.snip1477 {
  font-family: 'Raleway', Arial, sans-serif;
  position: relative;
  overflow: hidden;
  margin: 10px;
  min-width: 230px;
  max-width: 315px;
  width: 100%;
  color: #ffffff;
  text-align: center;
  font-size: 16px;
  background-color: #000000;
}
figure.snip1477 *,
figure.snip1477 *:before,
figure.snip1477 *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.55s ease;
  transition: all 0.55s ease;
}
figure.snip1477 img {
  max-width: 100%;
  backface-visibility: hidden;
  vertical-align: top;
  opacity: 0.9;
}
figure.snip1477 .title {
  position: absolute;
  top: 58%;
  left: 25px;
  padding: 5px 10px 10px;
}
figure.snip1477 .title:before,
figure.snip1477 .title:after {
  height: 2px;
  width: 400px;
  position: absolute;
  content: '';
  background-color: #ffffff;
}
figure.snip1477 .title:before {
  top: 0;
  left: 10px;
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}
figure.snip1477 .title:after {
  bottom: 0;
  right: 10px;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}
figure.snip1477 .title div:before,
figure.snip1477 .title div:after {
  width: 2px;
  height: 300px;
  position: absolute;
  content: '';
  background-color: #ffffff;
}
figure.snip1477 .title div:before {
  top: 10px;
  right: 0;
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
}
figure.snip1477 .title div:after {
  bottom: 10px;
  left: 0;
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
}
figure.snip1477 h2,
figure.snip1477 h4 {
  margin: 0;
  text-transform: uppercase;
}
figure.snip1477 h2 {
  font-weight: 300;
}
figure.snip1477 h4 {
  display: block;
  font-weight: 600;
  background-color: #ffffff;
  padding: 5px 10px;
  color: #000000;
}
figure.snip1477 figcaption {
  position: absolute;
  bottom: 42%;
  left: 25px;
  text-align: left;
  opacity: 0;
  padding: 5px 60px 5px 10px;
  font-size: 0.8em;
  font-weight: 500;
  letter-spacing: 1.5px;
}
figure.snip1477 figcaption p {
  margin: 0;
}
figure.snip1477 a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
figure.snip1477:hover img,
figure.snip1477.hover img {
  zoom: 1;
  filter: alpha(opacity=35);
  -webkit-opacity: 0.35;
  opacity: 0.35;
}figure.snip1477:hover .title:before,
figure.snip1477.hover .title:before,
figure.snip1477:hover .title:after,
figure.snip1477.hover .title:after,
figure.snip1477:hover .title div:before,
figure.snip1477.hover .title div:before,
figure.snip1477:hover .title div:after,
figure.snip1477.hover .title div:after {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}
figure.snip1477:hover .title:before,
figure.snip1477.hover .title:before,
figure.snip1477:hover .title:after,
figure.snip1477.hover .title:after {
  -webkit-transition-delay: 0.15s;
  transition-delay: 0.15s;
}
figure.snip1477:hover figcaption,
figure.snip1477.hover figcaption {
  opacity: 1;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
</style>


Вариант 2.  В спокойном состоянии просто фотография (или другая картинка). При наведении курсора картинка уменьшается и сдвигается вправо. Появляться блок для какой - то информации с кликабельным текстом.

профиль автора
ДО
ПОСЛЕ НАВЕДЕНИЯ МЫШИ

Так же, рабочий вариант,  можно увидеть в редакторе, ссылка на который выше ( вариант 1)


<figure class="snip1482">
  <figcaption>
    <h2>Вика Барад</h2>
    <p>Я автор блога шпаргалки блогерши. Добро пожаловать!.</p>
  </figcaption>
  <a href="http://www.shpargalochki.ru/"></a><img src="http://www.shpargalochki.ru/"></a><img src="https://pp.userapi.com/c635100/v635100635/2830c/jvJe_ugaJhE.jpg" />
</figure>
<style>
.snip1482 {
  font-family: 'Fauna One', Arial, sans-serif;
  position: relative;
  margin: 10px 20px;
  min-width: 230px;
  max-width: 295px;
  min-height: 220px;
  width: 100%;
  color: #ffffff;
  text-align: right;
  line-height: 1.4em;
  background-color: #1a1a1a;
  font-size: 16px;
}
.snip1482 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
.snip1482 img {
  position: absolute;
  right: 0%;
  top: 50%;
  opacity: 1;
  width: 100%;
  -webkit-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
}
.snip1482 figcaption {
  position: absolute;
  width: 50%;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  padding: 20px 0 20px 20px;
}
.snip1482 h2,
.snip1482 p {
  margin: 0;
  width: 100%;
  -webkit-transform: translateX(20px);
  transform: translateX(20px);
  opacity: 0;
}
.snip1482 h2 {
  font-family: 'Playfair Display', Arial, sans-serif;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.snip1482 p {
  font-size: 0.8em;
}
.snip1482 a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}
.snip1482:hover img,
.snip1482.hover img {
  width: 55%;
  right: -10%;
}
.snip1482:hover figcaption h2,
.snip1482.hover figcaption h2,
.snip1482:hover figcaption p,
.snip1482.hover figcaption p {
  -webkit-transform: translateX(0px);
  transform: translateX(0px);
  opacity: 1;
}

</style>


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

Голубым цветом выделена строка, где нужно вставить адрес страницы, куда будет осуществлён переход по клику.

Розовый цвет это общий фон блока с изображением.

Вот такие не сложные основные настройки вашей карточки профиля.

Готовый код вставить в гаджет HTML/JavaScript и разместить его в нужном месте макета блога.

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

введите пожалуйста свой адрес электронной почты :


Доброго времени суток, друзья. Facebook очень  популярная социальная сеть в сети Интернете. Миллионы пользователей не только общаются, но и обмениваются музыкой и видеозаписями. Бывают случаи, когда не только поделиться ссылкой хочется или встроить видео  на сайт с помощью предложенных вариантов, но и сохранить его у себя на компьютере. 

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

Делюсь с вами несколькими способами, как можно сохранить видеофайл из социальной сети Facebook у себя на компьютере. 

1. С помощью сервиса Downvids. Перейдите по этой ссылке и в открывшемся окне введите в поле URL-адрес видеофайла и нажмите «Download». Можно в графе слева выбрать желаемый формат. Несколько секунд будет идти обработка запроса 

скачать видео с фейсбука

Затем появляется вот такая кнопка с надписью «Download this video». Нажимаем и видео загружается на ваш компьютер. Здесь же можно увидеть сам ролик, нажав на картинку или попасть на свою страницу в Фейсбуке.


2. Сервис https://www.getfvid.com аналогично первому варианту. Нажимаем правой кнопкой мыши на нужное видео в Фейсбуке, выбираем опцию показать URL и копируем адрес в  всплывающем окне. Затем просто вставляем его на сервисе и нажимаем «Download». Тоже есть возможность выбрать качество видео.

как скачать видео

3. Совсем простой и достаточно популярный "скачиватель" видео с Фейсбук сервис Savefrom , где так же быстро и легко можно скачать видео на свой компьютер. Кстати, здесь же можно конвертировать видеофайлы не только с ФБ, но и из ВКонтакте, Одноклассники, Ютубе и других сетей.



Ещё savefrom.net предлагает пользователям установить универсальный загрузчик, который позволит сохранять мультимедиа файлы с любой социальной сети или видеохостинга.

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

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

Сам гаджет канал выглядит, мягко сказать, совсем скучно.

гаджет канал

 Но можно с помощью стилей CSS его хоть немного сделать привлекательнее. Ну вот так хотя бы.

гаджет канал в блоге

Что изменится

Уберём нумерованный список
Зададим нужный фон
Изменим шрифт
Зададим разделители между ссылками
Изменим цвет самих ссылок
Сделаем верхнюю контрастную рамку.

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



Посмотреть его можно в админпанели  НАСТРОЙКИ-ДРУГОЕ- ФИД САЙТА . У меня он выглядит так.

http://feeds.feedburner.com/shpargalochkiru

Далее нажимаем кнопку продолжить.

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


Далее скопируйте, приведённый ниже код. Все комментарии по настройкам я отметила в самом коде

<style type='text/css'>
#Feed1 .widget-content{
padding:0
}
#Feed1_feedItemListDisplay li,#Feed1_feedItemListDisplay ul{
list-style:none;
 background: #EEEEEE; //общий фон//

margin:0;
padding:0
}
#Feed1_feedItemListDisplay a{
color:#1A237E; //цвет ссылки //

text-decoration:none;
font-size:16px!important //размер шрифта//
}
#Feed1_feedItemListDisplay a:hover{
color:#e8554e //цвет ссылки при наведении//
}
#Feed1_feedItemListDisplay li{
display:block;
clear:both;
overflow:hidden;
list-style:none;
 border-bottom: 2px solid #1565C0; //разделитель между постами толщина и цвет//
padding:3px 0;
margin:0;
font-weight:normal
}
#Feed1_feedItemListDisplay li:first-child{
border-top:solid 8px #F4511E //размеры и цвет верхней рамки//
}
</style>


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

Сейчас идём во вкладку Тема и находим закрывающийся тег </head>. И над ним устанавливаем этот код. Сохраняем изменения.

Можно установить 2 или 3 ленты блога и больше, добавляя новый гаджет канал. Тогда код будет такой

<style type='text/css'>
#Feed1 .widget-content,
#Feed2 .widget-content,
#Feed3 .widget-content{
padding:0
}
#Feed1_feedItemListDisplay li,#Feed1_feedItemListDisplay ul,
#Feed2_feedItemListDisplay li,#Feed2_feedItemListDisplay ul,
#Feed3_feedItemListDisplay li,#Feed3_feedItemListDisplay ul{
list-style:none;
margin:0;
padding:0
}
#Feed1_feedItemListDisplay a,
#Feed2_feedItemListDisplay a,
#Feed3_feedItemListDisplay a{
color:#444;
text-decoration:none;
font-size:16px!important
}
#Feed1_feedItemListDisplay a:hover,
#Feed2_feedItemListDisplay a:hover,
#Feed3_feedItemListDisplay a:hover{
color:#e8554e
}
#Feed1_feedItemListDisplay li,
#Feed2_feedItemListDisplay li,
#Feed3_feedItemListDisplay li{
display:block;
clear:both;
overflow:hidden;
list-style:none;
border-bottom:solid 1px #dedede;
padding:4px 0;
margin:0;
font-weight:normal
}
#Feed1_feedItemListDisplay li:first-child,
#Feed2_feedItemListDisplay li:first-child,
#Feed3_feedItemListDisplay li:first-child{
border-top:solid 1px #dedede
}
</style>


Тут я думаю понятно, что везде добавляем строки #Feed2, #Feed3 и так далее, если нужно. Если вы автор нескольких блогов, то так же можно отображать в текущем ленту другого блога.

Выбор за вами. Возможно, кому -то  и пригодится.



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

введите пожалуйста свой адрес электронной почты :

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