К основному контенту

Как добавить красивую шапку гаджетов в сайдбаре для blogger

Добавляем свою шапку гаджетов в blogger Ранее я уже рассказывал как сделать красивое обрамление статей, и гаджетов в сайдбаре. Теперь я хочу рассказать о том как можно сделать красивую шапку гаджетов в сайдбаре, чтобы это была специально изготовленная Вами картинка. Сразу предупреждаю сложного ничего здесь нет.
Для начала заходим в настройки Вашего шаблона, в раздел Дизайн/Изменить HTML, нажимаем расширить шаблон и находим следующий тэг:
.main .Blog {
border-bottom-width: 0;
}
Хочу предупредить, что у не у Всех он может выглядеть именно так, так, что можете искать по отдельнымфрагментам например:
border-bottom-width
Сразу после подобного скрипта, необходимо вставить срипт приведенный ниже:
.sidebar .widget h2 {
background: yellow url('ССЫЛКА НА ВАШУ КАРТИНКУ') no-repeat left top;
margin-top:5px;
text-indent: 20px;
padding:7px;
}
вместо текста ССЫЛКА НА ВАШУ КАРТИНКУ необходимо ставить ссылку на специально подобранную вами картинку. Помните, что Вы хотя бы примерно должны соблюдать размеры шапки Вашего сайдбара. О том где разместить Ваши картинки для блоггер я писал в нескольких статьях:
где хранить файлы для блоггер, и бесплатный хостинг от DropBox. , а так-же хранилище файлов от nextmail.

Комментарии

  1. Здравствуйте. Спасибо большое за статью, давно хотел поставить себе картинку в сайдбар, вот хотел бы узнать, а как сделать чтоб картинка была на всю ширину сайдбара? Или это не возможно?

    ОтветитьУдалить

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

Популярные сообщения из этого блога

Добавляем красивый гаджет Поделиться

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

Как сделать ссылку на определенную часть той же страницы.

Все блоггеры пользуются ссылками практически в каждой статье, помимо удобства это еще и очень полезно для индексации блога. Сегодня хотел бы описать как сделать ссылку на туже страницу на которой находится Ваш читатель, только ниже, либо Выше, допустим Ваша статья состоит из нескольких частей и читатель, хочет пропустить первую и перейти сразу ко второй. Сделать это достаточно просто! 1.Для начала нам необходимо присвоить определенной части текста “Якорь”, допустим Вы хотите ссылать на каую-либо часть статьи, перед началом необходимого участка текста вставьте в HTML коде статьи следующий тег : <a id=" yakor "></a> Начало текста или заголовка В качестве слова якорь выделенного красным вы можете использовать любое другое, подходящее по смыслу. 2. Теперь необходимо сделать ссылку на данный якорь. А именно в HTML коде страницы перед словом которое должно быть ссылкой ставим тэг вида: <a href="# yakor ">Слово</a> Покажу как это долж...

Многоуровневое выпадающее меню для блогспот

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