Blogger стильный виджет популярные сообщения


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

В панели управления зайти в раздел Шаблон - Изменить HTML здесь ищем CSS код нашей стандартной версии виджета популярных сообщений, для этого жмете клавиши CTRL+F в поисковом окошке пишите Popular post и найденный код написанный синим цветом естественно относящийся к виджету удаляете. Затем ищем код ]]></b:skin> перед которым вставляем следующий код:

/* Popular Posts */
.PopularPosts .item-thumbnail{float:none;margin:0 0 10px}
.PopularPosts .item-title{background:rgba(0,0,0,0.5);position:absolute;display:block;clear:both;z-index:50;top:0;left:0;right:0;bottom:0;padding:15px;transition:all .4s;}
.PopularPosts .item-title:hover{background:rgba(0,0,0,.2)}
.PopularPosts .item-title a{color:rgba(255,255,255,0);font-weight:700;font-size:100%;text-shadow:0 0 5px rgba(0,0,0,0)}
.PopularPosts .item-title:hover a,.PopularPosts .item-title a:hover{color:rgba(255,255,255,1);text-shadow:0 0 5px rgba(0,0,0,.3)}
.PopularPosts .widget-content ul li img{translate(0,0) scale(1.0);transition:all .8s linear}
.PopularPosts .widget-content ul li:hover img{transform:translate(0,-20px) scale(1.05);transition:all 3.6s linear;}
.PopularPosts img{display:block;height:auto;width:100%;padding:0;backface-visibility:hidden;}
.PopularPosts .item-snippet{display:none;}
.PopularPosts ul li .item-content{position:relative;overflow:hidden;}
.PopularPosts ul{padding:0;line-height:normal;counter-reset:count;}
.PopularPosts .widget-content ul li{position:relative;padding:10px 0;overflow:hidden;max-height:100px;transition:all .4s;}
.PopularPosts .widget-content ul li:before{color:#fff;counter-increment:count;content:counter(count);position:absolute;right:-15px;top:-5px;font:bold 80px/1 Sans-Serif;z-index:51;transition:all .4s;}
.PopularPosts .widget-content ul li:hover:before{right:-55px;}
.PopularPosts ul li:nth-child(1) .item-title {background:rgba(221,25,29,0.5);}
.PopularPosts ul li:nth-child(2) .item-title {background:rgba(141,187,144,0.5);}
.PopularPosts ul li:nth-child(3) .item-title {background:rgba(39,169,255,0.5);}
.PopularPosts ul li:nth-child(4) .item-title {background:rgba(192,202,51,0.5);}
.PopularPosts ul li:nth-child(5) .item-title {background:rgba(26,35,126,0.5);}
.PopularPosts ul li:nth-child(6) .item-title {background:rgba(0,188,212,0.5);}
.PopularPosts ul li:nth-child(1) .item-title:hover,.PopularPosts ul li:nth-child(2) .item-title:hover,.PopularPosts ul li:nth-child(3) .item-title:hover,.PopularPosts ul li:nth-child(4) .item-title:hover,.PopularPosts ul li:nth-child(5) .item-title:hover,.PopularPosts ul li:nth-child(6) .item-title:hover{background:rgba(0,0,0,0.2);}

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

Дальше ищем код </body> перед которым нужно вставить следующий код:

<script type='text/javascript'>
// Popular Post Thumb
$(document).ready(function() {$(&#39;.PopularPosts img&#39;).attr(&#39;src&#39;, function(i, src) {return src.replace( &#39;s72-c&#39;, &#39;s400&#39; );});});
//<![CDATA[
// Custom Popular Post
$(".popular-posts ul li .item-snippet").each(function(){var t=$(this).text().substr(0,120),s=t.lastIndexOf(" ");s>10&&$(this).text(t.substr(0,s).replace(/[?,!\.-:;]*$/,"..."))});
//]]>
</script>

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

Как подключить платный домен к блогу на Blogger

Подключаем персональный домен для Blogger

Сегодня вы узнаете, как подключить домен к сайту.
Эх, понедельник, чудесные выходные позади и пора браться за работу. Хотя для кого-то эти выходные и не были сказочными, для меня так точно. В общем нам уже поднадоело, что яндекс в упор не видит нашего сайта и мы с коллегой решили подключить собственный домен. Пока что выбрали домен в зоне ru, а там посмотрим. Впрочем этим решил заняться я один, поскольку до этого я не практиковал эти "инновации" в отличии от своего напарника. По-этому я попросил его не помогать мне о чем и жалею и нет. Жалею потому что ушло у меня много времени, чтобы понять, что да как, начитался много нужной и ненужной информации, потратил немало нервов. И вроде бы вот уже новый домен работает, я довольный, но усталый и тут через пять минут та же картина, после чего захотелось пойти отбить своему шкафу пару почек. Но я сделал еще несколько попыток настроить этот безжалостный домен подождал денек и все заработало.

Теперь давайте поговорим о том, почему лучше иметь собственный домен. Ну во-первых это показывает серьезность ваших намерений, как для все тех же поисковиков так и для ваших посетителей и клиентов, которые пользуются услугами вашего сайта - блога. Во-вторых поисковики, не любят сайты и блоги с бесплатными доменами, поскольку считают, что они создаются для спама и прочей ненужной лабуды. Особенную "любовь" к ним проявляет Яндекс, который и вовсе забивает на них своим большим и толстым роботом, особенно худо стало после того, как google подключил для blogger региональный редирект. Допустим вы создали блог с адресом    https://название.blogspot.com/ но, если к вам будут заходить пользователи с других стран, тогда com меняется на адресную зону домена посетителя этой страны tr, es, ru и т.д., что есть не хорошо для наших сайтов и блогов. К примеру, если кто-то хочет поделиться такой ссылкой с вашего блога на своем сайте или блоге в таком случае вашему ресурсу это не принесет никакой пользы, ну разве что новых посетителей, ваш тиц и pr останутся прежними. Второе сканирующий робот яндекса постоянно перенаправляется с вашего домена на эти зеркала и по-этому он принимает ваш блог, как такой, который дублирует контент, все то, что вы пишите своими ручками и своим умом катится в тартарары. Единственное облегчение, это то, что робот гугла ходит по прежнему маршруту, хотя порой мы так же замечали свои статьи в гугле под другими доменными зонами. Помню свой первый бесплатный блог, который я создал в 2013 году, был на футбольную тематику. Я отдавал ему все свое свободное время, очень много писал уникальных новостей и статей. И на тот момент гугл уже ввел региональный редирект, но порой у меня было больше посетителей именно с яндекса. Такое соотношение держалось до 2014 года и только потом яндекс начал выбрасывать мои страницы. Впрочем этот блог и теперь занимает высокие позиции, как в яндексе так и в гугле, конечно уже не те, что были и посещаемость не та, но все же я давно на него забил. Так же хорошо иметь свой домен на случай , если ваш блог забанит гугл, в таком случае вы можете заново создать аккаунт, создать новый блог закинуть туда свои статьи, которые вы сохраняли до этого, установить прежний шаблон и подключить свой домен. При таком варианте ваш блог быстро вернет свои позиции. А если у вас будет бесплатный домен, тогда начинай все с начала.

Вот такие у нас пироги, так что лучше потратить раз в год от 1.5 до 20 долларов и забыть о всех мучениях.

Свой домен мы брали на сайте Reghouse. Выбрали именно этот сервис потому что, перед тем, как купить у них домен, мы облазили кучу сайтов и форумов, где наблюдали, только положительные отзывы. Да и цены у них более чем доступные, за свой домен мы заплатили 89 рублей, чтобы продлить его через год нужно будет заплатить 99 рублей. 

Итак начинается самое интересное, покупка и парковка домена на своем блоге в blogger. После того, как вы зарегистрируете свой домен на Reghouse вам нужно будет перейти в раздел Домены - кликнуть по иконке MXA
1) Смотрите в таблице Тип записи где стоит A удаляете такие записи (у меня их было две).
2) Затем вверху находите Тип записи для добавления.
3) Выбираете в списке CNAME, в строке Хост вводите www, а в строке Значение ghs.google.com. (точка в конце com должна быть обязательно) жмете кнопку Добавить запись.

Затем, вам нужно будет создать еще четыре записи только в списке выбираете уже не CNAME, а А. Строку Хост оставляете пустой (не нужно писать www) а в строке Значение добавляете следующие IP адреса (по одному IP для каждой записи):
216.239.32.21
216.239.34.21
216.239.36.21
216.239.38.21

Эти IP связывают ваш Домен с сервером гугла.
Вот, что у вас должно выйти в конечном итоге (без записи TXT к ней еще дойдем):

Итак, первый шаг мы сделали, все настройки домена для работы с blogger осуществлены. Дальше нам нужно подтвердит право собственности на наш домен иначе blogger не подключит его. Для этого лучше всего зайти в google webmaster tools вверху справа кликнуть по кнопке Добавить новый ресурс и в появившейся строке вводим название нового домена www.название.ru (вводим с www) и кликаете продолжить. В новой странице переходите на вкладку Альтернативные способы, выбираете Провайдер доменных имен - Выберите регистратора домена или провайдера, идем по списку вниз и выбираем Другое, после чего вам будет предложено добавить TXT-запись в конфигурацию DNS. У меня она была такой:
google-site-verification=qVevKdwrCMb6X0GByhed1Z5h6Wibh89KOV5kdTA598Q
вы копируете свою.

После того, как скопируете ее возвращаетесь на сайт Reghouse в тоже самое меню MXA и создаете запись TXT в которой строку Хост оставляете пустой, а в строку Значение вставляете ту запись которую вы скопировали в google webmaster tools. Жмете добавить запись.

Теперь нужно подождать два-три часа, пока гугл проверит ваши права. После заходим в панель управления blogger в раздел Настройки - Основное, ищем ссылку Использовать персональный домен кликаем по ней и в появившейся строке вводим новый адрес
www. название.ru (обязательно с www) и жмете Сохранить. Если введете название без www блогер не примет его поскольку по их правилам запрещено размещать блог в доменах второго уровня. Если гугл проверил и подтвердил ваши права на домен, ваш новый домен добавиться без проблем, если этого не произошло вы увидите ошибку: Невозможно проверить ваши права на домен. В таком случае либо гугл еще не проверил их либо вы, что-то сделали неправильно.

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

Иначе пользователи не смогут попасть на ваш блог, если не допишут перед названием www. А с этой функцией их автоматически будет перенаправлять с название.ru на www.название.ru

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

Надеемся наши инструкции помогли вам подключить собственный домен. Да, немало времени ушло на ее написание, еще недавно было утро, теперь нужно идти обедать, ладно приятного всем аппетита). Удачи!    

