Приветствую, вас. Облако меток - это виджет, предоставляемый Blogger, который позволяет классифицировать контент по определенным меткам. Виджет ярлыков делает ваш блог удобным для пользователя, позволяя посетителям легко перемещаться по контенту, который они ищут, выбирая категории / ярлыки.

Стандартный гаджет  ярлыки для блоггера, сам по себе выглядит очень просто и оставляет желать более интересный вариант. Но мы можем его настроить с помощью CSS. Если вы не знаете как, не волнуйтесь, с этим можно легко справиться. Используя CSS и эффект анимированного градиента, зададим ему интересный и привлекательный вид.  Давайте начнем:

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

Но для начала обращу ваше внимание на то, что все предложенные коды работают именно для отображения ярлыков в виде облака. Вот так

1 вариант. Красные кнопки

.label-size {
  position:relative;
  text-transform: uppercase;
  text-decoration:none;
  font-size:13px;
  font-family:Open Sans;
  color:#fff!important;
}

.label-size a {
  color:#fff!important;
  font-weight:bold;
  padding:8px 10px;
  margin:0 6px 6px 0;
  float:left;
  display:block;
  -moz-transition: all 0.4s ;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s ;
  -ms-transition: all 0.4s ;
  transition: all 0.4s ;
  background-image: linear-gradient(#EE4343, #E07C7C); /*цвет кнопки*/
  background-size: auto 200%;
  background-position: 0 100%;
  transition: background-position 0.5s;border-bottom:3px solid #000000; /*размер и цвет нижней границы*/
}

.label-size a:hover {
  background-position: 0 0;
}

2 вариант. Зелёные кнопки.

.label-size {
  position:relative;
  text-transform: uppercase;
  text-decoration:none;
  font-size:13px;
  font-family:Open Sans;
  color:#fff!important;
}

.label-size a {
  color:#fff!important;
  font-weight:bold;
  padding:8px 10px;
  margin:0 6px 6px 0;
  float:left;
  display:block;
  -moz-transition: all 0.4s ;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s ;
  -ms-transition: all 0.4s ;
  transition: all 0.4s ;
  background-image: linear-gradient(#00FF3B, #778C7C); /*цвет кнопки*/
  background-size: auto 200%;
  background-position: 0 100%;
  transition: background-position 0.5s;border-bottom:3px solid #000000; /*толщина и цвет нижней границы*/
} .label-size a:hover {
  background-position: 0 0;
}

3 вариант. Чёрные кнопки.

.label-size {
  position:relative;
  text-transform: uppercase;
  text-decoration:none;
  font-size:13px;
  font-family:Open Sans;
  color:#fff!important;
}

.label-size a {
  color:#fff!important;
  font-weight:bold;
  padding:8px 10px;
  margin:0 6px 6px 0;
  float:left;
  display:block;
  -moz-transition: all 0.4s ;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s ;
  -ms-transition: all 0.4s ;
  transition: all 0.4s ;
  background-image: linear-gradient(#8A8C8B, #1A1D1B); /*цвет кнопки-->
  background-size: auto 200%;
  background-position: 0 100%;
  transition: background-position 0.5s;border-bottom:3px solid #000000; /*толщина и цвет нижней границы*/
}

.label-size a:hover {
  background-position: 0 0;
}

4 вариант. Пёстренький вариант.

.sidebar .label-size {
  position:relative;
  text-transform: uppercase;
  text-decoration:none;
  font-size:12px;
  font-family:Open Sans;
  color:#fff!important;
  }

.sidebar .label-size a {
  color:#fff!important;
  font-weight:bold;
  padding:8px 10px;
  margin:0 6px 6px 0;
  float:left;
  display:block;
  -moz-transition: all 0.4s ;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s ;
  -ms-transition: all 0.4s ;
  transition: all 0.4s ;
}

.sidebar .label-size-1 a {background:#1abc9c;border:3px solid #127F69;}
.sidebar .label-size-1 a:hover {background:#127F69;border:3px solid #1abc9c;}
.sidebar .label-size-2 a {background:#3498db;border:3px solid #226693;}
.sidebar .label-size-2 a:hover {background:#226693;border:3px solid #3498db;}
.sidebar .label-size-3 a {background:#2ecc71;border:3px solid #1F8C4C;}
.sidebar .label-size-3 a:hover {background:#1F8C4C;border:3px solid #2ecc71;}
.sidebar .label-size-4 a {background:#9b59b6;border:3px solid #74398E;}
.sidebar .label-size-4 a:hover {background:#74398E;border:3px solid #9b59b6;}
.sidebar .label-size-5 a {background:#e74c3c;border:3px solid #922C20;}
.sidebar .label-size-5 a:hover {background:#922C20;border:3px solid #e74c3c;}

В первых трёх вариантах меняйте значения linear-gradient /*цвет кнопки*/ на нужные. Можно найти в поиске генераторы linear-gradient.

Меняйте размер и цвет нижней границы - border-bottom:3px solid #000000; /*толщина и цвет нижней границы*/

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

В четвёртом коде тоже можно играться со всеми значениями в этих строках

.sidebar .label-size-1 a {background:#1abc9c;border:3px solid #127F69;} /*основные цвета кнопки, нижней границы*/
.sidebar .label-size-1 a:hover {background:#127F69;border:3px solid #1abc9c;} /*цвета при наведении курсора*/

Когда определились с выбором, идём во вкладку ТЕМА - ИЗМЕНИТЬ HTML. Находим строку ]]></b:skin> (читаем здесь) и сразу над ней устанавливаем нужный код. Сохраняем.

Остаётся только полюбоваться результатом или что - то подкорректировать.

Ещё один вариант как изменить дизайн гаджета ярлыки в блоге.

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

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

Подробнее...

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

Особенности гаджета популярные сообщения

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

1. Для начала нам необходимо просто установить родной гаджет из предложенного Блоггер. Идём в админпанель блога - дизайн - добавить виджет - популярные сообщения. Сам виджет нужно настроить примерно так

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

2. Сейчас ниже выберите для себя подходящий вариант и копируйте его код.

3. Опять зайдите в админпанель - добавить виджет - HTML/JavaScript и вставьте в него код.

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

5. Сохраните расположение и посмотрите результат.

Вот 2 варианта стилей гаджета популярных сообщений

1 вариант. Сообщения отображаются лентой в одну колонку

код

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
    <script type='text/javascript'>//<![CDATA[
    $undefineddocument).readyundefinedfunctionundefined) {
      var tbn = 150;
      $undefined'#PopularPosts1').findundefined'img').eachundefinedfunctionundefinedn, image){
        var image = $undefinedimage);
        image.attrundefined{src : image.attrundefined'src').replaceundefined/s\B\d{2,4}/,'s' + tbn)});
        image.attrundefined'width',tbn);
        image.attrundefined'height',tbn);
      });
    });
    //]]></script>

