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

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

Прелоадер для сайта на Blogger

Blogger и другие платформы, устанавливаем на сайт - блог анимацию всплывающую при загрузке страниц.

Blogger: Как добавить в блог окно поиска

 

Blogger - blogspot, как добавить (установить) на сайт - блог стильное поисковое окно.

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

Бесплатная html форма подписки на сайт | подписаться на рассылку по email | Feedburner
Форма подписки является одной из самых важных частей сайта и блога. Если использовать

Переводчик для сайта - блога

переводчик для сайта блога

Установить стильный переводчик для сайта - блога.

Как создать страницу в blogger для публикации нескольких записей

Как создать страницу в blogger для публикации нескольких записей

Как создать страницу в blogger для публикации нескольких записей:

Как в Blogger Сделать Меню



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

    Blogger: Меню для боковой панели - переключатель виджетов

    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.

    Переходим к просмотру видео:

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

    Blogger адаптивный виджет похожие сообщения с картинками

    Как в блоггере сделать виджет похожие сообщения

    Новый виджет похожие сообщения для блоггера подойдет, как для обычных шаблонов так и для новых тем contempo, soho, emporio, notable.

    Комментарии Blogger: Настройка и улучшение.

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

    Нумерованная постраничная навигация для Blogger


      Тип навигации: Постраничная, нумерованная

      Описание: Новая постраничная навигация в отличии от предыдущих версий имеет более легкий скрипт. Еще одним главным преимуществом является то, что она безлимитная. Старые версии отображают всего 150 сообщений блога. Пользователь может сразу перейти к самому последнему (первому) сообщению одним кликом. Можно ставить на любые темы blogger, в том числе contempo soho emporio notable. Виджет переведен на русский язык.

      Как добавить ссылку Читать Дальше в Блог на Blogger. Влияет ли на SEO

      Как добавить ссылку Читать Дальше в Блог на Blogger. Влияет ли на SEO

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

      Lightbox для Blogger - галерея картинок

      Крутой Lightbox для Blogger - галерея картинок

      Что такое Lightbox?

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

      Виджет (гаджет) календарь для блога на Blogger

      Календарь и часы виджеты для блога, какая от них польза

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

      Как вставить таблицу в Blogger

      Как вставить таблицу в Blogger

      Хотя редактор блоггера имеет вполне боеспособный набор инструментов, все же есть и такие