Blogger - выпадающее меню для блога.


Снова здравствуйте. Недавно гулял по просторам интернета и забрел на парочку интересных сайтов на одном из которых увидел прекрасный виджет главного меню, так же известного, как меню навигации, которое обеспечивает вашем посетителям более удобное пользование блогом. Как многие из вас знают меню позволяет пользователям найти точное содержание того, что они ищут на сайте осуществляя переходы через ячейки меню, в которых заданы конкретные категории. Не так давно шаблоны blogger начали меняться, их стали делать так, чтобы они так же хорошо отображали все свои элементы не только на компьютерах, но и на мобильных телефонах, чтобы с легкостью перемещаться по сайту. Так что, если вы ищете для своего блога меню под мобильные устройства, вы попали по нужному адресу. Сегодня в этой статье мы покажем вам, как можно легко добавить на свой блог Mobile Responsive Multi Dropdown Menu. Для устройств с разными расширениями дисплея это меню будет отображаться по разному. Чем меньше расширение, тем компактнее оно будет выглядеть. Чтобы увидеть наше главное меню в действии, перейдите на наш тестовый блог.

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

nav {
    display: block;
    margin-top: 100px;
    background: #374147;
}

.menu {
    display: block;
}

.menu li {
    display: inline-block;
    position: relative;
    z-index: 100;
}

