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


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

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

Как установить рамки для картинок - blogger (blogspot)

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

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

.post img {
border:5px solid #d2d2d2;
padding:2px;
}


#d2d2d2 - это значение задает цвет можете изменить на свой
значение solid можете менять на следующие значения:
dotted
dashed
double
groove
ridge
inset
outset

В конце не забудьте сохранить шаблон.

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

Vienna Mag шаблон для Blogger на русском

Демо
Приобрести шаблон

Здравствуйте дорогие друзья. Сегодня мы решили представить вам одним из уникальнейших шаблонов для blogger под названием Vienna Mag. Собственно этот шаблон мы используем для своего сайта, но мы решили существенно изменить его внешний вид, сделав его тем самым более ярким и приветливым.

О дизайне шаблона говорить излишне, он сам за себя говорит, просто перейдите по ссылке демо и взгляните на сие чудо. Vienna Mag подходит для любой тематики сайта. Любите публиковать на своем сайте множество разных постов? Тогда этот шаблон, как раз для вас, так сказать для любителей солянки, где все смешивается в одно, вот только у вас есть возможность разложить все по полочкам.

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

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

Blogger, как создать ссылку Читать дальше


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

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

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

Blogger переключающееся меню для боковой панели

Доброго времени суток. Сегодняшняя статья повествует о том, как добавить на ваш блог blogspot меню для боковой панели или же Multi Tab sidebar widget. Что это такое? Это вкладки или же иными словами переключатель, который служит для перехода с одного виджета на другой который спрятан. Состоит это меню из тех же ячеек. Для чего оно нужно? К примеру в вашем шаблоне всего одна боковая панель для виджетов и гаджетов и вам нужно разместить на ней много виджетов в таком случая боковая панель сильно растягивается по высоте, что согласитесь выглядит не очень красиво и тут в дело вступает наше меню. Свои виджеты вы можете спрятать под одну из трех или четырех ячеек и когда пользователь кликнет по ней, тогда и появятся ваши виджеты. В общем то лучше посмотреть на живом примере и второй пример. Как вы поняли сегодня мы добавим два разных варианта.

Итак, чтобы установить такие вкладки на своем сайте вам нужно перейти в раздел Шаблон - Изменить HTML нажмаете CTRL+F и находите код </head> перед ним нужно вставить следующий код:

<script type='text/javascript'>
//<![CDATA[
document.write('<style type="text/css">.tabber{display:none;}<\/style>');
function tabberObj(argsObj)
{
  var arg;
  this.div = null;
  this.classMain = "tabber";
  this.classMainLive = "tabberlive";
  this.classTab = "tabbertab";
  this.classTabDefault = "tabbertabdefault";
  this.classNav = "tabbernav";
  this.classTabHide = "tabbertabhide";
  this.classNavActive = "tabberactive";
  this.titleElements = ['h2','h3','h4','h5','h6'];
  this.titleElementsStripHTML = true;
  this.removeTitle = true;
  this.addLinkId = false;
  this.linkIdFormat = '<tabberid>nav<tabnumberone>';
  for (arg in argsObj) { this[arg] = argsObj[arg]; }
  this.REclassMain = new RegExp('\\b' + this.classMain + '\\b', 'gi');
  this.REclassMainLive = new RegExp('\\b' + this.classMainLive + '\\b', 'gi');
  this.REclassTab = new RegExp('\\b' + this.classTab + '\\b', 'gi');
  this.REclassTabDefault = new RegExp('\\b' + this.classTabDefault + '\\b', 'gi');
  this.REclassTabHide = new RegExp('\\b' + this.classTabHide + '\\b', 'gi');
  this.tabs = new Array();
  if (this.div) {
    this.init(this.div);
    this.div = null;
  }
}
tabberObj.prototype.init = function(e)
{
  var
  childNodes,
  i, i2,
  t,
  defaultTab=0,
  DOM_ul,
  DOM_li,
  DOM_a,
  aId,
  headingElement;
  if (!document.getElementsByTagName) { return false; }
  if (e.id) {
    this.id = e.id;
  }
  this.tabs.length = 0;
  childNodes = e.childNodes;
  for(i=0; i < childNodes.length; i++) {
    if(childNodes[i].className &&
       childNodes[i].className.match(this.REclassTab)) {
      t = new Object();
      t.div = childNodes[i];
      this.tabs[this.tabs.length] = t;
      if (childNodes[i].className.match(this.REclassTabDefault)) {
    defaultTab = this.tabs.length-1;
      }
    }
  }
  DOM_ul = document.createElement("ul");
  DOM_ul.className = this.classNav;
  for (i=0; i < this.tabs.length; i++) {
    t = this.tabs[i];
    t.headingText = t.div.title;
    if (this.removeTitle) { t.div.title = ''; }
    if (!t.headingText) {
      for (i2=0; i2<this.titleElements.length; i2++) {
    headingElement = t.div.getElementsByTagName(this.titleElements[i2])[0];
    if (headingElement) {
      t.headingText = headingElement.innerHTML;
      if (this.titleElementsStripHTML) {
        t.headingText.replace(/<br>/gi," ");
        t.headingText = t.headingText.replace(/<[^>]+>/g,"");
      }
      break;
    }
      }
    }
    if (!t.headingText) {
      t.headingText = i + 1;
    }
    DOM_li = document.createElement("li");
    t.li = DOM_li;
    DOM_a = document.createElement("a");
    DOM_a.appendChild(document.createTextNode(t.headingText));
    DOM_a.href = "javascript:void(null);";
    DOM_a.title = t.headingText;
    DOM_a.onclick = this.navClick;
    DOM_a.tabber = this;
    DOM_a.tabberIndex = i;
    if (this.addLinkId && this.linkIdFormat) {
      aId = this.linkIdFormat;
      aId = aId.replace(/<tabberid>/gi, this.id);
      aId = aId.replace(/<tabnumberzero>/gi, i);
      aId = aId.replace(/<tabnumberone>/gi, i+1);
      aId = aId.replace(/<tabtitle>/gi, t.headingText.replace(/[^a-zA-Z0-9\-]/gi, ''));
      DOM_a.id = aId;
    }
    DOM_li.appendChild(DOM_a);
    DOM_ul.appendChild(DOM_li);
  }
  e.insertBefore(DOM_ul, e.firstChild);
  e.className = e.className.replace(this.REclassMain, this.classMainLive);
  this.tabShow(defaultTab);
  if (typeof this.onLoad == 'function') {
    this.onLoad({tabber:this});
  }
  return this;
};
tabberObj.prototype.navClick = function(event)
{
  var
  rVal,
  a,
  self,
  tabberIndex,
  onClickArgs;
  a = this;
  if (!a.tabber) { return false; }
  self = a.tabber;
  tabberIndex = a.tabberIndex;
  a.blur();
  if (typeof self.onClick == 'function') {
    onClickArgs = {'tabber':self, 'index':tabberIndex, 'event':event};
    /* IE uses a different way to access the event object */
    if (!event) { onClickArgs.event = window.event; }
    rVal = self.onClick(onClickArgs);
    if (rVal === false) { return false; }
  }
  self.tabShow(tabberIndex);
  return false;
};
tabberObj.prototype.tabHideAll = function()
{
  var i;
  for (i = 0; i < this.tabs.length; i++) {
    this.tabHide(i);
  }
};
tabberObj.prototype.tabHide = function(tabberIndex)
{
  var div;
  if (!this.tabs[tabberIndex]) { return false; }
  div = this.tabs[tabberIndex].div;
  if (!div.className.match(this.REclassTabHide)) {
    div.className += ' ' + this.classTabHide;
  }
  this.navClearActive(tabberIndex);
  return this;
};
tabberObj.prototype.tabShow = function(tabberIndex)
{
  var div;
  if (!this.tabs[tabberIndex]) { return false; }
  this.tabHideAll();
  div = this.tabs[tabberIndex].div;
  div.className = div.className.replace(this.REclassTabHide, '');
  this.navSetActive(tabberIndex);
  if (typeof this.onTabDisplay == 'function') {
    this.onTabDisplay({'tabber':this, 'index':tabberIndex});
  }
  return this;
};
tabberObj.prototype.navSetActive = function(tabberIndex)
{
  this.tabs[tabberIndex].li.className = this.classNavActive;
  return this;
};
tabberObj.prototype.navClearActive = function(tabberIndex)
{
  this.tabs[tabberIndex].li.className = '';
  return this;
};
function tabberAutomatic(tabberArgs)
{
  var
    tempObj,
    divs,
    i;
  if (!tabberArgs) { tabberArgs = {}; }
  tempObj = new tabberObj(tabberArgs);
  divs = document.getElementsByTagName("div");
  for (i=0; i < divs.length; i++) {
    if (divs[i].className &&
    divs[i].className.match(tempObj.REclassMain)) {
      tabberArgs.div = divs[i];
      divs[i].tabber = new tabberObj(tabberArgs);
    }
  }
  return this;
}
function tabberAutomaticOnLoad(tabberArgs)
{
  var oldOnLoad;
  if (!tabberArgs) { tabberArgs = {}; }
  oldOnLoad = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = function() {
      tabberAutomatic(tabberArgs);
    };
  } else {
    window.onload = function() {
      oldOnLoad();
      tabberAutomatic(tabberArgs);
    };
  }
}
/* Run tabberAutomaticOnload() unless the "manualStartup" option was specified */
if (typeof tabberOptions == 'undefined') {
    tabberAutomaticOnLoad();
} else {
  if (!tabberOptions['manualStartup']) {
    tabberAutomaticOnLoad(tabberOptions);
  }
}
//]]>
</script>

