Показаны сообщения с ярлыком Инструменты для сайта. Показать все сообщения
Показаны сообщения с ярлыком Инструменты для сайта. Показать все сообщения

Всплывающее окно видео youtube на CSS

Всплывающее окно видео youtube
Приветствую друзья. Сегодня я подготовил для вас небольшой, простенький виджет с помощью которого вы сможете выводить видео на своих сайтах и блогах из Youtube, Вконтакте, Vimeo и других медиа сетей в отдельном всплывающем окне.

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

Почему лучше отображать видео в всплывающем окне?

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

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

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

Пример адаптивного дизайна видео при свернутом браузере:
пример адаптивного дизайна видео
Пример не адаптивного дизайна при свернутом браузере:
пример не адаптивного дизайна видео
Если у вас не адаптивный дизайн, тогда можете это исправить руководствуясь статьей : Адаптивный дизайн для видеоплеера


Как это работает?

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

Плюсы виджета

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

Минусы виджета

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

Установка для Blogger

1.) Откройте раздел "Тема" найдите строку:  ]]></b:skin> после нее вставьте код:

<style>
.modalDialog1 { position: fixed; font-family: Arial, Helvetica, sans-serif; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.6); z-index: 99999; opacity:0; -webkit-transition: opacity 200ms ease-in; -moz-transition: opacity 200ms ease-in; transition: opacity 200ms ease-in; pointer-events: none; } .modalDialog1:target { opacity:1; pointer-events: auto; } .modalDialog1:target &gt; div { margin: 8% auto;border-radius:5px; } .modalDialog1 &gt; div {webkit-transition: all 100ms ease-in; -moz-transition: all 100ms ease-in; transition: all 100ms ease-in; width: 100%; position: relative; margin: 0 auto; background: #; max-width: 1000px; } h2.signup { background:#00aa9f; border-bottom: 1px solid #008d84; font-weight: normal; text-align:center; padding: 10px; color:#fff; font-size: 18px; } .close { color: #ef3d05 !important; position: absolute; top: 1px; right: 1px; width: 30px; height: 30px; line-height: 30px; text-align: center; font-size: 16px; margin-right: -10px; } .close:hover { text-decoration:none; } .close:hover { color:#555; }
 @media (max-width:600px){
.modalDialog1:target &gt; div { width: 90%; padding: 0px; }
.newsletter-sv .newsletter-input-sv { width: 90%!important}
.newsletter-sv .newsletter-button-sv { height: 40px; font-size: 14px; padding: 5px 10px; color: #fff; text-align: center; background: #333; border: 1px solid #333; cursor: pointer; margin-top: -10px!important; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; margin: 0px auto; display: block !important;float:none!important;}
}
.fa-remove:before, .fa-close:before, .fa-times:before {color: #c11616;}
.newsletter-sv {.newsletter-sv { background: #fff; width: 100%; margin: 0; padding: 20px; border-radius: 5px; margin-left: 0px; }}
.newsletter-sv h3 {color:#555; font-family: &#39;Maven Pro&#39;, sans-serif; font-size: 24px; font-weight: normal; text-align:center; margin-bottom: 10px;}
.newsletter-sv p {font-size: 14px; color:#555; line-height: 20px; font-family: &#39;Maven Pro&#39;, sans-serif;}
.newsletter-sv .newsletter-input-sv {border: 0; padding: 5px 10px; width: 360px; float:left; height: 40px; color:#555;border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px;}
.newsletter-sv .newsletter-sm-bot{background:#c11616 url(http://4.bp.blogspot.com/-0mBblowuHEI/VKnxGxyRmUI/AAAAAAAAHiU/ewwqQBE8VE0/s1600/bg.png) no-repeat; padding: 20px; margin: 0 -20px -20px; height: 50px;}
.newsletter-sv .newsletter-button-sv {float:right; height: 40px; display:inline-block; font-size: 14px; padding: 5px 10px; position: relative;color: #fff;text-align: center; background:#333;border: 1px solid #333;cursor: pointer; margin-top: 5px;border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px;}
</style>

2.) Сохраняете тему.

3.) В разделе Сообщения создаете новый пост. Здесь переходите на вкладку HTML и добавляете следующий код:

<a class='btn down anima' href='#signup1'>Смотреть видео </a>
<div class='modalDialog1' id='signup1'>
<div>
<a class='close' href='#close' title='Close'>х</a>
<br />
<div class="signup1-container">
<br />
<div class="newsletter-sv">
<br />
<iframe allowfullscreen="" frameborder="0" height="600" src="https://www.youtube.com/embed/E2fXgdwBr-w" width="1000"></iframe>
</div></div></div></div></div>

4.)Публикуете сообщение.

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

Установка для WordPress

1.) Смотрим первый пункт из установки в Blogger, копируете CSS код. Идем в панель управления, Внешний вид - Настроить, здесь открываем вкладку "Дополнительные CSS", в появившемся окне вставляете код, жмете кнопку "Сохранить и опубликовать"

2.) Теперь копируем HTML код из третьего пункта установки в Blogger. Открываем раздел Записи, Добавить новую - в редакторе во вкладке "Текст" в нужном месте вставляете код и публикуете запись.

Разбираем код виджета

В HTML коде:
Строка выделенная темно-зеленым цветом отображает ссылку "Смотреть видео", чтобы добавить вместо ссылки картинку смените эту строку на следующею:

<a href='#signup1'> <img src=http://img.youtube.com/vi/E2fXgdwBr-w/0.jpg  width="500px" alt="Описание для картинки"/> </a>

В ней красным вделен ID номер видео, смените его на номер своего видео. Или замените ссылку какртинки на свою: http ... jpg

width - ширина картинки - если нужно меняете
alt - описание картинки - так же при необходимости можно сменить

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

Table of Contents - плагин виджет содержание статьи для лучшего продвижения


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


    Важно!!! Скрипт плагина подходит для всех платформ, например Blogger, WordPress, Joomla и др..

    Думаю каждый время от времени посещает сайт Википедии. С первого взгляда ничего необычного, сайт энциклопедии да и все. Все верно, это обычный сайт, но в его публикациях есть плагин, который отображает структуру публикаций и тем самым помогает читателю лучше понять о чем они и выбрать нужный раздел. Этот плагин называется ToC - Table of Contents - таблица содержания контента или просто содержание. В общем перед основной частью текста отображается таблица с основными разделами статьи, кликнув по названию нужного раздела браузер мгновенно выдает нам этот раздел. Демо плагина можете увидеть на этой странице.
    ToC плагин содержания пример Википедия.
    Подобная организация статьи весьма полезно сказывается на ее продвижении в поисковых системах. По-этому не стоит упускать возможность оформления постов с помощью этого виджета.

    Виджет Table of Contents

    Виджет, который мы предлагаем вам установить является автоматическим решением, которое поможет забыть об утомительном, время затратном и трудоемком процессе составления содержания для длинных постов. Этот виджет автоматически создает удобное оглавления статьи с их молниеносным отображением. К тому же он создан на чистом коде JavaScript и для его работы не требуется подключения к библиотекам Jquery, это в свою очередь позволит странице загружаться быстрее. И конечно все это индексируется поисковыми роботами.

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

    Как работает виджет Table of Contents

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

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

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

    Сейчас перечислим особенности виджета:
    • Создан на чистом JavaScript - всего 10 строк
    • Легкий и быстрый
    • SEO дружественный
    • Добавляет уникальный идентификатор для каждой секции статьи отдельно
    • Создает упорядоченный список
    • Включает кнопку отображения содержания (спрятать или показать)
    • Показывает выбранный раздел
    • Легко устанавливаемый
    • Адаптивный

    Как установить виджет Table of Contents в блог на blogger

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

    1. Зайдите в панель управления, раздел "Шаблон".
    2. Сохраните резервную копию шаблона на всякий случай.
    3. Кликните по кнопке Изменить HTML
    4. Перед закрывающим тегом </head> добавьте следующий код:
           
    
    <link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>           
    <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
            
    
    <script type='text/javascript'>              
    //<![CDATA[           
    //*************TOC plugin by MyBloggerTricks.com           
    function mbtTOC() {var mbtTOC=i=headlength=gethead=0;           
    headlength = document.getElementById("post-toc").getElementsByTagName("h2").length;for (i = 0; i < headlength; i++)           
    {gethead = document.getElementById("post-toc").getElementsByTagName("h2")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h2")[i].setAttribute("id", "point"+i);mbtTOC = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("mbtTOC").innerHTML += mbtTOC;}}function mbtToggle() {var mbt = document.getElementById('mbtTOC');if (mbt .style.display === 'none') {mbt .style.display = 'block';} else {mbt .style.display = 'none';}}           
    //]]>              
    </script>
    


    Если в своих статьях вы используете для заголовка тег H3, а не H2, тогда в коде замените H2 на H3, нужные участки выделены красным цветом.

      5. Следующим делом найдите в шаблоне тег: ]]></b:skin> и перед ним добавьте код:

          
    
    /*####Automatic TOC Plugin by MyBloggerTricks####*/          
    .mbtTOC{border:5px solid #f7f0b8;box-shadow:1px 1px 0 #EDE396;background-color:#FFFFE0;color:#707037;line-height:1.4em;margin:30px auto;padding:20px 30px 20px 10px; font-family:oswald, arial;display: block;width: 70%;}           
    .mbtTOC ol,.mbtTOC ul {margin:0;padding:0;}           
    .mbtTOC ul {list-style:none;}           
    .mbtTOC ol li,.mbtTOC ul li {padding:15px 0 0; margin:0 0 0 30px;font-size:15px;}           
    .mbtTOC a{color:#0080ff;text-decoration:none;}           
    .mbtTOC a:hover{text-decoration:underline; }
    .mbtTOC button{background:#FFFFE0; font-family:oswald, arial; font-size:20px;position:relative; outline:none;cursor:pointer; border:none; color:#707037;padding:0 0 0 15px;}           
    .mbtTOC button:after{content: "\f0dc"; font-family:FontAwesome; position:relative; left:10px; font-size:20px;}
         

    6. И наконец последний шаг. Найдите тег <data:post.body/> может встречаться в шаблоне несколько раз, нужно заменить каждый встречающийся на тег следующего содержания:

    <div id="post-toc"><data:post.body/></div>

    7. Теперь сохраните шаблон.

    Активация виджета "содержание статьи" в постах

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

    1) Расположение виджета в посте.
    Лучше всего добавлять виджет после первого абзаца статьи. Для этого в редакторе сообщения переключитесь на вкладку HTML и вставьте следующий код:

    <div class="mbtTOC"> 
        <button onclick="mbtToggle()">Содержание</button> 
        <ol id="mbtTOC"></ol> 
        </div>

    Скриншот в помощь:
    виджет плагин содержание статьи пример 1


    2) Активация плагина.
    Чтобы плагин заработал и начал отображаться в статье, нужно на той же вкладке HTML в самом конце статьи добавить код:

    <script>mbtTOC();</script>

    Второй скриншот в помощь:
    виджет плагин содержание статьи пример 2

    Теперь публикуйте статью и наслаждайтесь результатом. 

    Иконки font awesome css как подключить

    Иконки font awesome css как подключить
    Иконки font awesome css как подключить? Именно так звучит название темы, которую мы с вами постараемся разобрать, как можно подробней. С уверенностью этот материал можно отнести к разделу "Инструменты для сайта" смотрите в правой панели сайта, возможно найдете еще, что-нибудь интересное для себя.

    Что такое font awesome (перевод с анг. - крутой или клевый шрифт) - это вспомогательный инструмент (иконка), который помогает выделить определенный элемент на сайте или блоге.

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

    Что же можно выделить с помощью иконок font awesome? Допустим на моем сайте есть главное меню, которое разбито на несколько категорий: WordPress, Joomla, Blogger и т.д. так вот для более презентабельного вида можно каждой из этих ячеек задать соответствующею иконку.
    иконки font awesome пример для главного меню
    Правда в базе Font Awesome на все случаи жизни иконок не найдется, но это пока что, ведь с каждым месяцем количество иконок заметно прибавляется.

    Так же можно выделять некоторые заголовки или подзаголовки в постах:
    иконки font awesome пример для текста в постах

    Очень полезны иконки font awesome для такого типа сайта, как Landing Page. Сейчас просто невозможно представить презентацию одностраничника без данного инструмента.
    иконки font awesome пример для landing page

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

    Как подключить иконки Font Awesome

    Вот мы с вами и добрались к самой важной части. Подключить иконки font awesome проще простого. Для этого вам нужно открыть HTML редактор своего сайта и в промежутке между тегами <head> ... </head> вставить тег, который подключит ваш сайт к базе font awesome:

    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>

    Сохраните изменения.

    Теперь дело осталось за малым, вам нужно выбрать нужную иконку на сайте Font Awesome скопировать ее HTML код:
    иконки font awesome пример HTML код
    и вставить его перед тем элементом, который хотите выделить.

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

    Бесплатная html форма подписки на сайт | Подписаться на рассылку по email | Feedburner

    Бесплатная html форма подписки на сайт | подписаться на рассылку по email | Feedburner
    Форма подписки является одной из самых важных частей сайта и блога. Если использовать данный виджет, можно получить большой поток трафика на свой веб ресурс. Сегодня я поделюсь с вами двумя, замечательными html формами подписки, в одну из которых встроены иконки социальных сетей и так же расскажу вам, как настроить эти формы (настройка будет происходить через очередной сервис Google, который называется Feedburner).

    Что такое форма подписки на сайте?

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

    Что такое Feedburner и как это работает?

    Feedburner - это один из немногих сервисов RSS потоков (лента новостей веб ресурса). У него есть много функций, но самыми главными являются подписка на рассылку по email и статистика подписок по RSS. Когда кто-то подпишется на ваш сайт через Feedburner, используя свою почту, он автоматически будет получать на эту же почту ваши последние публикации. Для начала работы в сервисе Feedburner вам нужно создать аккаунт в гугл. Вашим идентификатор в сервисе будет ваш логин. Этот логин нужно будет вставить в одной из форм, которую вы выберите.

    Где на сайте лучше всего разместить форму подписки?

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

    Установка формы подписки на сайт

    Что ж, теперь вы знаете, что и к чему, по-этому можем приступать к установке. Как упоминалось ранее в статье, всего есть два варианта формы. Первый с иконками соц. сетей, второй вариант по-проще без иконой. Как выглядит первый тип формы вы можете посмотреть на одном из наших шаблонов для blogger Inspire в нем форма установлена на страницах с постами, в конце публикаций.

    Чтобы формы отображались на ваших ресурсах сперва установите в своих HTML редакторах перед тегом </head> следующий код:

    <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
    <link href='//fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'/>

    Код первой формы.

     html форма подписки на сайт первый вариант

    Для первого варианта формы копируете и устанавливаете CSS код:

    #subscribebox{background:#576269;padding:20px;font-family:'PT Sans',sans-serif;}
    .widget_follow_subscribe .widget-detail{padding:36px 30px 40px}
    #subscribebox p{color:#fff;font-size:15px;text-align:center;font-weight:700}
    .follow-subscribe-social{margin:0 0 15px;padding:0 0 14px;border-bottom:#858585 solid 1px}
    .follow-subscribe-social ul{list-style:none;margin:0;padding:0;text-align:center}
    .follow-subscribe-social ul li{display:inline;margin:0 15px 0 0;border-bottom:none}
    .follow-subscribe-social ul li:last-child{margin:0}
    .follow-subscribe-social ul li a{font-size:17px;color:#cacaca;-webkit-transition:color .2s ease-in-out;-moz-transition:color .2s ease-in-out;-ms-transition:color .2s ease-in-out;-o-transition:color .2s ease-in-out;transition:color .2s ease-in-out}
    .follow-subscribe-social ul li a:hover{color:#fff}
    form.subscribe{margin-top:-7px}
    form.subscribe input{display:block;width:100%}
    .subscribe-email{height:45px;border:none;margin:0 0 10px;font-size:.928571em;background-color:rgba(255,255,255,0.2);text-align:center;color:#fff}
    .subscribe-email:focus{outline:0}
    form.subscribe .placeholder{color:#cacaca}
    form.subscribe input:-ms-input-placeholder{color:#cacaca}
    form.subscribe input::-webkit-input-placeholder{color:#cacaca}
    form.subscribe input:-moz-placeholder{color:#fafafa}
    form.subscribe input::-moz-placeholder{color:#fafafa}
    .subscribe-button{height:45px;font-weight:700;font-size:16px;color:#fff;text-transform:uppercase;border:none;background-color:#F35D5C;-webkit-transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out;-ms-transition:background-color .2s ease-in-out;-o-transition:background-color .2s ease-in-out;transition:background-color .2s ease-in-out}
    .subscribe-button:hover{background-color:#f1d640}
    .subscribe-button:focus{outline:0}
    .creadit a{color: #A7A6A6; float: right; font-size: 8px;}

    Сделали? Замечательно! Теперь завершающий этап для данного варианта формы. HTML код ниже, вставляете в том месте своего сайта в котором должна отображаться форма подписки. Вот и код:

    <div id="subscribebox">
    <div class="follow-subscribe-social">
    <ul>
    <li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>
    <li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
    <li><a href="#" target="_blank"><i class="fa fa-linkedin"></i></a></li>
    <li><a href="#" target="_blank"><i class="fa fa-google"></i></a></li>
    <li><a href="#" target="_blank"><i class="fa fa-pinterest-p"></i></a></li>
    <li><a href="#" target="_blank"><i class="fa fa-dribbble"></i></a></li>
    <li><a href="#" target="_blank"><i class="fa fa-instagram"></i></a></li>
    </ul>
    </div>
    <p>Subscribe to my Newsletter</p>
    <form class="subscribe" action='http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
    <input name='uri' type='hidden' value='YOUR-USER-NAME'/>
    <input name='loc' type='hidden' value='en_US'/>
    <input class="subscribe-email" type='text' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Your Email&quot;;}' onfocus='if (this.value == &quot;Your Email&quot;) {this.value = &quot;&quot;;}' value='Your Email'/>
    <input class="subscribe-button" type="submit" value="Subscribe" />
    </form>
    </div>
    <div class="creadit">
    <a href="http://msdesignbd.com" rel="dofollow" target="_blank"> Get This Widget</a></div>

    Поздравляю с установкой первого типа.

    Код второй формы.

     html форма подписки на сайт второй вариант

    Если второй тип формы понравился вам больше, тогда проделайте следующее. Скопируйте код CSS и установите его в своем редакторе. Код:

    #subscribe-box {background-color:#0CC388;font-family: 'PT Sans', sans-serif;}
    #subscribe-box p {font-size:22px;color:#fff;line-height:20px;padding:10px 20px 0 20px;margin:0;}
    #subscribe-box .emailfield {padding:0px 20px 10px;}
    #subscribe-box .emailfield input {background:#f9f9f9;color:#bbb;padding:10px;margin-top:10px;font-size:13px;width:91%;border:0;transition:all 0.4s ease-in-out;}
    #subscribe-box .emailfield input:focus {background:#fff;outline:none;color:#888;}
    #subscribe-box .emailfield .submitbutton {background:#444;color:#fff;text-transform:uppercase;font-weight:700;font-size:18px;font-family: 'PT Sans', sans-serif;;border:none;outline:none;width:100%;cursor:pointer;border-radius:3px;transition:all 0.4s ease-in-out;}
    #subscribe-box .emailfield .submitbutton:active {outline:none;border:none;background:#fff;color:#e25734;}
    #subscribe-box .emailfield .submitbutton:hover{background:#fff;color:#444;} 
    .creadit a{color: #A7A6A6; float: right; font-size: 8px

    HTML код для отображения формы вставляете там где она должна появиться на вашем сайте или блоге:

    <div id="subscribe-box">
    <center>
    Subscribe for our all latest news and updates</center>
    <div class="emailfield">
    <form action="http://feedburner.google.com/fb/a/mailverify?uri=USER-NAME" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=USER-NAME, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
    <input name="name" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Your Name&quot;;}" onfocus="if (this.value == &quot;Your Name&quot;) {this.value = &quot;&quot;;}" type="text" value="Your Name" />
    <input name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Your Email&quot;;}" onfocus="if (this.value == &quot;Your Email&quot;) {this.value = &quot;&quot;;}" type="text" value="Your Email" />
    <input name="uri" type="hidden" value="USER-NAME" />
    <input name="loc" type="hidden" value="en_US" />
    <input class="submitbutton" type="submit" value="Subscribe Now" />
    
    </form>
    </div>
    </div>
    <div class="creadit">
    <a href="http://msdesignbd.com/" rel="dofollow" target="_blank"> Get This Widget</a></div>

    Настройка форм.

    Настройка выполняется очень просто. В HTML коде везде где найдете фразу: YOUR-USER-NAME (для первого варианта формы) или просто: USER-NAME (для второго варианта формы) вставьте свой логин из сервиса Feedburner.

    Вот и все надеюсь эта статья, была полезной для вас, ну а формы подписки докажут свою пользу в дальнейшем. Если вы столкнулись с проблемой пишите в комментариях.

    Компрессор для сжатия CSS

    Компрессор для сжатия CSS

    Универсальный компрессор позволяющий сжимать CSS


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

    CSS сжатие

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

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

    Как работает компрессор:

    1. Супер сжатие - в итоге получаем плотный код
    2. Оставить отступы - в итоге получаем менее плотный код, компрессор сохраняет в конце каждого кода точку с запятой
    3. Удалить отступы - получаем код, как во втором варианте только без точки с запятой в конце каждого кода


    Адаптивный Lightbox на jquery

    адаптивный lightbox на jquery
    По идеи должен подходить для сайтов и блогов на любой платформе.

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

    Что такое Lightbox

    Lightbox - в переводе с английского означает светлая коробка или светлый ящик, в общем, что-то в этом роде. В веб-дизайне Lightbox отыгрывает роль подачи изображения. К примеру вы просматриваете статью в которой есть несколько изображений, если вы хотите посмотреть на это изображение в его полном размере вы, что делаете? Правильно кликаете по нему, и вот в это время когда оно открывается вместе с ним отрывается и Lightbox, который задает фон окна в котором появляется картинка и скажем так стиль появления этой картинки. К примеру сравните, как открывается изображения в разных лайтбоксах:

    1. Обычный Lightbox - кликнете по заглавной картинке поста
    2. Lightbox на jquery

    Правда эффект открывания изображения в Lightbox на jquery выглядит намного красивее нежели в обычном? Мне во всяком случае больше нравится второй вариант.

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

    Как добавить адаптивный Lightbox на jquery в свой блог или сайт


    Для тех у кого платформа blogger переходим в раздел Шаблон - Изменить HTML находим код ]]></b:skin> и перед ним вставляем следующий код:

    #jquery-overlay{position:absolute;top:0;left:0;z-index:90;width:100%;height:500px;}
    #jquery-lightbox{position:absolute;top:10%;left:0;width:100%;z-index:100;text-align:center;line-height:0;}
    #jquery-lightbox a,#jquery-lightbox a:hover{border:none;}
    #jquery-lightbox a img{border:none;}
    #lightbox-container-image-box{position:relative;background-color:#fff;max-width: 960px;max-height: 560px;margin:0 auto;}
    #lightbox-container-image{padding:10px;}
    img#lightbox-image {max-height: 540px;max-width: 940px;}
    #lightbox-loading{position:absolute;top:40%;left:0%;height:25%;width:100%;text-align:center;line-height:0;}
    #lightbox-nav{position:absolute;top:0;left:0;height:100%;width: 100%;z-index:10;}
    #lightbox-container-image-box &gt; #lightbox-nav{left:0;}
    #lightbox-nav a{outline:none;}
    #lightbox-nav-btnPrev,#lightbox-nav-btnNext{width:49%;height:100%;zoom:1;display:block;}
    #lightbox-nav-btnPrev{left:10%;float:left;}
    #lightbox-nav-btnNext{right:10%;float:right;}
    #lightbox-container-image-data-box{font:10px Verdana,Helvetica,sans-serif;background-color:#fff;margin:0 auto;line-height:1.4em;overflow:auto;max-width: 940px;;padding:0 10px 0;}
    #lightbox-container-image-data{padding:0 10px;color:#555;}
    #lightbox-container-image-data #lightbox-image-details{width:70%;float:left;text-align:left;}
    #lightbox-image-details-caption{font-weight:bold;}
    #lightbox-image-details-currentNumber{display:block;clear:left;padding-bottom:1.0em;}
    #lightbox-secNav-btnClose{width:66px;float:right;padding-bottom:0.7em;}
    
    @media (max-width:1200px){
    img#lightbox-image {height:100%;width:100%;}
    #lightbox-container-image-box{position:relative;background-color:#fff;width: 100% !important;height: 100% !important;margin:0 auto;}
    #lightbox-container-image-data-box{width:100% !important;}
    }

    Затем ищем код  </body> перед которым нужно вставить код:
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <script>
    (function(a){a.fn.lightBox=function(p){p=jQuery.extend({overlayBgColor:&quot;#000&quot;,overlayOpacity:0.9,fixedNavigation:false,imageLoading:&quot;http://3.bp.blogspot.com/-PhHW03ckcTo/Uxz2KObEXKI/AAAAAAAAGdc/yIlxeHoSGrQ/s1600/loading.gif&quot;,imageBtnPrev:&quot;http://3.bp.blogspot.com/-argbPLkMSYI/Uxz1cSp0BYI/AAAAAAAAGc8/CEVnfIEZcdA/s1600/prev-image.gif&quot;,imageBtnNext:&quot;http://2.bp.blogspot.com/-eKmHc8KcGhg/Uxz1lTM4CoI/AAAAAAAAGdE/aqs71cp-J4M/s1600/next-image.gif&quot;,imageBtnClose:&quot;http://3.bp.blogspot.com/-AaP8lP-PLP4/Uxz1wHeh-1I/AAAAAAAAGdM/B4g4ds7FSr8/s1600/close-image.gif&quot;,imageBlank:&quot;http://4.bp.blogspot.com/-YAyF8nlnzyM/Uxz1579tqvI/AAAAAAAAGdU/qYDLC_j3T6k/s1600/blank.gif&quot;,containerBorderSize:10,containerResizeSpeed:400,txtImage:&quot;Image&quot;,txtOf:&quot;of&quot;,keyToClose:&quot;c&quot;,keyToPrev:&quot;p&quot;,keyToNext:&quot;n&quot;,imageArray:[],activeImage:0},p);var i=this;function r(){o(this,i);return false}function o(v,u){a(&quot;embed, object, select&quot;).css({visibility:&quot;hidden&quot;});c();p.imageArray.length=0;p.activeImage=0;if(u.length==1){p.imageArray.push(new Array(v.getAttribute(&quot;href&quot;),v.getAttribute(&quot;title&quot;)))}else{for(var t=0;t&lt;u.length;t++){p.imageArray.push(new Array(u[t].getAttribute(&quot;href&quot;),u[t].getAttribute(&quot;title&quot;)))}}while(p.imageArray[p.activeImage][0]!=v.getAttribute(&quot;href&quot;)){p.activeImage++}l()}function c(){a(&quot;body&quot;).append(&#39;&lt;div id=&quot;jquery-overlay&quot;&gt;&lt;/div&gt;&lt;div id=&quot;jquery-lightbox&quot;&gt;&lt;div id=&quot;lightbox-container-image-box&quot;&gt;&lt;div id=&quot;lightbox-container-image&quot;&gt;&lt;img id=&quot;lightbox-image&quot;&gt;&lt;div style=&quot;&quot; id=&quot;lightbox-nav&quot;&gt;&lt;a href=&quot;#&quot; id=&quot;lightbox-nav-btnPrev&quot;&gt;&lt;/a&gt;&lt;a href=&quot;#&quot; id=&quot;lightbox-nav-btnNext&quot;&gt;&lt;/a&gt;&lt;/div&gt;&lt;div id=&quot;lightbox-loading&quot;&gt;&lt;a href=&quot;#&quot; id=&quot;lightbox-loading-link&quot;&gt;&lt;img src=&quot;&#39;+p.imageLoading+&#39;&quot;&gt;&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div id=&quot;lightbox-container-image-data-box&quot;&gt;&lt;div id=&quot;lightbox-container-image-data&quot;&gt;&lt;div id=&quot;lightbox-image-details&quot;&gt;&lt;span id=&quot;lightbox-image-details-caption&quot;&gt;&lt;/span&gt;&lt;span id=&quot;lightbox-image-details-currentNumber&quot;&gt;&lt;/span&gt;&lt;/div&gt;&lt;div id=&quot;lightbox-secNav&quot;&gt;&lt;a href=&quot;#&quot; id=&quot;lightbox-secNav-btnClose&quot;&gt;&lt;img src=&quot;&#39;+p.imageBtnClose+&#39;&quot;&gt;&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&#39;);var t=f();a(&quot;#jquery-overlay&quot;).css({backgroundColor:p.overlayBgColor,opacity:p.overlayOpacity,width:t[0],height:t[1]}).fadeIn();var u=h();a(&quot;#jquery-lightbox&quot;).css({top:u[1]+(t[3]/10),left:u[0]}).show();a(&quot;#jquery-overlay,#jquery-lightbox&quot;).click(function(){b()});a(&quot;#lightbox-loading-link,#lightbox-secNav-btnClose&quot;).click(function(){b();return false});a(window).resize(function(){var v=f();a(&quot;#jquery-overlay&quot;).css({width:v[0],height:v[1]});var w=h();a(&quot;#jquery-lightbox&quot;).css({top:w[1]+(v[3]/10),left:w[0]})})}function l(){a(&quot;#lightbox-loading&quot;).show();if(p.fixedNavigation){a(&quot;#lightbox-image,#lightbox-container-image-data-box,#lightbox-image-details-currentNumber&quot;).hide()}else{a(&quot;#lightbox-image,#lightbox-nav,#lightbox-nav-btnPrev,#lightbox-nav-btnNext,#lightbox-container-image-data-box,#lightbox-image-details-currentNumber&quot;).hide()}var t=new Image();t.onload=function(){a(&quot;#lightbox-image&quot;).attr(&quot;src&quot;,p.imageArray[p.activeImage][0]);j(t.width,t.height);t.onload=function(){}};t.src=p.imageArray[p.activeImage][0]}function j(w,z){var t=a(&quot;#lightbox-container-image-box&quot;).width();var y=a(&quot;#lightbox-container-image-box&quot;).height();var x=(w+(p.containerBorderSize*2));var v=(z+(p.containerBorderSize*2));var u=t-x;var A=y-v;a(&quot;#lightbox-container-image-box&quot;).animate({width:x,height:v},p.containerResizeSpeed,function(){g()});if((u==0)&amp;&amp;(A==0)){if(a.browser.msie){n(250)}else{n(100)}}a(&quot;#lightbox-container-image-data-box&quot;).css({width:w});a(&quot;#lightbox-nav-btnPrev,#lightbox-nav-btnNext&quot;).css({height:z+(p.containerBorderSize*2)})}function g(){a(&quot;#lightbox-loading&quot;).hide();a(&quot;#lightbox-image&quot;).fadeIn(function(){k();s()});q()}function k(){a(&quot;#lightbox-container-image-data-box&quot;).slideDown(&quot;fast&quot;);a(&quot;#lightbox-image-details-caption&quot;).hide();if(p.imageArray[p.activeImage][1]){a(&quot;#lightbox-image-details-caption&quot;).html(p.imageArray[p.activeImage][1]).show()}if(p.imageArray.length&gt;1){a(&quot;#lightbox-image-details-currentNumber&quot;).html(p.txtImage+&quot; &quot;+(p.activeImage+1)+&quot; &quot;+p.txtOf+&quot; &quot;+p.imageArray.length).show()}}function s(){a(&quot;#lightbox-nav&quot;).show();a(&quot;#lightbox-nav-btnPrev,#lightbox-nav-btnNext&quot;).css({background:&quot;transparent url(&quot;+p.imageBlank+&quot;) no-repeat&quot;});if(p.activeImage!=0){if(p.fixedNavigation){a(&quot;#lightbox-nav-btnPrev&quot;).css({background:&quot;url(&quot;+p.imageBtnPrev+&quot;) left 15% no-repeat&quot;}).unbind().bind(&quot;click&quot;,function(){p.activeImage=p.activeImage-1;l();return false})}else{a(&quot;#lightbox-nav-btnPrev&quot;).unbind().hover(function(){a(this).css({background:&quot;url(&quot;+p.imageBtnPrev+&quot;) left 15% no-repeat&quot;})},function(){a(this).css({background:&quot;transparent url(&quot;+p.imageBlank+&quot;) no-repeat&quot;})}).show().bind(&quot;click&quot;,function(){p.activeImage=p.activeImage-1;l();return false})}}if(p.activeImage!=(p.imageArray.length-1)){if(p.fixedNavigation){a(&quot;#lightbox-nav-btnNext&quot;).css({background:&quot;url(&quot;+p.imageBtnNext+&quot;) right 15% no-repeat&quot;}).unbind().bind(&quot;click&quot;,function(){p.activeImage=p.activeImage+1;l();return false})}else{a(&quot;#lightbox-nav-btnNext&quot;).unbind().hover(function(){a(this).css({background:&quot;url(&quot;+p.imageBtnNext+&quot;) right 15% no-repeat&quot;})},function(){a(this).css({background:&quot;transparent url(&quot;+p.imageBlank+&quot;) no-repeat&quot;})}).show().bind(&quot;click&quot;,function(){p.activeImage=p.activeImage+1;l();return false})}}m()}function m(){a(document).keydown(function(t){d(t)})}function e(){a(document).unbind()}function d(t){if(t==null){keycode=event.keyCode;escapeKey=27}else{keycode=t.keyCode;escapeKey=t.DOM_VK_ESCAPE}key=String.fromCharCode(keycode).toLowerCase();if((key==p.keyToClose)||(key==&quot;x&quot;)||(keycode==escapeKey)){b()}if((key==p.keyToPrev)||(keycode==37)){if(p.activeImage!=0){p.activeImage=p.activeImage-1;l();e()}}if((key==p.keyToNext)||(keycode==39)){if(p.activeImage!=(p.imageArray.length-1)){p.activeImage=p.activeImage+1;l();e()}}}function q(){if((p.imageArray.length-1)&gt;p.activeImage){objNext=new Image();objNext.src=p.imageArray[p.activeImage+1][0]}if(p.activeImage&gt;0){objPrev=new Image();objPrev.src=p.imageArray[p.activeImage-1][0]}}function b(){a(&quot;#jquery-lightbox&quot;).remove();a(&quot;#jquery-overlay&quot;).fadeOut(function(){a(&quot;#jquery-overlay&quot;).remove()});a(&quot;embed, object, select&quot;).css({visibility:&quot;visible&quot;})}function f(){var v,t;if(window.innerHeight&amp;&amp;window.scrollMaxY){v=window.innerWidth+window.scrollMaxX;t=window.innerHeight+window.scrollMaxY}else{if(document.body.scrollHeight&gt;document.body.offsetHeight){v=document.body.scrollWidth;t=document.body.scrollHeight}else{v=document.body.offsetWidth;t=document.body.offsetHeight}}var u,w;if(self.innerHeight){if(document.documentElement.clientWidth){u=document.documentElement.clientWidth}else{u=self.innerWidth}w=self.innerHeight}else{if(document.documentElement&amp;&amp;document.documentElement.clientHeight){u=document.documentElement.clientWidth;w=document.documentElement.clientHeight}else{if(document.body){u=document.body.clientWidth;w=document.body.clientHeight}}}if(t&lt;w){pageHeight=w}else{pageHeight=t}if(v&lt;u){pageWidth=v}else{pageWidth=u}arrayPageSize=new Array(pageWidth,pageHeight,u,w);return arrayPageSize}function h(){var u,t;if(self.pageYOffset){t=self.pageYOffset;u=self.pageXOffset}else{if(document.documentElement&amp;&amp;document.documentElement.scrollTop){t=document.documentElement.scrollTop;u=document.documentElement.scrollLeft}else{if(document.body){t=document.body.scrollTop;u=document.body.scrollLeft}}}arrayPageScroll=new Array(u,t);return arrayPageScroll}function n(v){var u=new Date();t=null;do{var t=new Date()}while(t-u&lt;v)}return this.unbind(&quot;click&quot;).click(r)}})(jQuery);
    $(document).ready(function(){
    $(&#39;a[href$=jpg]:has(img)&#39;).lightBox();
    $(&#39;a[href$=jpeg]:has(img)&#39;).lightBox();
    $(&#39;a[href$=png]:has(img)&#39;).lightBox();
    $(&#39;a[href$=gif]:has(img)&#39;).lightBox();
    $(&#39;a[href$=bmp]:has(img)&#39;).lightBox();
    });
    </script>
    </b:if>

    Затем сохраняете шаблон. Теперь в настройках нам нужно отключить lightbox, для этого переходим в раздел - Настройки - Сообщения и комментарии. В появившемся окне напротив строки:  
    • Показывать изображения в Lightbox ?
    Переключаете на Нет и сохраняете настройки вверху с правой стороны. На картинке ниже указано, как это сделать.

    отключить lightbox blogger

    Вот и все, теперь можете радоваться новому Lightbox на jquery.


    Палитра цветов html

    HTML генератор палитры цветов html

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

    1 вариант









    2 вариант
    • #5C97BF
    • #4B77BE
    • #1F3A93
    • #2574A9
    • #67809F
    • #34495E
    • #3A539B
    • #1E8BC3
    • #6BB9F0
    • #22313F
    • #336E7B
    • #19B5FE
    • #89C4F4
    • #2C3E50
    • #3498DB
    • #22A7F0
    • #94E0EE
    • #52B3D9
    • #59ABE3
    • #26A65B
    • #1E824C
    • #00B16A
    • #2ABB9B
    • #4DAF7C
    • #03A678
    • #26C281
    • #019875
    • #3FC380
    • #16A085
    • #2ECC71
    • #C5EFF7
    • #C8F7C5
    • #049372
    • #36D7B7
    • #66CC99
    • #1BA39C
    • #1BBC9B
    • #65C6BB
    • #BFBFBF
    • #ABB7B7
    • #DADFE1
    • #95A5A6
    • #C5DCE2
    • #BDC3C7
    • #EEEEEE
    • #D2D7D3
    • #F0E2C5
    • #EB9532
    • #E67E22
    • #F27935
    • #F9BF3B
    • #F7CA18
    • #F9690E
    • #F39C12
    • #D35400
    • #F4D03F
    • #F5AB35
    • #EB974E
    • #F2784B
    • #F4B350
    • #E87E04
    • #E74C3C
    • #CF000F
    • #C0392B
    • #D64541
    • #EF4836
    • #96281B
    • #D91E18
    • #E26A6A
    • #FF0000
    • #F22613
    • #E08283
    • #9B59B6
    • #8E44AD
    • #BE90D4
    • #BF55EC
    • #9A12B3
    • #913D88
    • #722D6A
    • #740A4E