.menu li:first-child {
    margin-left: 0;
}

.menu li a {
    font-weight: 600;
    text-decoration: none;
    padding: 20px 15px;
    display: block;
    color: #fff;
    transition: all 0.2s ease-in-out 0s;
}

.menu li a:hover,.menu li:hover>a {
    color: #fff;
    background: #9ca3da;
}

.menu ul {
    visibility: hidden;
    opacity: 0;
    margin: 0;
    padding: 0;
    width: 150px;
    position: absolute;
    left: 0px;
    background: #fff;
    z-index: 99;
    transform: translate(0,20px);
    transition: all 0.2s ease-out;
}

.menu ul:after {
    bottom: 100%;
    left: 20%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #fff;
    border-width: 6px;
    margin-left: -6px;
}

.menu ul li {
    display: block;
    float: none;
    background: none;
    margin: 0;
    padding: 0;
}

.menu ul li a {
    font-size: 12px;
    font-weight: normal;
    display: block;
    color: #797979;
    background: #fff;
}

.menu ul li a:hover,.menu ul li:hover>a {
    background: #9ca3da;
    color: #fff;
}

.menu li:hover>ul {
    visibility: visible;
    opacity: 1;
    transform: translate(0,0);
}

.menu ul ul {
    left: 149px;
    top: 0px;
    visibility: hidden;
    opacity: 0;
    transform: translate(20px,20px);
    transition: all 0.2s ease-out;
}

.menu ul ul:after {
    left: -6px;
    top: 10%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0);
    border-right-color: #fff;
    border-width: 6px;
    margin-top: -6px;
}

.menu li>ul ul:hover {
    visibility: visible;
    opacity: 1;
    transform: translate(0,0);
}

.responsive-menu {
    display: none;
    width: 100%;
    padding: 20px 15px;
    background: #374147;
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
}

.responsive-menu:hover {
    background: #374147;
    color: #fff;
    text-decoration: none;
}

a.homer {
    background: #9ca3da;
}

@media (min-width: 768px) and (max-width: 979px) {
    .mainWrap {
        width: 768px;
    }

    .menu ul {
        top: 37px;
    }

    .menu li a {
        font-size: 12px;
    }

    a.homer {
        background: #374147;
    }
}