После этого ищете следующий код в старых шаблонах это <div class='column-right-inner'> в новых <div id='sidebar-wrapper'> сразу после этого кода вставляете следующий код:

    <div style='clear:both;'/>

    <div class='tabber'>
    <b:section class='tabbertab' id='tab1' maxwidgets='1'/>
    <b:section class='tabbertab' id='tab2' maxwidgets='1'/>
    <b:section class='tabbertab' id='tab3' maxwidgets='1'/>
    <b:section class='tabbertab' id='tab4' maxwidgets='1'/>
    </div>

Затем находите седующий код <b:skin><![CDATA[/* и после него вставляете следующий код:

<Variable name="tbbxbgcolor" description="Tab box Background Color" type="color" default="#f8f8f8" value="#f8f8f8"/>
<Variable name="tbbxbrcolor" description="Tab box Border Color" type="color" default="#dcdcdc" value="#dcdcdc"/>
<Variable name="tbbxcolor1" description="Tab box Color 1" type="color" default="#ffffff" value="#ffffff"/>
<Variable name="tbbxcolor2" description="Tab box Color 2" type="color" default="#b60000" value="#b60000"/>



Здесь вы можете изменять цвета.

И наконец последний код который нужно найти ]]></b:skin> перед ним, не после, а перед вставляете следующий код:


.tabberlive{ margin:0; padding:0px; clear:both; background:$tbbxbgcolor; border:0px solid $tbbxbrcolor; } .tabbernav { margin:0; padding: 3px 0; border-bottom: 1px solid $tbbxbrcolor; font-family:Arial,Helvetica,sans-serif; font-size:12px; font-weight:bold; } .tabbernav li { list-style:none; margin:0; display:inline; } .tabbernav li a { padding:3px 0.3em; margin-right:1px; border:1px solid $tbbxbrcolor; border-bottom:none; background:$tbbxcolor2; text-decoration:none; color:$tbbxcolor1; } .tabbernav li a:hover { color:$tbbxcolor2; background:$tbbxcolor1; border-color:$tbbxbrcolor; text-decoration:none; } .tabbernav li.tabberactive a, .tabbernav li.tabberactive a:hover { background:$tbbxcolor1; color:$tbbxcolor2; border-bottom: 1px solid $tbbxcolor1; } .tabberlive .tabbertab { padding:0px; border:0px solid $tbbxbrcolor; border-top:0; background:$tbbxcolor1; } .tabberlive .tabbertab h2, .tabberlive .tabbertabhide { display:none; } .tabbertab .widget-content ul{ list-style:none; margin:0 0 10px 0; padding:0; } .tabbertab .widget-content li { border-bottom:1px solid $tbbxbrcolor; margin:0 5px; padding:2px 0 5px 0; }    


Все, жмете сохранить шаблон и проверяете, в разделе Дизайн у вас должны образоватся панели под названием tab1 tab2 tab3 tab4 под ними и и вставляете свои гаджеты. Если 4 панели слишком много тогда можете одну или две удалить . Также на своем сайте вы увидите в боковой панели виджет с ячейками 1 2 3 4 название они берут от того виджета который вы под ними разместите.

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

/* Tab widget
----------------------------------------------- */
#sidebar-tab h2{display:none;}
#select-tab{margin:0 auto 10px}
#select-tab,#select-tab li{padding:0;margin:0;list-style:none;overflow:hidden}
#select-tab li{float:left;width:33.3%;text-align:center}
#select-tab a{line-height:32px;display:block;background-color:#404040;color:white;font-weight:bold;text-decoration:none}
#select-tab .selected a,#select-tab a:hover{background-color:#64A071}
#sidebar-main .widget1{background-color:#ffffff;width:100%;float:left;padding:5px}
#sidebar-main{overflow:hidden}

После находите следующий код в старых шаблонах это <div class='column-right-inner'> в новых <div id='sidebar-wrapper'> сразу после этого кода вставляете следующий код:

<div id='sidebar-tab'>
<div id='tab'>
<div class='tab-widget-menu clear'>
<ul id='select-tab'>
<li class='tab1'><a href='#tab1'>Popular Post</a></li>
<li class='tab2'><a href='#tab2'>Comments</a></li>
<li class='tab3'><a href='#tab3'>Archive</a></li>
</ul>
</div>
<div id='sidebar-main'>
<div class='widget1' id='tab1'> 
<b:section class='sidebar' id='tab1-popular-posts' showaddelement='yes'>
</b:section>
</div>
<div class='widget1' id='tab2'> 
<b:section class='sidebar' id='tab2-comments-posts' showaddelement='yes'>
</b:section>
</div>
<div class='widget1' id='tab3'> 
<b:section class='sidebar' id='tab4-srchive' showaddelement='yes'>
</b:section>
</div>
</div>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){$("#select-tab li:first").addClass("selected");$("#sidebar-main > div").hide();$("#sidebar-main > div:first").show();$("#select-tab a").click(function(){$("#select-tab li").removeClass("selected");$(this).parent().addClass("selected");var a=$(this).attr("href");$("#sidebar-main > div:visible").hide();$(a).fadeToggle(1000);return false})});
//]]>
</script>
</div>