<style>
  .sidebar .popular-posts ul {
  counter-reset: popcount;
  margin: 0;
  padding: 0;
  }
.sidebar .popular-posts ul li:first-child {}
.sidebar .popular-posts ul li {
  font-family: "Oswald",sans-serif;
  height: 130px;
  font-weight: bold;
  list-style: none !important;
  overflow: hidden;
  padding: 0px !important;
  position: relative;
  margin: 2px;
  border: 0;
  width: 100%;
  float: left;
}
.sidebar .PopularPosts .item-thumbnail {margin: 0; width: 100%;}
.sidebar .PopularPosts ul li img {
  display: block;
  float: left;
  padding: 0;
  width: 100%;
  height: 130px;
  -webkit-transition-duration: 1.0s;
  -moz-transition-duration: 1.0s;
  -o-transition-duration: 1.0s;
  transition:1.0s;
  }
.sidebar .PopularPosts ul li img:hover {
  -webkit-transform:scale(1.06);
  -moz-transform:scale(1.06);
  -o-transform:scale(1.06);
  transform:scale(1.06);
  overflow: hidden;
  }
.sidebar .PopularPosts .item-title {
  bottom:0;
  left: 0;
  right: 0;
  padding-bottom: 0;
  position: absolute;
  z-index: 999;
 }