@media (max-width: 767px) {
    .mainWrap {
        width: auto;
        padding: 50px 20px;
    }

    .menu {
        display: none;
    }

    .responsive-menu {
        display: block;
        margin-top: 100px;
    }

    nav {
        margin: 0;
        background: none;
    }

    .menu li {
        display: block;
        margin: 0;
    }

    .menu li a {
        background: #fff;
        color: #797979;
    }

    .menu li a:hover,.menu li:hover>a {
        background: #9ca3da;
        color: #fff;
    }

    .menu ul {
        visibility: hidden;
        opacity: 0;
        top: 0;
        left: 0;
        width: 100%;
        transform: initial;
    }

    .menu li:hover>ul {
        visibility: visible;
        opacity: 1;
        position: relative;
        transform: initial;
    }

    .menu ul ul {
        left: 0;
        transform: initial;
    }

    .menu li>ul ul:hover {
        transform: initial;
    }
}

@media (max-width: 480px) {
}

@media (max-width: 320px) {
}

Затем находим код </body> перед которым нужно добавить следующий код:

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){ 
 var touch  = $('#resp-menu');
 var menu  = $('.menu');
 
 $(touch).on('click', function(e) {
  e.preventDefault();
  menu.slideToggle();
 });
 
 $(window).resize(function(){
  var w = $(window).width();
  if(w > 767 && menu.is(':hidden')) {
   menu.removeAttr('style');
  }
 });
 
});
//]]>
</script>

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

<nav>
<a id="resp-menu" class="responsive-menu" href="#"><i class="fa fa-reorder"></i> Menu</a>    
   <ul class="menu">
   <li><a class="homer" href="#"><i class="fa fa-home"></i> HOME</a>
   <ul class="sub-menu">
   <li><a href="#">Sub-Menu 1</a></li>
   <li><a href="#">Sub-Menu 2</a></li>
   <li><a href="#">Sub-Menu 3</a></li>
   <li><a href="#">Sub-Menu 4</a></li>
   <li><a href="#">Sub-Menu 5</a></li>   
   </ul>
   </li>
  <li><a  href="#"><i class="fa fa-user"></i> ABOUT</a></li>
  <li><a  href="#"><i class="fa fa-camera"></i> PORTFOLIO</a>
  <ul class="sub-menu">
   <li><a href="#">Sub-Menu 1</a></li>
   <li><a href="#">Sub-Menu 2</a>
    <ul>
    <li><a href="#">Sub Sub-Menu 1</a></li>
    <li><a href="#">Sub Sub-Menu 2</a></li>
 <li><a href="#">Sub Sub-Menu 3</a></li>
    <li><a href="#">Sub Sub-Menu 4</a></li>
 <li><a href="#">Sub Sub-Menu 5</a></li> 
    </ul>
   </li>
     <li><a href="#">Sub-Menu 3</a>
    <ul>
    <li><a href="#">Sub Sub-Menu 1</a></li>
    <li><a href="#">Sub Sub-Menu 2</a></li>
 <li><a href="#">Sub Sub-Menu 3</a></li>
    <li><a href="#">Sub Sub-Menu 4</a></li>
 <li><a href="#">Sub Sub-Menu 5</a></li> 
    </ul>
   </li>
   </ul>
  </li>
  <li><a  href="#"><i class="fa fa-bullhorn"></i> BLOG</a></li>
    <li><a  href="#"><i class="fa fa-tags"></i> CATEGORIES</a>
  <ul class="sub-menu">
   <li><a href="#">Sub-Menu 1</a></li>
   <li><a href="#">Sub-Menu 2</a>
    <ul>
    <li><a href="#">Sub Sub-Menu 1</a></li>
    <li><a href="#">Sub Sub-Menu 2</a></li>
 <li><a href="#">Sub Sub-Menu 3</a></li>
    <li><a href="#">Sub Sub-Menu 4</a></li>
 <li><a href="#">Sub Sub-Menu 5</a></li> 
    </ul>
   </li>
     <li><a href="#">Sub-Menu 3</a>
    <ul>
    <li><a href="#">Sub Sub-Menu 1</a></li>
    <li><a href="#">Sub Sub-Menu 2</a></li>
 <li><a href="#">Sub Sub-Menu 3</a></li>
    <li><a href="#">Sub Sub-Menu 4</a></li>
 <li><a href="#">Sub Sub-Menu 5</a></li> 
    </ul>
   </li>
   </ul>
  </li>
  <li><a  href="#"><i class="fa fa-envelope"></i> CONTACT</a></li>
  <li><a  href="#"><i class="fa fa-sitemap"></i> SITEMAP</a></li>
  <li><a  href="#"><i class="fa fa-exclamation-triangle"></i> DISCLAIMER</a></li>
  </ul>
  </nav>

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