Тут уже название ячеек не меняется автоматически, как в первом варианте, нужно задавать их вручную.
Popular Post
Comments
Archive
меняете на название своих виджетов. Сохраняете шаблон. В разделе Дизайн должны появится панели tab1 tab2 tab4 под ними и располагаете свои виждеты. Чтобы изменить зеленый цвет ячеек ищете этот код 64A071 и меняете на свой, чтобы изменить черный цвет, находите и меняете этот код 404040.

К этой теме нам больше нечего добавить. Заходите еще будет много вкусняшек. Всего доброго.

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

Демо
Приобрести шаблон

Шаблон снят с продажи!!!

Возвращаемся после небольшой паузы. Сегодняшний шаблон для blogspot небезызвестный на пространствах интернета, вот только у нас он действительно доведен почти до идеального состояния (ну уж, как могли). Сразу скажем о его главном минусе тянуть резину не будем, на мобильных устройствах он функционирует только через стандартный гугловский режим просмотра на мобильных телефонах. Расширение дисплея вашего устройства (речь уже не идет и телефонах) должно быть не менее 1100 на 648 иначе контент начнет обрезаться. В принципе здесь нет ничего страшного ведь большинство людей пользуется устройствами со средним расширением экрана это 1360 и выше. Сам разработчик шаблона в своем описании почти ничего не указал, так что  тематики под которые он подходит мы перечислим сами это новостная тематика разных категорий, авто, мода, отдых, кулинария, домашний интерьер, интернет-магазины и т.д. По строению шаблона особо рассказывать нечего все тоже самое два колонтитула с дополнительными карманами для гаджетов. Главное меню с выпадающими ячейками, постраничная навигация, виджет похожих новостей, кнопки соцсетей, которых совсем не было. На этот раз обошлись без слайдеров. Так же не было возможности менять фон, не были настроены параметры сообщений на главной и дальше по навигации, картинки тех же сообщений, как обычно работа со шрифтами и т.д. Как обычно при полном растяжении картинки текст поста мог западать за нее.

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

Кнопки социальных сетей на сайт


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

В общем с целью кнопок все понятно, теперь перейдем к их установке. На наш взгляд самым лучшим сервисом, который поможет вам стать счастливым обладателям стильных кнопок социальных сетей является Pluso. Перейдя на сайт вы можете сгенерировать вид кнопок по своему желанию. После копируете код и вставляете его на свой сайт. Вы можете разместить этот код в разделе Дизайн - Добавить гаджет - HTML\Javascript. Если вы хотите, заменить старые кнопки, тогда вам нужно перейти в раздел Шаблон - Изменить HTML в открывшемся окне жмете сочетание клавиш CTRL+F в поисковом окошке вбиваете код:
<b:includable id='shareButtons' var='post'> и нажимаете Enter. Когда браузер найдет этот код вам нужно будет заменить код который идет ниже на код который вы взяли на сайте Pluso. Удаляете от <b:if> .... </b:if> на картинке ниже обведено откуда и до куда нужно удалять.







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

Как добавить сайт в поиск Яндекса, Видео

Как добавить сайт в поиск Яндекса для индексации 


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

Итак, чтобы добавить свой сайт в поиск Яндекс нужно:

  1. В поисковике прописать: Яндекс Вебмастер.
  2. Перейти на первый же сайт в поисковой выдаче. 
  3. Вверху сайта кликаем по ссылке Добавить сайт.
  4. В открывшейся странице в строке вводите адрес своего сайта и жмете кнопку Добавить сайт.  
  5. Далее вам нужно будет подтвердит права на ваш сайт, для этого кликаем по ячейке мета-тэг и роделываем то, что указано в этом подпункте. 
  6. После нажимаете кнопку Проверить и смело заявляете о том, что ваш блог начал индексироваться в поисковике Яндекс

