Блогспот как оформить

Блогспот как оформить

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

Подберите дизайн

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

Получите бесплатный домен

У каждого блога должен быть свой собственный адрес. Получите его бесплатно в домене blogspot.com или купите персональный домен.

Хотите, чтобы ваше увлечение приносило доход? Зарабатывайте с помощью Google AdSense, показывая посетителям релевантные рекламные объявления в своем блоге.

Познакомьтесь с читателями

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

Храните яркие впечатления

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

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

В Blogger можно писать о чем угодно, например о погоде, последних новостях или интересных идеях. Зарегистрируйтесь – и вы узнаете, почему огромное число пользователей выбрали этот сервис.

Записки блоггера-новичка

Блог для новичков на платформе blogspot.

Оформление ярлыков на blogger blogspot

Привет, всем! Уже просто не знаю чем вас удивлять;). А когда ты читаешь блого-советы, где постоянно рекомендуют писать чаще. Голова просто идет кругом.

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

.label-size a <
display: inline-block;
text-decoration: none;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
padding: 4px 7px;
font-family: ‘Helvetica Neue’, helvetica, sans-serif;
font-size: 12px;
line-height: 14px;
height: 14px;
vertical-align: middle;
margin-bottom: 6px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
-moz-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
>
.label-size a <
color: #996633;
border: 1px solid #DDA13C;
background: rgb(238,177,75);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VlYjE0YiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjYzkxMmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(238,177,75,1) 0%, rgba(204,145,45,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,177,75,1)), color-stop(100%,rgba(204,145,45,1)));
background: -webkit-linear-gradient(top, rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
background: -o-linear-gradient(top, rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
background: -ms-linear-gradient(top, rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
background: linear-gradient(top, rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#eeb14b’, endColorstr=’#cc912d’,GradientType=0 );
>
.label-size a:before <
content: ‘\2022’;
color: #FFFFFF;
margin-right: 4px;
font-size: 15px;
line-height: 13px;
height: 13px;
vertical-align: text-top;
text-shadow: 0 -1px -1px rgba(0, 0, 0, 0.2);
>
.label-size a:hover <
text-decoration: none;
background: rgb(240,183,86);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YwYjc1NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkNmEwNDQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(240,183,86,1) 0%, rgba(214,160,68,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(240,183,86,1)), color-stop(100%,rgba(214,160,68,1)));
background: -webkit-linear-gradient(top, rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
background: -o-linear-gradient(top, rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
background: -ms-linear-gradient(top, rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
background: linear-gradient(top, rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#f0b756′, endColorstr=’#d6a044′,GradientType=0 );
> В синем цвете

Ознакомьтесь так же:  Договор аренды безвозмездного пользования квартиры

.label-size <
margin:0;
padding:0;
position:relative;
>
.label-size a <
float:left;
height:24px;
line-height:24px;
position:relative;
font-size:12px;
margin-bottom: 9px;
margin-left:20px;
padding:0 10px 0 12px;
background:#0089e0;
color:#fff;
text-decoration:none;
-moz-border-radius-bottomright:4px;
-webkit-border-bottom-right-radius:4px;
border-bottom-right-radius:4px;
-moz-border-radius-topright:4px;
-webkit-border-top-right-radius:4px;
border-top-right-radius:4px;
>
.label-size a:before <
content:»»;
float:left;
position:absolute;
top:0;
left:-12px;
width:0;
height:0;
border-color:transparent #0089e0 transparent transparent;
border-style:solid;
border-width:12px 12px 12px 0;
>
.label-size a:after <
content:»»;
position:absolute;
top:10px;
left:0;
float:left;
width:4px;
height:4px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
background:#fff;
-moz-box-shadow:-1px -1px 2px #004977;
-webkit-box-shadow:-1px -1px 2px #004977;
box-shadow:-1px -1px 2px #004977;
>
.label-size a:hover
.label-size a:hover:before
Выбираете понравившиеся оформление и вставляете пред ]]>

Блогспот как оформить

Как создать меню для Blogger Blogspot?

Зайдём на вкладку СтраницыСоздать страницу. В заголовке пишем: О себе/компании/команде/ About — жмём Публикация. В последующем это будет место, где вы будете представлять свой блог и себя читателям.

Теперь идём в ДизайнПоперечный столбецДобавить гаджет — выбираем Страницы.

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

Вот что получилось

Ура у нас есть меню, правда не слишком впечатляющее. Но это легко поправить!

Как убрать панель навигации (та самая строка на которой расположены надписи ещё, следующий блог и т.д.)?

Если вам не нравится, как и мне, строка вверху Blogger, её можно убрать несколькими не сложными манипуляциями.

Заходим в Дизайн — Панель навигацииИзменить — ставим ВыключеноСохранить.

Как убрать тень/рамку вокруг фотографий в Blogger?

Чтобы избавиться от нее, заходим в ШаблонНастроить. Во вкладке Дополнительно выбираем Редактировать CSS. Вставляем туда такой код:

Ознакомьтесь так же:  Что делать если не пришла квитанция на налог

Блогспот как оформить

Как создать меню для Blogger Blogspot?

Зайдём на вкладку СтраницыСоздать страницу. В заголовке пишем: О себе/компании/команде/ About — жмём Публикация. В последующем это будет место, где вы будете представлять свой блог и себя читателям.

Теперь идём в ДизайнПоперечный столбецДобавить гаджет — выбираем Страницы.

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

Вот что получилось

Ура у нас есть меню, правда не слишком впечатляющее. Но это легко поправить!

Как убрать панель навигации (та самая строка на которой расположены надписи ещё, следующий блог и т.д.)?

Если вам не нравится, как и мне, строка вверху Blogger, её можно убрать несколькими не сложными манипуляциями.

Заходим в Дизайн — Панель навигацииИзменить — ставим ВыключеноСохранить.

Как убрать тень/рамку вокруг фотографий в Blogger?

Чтобы избавиться от нее, заходим в ШаблонНастроить. Во вкладке Дополнительно выбираем Редактировать CSS. Вставляем туда такой код:

Блогспот как оформить

Первое, что надо сделать-это посмотреть в своих шаблонах вот такой код .post blockquote и удалить его из шаблона или вставить в эту строку код CSS цитаты, чтобы стили не конкурировали друг с другом.

Вы можете найти у себя в шаблоне код такого вида .post-body blockquote < line-height:1.3em; >или .post blockquote<здесь код >. А можете не найти вообще никакого кода ( я у себя в тестовых блогах не нашла), тогда смело можете вставлять выбранный здесь стиль CSS. Смотрите между строками . .

Красивое оформление ярлыков в блоге на Blogger (Blogspot)

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

Все рекомендации и варианты применимы только для стандартных шаблонов blogger.

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

Как правильно настроить гаджет «Ярлыки»

Заходим в админку блога > дизайн > гаджет «Ярлыки», нажимаем на карандашик , в случае удаления кнопки быстрого редактирования жмем Изменить.

Ознакомьтесь так же:  Договор о стажировке у ип

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

Как добавить код CSS в шаблон блога для оформления ярлыков

Заходим в административную панель инструментов блога, нажимаем вкладку «Тема», делаем бэкап шаблона (обязательно перед каждым изменением в блоге).

Нажимаем «Изменить HTML». В тело шаблона ставим курсор мышки и вызываем окно поиска сочетанием клавиш CTRL+F, в открывшемся поле вводим код ]]> , код должен подсветиться, то есть выделится в другой цвет, перед строчкой ставим курсор и нажимаем Enter, в новой строке вставляем код CSS оформления ярлыков, который вам понравился с предложенных мною вариантов.

Этот тег у всех шаблонов находится вверху. Нажимаем «Просмотреть шаблон». Если вы видите результат в своем блоге, жмем «Сохранить шаблон».

Цвет фона, шрифта настраивайте по своему вкусу. Заходим в Панель инструментов > Шаблон > Настроить > Дополнительно. Не бойтесь экспериментировать. Цвет фона стилей (кнопочек) надо менять непосредственно в коде СSS.

Первый вариант оформления ярлыков

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

Блогспот как оформить

background: $(footer.background.color) $(footer.background.gradient) repeat scroll 0 0;

Добавляем границу рамки, цвет и форму (выделено синим). Все остальное оставляем без изменений. Вы можете настроить только верхнюю границу (border-top), или нижнюю (border-bottom), или как у меня со всех сторон. Получим вот такое оформление

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

Ольга, привет. Очень красиво получилось. Ещё раз повторюсь, что насколько пластичен блогеровский шаблон. Можно столько всего сотворить. А ты говоришь хандра. Когда всё успеваешь. Да ещё с температурой.

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