Blogger - no image available - исчезли картинки.


Всем доброго утра. Вчера после добавленной статьи я думал уже над следующей темой, что же можно записать для своих читателей одновременно полезного и интересного. И тут я вспомнил, как на одном из зарубежных форумов многие ребята жаловались на то, что в их блогах некоторые виджеты, а так же и сообщения на главной странице не отображают заданные им картинки. В общем беда еще та. После того, как мы тщательно осмотрели эти блоги и сравнили их посты мы заметили одну небольшую разницу между ними, которая заключалась в написании протокола HTTP. В основном такая проблема возникает у зарубежных шаблонах blogger. И чтобы ее устранить вам нужно зайти в раздел Сообщения там выбрать то сообщение, которое нужно отредактировать, перейти из вкладки Создать во вкладку HTML и в строке кода изображения изменить с HTTP на HTTPS. После проделанной процедуры все должно вернуться на свои места. Надеемся, что эта статья была для вас полезной. Если возникнут вопросы, задавайте их в комментариях ниже. Ну, а мы будем думать дальше, над тем, какие же еще полезные темы опубликовать.

Blogger - спойлер для блога.


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

Итак для того, чтобы добавить спойлер вам нужно открыть в панели управления раздел Шаблон - Изменить HTML найти код  ]]></b:skin> и перед ним вставить следующий код:
#flippy {
    text-align: center;
}
#flippy button {
    background: #4DB2EC;
    color: #fff;
    text-align: center;
    margin: 0 auto;
    border: none;
    border-radius: 3px;
    padding: 8px 16px;
    margin: 10px auto;
    font-size: 14px;
    font-weight: bold;
    vertical-align: middle;
    cursor: pointer;
    text-shadow: 0 1px rgba(0, 0, 0, 0.3);
    transition: background 0.1s ease-in-out;
}
#flippy button:hover, #flippy button:focus {
    background: #5A6269;
    outline: none;
}
#flippanel {
    padding: 1px;
    text-align: left;
    background: #;
    border: 0px;
}
#flippanel {
    padding: 24px;
    display: none;
}


Затем сохраняете шаблон и при создании поста для добавления спойлера используем следующий код:
 
<div id="flippy"><button>Спойлер</button></div>
<div id="flippanel">
Здесь должен быть ваш контент
</div>

Добавили код опубликовали пост и проверяем, что у нас вышло. Теперь для вас не составит труда спрятать ту часть поста, которая не совсем вписывается в его интерьер.

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

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

<div><input value="Показать содержимое" onclick="if(this.parentNode.getElementsByTagName('div')[0].style.display != ''){this.parentNode.getElementsByTagName('div')[0].style.display = '';this.value = 'Скрыть содержимое';}else{this.parentNode.getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Показать содержимое';}" type="button" /><div style="display: none;">Вставьте сюда контент, который нужно спрятать</div></div>

Вроде бы все.

Blogger, как разделить текст сообщения на колонки?

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

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

.cronos
{
   -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
}

Сохраняете шаблон и после того, как напишите статью переключаете с режима Создать на HTML перед началом текста вставляете <div class='cronos'> и по идеи надо было бы в конце текста дописать закрывающий тег div но вместо нас это сделает редактор, вам нужно вернуться в режим Создать и нажать кнопку Публикация. Вот и все, идем на наш блог и проверяем результат. Все очень легко и просто.

Vanesa шаблон blogger на русском языке




Вот уже около двух недель мы не подкидывали ничего новенького и вот наконец созрел новый шаблон для blogger - Vanesa. Вообще довольно забавная история вышла с этим шаблоном. Мы, как обычно настроились обработать новый материал, вот только нас ожидал небольшой сюрприз, вместо одного шаблона нам почему-то попался совершенно иной. Мы присмотрелись к нему более внимательно, провели диагностику и решили уже не искать первоначальный шаблон, а взять в раскрутку именно Ванесу. И знаете мы не зря это сделали. Было потрачено не мало часов времени, усилий, стараний и вот пришло время оценить  результат. Лично нас он очень порадовал, потому что из шаблона вышла просто конфетка.

Давайте теперь почитаем, что о нем пишет разработчик. Vanesa - это опрятный и элегантный шаблон, с большим уклоном на содержание вашего блога, который обладает массой различных функций и множеством способов, чтобы демонстрировать ваш контент. Кроме того обладает большим преимуществом поскольку создан по новым технологиям. Все его элементы сливаются и работают воедино, чтобы вы могли почувствовать всю его красоту глядя на него с  экрана любого размера. Структура Ванесы делает легким нахождение и дифференциацию всех элементов. Шаблон идеально подходит для тех вебмастеров и блогеров, которые хотят выделиться. По поводу тематики - этот шаблон может легко подстроится под тематику Hi-tech, автомобили, вело и мото, рыбалка, охота, литература, бизнес (форекс, недвижимость, финансы) природа (домашние и дикие животные) домашний интерьер, мода и красота, новостная тематика и прочее.

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