Правда робот начнет эту самую индексацию через недели две и пока он будет это делать вы можете написать несколько хороших статей. И так же добавим, что Яндекс не сильно любит сайты с доменом blogspot, данную неприязнь может изменить платный домен ru, ua, com и т.д.

Так же читайте: Как добавить на сайт Яндекс Метрику

Blogger - как настроить главное меню


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

Для настройки нужно выбрать название одной из ячеек главного меню к примеру на нашем сайте это будет ячейка под названием Интересное. Дальше в панели управления выбираем раздел Шаблон - Изменить HTML в открывшемся кликните в любом месте левой кнопкой мышки, чтобы оно выбралось и нажмите сочетание клавиш CTRL+F в открывшемся поисковом окошке вводим название ячейки и жмем клавишу Enter. Видим браузер нашел нашу ячейку и заодно остальные ячейки. Теперь название ячеей меняете своими именами а в местах где стоит # ставите вместо нее ссылку на ту страницу которую должна открывать ячейка вашего меню. Жмете сохранить шаблон и проверяете проделанную работу. Если вам нужно добавить ячейку к главному меню копируете уже имеющуюся ячейка и вставляете ее за той, которой она должна идти, только не забудьте поменять название и ссылку. Так же не менее важный нюанс, когда вы вставляете ссылку от ярлыка к примеру она выглядит так http://leistone.blogspot.com/search/label/%D0%98%D0%BD%D1%82%D0%B5%D1%80%D0%B5%D1%81%D0%BD%D0%BE%D0%B5?&max-results=7 тогда шаблон не сохранит ее и выдаст ошибку в таком случае в этой ссылке вам нужно вписать  amp; окончание ссылки должно выглядеть так ?&amp;max-results=7 После этого шаблон сохранится.
На скриншоте мы обвили все описанные выше действия.
Если вы все равно не поняли, что да как предлагаем вам посмотреть видео инструкцию по настройке главного меню.

Шаблон для blogger - Gridz на русском




Готов еще один замечательный шаблон для blogger. Недавно был у нас один похожий шаблон Blogstar, ведь разработчик один и тот же, вот и заметное сходство между ними. Но Gridz явно превзошел своего старшего брата. Этот шаблон блоггер может доносить до посетителей абсолютно разные тематики. К примеру Hi-Tech; авто; мода; отдых - клубы, рыбалка, курорты; бизнес; интернет-магазин; домашний уют, музыка, кино, спорт, сайты, и так далее.

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

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

Минусы бесплатного шаблона
- Не настроен слайдер
- Стандартные шрифты
- Стандартное отображение сообщений по ярлыкам
- Нет кнопки поделиться Вконтакте
- Стандартный фон
- Наша ссылка внизу сайта

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

Шаблон для blogger - Digbug на русском


Демо
Приобрести шаблон

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

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

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

Минусы бесплатного шаблона:
- Стандартные кнопки соцсетей
- Нет виджета похожих сообщений
- Стандартный дизайн названия виджетов
- Наша ссылка внизу сайта

Как установить на сайт счетчик Яндекс метрики

 Как установить на сайт счетчик Яндекс метрики

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

Как добавить счетчик Yandex Метрики на сайт


Немного уяснили для себя зачем нам все это, теперь перейдем к процессу добавления счетчика яндекс метрики на сайт. Для этого нужно:

  1. Завести аккаунт в Яндексе.
  2. Далее перейти в поиск и в нем прописать яндекс метрика.
  3. После того, как перейдете на сайт, вверху справа кликаете добавить счетчик.
  4. В строке имя счетчика вводите любое название.
  5. В строке домен сайта вводите только домен к примеру blogspot.com соглашаетесь с правилами и жмете кнопку сохранить.
  6. После переходите в раздел Код счетчика, здесь проставляете галочки напротив тех функций которые вы хотите добавить к своему счетчику.
  7. Затем внизу копируете предложенный код и устанавливаете его на своем сайте.

Для пользователей blogger - заходите в панель управления сайтом, раздел Дизайн - Добавить гаджет - HTML\Javascript вставляете код и сохраняете. Таким же образом добавляются счетчики остальных сервисов к примеру Liveinternet, Mail.ru и т.д.

Так же читайте: Как добавить сайт в поиск Яндекса

Анонс следующего шаблона для blogger


Демо

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

Blogger новый виджет последние сообщения 2015.


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

