2011-10-02

Изменить дизайн блога на blogger

  Конечно для тех, кто ведет давно блог на blogger не составит труда изменить дизайн, для новичка обычно это составляет определенные трудности. в этой статье будет описано как изменить оформление blogspot, пользуясь новым интерфейсом.
   Еще есть возможность пользоваться старым интерфейсом blogger, но необходимо приспосабливаться и к новому, так как думаю, что скоро наступит время, когда платформа полностью перейдет на новый интерфейс. У меня в Опере этот новый интерфейс постоянно выдает ошибку и требует установки с Google Chroma. В Firefox таких проблем не возникает.
Панель инструментов, с которой вы имеете доступ ко всем своим блогам теперь выглядит так:
панель инструментов blogger
В верхнем правом углу – ссылка Вернуться к старому интерфейсу.
Выбираете нужный блог (если у вас их несколько) и попадаете на привычную страницу Обзор, где отображена статистика блога за неделю, общее количество сообщений блога, комментариев и другая общая информация.
обзор
Нас интересует изменение дизайна блога, поэтому остановимся на вкладке Дизайн. Она имеет тот же внешний вид, что и в старом интерфейсе, отличие только лишь в цветовой гамме страницы:
дизайн
Эта страница состоит из элементов - гаджетов. Благодаря им легко представить из каких составных частей состоит отдельная страница блога. Каждый элемент можно менять, удалять или добавлять новые на своё усмотрение. Если вы хотите редактировать гаджет, то нужно лишь нажать на ссылку Изменить. При добавлении нового элемента необходимо нажать на Добавить гаджет, при этом появится окно с гаджетами:
.. добавить_гаджет
Они поделены на группы – основы, избранное, самое популярное и дополнительные гаджеты. все как и в старом интерфейсе. Пожалуй, самый ходовой из них это:
html_JavaScript
HTML/JavaScript – с его помощью можно вставить кнопки и счетчики, рекламные коды Adsense, изображения, флэш (не советую – сильно грузит блог), видео и др.
С помощью гаджетов вы также можете создать поиск по блогу, вставить форму подписки по e-mail, вывести на боковую панель блога трансляцию комментариев, ссылки на самые популярные сообщения и многое другое.
В  верхнем левом углу вкладки Дизайн есть элемент значок, редактируя этот гаджет вы можете изменить фавикон в блоге на свой.
   Вкладка Шаблон. Именно в ней мы редактируем шаблон блога. Здесь можно выбрать стандартный шаблон, выбрать новинку от blogger - Dynamic Views (динамические шаблоны). В верхней части мы видим превью внешнего вида блога сейчас и интерфейс для мобильных устройств:
шаблоны
Под ними – 2 кнопки :
  • кнопка Настроить, нажав ее вы попадете в дизайнер шаблонов, где можете создать свой уникальный шаблон, изменить фон блога, выбрать расположение элементов и количество колонок в блоге, отрегулировать ширину основной (текстовой) части блога, настроить цвет и шрифт текста, ссылок и пр.