Демо
Приобрести шаблон полная SEO версия

Blogger, устанавливаем стильные кнопки Демо и Скачать


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

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


Ну как, посмотрели? Понравилось? Тогда мы приступаем. 
Итак для установки нужно в разделе Шаблон - Изменить HTML после <head>  вставить следующий код:

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

Затем ищем ]]></b:skin> перед которым вставляем:

.whitebutton {
    margin: 20px auto;
    padding: 20px 0;
    width: 200px;
}

.whitebutton a {
    background: #fff;
    color: #666;
    display: block;
    font-size: 17px;
    font-weight: 700;
    font-family: 'Arial',Verdana,sans-serif;
    height: 50px;
    line-height: 50px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 200px;
    position: relative;
    z-index: 2;
}

.whitebutton a:before {
    content: '\f019';
    font-family: FontAwesome;
    font-weight: normal;
    padding: 8px;
    margin-left: -12px;
    margin-right: 6px;
}

.whitebutton span {
    background: #444;
    color: #fff;
    display: block;
    font-size: 12px;
    font-family: 'Arial', Verdana,sans-serif;
    height: 40px;
    line-height: 40px;
    text-align: center;
    width: 200px;
    z-index: 1;
    text-transform: uppercase;
    font-weight: bold;
}

.whitebutton .up {
    background: #e25734;
    margin: -25px auto;
    opacity: 0;
    border-radius: 0 0 5px 5px;
    transform: translate(0,-50px);
    transition: 350ms;
}

.whitebutton .down {
    margin: -30px auto;
    opacity: 0;
    border-radius: 5px 5px 0 0;
    transform: translate(0,-50px);
    transition: 350ms;
}

.whitebutton .down:before {
    content:'\f14a';
    font-family: FontAwesome;
    font-weight: normal;
    margin-right: 6px;
    color: #aaa;
}

.whitebutton:hover .up {
    opacity: 1;
    transform: translate(0,0);
}

.whitebutton:hover .down {
    opacity: 1;
    transform: translate(0,-90px);
}

.whitebuttondemo {
    margin: 20px auto;
    padding: 20px 0;
    width: 200px;
}

.whitebuttondemo a {
    background: #e25734;
    color: #fff;
    display: block;
    font-size: 17px;
    font-weight: 700;
    font-family:'Arial',Verdana,sans-serif;
    height: 50px;
    line-height: 50px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 200px;
    position: relative;
    z-index: 2;
    transition: 350ms;
}

.whitebuttondemo a:before {
    content:'\f002';
    font-family: FontAwesome;
    font-weight: normal;
    padding: 8px;
    margin-left: -12px;
    margin-right: 6px;
}

.whitebuttondemo a:hover {
    color: #fff;
}

.whitebuttondemo span {
    background: #444;
    color: #fff;
    display: block;
    font-size: 12px;
    font-family: 'Arial', Verdana,sans-serif;
    height: 40px;
    line-height: 40px;
    text-align: center;
    width: 200px;
    z-index: 1;
    text-transform: uppercase;
    font-weight: bold;
}

.whitebuttondemo .up {
    background: #444;
    margin: -25px auto;
    opacity: 0;
    border-radius: 0 0 5px 5px;
    transform: translate(0,-50px);
    transition: 350ms;
}

.whitebuttondemo:hover .up {
    opacity: 1;
    transform: translate(0,0);
}

Сохраняем шаблон. Теперь каждый раз когда вы захотите добавлять эти кнопки в своих постах вам нужно будет вставлять следующий код:
<div class="whitebuttondemo">
<a href="#" target="_blank">Demo</a><br>
<span class="up">click to view</span></div>
<br>
<div class="whitebutton">
<a href="#" target="_blank">Download</a><br>
<span class="up">click to begin</span><br>
<span class="down">1.6MB .rar</span></div>

В этом коде вы можете изменить названия:
Demo;
click to view;
Download;
click to begin;
1.6MB.rar.
на свои названия. И самое важное вместо # вставляете ссылки на те страницы которые будут открывать кнопки. Если вы помните решетки у нас так же фигурировали в главном меню, тут принцип тот же. Еще если вам не всегда нужны сразу две кнопки, в таком случае до второго знака <br> (мы пометили его красным цветом) идет код первой, а после него код второй кнопки. Ну вот и все теперь вы стали обладателем стильных кнопок.

Blogger, как защитить блог от спама?


Спамер, ты не пройдешь! У тебе здесь нет власти! Итак мы продолжаем вести полезные уроки по блогу и как вы уже догадались в этой теме мы будем обсуждать тему спама в блогах.

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