Первый пошел. Для установки зайдите в раздел Дизайн - Добавить гаджет - HTML\Javascript и вставьте в окошко следующий код:
<style scoped='' type='text/css'>
/* Recent Post Navigasi */
#recentpostnav{border:1px solid #585858;width:100%;margin:0 auto}
#recentpostsae{margin:0}
.recentpostel{background:#fff;display:block;border:1px solid #ddd;margin:5px 0;padding:10px;height:79px}
.recentpostel img{background:#fff;padding:4px;float:left;height:70px;margin-right:8px;width:70px;border:1px solid #ddd}
.recentpostel h6,.recentpostel h6 a{text-decoration:none;font-size:13px!important;font-weight:700!important;margin:0;color:#111}
.recentpostel:hover{background-color:#fefefe}
.recentpostel p{font-size:12px;text-align:left;color:#555;line-height:normal;margin:5px 0}
#recentpostload{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:url(http://2.bp.blogspot.com/-60aISBQLRY0/VFBMqzLfzGI/AAAAAAAABgM/GInmVTvEzkc/s1600/loader.gif) 50% 50% no-repeat #fff;height:470px;border:1px solid #ddd}
#recentpostnavfeed{border:1px solid #ddd;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0}
#recentpostnavfeed:hover{background-color:#fefefe}
#recentpostnavfeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
#recentpostnavfeed span{padding:5px 10px}
#recentpostnavfeed .next{float:right}
#recentpostnavfeed .previous{float:left}
#recentpostnavfeed .home{text-align:center}
#recentpostnavfeed a:hover,#recentpostnavfeed span.noactived{color:transparant!important}
</style>
<script type='text/javascript'>
//<![CDATA[
    var numfeed = 5;
    var startfeed = 0;
    var urlblog = "http://viennatheme.blogspot.com";
    var charac = 40;
    var urlprevious, urlnext;
function arlinafeed(e,t){for(var n=e.split("<"),r=0;r<n.length;r++)-1!=n[r].indexOf(">")&&(n[r]=n[r].substring(n[r].indexOf(">")+1,n[r].length));return n=n.join(""),n=n.substring(0,t-1)}function showrecentpostsae(e){var t,n,r,a,i,s="";urlprevious="",urlnext="";for(var l=0;l<e.feed.link.length;l++)"previous"==e.feed.link[l].rel&&(urlprevious=e.feed.link[l].href),"next"==e.feed.link[l].rel&&(urlnext=e.feed.link[l].href);for(var d=0;d<numfeed&&d!=e.feed.entry.length;d++){t=e.feed.entry[d],n=t.title.$t;for(var l=0;l<t.link.length;l++)if("alternate"==t.link[l].rel){r=t.link[l].href;break}i="content"in t?t.content.$t:"summary"in t?t.summary.$t:"",a="media$thumbnail"in t?t.media$thumbnail.url:"http://3.bp.blogspot.com/-BHuXHny1kOk/VXrkSyxKCjI/AAAAAAAACas/pZLJAEUDtds/s1600/no-image.png",s+="<div class='recentpostel'>",s+="<a href='"+r+"' target='_blank'><img src='"+a+"' /></a>",s+="<h6><a href='"+r+"'>"+n+"</a></h6>",s+="<p>"+arlinafeed(i,charac)+"...</p>",s+="</div>"}document.getElementById("recentpostsae").innerHTML=s,s="",s+=urlprevious?"<a href='javascript:navigasifeed(-1);' class='previous'>Previous</a>":"<span class='noactived previous'>Previous</span>",s+=urlnext?"<a href='javascript:navigasifeed(1);' class='next'>Next</a>":"<span class='noactived next'>Next</span>",s+="<a href='javascript:navigasifeed(0);' class='home'>Home</a>",document.getElementById("recentpostnavfeed").innerHTML=s}function navigasifeed(e){var t,n;-1==e?(t=urlprevious.indexOf("?"),n=urlprevious.substring(t)):1==e?(t=urlnext.indexOf("?"),n=urlnext.substring(t)):n="?start-index=1&max-results="+numfeed+"&orderby=published&alt=json-in-script",n+="&callback=showrecentpostsae",incluirscript(n)}function incluirscript(e){1==startfeed&&removerscript(),document.getElementById("recentpostsae").innerHTML="<div id='recentpostload'></div>",document.getElementById("recentpostnavfeed").innerHTML="";var t=urlblog+"/feeds/posts/default"+e,n=document.createElement("script");n.setAttribute("type","text/javascript"),n.setAttribute("src",t),n.setAttribute("id","arlinalabel"),document.getElementsByTagName("head")[0].appendChild(n),startfeed=1}function removerscript(){var e=document.getElementById("arlinalabel"),t=e.parentNode;t.removeChild(e)}onload=function(){navigasifeed(0)};
//]]>
</script>
<div id="recentpostsae"></div>
<div id="recentpostnavfeed"></div>


Код отмеченный желтым обозначает:
var numfeed = 5; - количество отображаемых сообщений
var urlblog = "http://viennatheme.blogspot.com"; - вставьте адрес своего сайта
var charac = 40; - количество символов под заголовком



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

<div class="recentpoststyle">
<script src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentposts.js"></script>
<script>
var posts_no = 5;var posts_date = true;var post_summary = true;var summary_chars = 80;</script>
<script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestposts">
</script><a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://helplogger.blogspot.com/2014/11/5-cool-recent-post-widgets-for-blogger.html" rel="nofollow">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<style type="text/css">
.recentpoststyle {counter-reset: countposts;list-style-type: none;}
.recentpoststyle a {text-decoration: none; color: #49A8D1;}
.recentpoststyle a:hover {color: #000;}
.recentpoststyle li:before {content: counter(countposts,decimal);counter-increment: countposts;float: left;z-index: 2;position:relative;font-size: 20px;font-weight: bold;color: #fff;background: #69B7E2; margin: 15px 5px 0px -6px; padding: 0px 10px; border-radius: 100%;}
li.recent-post-title { padding: 5px 0px;}
.recent-post-title { font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;}
.recent-post-title a {color: #444;font-size: 13px; text-decoration: none; padding: 2px; font-weight: bold;}
.post-date {padding: 5px 2px 5px 30px; font-size: 11px; color: #999; margin-bottom: 5px;}
.recent-post-summ { border-left: 1px solid #69B7E2; color: #777; padding: 0px 5px 0px 20px; margin-left: 11px; font-family: Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif; font-size: 15px;}
</style></div>


Третий вариант виджета последних новостей с картинками:

<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentpoststhumbs.js"></script>
<script style="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
var post_summary = true;
var summary_chars = 70;</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://helplogger.blogspot.com" rel="nofollow">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<style type="text/css">
img.recent-post-thumb {padding:2px;width:65px;height:65px;float:left;margin: 0px 10px 10px; background: #fff; border: 1px solid #69B7E2;}
.recent-posts-container {font-family: 'Oswald', sans-serif;  float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container li {padding:5px 0px;min-height:65px; list-style-type: none; margin-bottom: 5px;}
ul.recent-posts-container {counter-reset: countposts;list-style-type: none;}
ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: 15px; font-size: 13px;font-weight: bold;color: #fff;background: #69B7E2;padding: 4px 10px; border-radius: 100%;}
.recent-posts-container a { text-decoration:none; }
.recent-post-title a {font-size: 13px; text-transform: uppercase; color: #2aace3;}
.recent-posts-details {margin: 5px 0px 0px 92px; }
.recent-posts-details a{ color: #777;}

Четвертый стиль виджета без картинок, но так же очень интересный:

<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentposts2.js"></script>
<script style="text/javascript">
var posts_no = 5;
var showpoststhumbs = false;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://helplogger.blogspot.com">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<style type="text/css">
img.recent-post-thumb {padding: 2px; width:35px;height:35px;float:right;margin: -14px 0px 0px 5px; border: 1px solid #cea5ac; border-radius: 10%;}
.recent-posts-container {font-family: 'Oswald', sans-serif;  float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container li {padding:5px 0px;min-height:65px; list-style-type: none; margin: 0px 10px 5px 35px;}
ul.recent-posts-container {counter-reset: countposts;list-style-type: none;}
ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: 5px; font-size: 16px;color: #4D4D4D;background: #F7F7F7;padding: 9px 14px; border: 1px solid #efefef;}
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover{color: #4DACE3;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 13px; text-transform: uppercase; color: #5C4D4D;}
.recent-post-title { margin: 5px 0px; }
.recent-posts-details {border-top: 4px solid #AC707A; margin-top: 5px; padding-top: 5px;}
.recent-posts-details a{ color: #888;}
a.readmorelink {color: #4DACE3;}
</style>


Ну и наконец таки последний пятый вариант виджета с картинками:

<script style="text/javascript" src="https://helplogger.googlecode.com/svn/trunk/helplogger/recentposts2.js"></script>
<script style="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs" rel="nofollow"></script>
<a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://helplogger.blogspot.com/2014/11/5-cool-recent-post-widgets-for-blogger.html" rel="nofollow">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Lobster|Gloria+Hallelujah' rel='stylesheet' type='text/css' />
<style type="text/css">
img.recent-post-thumb {width:50px;height:50px;float:right;margin: -4px -35px 0px 0px; border: 4px solid #FCD6CB; border-radius: 100%;}
.recent-posts-container {font-family: 'Gloria Hallelujah', cursive;  float: left;width: 100%;min-height: 55px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container {counter-reset: countposts;list-style-type: none; background: #fff; }
ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: -20px; font-size: 16px;color: #616662;background: #FCD6CB;padding: 9px 14px; border-radius: 100%; margin-top: 15px;}
ul.recent-posts-container li {padding:5px 0px;min-height:50px; list-style-type: none; margin: -2px 5px 5px 5px;  border-top: 2px solid #FCD6CB;}
ul.recent-posts-container {border: 2px solid #FCD6CB; }
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover { color: #222;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 14px;color: #616662;}
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #888;}
.recent-posts-details {padding-bottom: 5px;}
a.readmorelink {color: #4DACE3;}
</style>


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

Blogger форма для связи, два красивых виджета

На данной странице я подготовил для пользователей Blogger две стильных формы обратной связи. 

1. Первая форма

Форма связи 1
Описание:
3 строки, Имя, Email, Текст сообщения, Кнопки отправить и очистить форму, Иконки, Темный фон.

Установка:
1) В разделе Дизайн Добавьте новый гаджет, перейдите на вкладку Другие гаджеты, в списке выберите Форма для связи.
546756
2) Теперь создайте страницу или сообщение, перейдите на вкладку HTML и вставьте следующий код:

 <div id="twist_blogger_cntct_form">
<div class="wrap-me">
<form name="contact-form">
<span class="name-bg">Ваше имя</span><br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="Ваше Имя..." size="30" type="text" value="" /><br />
<br />
<span class="email-bg">Ваш Email*</span><br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="Ваш email..." size="30" type="text" value="" /><br />
<br />
<span class="message-bg">Ваше сообщение*</span><br />
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="сообщение..." rows="5"></textarea><br />
<span class="send-bg"><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Отправить" /></span>
<span class="clear-bg"><input class="contact-form-button contact-form-button-submit clear-button" type="reset" value="Очистить" /></span>
<br />
<div style="max-width: 100%; text-align: center; width: 100%;">
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
<br /></div>
</div>
<style>
div#ContactForm1 {display: none !important;}
/****** Contact Form Designed by www.TwistBlogger.com ******/
div#twist_blogger_cntct_form {
    padding: 50px 0px;
    border-radius: 2px;
    color: #1D1D1D;
    font-size: 15px;
    font-weight: bold;
    position: relative;
    background-color: #404040;
    font-family: sans-serif;
}
div#twist_blogger_cntct_form .wrap-me {
    margin: 0 auto;
    display: block;
    padding: 30px 20px;
    background-color: #F3F3F3;
    max-width: 440px;
    width: 100% !important;
    border-top: 65px solid #FF0000;
    box-sizing: border-box;
}
div#twist_blogger_cntct_form .wrap-me:before {
    content: '\f0e0';
    position: absolute;
    font-family: FontAwesome;
    font-weight: normal;
    margin-top: -88px;
    margin-left: -23px;
    left: 50%;
    display: inline-block;
    font-size: 28px;
    width: 53px;
    height: 53px;
    border-radius: 50px;
    text-align: center;
    color: #FFFFFF;
    box-sizing: border-box;
    border: 2px solid #FFFFFF;
    line-height: 49px;
}
input#ContactForm1_contact-form-name, #ContactForm1_contact-form-email, #ContactForm1_contact-form-email:hover, #ContactForm1_contact-form-email:active {
    padding: 5px;
    margin-top: 4px !important;
    box-shadow: none!Important;
    max-width: 300px;
    width: 100%;
    border: 1px solid #D2D2D2;
    line-height: 1em;
    min-height: 31px;
    background: #FEFEFE;
    font-family: sans-serif;
    margin-bottom: 15px;
    border-radius: 0px;
}
.contact-form-email-message, .contact-form-email-message:active, .contact-form-email-message:hover {
    padding: 5px;
    margin-top: 4px !important;
    box-shadow: none!Important;
    max-width: 400px;
    width: 100%;
    border: 1px solid #D2D2D2;
    line-height: 1em;
    min-height: 80px;
    background: #FEFEFE;
    font-family: sans-serif;
    margin-bottom: 10px;
    border-radius: 0px;
}
/***** Focus *****/
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus {
    outline: none;
    background: #FFFFFF !important;
    color: #444;
    border-color: rgb(236, 235, 235) !important;
    box-shadow: 0 0 5px rgba(241, 241, 241, 0.7) !important;
    transition: all 0.3s ease-in-out !important;
}
/**** Submit button style ****/
.contact-form-button-submit:hover {
    color: #FFFFFF;
    background: #0083FF !important;
}
.contact-form-button-submit {
    background: #19B3EA;
    display: table;
    font-size: 17px;
    margin: 0 !important;
    border-radius: 0 !important;
    max-width: 100%;
    width: 100%;
    min-width: 100%;
    height: 32px;
    line-height: 0.5em;
    letter-spacing: 0.5px;
    font-family: sans-serif;
    font-weight: normal;
    cursor: pointer;
    outline: none!important;
    color: #FFFFFF;
    border: 1px solid #fff !important;
    text-align: center;
    padding: 0px 0px 0px 15px;
    text-transform: capitalize;
    transition: all 300ms ease-in-out;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
}
/**** Submit button on Focus ****/
.contact-form-button-submit:focus, .contact-form-button-submit.focus {
  border-color: #FFFFFF;
  box-shadow: none !important;
}
/**** Error message ****/
.contact-form-error-message-with-border .contact-form-success-message {
  background: #f9edbe;
  border: 1px solid #f0c36d;
  bottom: 0;
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
  color: #666;
  font-size: 12px;
  font-weight: bold;
  padding-bottom: 10px;
  line-height: 19px;
  margin-left: 0;
  opacity: 1;
  position: static;
  text-align: center;
}
/**** Submit Button On Success Message ****/
.contact-form-button-submit.disabled, .contact-form-button-submit.disabled:hover, .contact-form-button-submit.disabled:active {
    opacity: 0.9;
}
/****** Success Message *****/
.contact-form-error-message-with-border {
    background: #000000;
    border: 1px solid #5A5A5A;
    bottom: 0;
    box-shadow: none;
    color: #FDFDFD;
    font-size: 15px;
    font-weight: normal;
    line-height: 35px;
    margin-left: 0;
    opacity: 1;
    position: static;
    text-align: center;
    height: 35px;
    margin-top: 45px;
}
.contact-form-cross {
    height: 14px;
    margin: 5px;
    vertical-align: -8.5%;
    float: right;
    width: 14px;
    border-radius: 50px;
    border: 0 !important;
    cursor: pointer;
}
.contact-form-success-message-with-border {
    font-weight: normal;
    background-color: #000;
    border: 1px solid #FFF;
    color: #FFF;
    line-height: 35px;
    margin-left: 0;
    font-size: 13px;
    opacity: 1;
    position: static;
    text-align: center;
    height: 35px;
    margin-top: 45px;
}
/* Extra Stuff */
div#twist_blogger_cntct_form span.name-bg {
    background-color: #E8F2FF;
 }
div#twist_blogger_cntct_form span.email-bg {
    background-color: #FFE8E8;
}
div#twist_blogger_cntct_form span.name-bg, div#twist_blogger_cntct_form span.email-bg {
    display: inline-block;
    max-width: 300px;
    line-height: 21px;
    width: 100%;
    color: #696969;
    padding: 3px 5px;
    margin: 0px 0px 4px;
    box-sizing: border-box;
    height: 30px;
    border: 1px solid #E4E0E0;
    padding-left: 39px;
}
div#twist_blogger_cntct_form span.name-bg:before {
    content: '\f007';
    background-color: #60A2FF;
 }
div#twist_blogger_cntct_form span.email-bg:before {
    content: '\f1fa ';
    background-color: #FF530B;
}
div#twist_blogger_cntct_form span.name-bg:before, div#twist_blogger_cntct_form span.email-bg:before, div#twist_blogger_cntct_form span.message-bg:before {
    font-family: FontAwesome;
    text-align: center;
    margin: -4px 0 0px 0px;
    font-weight: normal;
    padding: 0;
    line-height: 27px;
    width: 28px;
    height: 28px;
    display: table;
    position: absolute;
    margin-left: -40px !important;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-right: 0 !important;
    color: #FFFFFF;
}
div#twist_blogger_cntct_form span.message-bg {
    background-color: #EBFFE8;
    display: inline-block;
    max-width: 400px;
    line-height: 21px;
    width: 100%;
    color: #696969;
    padding: 3px 5px;
    box-sizing: border-box;
    height: 30px;
    border: 1px solid #E4E0E0;
    padding-left: 39px;
    margin: 0px 0px 4px;
}
div#twist_blogger_cntct_form span.message-bg:before {
    content: '\f0e0';
    background-color: #20CC00;
}
div#twist_blogger_cntct_form span.send-bg {
    height: 32px;
    display: inline-block;
    float: left;
    max-width: 45%;
    width: 100%;
    margin-top: 15px;
    transition: all 0.4s ease-in-out !important;
}
div#twist_blogger_cntct_form span.send-bg:before {
    content: '\f1d8';
 }
div#twist_blogger_cntct_form span.send-bg:before, div#twist_blogger_cntct_form span.clear-bg:before {
    font-family: FontAwesome;
    text-align: center;
    font-weight: normal;
    margin: 0;
    background-color: #000;
    padding: 0;
    line-height: 27px;
    width: 30px;
    height: 30px;
    display: inline-block;
    position: absolute;
    border: 1px solid #fff;
    border-right: 0 !important;
    color: #FFFFFF;
}
div#twist_blogger_cntct_form span.clear-bg {
    display: inline-block;
    float: right;
    margin-top: 15px;
    max-width: 45%;
    width: 100%;
}
div#twist_blogger_cntct_form span.clear-bg:before {
    content: '\f021';
 }

input.contact-form-button.contact-form-button-submit.clear-button:hover {
    background-color: #E83434 !important;
}
div#twist_blogger_cntct_form .clear-button {
    color: #FFFFFF;
    border: 1px solid #FFF !important;
    background-color: #FF2C2C;
    float: right;
    display: table;
    height: 32px;
}
</style>  

3) Опубликуйте страницу \ сообщение.

4) Перейдите в раздел Тема - Изменить HTML найдите в конце тег </body> и перед ним вставьте код:

<style>div#ContactForm1 {display:none!important;}</style>

 5) Сохраните тему и проверьте работу виджета.

2. Вторая форма

Форма связи 2
Описание:
Вторая форма более новая и создана в стиле Material Design. Имеет три строки для ввода данных и кнопку Отправить.

Установка:
1) Создайте сообщение или страницу, перейдите на вкладку HTML, здесь вставьте код:

 <style scoped="scoped">
.ante{float:none;position:relative;margin-bottom:45px;margin-right:10px}.ante input,.ante textarea{font-size:15px;padding:15px 0;display:block;width:100%;border:none;border-bottom:1px solid #ddd}.ante input:focus,.ante textarea:focus{outline:none}.ante label{color:#999;font-size:15px;font-weight:400;position:absolute;pointer-events:none;left:0;top:10px;transition:.2s ease all}.ante input:focus ~ label,.ante input:valid ~ label,.ante textarea:focus ~ label,.ante textarea:valid ~ label{top:-20px;font-size:14px;color:#1bbc9b}.bar{position:relative;display:block;width:100%}.bar:before,.bar:after{content:'';height:2px;width:0;bottom:1px;position:absolute;background:#1bbc9b;transition:.2s ease all}.bar:before{left:50%}.bar:after{right:50%}.ante input:focus ~ .bar:before,.ante input:focus ~ .bar:after,.ante textarea:focus ~ .bar:before,.ante textarea:focus ~ .bar:after{width:50%}.highlight{position:absolute;height:50%;width:100px;top:25%;left:0;pointer-events:none;opacity:.5}.ante input:focus ~ .highlight,.ante textarea:focus ~ .highlight{animation:inputHighlighter .3s ease}.ante input:focus ~ label,.ante input:valid ~ label,.ante textarea:focus ~ label,.ante textarea:valid ~ label{top:-20px;font-size:13px;color:#1bbc9b}
input#ContactForm1_contact-form-email-message{height:150px}
input#ContactForm1_contact-form-submit{color:#fff!important;background:#1bbc9b;padding:15px 25px;border-radius:4px;border:none;outline:none;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);cursor:pointer;transition:all .4s ease-in-out;text-transform:uppercase;float:left;margin-top:15px}
input#ContactForm1_contact-form-submit:hover{box-shadow:0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
#ContactForm1_contact-form-error-message{float:right;background:#D32F2F;color:#fff;font-size:13px;font-weight:700;border-radius:3px}#ContactForm1_contact-form-success-message{float:right;background:#4CAF50;color:#fff;font-size:13px;font-weight:700;border-radius:3px}
</style>

<br />
<br />
<form name="contact-form">
<div class="ante">
<input class="validate" id="ContactForm1_contact-form-name" name="name" required="" type="text" value="" />
<span class="highlight"></span>
<span class="bar"></span>
<label>Name</label>
</div>
<div class="ante">
<input class="validate" id="ContactForm1_contact-form-email" name="email" required="" type="email" value="" />
<span class="highlight"></span>
<span class="bar"></span>
<label>Email</label>
</div>
<div class="ante">
<textarea class="validate" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" required="" rows="5"></textarea>
<span class="highlight"></span>
<span class="bar"></span>
<label>Message</label>
</div>
<input id="ContactForm1_contact-form-submit" type="button" value="Send" />

<br />
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</form>
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '1958902922838602951';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d1958902922838602951','//ВАШАССЫЛКА.blogspot.com/','1958902922838602951');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': '<span style="padding:5px 10px">Sending...</span>', 'contactFormMessageSentMsg': '<span style="padding:5px 10px">Your message has been sent.</span>', 'contactFormMessageNotSentMsg': '<span style="padding:5px 10px">Message could not be sent. Please try again later.</span>', 'contactFormInvalidEmailMsg': '<span style="padding:5px 10px">A valid email address is required.</span>', 'contactFormEmptyMessageMsg': '<span style="padding:5px 10px">Message field cannot be empty.</span>', 'title': 'Contact Form', 'blogId': '1958902922838602951', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>  

2) Строки выделенные красным цветом смените на ID своего блога, его можно найти в верхней строке браузера, когда находитесь в панели управления блога. Строку выделенную желтым смените на ссылку совего блога.

3) Опубликуйте страницу и проверьте работу виджета.

Дополнительная информация

Такой вопрос, если в форме не указывается моя почта куда приходит сообщение? А приходит оно на ваш имейл, привязанный к вашему аккаунту Гугл. Но это еще не все, чтобы найти его в своей почте gmail нужно вверху перейти из вкладки Несортированные во вкладку Соцсети.

Шаблон для blogger - Betacommerce на русском


Демо
Приобрести шаблон

Как и обещали, выставляем недавно анонсированный шаблон для blogger - Betacommerce. Это наш первый преобразованный зарубежный шаблон направленный на продажу товаров в интернете, короче говоря интернет-магазин. Функционирует он так, как и подобает настоящему интернет-магазину (все функции корзины работают исправно).

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

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

Анонс Betacommerce.



Демо исходника

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

Шаблон для blogger - Punjab Press на русском.


Демо
Приобрести шаблон

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

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

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

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

 Минусы бесплатного шаблона:
- на главной странице только последние сообщения
- не настроены слайдеры в постах Главное и Последние новости
- стандартные шрифты
- стандартный цвета
- белый фон
- наша ссылка внизу сайта

Шаблон для blogger - Engaged на русском.




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

Engaged - эта красиво исполненная дизайнерская тема блоггер в добавок имеет легкий функционал. Шаблон подходит под разные тематики, к примеру магазинов (раз называется Engaged так понятно, что для свадебной тематики легко подходит), новостей, кулинарии, спорта, фотографий, портфолио, можно использовать, как личный блог для писателей и не только, в общем, чтобы вы не задумали оно будет хорошо себя чувствовать при этом шаблоне. Пользователь не будет испытывать неудобств просмотровая страницы вашего сайта будь то на телефоне или же на компьютере. Этот Шаблон блоггер имеет два колонтитула: сообщения и правый сайдбар, внизу расположено три панели для гаджетов. Вверху сайта главное меню с доп. ячейками. В принципе дальше ничего необычного, был не настроенный слайдер случайных сообщений, который мы настроили, уменьшили и переместили в правый сайдбар. Так же добавили виджет похожих новостей Рекомендуем, кнопку поделиться вконтакте, изменили подачу отображения картинок на главной и дальше по постраничной навигации, изменили шрифты и убрали много не нужных элементов. Так же добавили фоновую заставку. Вроде бы ничего не упустил, как обычно поисковое окошко, постраничная навигация и кнопка вверх все это есть и работает исправно.

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

Демо
Скачать бесплатную версию
Приобрести шаблон полная SEO версия

Шаблон для Blogger - Extra News на русском.




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

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

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

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

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