.sidebar .PopularPosts .item-title a {
  background: rgba(32, 32, 32, 0.77);
  color: #FFFFFF;
  display: block;
  font-size: 16px;
  font-weight: bold;
  line-height: normal;
  font-family: "Oswald",sans-serif;
  padding: 10px 0px 5px 10px;
  text-transform: capitalize;
  transition: all .4s ease-in-out;
}
.sidebar .popular-posts ul li:hover .item-title a {
  color: rgba(255, 255, 255, 1);
  background: rgba(231, 76, 60, 0.88);
  text-decoration: none;
  }
.sidebar .popular-posts ul li:before {
  background: rgba(255, 252, 8, 1);
  color: #000;
  content: counter(popcount, decimal);
  counter-increment: popcount;
  float: left;
  font-size: 14px;
  line-height: 20px;
  list-style-type: none;
  padding: 0px 8px 1px 1px;
  border-radius: 0px 0px 10px 0px;
  position: absolute;
  top: 0;
  z-index: 4;
  border: solid #FFF;
  border-width: 0px 2px 2px 0px;
  }</style>

2 вариант. Сообщения отображаются сеткой в две колонки

код

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
    <script type='text/javascript'>//<![CDATA[
    $undefineddocument).readyundefinedfunctionundefined) {
      var tbn = 150;
      $undefined'#PopularPosts1').findundefined'img').eachundefinedfunctionundefinedn, image){
        var image = $undefinedimage);
        image.attrundefined{src : image.attrundefined'src').replaceundefined/s\B\d{2,4}/,'s' + tbn)});
        image.attrundefined'width',tbn);
        image.attrundefined'height',tbn);
      });
    });
    //]]></script>
<style>
 .sidebar .popular-posts ul {
      counter-reset: popcount;
      margin: 0;
      padding: 0;
      }
    .sidebar .popular-posts ul li:first-child {}
    .sidebar .popular-posts ul li {
      font-family:'Oswald','Open Sans','Helvetica Neue',Arial,Tahoma,sans-serif;
      height: 130px;
      list-style: none !important;
      overflow: hidden;
      padding: 0 !important;
      position: relative;
      margin: 2px;
      border: 0;
      width: 48%;
      float: left;
      }
    .sidebar .PopularPosts .item-thumbnail {margin: 0; width: 100%;}
    .sidebar .PopularPosts ul li img {
      display: block;
      float: left;
      padding: 0;
      width: 100%;
      height: 130px;
      -webkit-transition-duration: 1.0s;
      -moz-transition-duration: 1.0s;
      -o-transition-duration: 1.0s;
      transition:1.0s;
      }
    .sidebar .PopularPosts ul li img:hover {
      -webkit-transform:scale(1.06);
      -moz-transform:scale(1.06);
      -o-transform:scale(1.06);
      transform:scale(1.06);
      overflow: hidden;
      }
    .sidebar .PopularPosts .item-title {
      bottom:0;
      left: 0;
      right: 0;
      padding-bottom: 0;
      position: absolute;
      z-index: 999;
     }
    .sidebar .PopularPosts .item-title a {
      background: rgba(32, 32, 32, 0.77);
      color: #FFFFFF;
      display: block;
      font-size: 12px;
      line-height: normal;
      padding: 5px 0px 2px 5px;
      text-transform: capitalize;
      transition: all .4s ease-in-out;
      }
    .sidebar .popular-posts ul li:hover .item-title a {
      color: rgba(255, 255, 255, 1);
      background: rgba(231, 76, 60, 0.88);
      text-decoration: none;
      }
    .sidebar .popular-posts ul li:before {
      background: rgba(255, 252, 8, 1);
      color: #000;
      content: counter(popcount, decimal);
      counter-increment: popcount;
      float: left;
      font-size: 14px;
      line-height: 20px;
      list-style-type: none;
      padding: 0px 8px 1px 1px;
      border-radius: 0px 0px 10px 0px;
      position: absolute;
      top: 0;
      z-index: 4;
      border: solid #FFF;
      border-width: 0px 2px 2px 0px;
      }</style>