Ну что посмотрели, какое оно приветствие, хотите такое же, тогда приступаем к установке. В разделе Шаблон - Изменить HTML ищем код  ]]></b:skin> и перед ним вставляем:

.spammer-detected {
    font-size: 14px!important;
    color: #fff!important;
    background: #5cb0d8!important;
    margin: 25px;
    border-radius: 4px;
    display: inline-block;
    padding: 10px 15px!important;
}

Далее ищем код </body> и перед ним вставляем следующий код:

<script type='text/javascript'> //<![CDATA[
function blockLinks(parentID, children) {
var parent = document.getElementById(parentID),
content = parent.getElementsByTagName(children);
for (var i = 0; i < content.length; i++) {
if (content[i].innerHTML.indexOf('</a>') !== -1) {
content[i].innerHTML = "</mark>Спамер, ты не пройдешь! У тебе здесь нет власти!";
content[i].className = "spammer-detected";
} } }
blockLinks('comment-holder', 'p');
//]]>
</script>

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

Виджет скроллинг блога в процентах


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

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

#scroll {
  display:none;
  position:fixed;
  top:0;
  right:15px;
  z-index:500;
  padding:3px 8px;
  background-color:#369fcf;
  color:#fff;
  border-radius:3px;
  font-size:14px;  
}
#scroll:after {
  content: " ";
  position: absolute;
  top:50%;
  right:-10px;
  height:0;
  width:0;
  margin-top:-6px;
  border:6px solid transparent;
  border-left-color:#369fcf;
}

Затем ищем код </head> и после него вставляем:
<div id='scroll'></div>

И финальный аккорд находим </body> и перед ним вставляем:

<script type='text/javascript'>
//<![CDATA[
var scrollTimer = null;
$(window).scroll(function() {
   var viewportHeight = $(this).height(),
       scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
       progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
       distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;
    $('#scroll')
        .css('top', distance)
        .text(' (' + Math.round(progress * 100) + '%)')
        .fadeIn(600);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $('#scroll').fadeOut(600);
    }, 1000);
});
//]]>
</script>

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

Blogger - сео оптимизация прямых ссылок.

Доброго времени суток. В сегодняшней теме мы не будем упоминать о дизайне блога, а поговорим немного на тему сео оптимизации. Если точнее, то сегодня мы будем разбирать прямые ссылки нашего блога. Думаем, что все блогеры без исключения знают, что при создании нового поста к нему задается его постоянная прямая ссылка, то-есть ссылка блога, которая ведет на сам пост. Изначально blogger формирует ссылки только из букв латыни и цифр. И название этой самой прямой ссылки задает от заголовка вашего поста. Поскольку в нашем случае заголовок большинство пишет кириллицей, то название ссылки состоит из названия домена и цифр, что для поисковиков не очень хорошо, ведь они любят точное название ссылки, чтобы смысл поста был задан в названии ссылки и тогда это хорошо скажется на индексировании и ранжировании вашего блога. К примеру у вас есть заголовок: "Красивые шаблоны для блогер" вам нужно задать такое же название для ссылки только на латыни: krasivue-shablonu-dlja-blogger. Очень важно, чтобы количество символов в название ссылки не превышало шестидесяти. Такое название прямой ссылки будет отображаться и на страницах результатов поиска в поисковой системе.

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

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

Blogger, как добавить в свой блог кнопку вверх


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

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



Сохраняете гаджет и проверяете его работоспособность. Есть новый вариант кнопки скроллинга вверх страниц сайта - блога.

Blogger, как убрать в блоге отвертку и ключ.

blogger-ybrat-otvertky-i-kljych

Всем привет, мы продолжаем изучать работу конструктора шаблонов blogger. Сегодня на повестке дня вопрос, как устранить из виджетов блога отвертку с ключом, если не ошибаюсь ключ гаечный). Думаю многим было интересно, что это означает и все совершали клики по этой картинке, перейдя по которой открывается редактор виджетов. Да именно для этого и служит эта функция, чтобы не заходя в панель управления можно было быстро изменить нужный виджет. Эта функция видна только владельцу блога, для всех остальных посетителей вашего блога она скрыта. Но есть такие блогеры, которым не нравится постоянно видеть в своем блоге эти картинки, именно для них мы и проводим сегодняшний урок по устранению функции быстрой настройки виджетов, хотя это скорее всего будет не устранение, а просто скрытие с глаз. Для этого нужно перейти в раздел Тема - Изменить HTML жмем сочетание клавиш CTRL+F и в поисковом окошке ищем код ]]></b:skin> перед которым вставляем следующий код:

.quickedit{
display:none;visibility:hidden;}

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

Blogger - улучшаем вид ярлыков при помощи CSS3