Дизайнер шаблонов:
дизайнер_шаблонов


  • кнопка Изменить HTML – здесь находится редактор html, где вы можете вручную править коды. Не забудьте перед тем как что либо менять в коде, сохранить код действующего шаблона блога на компьютере. Для этого нажмите резервное_копирование    появится окно, в котором нажмите Загрузить шаблон полностью. Для того, чтобы установить скаченный шаблон из интернета в блоге, нажмите кнопку обзор.
    резервное_копирование_001
    Вы можете скачать бесплатные шаблоны для Blogger и не править коды, не искать подходящий фон, настраивать цвета … Все это уже сделали дизайнеры за вас. Вы найдете также подборку шаблонов в моем блоге от зарубежных дизайнеров. Все шаблоны переведены на русский язык.  Смотрите видеоурок по изменению дизайна blogger:
    Остальные видеоуроки для блоггера смотрите на нашем форуме здесь.
  • 77 комментариев :

    Elena_Moskalyuk комментирует...

    Спасибо!

    ольга просвирова комментирует...

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

    Mycrib комментирует...

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

    soi комментирует...

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

    Mycrib комментирует...

    soi, если у вас стандартный шаблон, то изменить код комментариев можно так - ищите в коде отрезок - background-color: $(post.footer.background.color); и меняете $(post.footer.background.color) на нужный вам цвет (например, #00FFFF).

    Второй вариант - чаще в нестандартных шаблонах. Ищите в коде блога код .comment-block и изменяйте background. Это будет выглядеть так:
    .comment-block {
    background: #FFFFFF;

    soi комментирует...

    разобралась, спасибо ! )))

    Asilya комментирует...

    Изменила цвет фона, выглядит более серьезно, спасибо, не могла разобраться

    Татьяна комментирует...

    Подскажите, пожалуйста, как на боковую панель вывести все свои ярлыки?

    Mycrib комментирует...

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

    Рита Синякова комментирует...

    как там изменить шрифт? что б он более красивый был?

    Mycrib комментирует...

    Чтобы поменять шрифт в шаблоне блога, в редакторе html найдите Font (точнее, font-family) и поменяйте его на нужный вам шрифт. Шрифты можете подобрать в записи "Шрифты html". Пройдитесь по всему шаблону, чтобы изменить шрифт во всем шаблоне (все заголовки (h1, h2 и др.), в комментариях и прочее.

    Mark.S. F. комментирует...

    Возможно Вы сможете мне что-то посоветовать для решения такой задачи.
    У меня Блог всегда начинается с одного и того же поста(сообщения), как бы "пролога". Я это решил путем присвоения ему даты 2015 года. Но я хочу, что бы этот пост открывался в окне как единственный (он достаточно тяжелый), т.е. после него сразу шла ссылка на предыдущие посты этой страницы, которые уже распологаются, как у меня принято, по 4 поста. Какой скрипт необходимо утановить для такого порядка? Спасибо (http://markfrm.blogspot.co.il/)

    Аиша Моруа комментирует...

    Здравствуйте , подскажите пожалуйста , как сделать вот такую панель с кнопочками в динамическом дизайне блога :
    http://1.bp.blogspot.com/-33KGDbSsiQs/T9jmeMSMOgI/AAAAAAAABAU/RgLHCFL6uGU/s640/%D0%B0%D0%BD%D0%B0%D1%81%D1%82%D0%B0%D1%81%D0%B8.png

    Заранее спасибо большое :)

    Mycrib комментирует...

    Аиша Моруа, такую интерактивную панель с кнопочками в динамическом шаблоне специально устанавливать не нужно. Для того, чтобы она появилась достаточно создать во вклидке Дизайн необходимые гаджеты Blogger в сайдбар, или боковую колонку блога (про то как редактировать вкладку Дизайн читайте в этом сообщении). Имейте в виду, что работать могут не все гаджеты, но лучше всего кнопочки будут отображаться в Google Chrome, а в Opera вообще их не будет видно.

    Olga Paper Creations комментирует...

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

    Mycrib комментирует...

    Эта "прозрачная занавеска" - навигационная панель blogger, так называемый "навбар". Чтобы убрать навбар,
    1. нужно перейти а редактирование html-шаблона в административной панели blogger,
    2. при помощи CTRL + F найти отрезок кода /* Variable definitions
    3. вставить код #navbar-iframe { display: none !important; } сразу перед найденным выше кодом

    В результате получим код:
    #navbar-iframe { display: none !important; }
    /* Variable definitions


    Перед редактированием шаблона не забываем делать резервную копию, чтобы восстановить шаблон в случае неудачи.

    После того, как вы убрали навбар остается закономерный вопрос - как зайти в административную панель блога. Вы можете осуществить это двумя путями:
    1. Через ссылку в адресной строке http://www.blogger.com/
    2. Сделать кнопку или ссылку в вашем блоге на http://www.blogger.com/ для быстрого входа в админ.панель.

    Михаил комментирует...

    Сколько вопросов возникает, но надеюсь разберусь, мозги то есть.

    Аиша Моруа комментирует...

    Здравствуйте :)
    Скажите пожалуйста , как сделать сообщения , так скажем, в сокращенном виде. То есть видны только первые три - четыре сообщения, а для того,чтобы увидеть весь пост нужно нажать на кнопку "Детали". Вот пример : http://thorn-and-rose.blogspot.com/

    Заранее огромное спасибо,с нетерпением жду ответа .

    Mycrib комментирует...

    Аиша Моруа, это называется "убратьтекст пд кат". Для этого, когда вы пишите сообщение в текстовом редакторе в простом режиме (активна кнопка "Создать"), то в месте, где будет разрыв текста, нажмите на кнопку "Вставить ссылку Дальше".
    Второй способ - это в режиме HTML в месте разрыва текста вставьте код <!--more-->
    Пример:
    текст на главной странице <!--more--> продолжение текста.

    Аиша Моруа, если непонятно, то пишите комментарий, и я опубликую запись с картинками.

    cummins комментирует...

    скажите пожалуйста как менять шаблон? загрузил шаблон но не как не могу ставить..........

    Mycrib комментирует...

    @cummins распакуйте архив и загрузите файл в расширении .xml в блог (Шаблон -> Резервное копирование и восстановление -> загрузите шаблон из файла на компьютере). Перед тем, как загрузить шаблон обязательно нужно сделать резервную копии (Шаблон -> Резервное копирование и восстановление -> кнопка "Загрузить шаблон полностью).

    Аиша Моруа комментирует...

    Снова я :)
    Да, если можно со скриншотами , было бы прекрасно .

    Спасибо огромное :3

    Mycrib комментирует...

    @Аиша Моруа, очень рада снова видеть в блоге ))
    Со скриншотами у меня целая запись (совсем недавно отредактировала, она была раньше недоработанной). Читайте как убрать под кат на blogspot здесь
    http://www.mycrib.ru/2010/07/blog-post_3057.html

    Андрей Мартынович комментирует...

    Вообще дико выбешивают шаблоны. Что в блогере, что на народе, что на других бесплатных площадках. Впечатление такое, что специально делают убого. Руки бы по отрывал.

    Mycrib комментирует...

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

    Яна комментирует...

    Да, здесь действительно порой возникают большие сложности. Спасибо за статью!

    Anastasia комментирует...

    Подскажите, а каким образом можно установить ссылки (хочу в строчку перечисление моих др аккаунтов) непосредственно под шапкой блога?заранее спасибо

    Mycrib комментирует...

    Anastasia, похоже, что вы уже нашли ответ на свой вопрос. Проще всего, это сделать при помощи виджета HTML / Javascript и расположить его непосредственно под шапкой.

    Антон Супранович комментирует...

    Такой вопрос, который мне задал один мой читатель: в случае, если посетитель оставил комментарий к моему посту, а я на него ответил, можно ли сделать, чтобы человеку, писавшему комментарий на почту пришло сообщение об ответе не его комментарий? Заранее спасибо.

    Mycrib комментирует...

    Антон, о получении вашего ответа должен позаботится сам комменатор. Он получит ответ, если подпишется на комментарии.

    Татьяна Пескова комментирует...

    У меня на блоге в окне "Комментарии" стоит стандартный текст "Комментарии". Мне хочется вставить туда такой текст
    "Вам понравилась статья? Оставьте свое мнение о статье и о сайте.
    Добавить комментарий".
    Как это сделать?

    Mycrib комментирует...

    Татьяна, можете добавить надпись-обращение к читателям над окном "Комментарии".
    Админка blogspot -> Настройки -> Сообщения и комментарии -> В поле "Сообщение формы создания комментариев" введите обращение к комментаторам "Вам понравилась статья? Оставьте свое мнение о статье и о сайте.
    Добавить комментарий". Сохраните изменения

    Катя Катерина комментирует...

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

    Mycrib комментирует...

    Катерина, зайдите во вкладку "Дизайн", добавьте новый гаджет справа от основной части своего блога (я вижу, что у вас трехколоночный блог с 2мя сайдбарами справа и слева).
    У вас откроется окно списка гаджетов. Обратите внимание на, то что список разбит на категории, которые отображены в левой части общего списка гаджетов. Это категории:
    1. Основы,
    2. Дополнительные гаджеты,
    3. Добавить свой собственный.

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

    Татьяна Пескова комментирует...

    У меня еще вопрос. На сайте http://chasikov.net.ru/ -флеш часики даны великолепные часики,которые можно установить на блоге.Как это сделать на blogspot.com?

    Mycrib комментирует...

    Татьяна, скопируйте код флэш-часиков, которые начинается с <embed src=" и вставьте его в гаджет блога HTML / JavaScript.

    Irina комментирует...

    Скажите пожалуйста. Как сделать, чтоб комментарии в сообщениях были адресными. То есть я могла ответить конкретному оппоненту. Как вот в этом блоге...есть активная функция Reply и ответ идет конкретному человеку.http://anechka-tyulpanechka.blogspot.ru/2012/03/blog-post_31.html#comment-form

    Mycrib комментирует...

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

    Максим Бохонко комментирует...

    Спасбо за подробную статью!

    Екатерина Авер комментирует...

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

    Mycrib комментирует...

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

    Екатерина, какой вы используете шаблон - стандартный или нет?
    В случае с нестандартным шаблоном все проще - нужно найти код изображения, который отвечает за отображение шапки (ориентировочно нужно искать что-то вроде .header и открывать рядом расположенные ссылки на изображения (они заканчиваются на jpg ли png) в новом окне до тех пор пока не найдете вашу шапку. Как только нужная ссылка будет найдена, замените ее на ссылку на изображение новой шапки. останется лишь исправить размеры в шаблоне html. Однако, если у вас новая гапка точно подходит по размерам, то этого делать не придется.

    Victoria комментирует...

    Здравствуйте! Уже час маюсь с тем, чтобы изменить шрифт сообщений. Хочу более красивый себе. Делаю как нужно: Шаблон - изменить HTML и дальше выходит сразу этот текст с кучей символов, слов и т.п... Но в этому тексте я совсем не могу найти font-family. Ctrl-f тоже не помогает. Что делать? Помогите, пожалуйста...

    Mycrib комментирует...

    Victoria, значит ищите просто font. Вы найдете что-то вроде
    body {
    font: normal italic 12px Arial;
    бла-бла-бла
    }


    Измените последнее значение (семейство) шрифта (в моем случае это Arial) на другой шрифт.

    И последнее, в связи с изменениями в редакторе blogger, замечено, что не всегда адекватно работает поиск по коду. Лучше редактировать код в любом другом редакторе кода. Рекомендую использовать Notepad +

    Victoria комментирует...

    Спасибо за ответ! Да у меня и просто font не ищется... Тогда Notepad. А у вас нет статьи по этому редактору? Я просто понятия не имею пока что это...

    Victoria комментирует...

    Я разобралась :) Спасибо большое!!!!!!!

    MarSem комментирует...

    после "читать дальше" изменяется заголовок статьи.
    Как его можно сохранить.Спасибо

    http://img6.imageshack.us/img6/5421/28726539.jpg


    http://img213.imageshack.us/img213/5086/31745450.jpg


    http://markfrm.blogspot.co.il/2013/03/blog-post_18.html

    Mycrib комментирует...

    MarSem, найдитн строчку h3.post-title {
    и добавьте после нее font: italic normal 24px Impact, sans-serif;

    MiLana комментирует...

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

    Candy fairy комментирует...

    скажите пожалуйста,а как сделать свой шаблон, что б не повторялся

    Иванова Наталья комментирует...

    Candy fairy, самый простой способ - сделать шаблон в программе Aristeer

    Екатерина Нарольская комментирует...

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

    Mycrib комментирует...

    Катерина, эти значки видны только вам ;)
    Другим пользователям они не видны, и уже тем более никто, кроме вас, не может редактировать ваш блог.
    Лучше все равно убрать их, так как они дают вашему шаблону лишние внешние ссылки.
    1. Убираем значок "отвертка и гаечный ключ" (иконка редактирования гаджетов). Удалите все коды и шаблона blogger.
    2. Удалить значок "карандаш" (редактирование записей блога). Находим код
    <b:if cond='data:post.editUrl'>
    <span expr:class='&quot;item-control &quot; + data:post.adminClass'>
    <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
    <img alt='' class='icon-action' height='18' src='http://img2.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
    </a>
    </span>
    </b:if>
    и заключаем его между
    Должно получиться:
    <!--<b:if cond='data:post.editUrl'>
    <span expr:class='&quot;item-control &quot; + data:post.adminClass'>
    <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
    <img alt='' class='icon-action' height='18' src='http://img2.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
    </a>
    </span>
    </b:if>-->

    3. Удаляем иконку корзину - удаление комментариев. Меняем код
    <b:if cond='data:showCmtPopup'>
    <div class='goog-toggle-button'>
    <div class='goog-inline-block comment-action-icon'/>
    </div>
    <b:else/>
    <a class='comment-delete' expr:href='data:comment.deleteUrl' expr:title='data:top.deleteCommentMsg'>
    <img src='//www.blogger.com/img/icon_delete13.gif'/>
    </a>
    </b:if>
    на
    <b:if cond='data:showCmtPopup'>
    <div class='goog-toggle-button'>
    <div class='goog-inline-block comment-action-icon'/>
    </div>
    <!--<b:else/>
    <a class='comment-delete' expr:href='data:comment.deleteUrl' expr:title='data:top.deleteCommentMsg'>
    <img src='//www.blogger.com/img/icon_delete13.gif'/>
    </a>-->
    </b:if>

    s_wetik комментирует...

    доброго вечера..чистила фотки в пикассе и видимо удалила те фотографии которые вставила для аватараки .. и теперь когда пишу каменты..нет красивой картинки ... просто серый значек....подскажите как пошагово вставить фото ( или несколько)
    заранее благодарна

    Mycrib комментирует...

    s_wetik, попробуйте загрузить аватар в профиль еще раз. Перейдите в свой профиль blogger (можете это сделать, например, перейдя по ссылке с комментария). Нажмите на кнопку "Изменить" и загрузите свой аватар еще раз.

    s_wetik комментирует...

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

    Mycrib комментирует...

    s_wetik, если вы залогинены, то при переходе в свой профиль должна быть кнопка "изменить профиль". Скриншот тестового профиля здесь

    После этого попадете на страницу редактирования, где можно удалить фотографию профиля и загрузить новую.

    Yulia Aleksandrovna комментирует...

    Подскажите, как убрать с шаблона родную картинку и вместо нее загрузить другую.

    Mycrib комментирует...

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

    Vital Babenko комментирует...

    Какая грандиозная работа - ответить лаконично и ёмко каждому "чайнику"! Мне очень нравится, огромное спасибо! Как-то возьмусь за свой слишком уж шаблонный блог, руководствуясь Вашими советами...

    Vital Babenko комментирует...

    Извините, делая комплимент вашей работе, забыл задать вопрос - могу ли я поменять стандартный голубенький фон шаблона на выбранную мною для фона фотографию? Оставлять ли её полностью, или сделать в виде рамки, подогнав размеры?

    Иванова Наталья комментирует...

    Vital, конечно можно! В стандартном шаблоне blogspot это делается очень просто.
    Вкладка Шаблон -> кнопка настроить (под миниатюрой прсмотра вашего блога) -> Фон -> Нажмите на стрелочку под надписью "Фоновое изображение" -> Загрузить изображение.
    Кстати, в видеоуроке в этой статье вы можете увидеть, как поменять фоновое изображение. Для того, чтобы не смотреть весь видеоурок, вы можете перейти по этой ссылке и посмотреть урок с того, момента, где я изменяю фон на блоге. А вот и ссылка на видеоурок

    luckyea77 комментирует...

    Попробую

    Виталий комментирует...

    Хочу сделать что-то наподобие интернет-магазина. И вот такая проблема. Нужно вместо слова Оставить комментарий, чтобы было Сделать заказ. Как заменить стандартную надпись? А так же убрать надпись Комментариев нет? Спасибо!

    Иванова Наталья комментирует...

    Виталий, спасибо за идею темы для новой записи. Ваш ответ здесь

    Хоббирум (Hobbyroom) комментирует...

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

    Иванова Наталья комментирует...

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

    Каждый ваш виджет на блоге (в редакторе html блога) иммет код:
    <b:widget id='HTML1' locked='false' title='Ваш заголовок виджета' type='HTML'>
    <b:includable id='main'>
    <b:if cond='data:blog.url != data:blog.homepageUrl'>
    <!-- only display title if it's non-empty -->
    <b:if cond='data:title != &quot;&quot;'>
    <h3 class='title'>
    <data:title/>
    </h3>
    </b:if>
    <div class='widget-content'>
    <data:content/>
    </div>
    </b:if>
    </b:includable>
    </b:widget>


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

    Хоббирум (Hobbyroom) комментирует...

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

    Юлия Паришкура комментирует...

    Здравствуйте, подскажите пожалуйста. Я загружаю видео на страницу в блоге, а видео почему - то не активно, что сделать чтобы его можно было на странице просмотреть?

    Иванова Наталья комментирует...

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

    Елена Журавель комментирует...

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

    Иванова Наталья комментирует...

    Елена, я смотрю ваша проблема решена.. ;))

    Елена Журавель комментирует...

    Наталья, вовсе нет. Вкладки в горизонтальном меню пустые... как туда затолкнуть инфу?...

    Иванова Наталья комментирует...

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

    Вам нужно CSS код меню:
    .tabs-inner .widget li a {
    display: inline-block;
    margin: 0;
    margin-right: 1px;
    padding: .65em 1.5em;
    font: normal normal 12px Lobster;
    color: #7f3f3f;
    ...

    Найдите этот код (он может быть или в виджете HTML "Горизонтальная панель" или в шаблоне блога) и измените последнюю строчку, отвечающую за вывод цвета текста на цвет #1b1b1b или на другой.

    Елена Журавель комментирует...

    Спасибо, Наталья, большое. Но я имела ввиду не это. КАК их заполнить: наполнить их содержанием. Проще говоря, как втолкнуть туда файлы(текстовые и.т.п.)...

    Иванова Наталья комментирует...

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

    Елена Журавель комментирует...

    Наталья, спасибо за советы... Если не трудно, уделите мне еще внимание))) Поставила меню горизонтальное, но оно, во-первых, раскрывается аккордеоном вниз только втом случае, если я его перемещаю под заголовок блога, во-вторых, исчезают при нажатии уже 2,3,4 подменюшки)))...Заранее благодарна)))

    Иванова Наталья комментирует...

    Елена, выпадающие меню в блогспот, особенно в стандартных шаблонах - еще та головная боль. Попробуйте воспользоваться кодом:
    .tabs-outer, .tabs .widget ul {overflow: visible;}
    .tabs .widget ul li {position: relative; z-index: 1000;}
    .tabs .widget ul li a:nth-child(n+2) {position: absolute; bottom: -100%; left: 0; z-index: 2000; width: 20em; border-radius: 0; display:none;}
    .tabs .widget ul li a:nth-child(3) {bottom: -200%;}
    .tabs .widget ul li a:nth-child(4) {bottom: -300%;}
    .tabs .widget ul li a:nth-child(5) {bottom: -400%;}
    .tabs .widget ul li a:nth-child(6) {bottom: -500%;}
    .tabs .widget ul li a:nth-child(7) {bottom: -600%;}
    .tabs .widget ul li a:nth-child(8) {bottom: -700%;}
    .tabs .widget ul li a:nth-child(9) {bottom: -800%;}
    .tabs .widget ul li a:nth-child(10) {bottom: -900%;}
    .tabs .widget ul li:hover a {display: inline-block; box-shadow: none; background: rgba(0,61,118,.95);}
    .tabs .widget ul li:hover a:hover {color: rgba(66,170,255,1);}

    Его нужно вставить в шаблон перед кодом: ]]>

    Отправить комментарий

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