На тестовом блоге посмотрите как будет выглядеть вариант 2. У меня там мало опубликованных сообщений поэтому отображено только 2 статьи, чтобы вас это не смущало.

Демонстрация

Копируйте код понравившегося виджета популярных сообщений в виде картинок и устанавливайте, следуя описанным шагам.

Жёлтый цвет background: rgba(255, 252, 8, 1); нумерации можно изменить на ваше усмотрение. Он задан в формате rgba (найдите в поиске). Так же поиграйтесь со всеми значениями
background:.

Важно:

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

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

если вы всё сделали правильно, а виджет не работает, следует обратить внимание на использование различных классов CSS для боковой панели. Шаблоны у всех разные. В предложенных примерах я использовала класс .sidebar .PopularPosts { у вас может быть .sidebar-wrapper .PopularPosts { или  #sidebar .PopularPosts {. Просто везде в коде нужно заменить на тот который в вашем шаблоне

Больше ни каких заморочек быть не должно.

Посмотрите ещё варианты оформления виджета популярных постов

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

Выбор за вами. Спасибо за внимание и до встречи. 

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

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

Подробнее...

Привет, друзья. Всё больше и больше набирают популярность при веб - дизайне различные hover эффекты для картинок на страницах сайта. Как же я давно не писала про оформление изображений. Если вы что - то пропустили, все эффекты для изображений можно посмотреть под ярлыком картинки. Сегодня предложу красивый, назову его полупрозрачный эффект, когда при наведении курсора на картинку появиться описание и красиво оформленный тон. 

Сама фишка ни чем особым не отличается от других подобных эффектов. Всё создаётся так же с помощью CSS и не несёт нагрузки на блог в целом. Сейчас мы сделаем сразу несколько слоёв, но результат будет достаточно интересный. Самое главное использовать будем всего 2 основных цвета. Реализация достаточно простая, но как современно, стильно и красиво это выглядит.

Так же добавим некоторый эффект анимации к картинке. 

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

<figure class="snip">
  <img src="http://veneratour.com/pics/resorts/2011/03/02/8296_1299055722_big.jpg" alt="sample110" />
  <figcaption>
    <h3>Индонезия</h3>
    <p>Красивый остров Бали в океане</p>
  </figcaption>
  <a href="#"></a>
</figure>

<figure class="snip"><img src="http://tourweek.ru/upload/iblock/858/544133614_3e2445332a_o.jpg" alt="sample59" />
  <figcaption>
    <h3>Таиланд</h3>
    <p>Уникальный остров Пхи - Пхи в Таиланде </p>
  </figcaption>
  <a href="#"></a>
</figure>


<style>
.snip {
  background-color: #fff;
  color: #ffffff;
  display: inline-block;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 16px;
  margin: 10px 5px;
  max-width: 315px;
  min-width: 230px;
  overflow: hidden;
  position: relative;
  text-align: right;
  width: 100%;
}

.snip *,
.snip *:before,
.snip *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.45s ease;
  transition: all 0.45s ease;
}

.snip img {
  backface-visibility: hidden;
  max-width: 100%;
  vertical-align: top;
}

.snip:before,
.snip:after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  content: '';
  background-color: #b81212;
  opacity: 0.5;
  -webkit-transition: all 0.45s ease;
  transition: all 0.45s ease;
}