Здравствуйте уважаемые блогеры и вебмастера. Сегодня мы подготовили очередной урок по улучшению сайта - блога на платформе blogger. Многие из нас знают, что собой являют ярлыки, если же нет, в таком случае вы можете ознакомиться с ними более подробней на моем канале youtube, где я рассказываю, как создать сайт - блог на платформе блогер. Итак посмотрели узнали, что же такое ярлыки и для чего они нужны? Отлично движемся дальше, как вы знаете работу сайта - блога обеспечивает шаблон написанный при помощи кодов HTML/Javascript и CSS так вот в стандартном шаблоне наши ярлыки выглядят стандартно, это с виду обычная ссылка, тогда, как в веб-дизайнерских работах они отображаются по разному, какой стиль им зададут так они и будут выглядеть. Большинство старается задать им кнопочный вид где цвет меняется при наведении курсора мыши. В общем вы можете подобрать себе шаблон для blogger по своему вкусу, где уже все готово и настроено, или же понемногу самим доводит его до идеального состояния. Итак мы знаем, что ярлыки делят наши посты на категории и знаем, как их добавлять, теперь осталось узнать, как сделать их более стильными так, чтоб радовали глаз посетителя нашего сайта - блога. Для этого нужно перейти в раздел Шаблон - Изменить HTML находим код ]]></b:skin> и перед ним вставляем следующий код:
/*--- MBL Custom Label Cloud With CSS3 --- */
.Label a {
    padding-left: 20px;
    background: #000;
    padding: 0 20px;
    color: #fff!important;
    border-radius: 100px;
    -moz-border-radius: 100px;
    height: 32px;
    line-height: 32px;
    text-transform: uppercase;
    text-decoration: none;
    border: none !important;
    -webkit-transition: all .3s ease-in-out !important;
    t: 30pxt: 30px;
    float: left;
    margin-left: 5px;
    margin-top: 5px;
    font-size: 14px;
}

.Label a:hover {
    color: #000 !important;
    background: #ff0;
}
Сохраняем шаблон и радуемся своим новым стильным ярлыкам. Ну, а мы продолжаем, сейчас мы узнаем насколько хорошо вы выучили раздел ярлыки. Итак ярлыки могут отображаться списком и ... правильно облаком. Как вы уже поняли первый вариант был для отображения ярлыков списком, если выбрать вариант облако они приобретут свой стандартный вид по-этому сейчас мы зададим несколько стильных вариантов для облака. Для этого все перед тем же кодом ]]></b:skin> вставляем следующий код:
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {
font-size:100%;
filter:alpha(100);
opacity:10
}
.cloud-label-widget-content{
text-align:left
}
.label-size {
background:#0dd7b4;
display:block;
float:left;
margin:0 3px 3px 0;
color:#ffffff;
font-size:11px;
text-transform:uppercase;
}
.label-size a,.label-size span{
display:inline-block;
color:#ffffff !important;
padding:6px 8px;
font-weight:bold;
}
.label-size:hover {
background:#333333;
}
.label-count {
white-space:nowrap;
padding-right:3px;
margin-left:-3px;
background:#333333;
color:#fff !important;
}
.label-size {
line-height:1.2
}
Сохраняем шаблон смотрим, что получилось. 
И для второго варианта (прежде чем его добавить уберите первый вариант) добавляем:
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {
font-size:100%;
filter:alpha(100);
opacity:10
}
.cloud-label-widget-content{
text-align:left
}
.label-size {
border-radius:30px;
background:#FA0830;
display:block;
float:left;
margin:0 3px 3px 0;
color:#ffffff;
font-size:11px;
text-transform:uppercase;
}
.label-size a,.label-size span{
display:inline-block;
color:#ffffff !important;
padding:6px 8px;
font-weight:bold;
}
.label-size:hover {
border-radius:30px;
background:#333333;
}
.label-count {
white-space:nowrap;
border-radius:30px;
padding-right:3px;
margin-left:-3px;
background:#333333;
color:#fff !important;
}
.label-size {
line-height:1.2
}
Первый вариант добавляет зеленые кнопки, второй вариант красные кнопки. И в настройках ярлыка можете поставить галочку напротив предложения "Показывать количество сообщений для каждого ярлыка". На этом мы завершаем наш очередной урок по улучшению шаблона blogger.

Games шаблон для blogger на русском языке




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

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

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

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

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

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

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

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

Минусы бесплатного шаблона:
- стандартный фон без слайдера
- стандартное меню
- изображения без рамок
- стандартные кнопки Дальше и постраничной навигации
- стандартные ярлыки
- стандартные кнопки соц сетей
- без комментариев Facebook
- без виджета случайные сообщения
- наша ссылка внизу сайта

Демо
Приобрести шаблон полная SEO оптимизация