.snip:before {
  -webkit-transform: skew(30deg) translateX(80%);
  transform: skew(30deg) translateX(80%);
}

.snip:after {
  -webkit-transform: skew(-30deg) translateX(70%);
  transform: skew(-30deg) translateX(70%);
}

.snip figcaption {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: 1;
  bottom: 0;
  padding: 20px 20px 20px 40%;
}

.snip figcaption:before,
.snip figcaption:after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #b81212;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
  content: '';
  opacity: 0.5;
  z-index: -1;
}

.snip figcaption:before {
  -webkit-transform: skew(30deg) translateX(100%);
  transform: skew(30deg) translateX(100%);
}

.snip figcaption:after {
  -webkit-transform: skew(-30deg) translateX(90%);
  transform: skew(-30deg) translateX(90%);
}

.snip h2,
.snip p {
  margin: 0;
  opacity: 0;
  letter-spacing: 1px;
}

.snip h2 {
  font-family: 'Teko', sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1em;
  text-transform: uppercase;
}

.snip p {
  font-size: 0.9em;
}

.snip a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

.snip:hover h2,
.snip.hover h2,
.snip:hover p,
.snip.hover p {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 0.9;
}

.snip:hover:before,
.snip.hover:before {
  -webkit-transform: skew(30deg) translateX(30%);
  transform: skew(30deg) translateX(30%);
  -webkit-transition-delay: 0.05s;
  transition-delay: 0.05s;
}

.snip:hover:after,
.snip.hover:after {
  -webkit-transform: skew(-30deg) translateX(20%);
  transform: skew(-30deg) translateX(20%);
}

.snip:hover figcaption:before,
.snip.hover figcaption:before {
  -webkit-transform: skew(30deg) translateX(50%);
  transform: skew(30deg) translateX(50%);
  -webkit-transition-delay: 0.15s;
  transition-delay: 0.15s;
}

.snip:hover figcaption:after,
.snip.hover figcaption:after {
  -webkit-transform: skew(-30deg) translateX(40%);
  transform: skew(-30deg) translateX(40%);
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}
</style>

В строках, отмеченных зелёным цветом, вставляйте адреса ваших изображений. Розовым цветом я выделила, заголовок на картинке и описание.
Вместо решёток укажите, по необходимости ссылку, куда будет осуществляться переход при клике на картинку, в этом участке кода <a href="#"></a>.

Ну сам цвет такого эффекта в двух местах можно изменить на свой, соответствующий основе вашего дизайна. Воспользуйтесь таблицей цветов. 

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

Такой вот необычный и стильный hover эффект для изображений может украсить страницы ваших сообщений. 

Всем добра и солнечных денёчков. До встречи.

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

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

Подробнее...

Всем, доброго времени суток. Очередная менюшка для вас. На этот раз предлагаю код выезжающего, вертикального, многоуровневого меню. На странице будет только небольшой лейбл с названием. При нажатии открывается пункты меню, с выпадающими вкладками. Разместить в таком меню можно массу информации.

В результате будем иметь -

Меню всегда на виду в верхнем правом углу страницы.
Легко можно добавить при необходимости, дополнительные пункты и подпункты меню непосредственно в код.
Экономится масса места на странице.
С помощью стилей можно легко подогнать внешний вид под ваш дизайн.
Установка меню в блоге не требует особых навыков.

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

<style>#menu-vertical{width:19em;right:-19em;top:5.5em;height:auto;position:fixed;overflow-y:hidden;background-color:# CC6666;transition:right .4s ease-in-out;margin:0;padding:0}
#menu-vertical:hover{right:0;}
#menu-label{display:inline-block;background:#CC0033;position:fixed;text-align:center;right:0;top:3.2em;z-index:100;font-size:14px;line-height:30px;}
#menu-label a{color:#FFF;display:block;text-transform:uppercase;text-decoration:none;width:5.1em;}
#menu-label:hover{opacity:0.67;}
.vertical { font-size:13px; line-height:30px; font-weight:700; border:1px solid #1d1d1d; border-radius:1px; }
.vertical>ul { margin:0; padding:0; }
.vertical ul,.vertical li { list-style:none; }
.vertical>ul>li { background:#333333; margin:0;text-transform:uppercase;padding:0;color:#fff;}
.vertical>ul>li:hover {background:#4B4B4B}
.vertical>ul>li a{color:#fff}
.vertical>ul>li ul { transition:.3s ease-out; opacity:0; margin:0; padding:0; }
.vertical>ul>li li { background:#efefef;}
.vertical>ul>li li a{color:#333;text-transform:none}
.vertical a { display:block; text-align:center; text-decoration:none!important; }
.vertical>ul>li>a { border-top:1px solid #353535; border-bottom:1px solid #161616;}
.vertical>ul>li ul li a { height:0; transition:.3s ease-out}
.vertical>ul>li:hover ul li a { height:30px; }
.vertical>ul>li:hover ul { opacity:1; }
.vertical > ul > li li:hover { box-shadow:inset 0 1px #4077CB,inset 0 -1px #4077cb; background:#3e6db5;}
.vertical > ul > li li:hover a{color:#fff }</style>

<div id="menu-vertical">
<h3 id="menu-label"><a href="#">Меню</a></h3>
<div class='vertical'>
<ul>
<li><a href='/' title='Menu1'>Меню 1</a>
<ul>
<li><a href='/' title='Menu1'>вкладка 1 Меню 1</a></li>
<li><a href='/' title='Menu1'>вкладка 2 Меню 1</a></li>
<li><a href='/' title='Menu1'>вкладка 3 Меню 1</a></li>
<li><a href='/' title='Menu1'>вкладка 4 Меню 1</a></li>
<li><a href='/' title=' Menu1'>вкладка 5 Меню 1</a></li>
<li><a href='/' title='Menu1'>вкладка 6 Меню 1</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href='/' title='Menu2'>Меню 2</a>
<ul>
<li><a href='/' title='вкладка 1 Menu2'>вкладка 1 Меню2</a></li>
<li><a href='/' title='вкладка 2 Menu2'>вкладка 2 Меню2</a></li>
<li><a href='/' title='вкладка 3 Menu2'>вкладка 3 Меню2</a></li>
<li><a href='/' title='вкладка 4 Menu2'>вкладка 4 Меню2</a></li>
<li><a href='/' title='вкладка 5 Menu2'>вкладка5 Меню2</a></li>
<li><a href='/' title='вкладка 6 Menu2'>вкладка 6 Menu2</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href='/' title='Menu3'>Меню 3</a>
<ul>
<li><a href='/' title='Sub1 Menu3'>вкладка 1 Меню3</a></li>
<li><a href='/' title='Sub2 Menu3'>вкладка2 Меню3</a></li>
<li><a href='/' title='Sub3 Menu3'>вкладка3 Меню3</a></li>
<li><a href='/' title='Sub4 Menu3'>вкладка4 Меню3</a></li>
<li><a href='/' title='Sub5 Menu3'>вкладка5 Меню3</a></li>
<li><a href='/' title='Sub6 Menu3'>вкладка6 Меню3</a></li>
</ul>
</li>
</ul>
</div>
</div>

А теперь с настройками разберёмся.

background:#CC0033  это цвет самого лейбла. Другие background меняйте на своё усмотрение. В первом коде (я его отметила другим шрифтом) изменить можно почти все стили.
Меню  название страниц меню
вкладка 1   название подпунктов меню

Во всех участках текста где прописано <a href='/'  вместо слеша (/)вставляйте адреса своих страниц и подстраниц ( вкладок). Для начинающих блогеров советую прочитать статьи о подстраницах и страницах блога.

Добавляйте для дополнительных пунктов меню и подменю такой участок кода

<ul>
<li><a href='/' title='Menu1'>Меню 1</a>
<ul>
<li><a href='/' title='Menu1'>вкладка 1 Меню 1</a></li>
<li><a href='/' title='Menu1'>вкладка 2 Меню 1</a></li>
<li><a href='/' title='Menu1'>вкладка 3 Меню 1</a></li>
<li><a href='/' title='Menu1'>вкладка 4 Меню 1</a></li>
<li><a href='/' title=' Menu1'>вкладка 5 Меню 1</a></li>
<li><a href='/' title='Menu1'>вкладка 6 Меню 1</a></li>
</ul>
</li>
</ul>

Если есть необходимость добавить дополнительные вкладки (подпункты), добавляйте строки

<li><a href='/' title='Menu1'>вкладка 6 Меню 1</a></li>

Вроде как и все настройки. Прекрасное выезжающее меню с раскрывающимися вкладками. 

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

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

Подробнее...

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

Вы легко сможете изменить его внешний вид, а он точно будет выводить текущую дату. Скопируйте приведённый код и установите его в этом редакторе для просмотра. Потом рассмотрим, что можно поменять на свой вкус и цвет, как говориться.

<style>
.pcalendar {
height: 200px;
position: relative;
margin: 0 auto;
width: 200px;}
.calendario { text-align: center;}
.wcalendar {
     height: 150px;
     margin-bottom: 24px;
     width: 190px;
}
#ncalendar {
background: #18477d;
background: linear-gradient(to bottom,  #18477d 0%,#2277bd 50%,#1b6aad 51%,#60a9e3 100%);
font-family: 'Hammersmith One', sans-serif;
text-shadow: 0 0 9px #fff;
border-left:4px solid #ccc;
border-right:4px solid #ccc;
border-top:4px solid #ccc;
  border-radius: 35px 35px 0 0;
  color: #ddd !important;
text-decoration:none !important;
font-size: 20px;
letter-spacing:0px;
font-weight:bold;
line-height: 35px;
height: 40px;
position: relative;
text-transform: lowercase;
}
#gcalendar {
border-radius: 0 0 35px 35px;
border:0px solid #565656;
background:url(https://lh3.googleusercontent.com/-DF59fnpaHhM/UxmbsKmhEkI/AAAAAAAAmLs/Or6qqgj3Xkg/s200/fondo%2520calendario.png) no-repeat center bottom;
     color: #0C74B6;
     font-family: 'Hammersmith One', sans-serif;
     font-size: 130px;
     text-shadow: -5px 0 #cdcdcd, 0 1px #000, 0px 0 #cdcdcd, 0 -1px #000, -1px 1px 2px #000;
     height:150px;
     line-height: 120px;
}
</style>
<div class="pcalendar"><div class="calendario"><div class="wcalendar"><div id="ncalendar"></div><div id="gcalendar"></div></div></div></div>
<link href="http://fonts.googleapis.com/css?family=Hammersmith+One" rel="stylesheet" type="text/css" />
<script>
     (function() {
     var date = new Date(),
     weekday = ["воскресенье", "понедельник", "вторник", "среда", "четверг", "пятница", "суббота"];
     document.getElementById('ncalendar').innerHTML = weekday[date.getDay()];
     document.getElementById('gcalendar').innerHTML = date.getDate();}) ();
</script>

Измените при необходимости высоту и ширину самого календаря height: 200px; .width: 200px;}
Отмеченные участки синего цвета определяют стили и цвет границ и тени.
Участок жёлтого цвета  - размеры и цвет текста дня недели.
Розовый цвет  - стили числа текущей даты (цвет, размер ши стиль шрифта, тень текста).
background: #18477d; общий фон

Готовый код устанавливается обычным способом в гаджет HTML/JavaScript в нужном месте макета блога.

Всем добра и до встречи. 

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

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

Подробнее...