Последние посты

Показаны сообщения с ярлыком Css и Скрипты. Показать все сообщения
Показаны сообщения с ярлыком Css и Скрипты. Показать все сообщения

Как добавить тень к тексту

Автор поста: Николай Шихтенков | 23 авг. 2012 г. | 0:28

Для того что бы читатель моментально акцентировал внимание на выделенном фрагменте текста, необходимо его украсить каким то образом.

Реализовать это можно очень легким способом – добавить тень к тексту, другими словами создать эффект тени. Красиво смотрится при большом формате шрифта.

Понадобиться простенький код, который прекрасно подойдет для платформы Blogger (Blogspot).

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

1. Открыть редактор сообщения

2. Переходим на вкладку HTML

3. Копируем код для добавления тени и вставляем его в редактор:

<div style="text-shadow: 4px 4px 8px black;">Отрывок текста или слова</div>

4. Заменяем выделенное красным, на нужную информацию.

Всё. В принципе добавить код можно после написания статьи. Так будет проще.

Настройка тени:

  1. 4px – меняем в большую сторону, тень двигается вправо.

  2. 4px – увеличивая, тень двигается вниз.

  3. 8px – отвечает за жирность тени.

  4. Вместо цвета black (черный), можно поставить любой другой, например:

  5. blue (синий)
    red (красный)
    и другие цвета.
После добавления тени, можно выделить текст с тенью и менять размер, цвет, расположение.

Если вам необходимо добавить тень к тексту и показать его на всех страницах, а не только на одной, то создайте гаджет/виджет. Вставьте его в необходимое место в блоге и поместите в него точно такой же код.

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

Как узнать сколько страниц в Google

Автор поста: Николай Шихтенков | 13 авг. 2012 г. | 21:19

Узнать сколько страниц в Google можно разными путями, и в принципе не составит большого труда для любого пользователя.

Например:
  1. Сервисы по анализу сайта дадут объективную информацию не только по индексированным страницам в Яндекс и Гугл, покажет пузомерки, внешние ссылки, нахождение в каталогах и другое.

  2. Плагины для браузеров. Показывают аналогичные данные, но уже не нужно лишний раз заходить на сервис. 

  3. Ручной способ. Ввести в поиске слово site: и после двоеточия поставить ваш URL.

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

Для своего блога достаточно вставить виджет определяющий количество страниц в Google. Более того им смогут воспользоваться ваши читатели и другие пользователи. Это является большим плюсом.

В блог Blogspot (Blogger)вставить данный виджет не составит труда.

Порядок установки виджета:

  1. Как обычно – “Панель инструментов” – вкладка “Дизайн” – опция “Добавить гаджет”, в выбранное место.

  2. В выборе виджетов находим "HTML/JavaScript".

В окне виджета вставьте код указанный ниже:

<form action="http://www.google.com/search" method="get" rel="nofollow" target="_blank">
<input maxlength="255" name="q" size="30" type="text" value="site:" /><input type="submit" value="Узнать сколько страниц в Гугл" /><input name="hl" type="hidden" value="en" /></form>

Сохраните гаджет.

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


В гаджете прописано открывание результатов в новом окне, так же выставлен атрибут nofollow что бы не учитывался url поиска Гугл. Так же предустановленна строка site: приведенная в ручном способе выше.

В настройках виджета можно изменить размер выдаваемой формы указанный в значении size.

Через форму, при вводе адреса сайта можно узнать сколько страниц в Google проиндексировано.

Хлебные крошки

Автор поста: Николай Шихтенков | 27 июля 2012 г. | 23:02

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

Для чего полезны хлебные крошки:

  1. Первое и наиболее важное – внутренняя навигация, юзабилити, перелинковка страниц.

  2. Второе, хлебные крошки полезны для поисковых систем, особенно для Google.

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

На Blogspot они реализуются с помощью ярлыков/тегов которые присваиваются практически каждой статье.

Хлебные крошки имеют вид:

Подробнее:

Главная – Тег – Страница, на которой находится читатель.

Установка хлебных крошек, шаги установки:


Панель инструментов – шаблон (резервное копирование) – Изменить HTML – Приступить – Расширить шаблоны. Далее с помощью поиска найдите строчку:

<b:include data='top' name='status-message'/>

Сразу после нее вставьте код:

<b:include data='posts' name='breadcrumb'/>

Он является тегом хлебных крошек.

В редакторе шаблона промотайте чуть выше или воспользовавшись поиском найдите:

<b:includable id='main' var='top'>

Перед найденным кодом вставьте:

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!--Не показывать на главной странице-->
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
<a expr:href='data:blog.homepageUrl' rel='tag'>First page</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'> &#187;
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
&#187; <span><data:post.title/></span>
</b:if>
</b:loop>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<div class='breadcrumbs'>
<a expr:href='data:blog.homepageUrl'>First page</a> &#187; <data:blog.pageName/>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<a expr:href='data:blog.homepageUrl'>First page</a> &#187;
<b:else/>
<a expr:href='data:blog.homepageUrl'>First page</a> &#187;
<data:blog.pageName/>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

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

Как скрыть дату публикации поста в Blogspot

Автор поста: Николай Шихтенков | 12 июля 2012 г. | 22:40

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

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

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

Во вторых, на платформе Blogger (Blogspot) можно создать вполне приличную flash визитницу или сайт фирмы. Адреса, деятельность компании/пользователя и другое, не нуждается в актуальности и дата поста не имеет смысла, если конечно не было переездов или компания не сменила род деятельности.

Кстати, скрыть можно не только дату поста, но и свою личную жизнь, купив жалюзи для дома или дачи, например на http://ldstyle.ru/news/zhaljuzi-dlja-doma-i-dachi. Жалюзи не только скроют ваш дом от посторонних глаз, они создадут уютную атмосферу, комфорт и визуально увеличат помещение благодаря креплению на створке окна.

Чтобы скрыть дату публикации поста в Blogspot необходимо.

В принципе все очень просто, существует два варианта сокрытия даты:

  1. Первый вариант скрыть дату поста при помощи вмешательства в CSS.

  2. Второй вариант скрыть дату, более разумный, через панель инструментов.

  • Для первого варианта нужно зайти в панели инструментов Blogspot во вкладку “Шаблон” – “Изменить”.
При помощи заветного поиска встроенного в браузер, находим элемент CSS:

date-header
Он разный у шаблонов и может выглядеть
h2.date-header или h3.date-header {}


В описание/скобки необходимо прописать/вставить:

visibility:hidden;


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

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

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

Карта сайта для Blogspot (Blogger)

Автор поста: Николай Шихтенков | 5 июля 2012 г. | 23:46

В Blogspot (Blogger) для отображения всех статей на блоге используется виджет “Архив”. Но использование его затрудняет поиск необходимой информации для читателя. Ведь, что бы перейти в архиве на другой месяц требуется обновление страницы. Нажал – обновилось – снова переход – обновление и так далее. Что явно не удобно.

Карта сайта для Blogspot даст ряд неоспоримых преимуществ, а именно:

  1. Открывается список всех статей/постов на блоге.

  2. Статьи упорядочены по Тегам/Ярлыкам.

  3. Не требуется перезагрузка страницы. Открыл карту – виден весь список.

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


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

Шаги:
  1. Создаем страницу или новое сообщение.

  2. После создания переходим на вкладку HTML.

  3. Вставляем следующий скрипт:
<script src="http://my-project-avitra.googlecode.com/files/Blog_Maps.js"></script>
<script src="http://Ваш Домен/feeds/posts/summary?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

После установки скрипта, замените строчку “Ваш домен” на свой Url блога. Значение 9999 можно менять по своему усмотрению, оно указывает сколько страниц генерировать. Сохраните страницу, смотрите что получилось. Скрипт автоматически сгенерирует карту для блога.

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

Подписка на блог Blogspot (Blogger) в сайдбаре и ее виды

Автор поста: Николай Шихтенков | 4 июля 2012 г. | 1:55

Для блога RSS подписка играет не последнюю роль. Подписавшиеся читатели обязательно получат обновление блога, а значит, могут вернуться для прочтения новой информации. Так же количество подписчиков может принципиально улучшить лояльность рекламодателей, улучшиться монетизация блога.

Оформление RSS подписки основное, чем надо заняться для привлечения подписчиков. Предложение подписаться на обновления должно незаметно бросаться в глаза.

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


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

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

  2. Осуществление подписки по Google Reader 

  3. Подписка через ленту Яндекса 

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

  • Подписка - Вариант 1.
Итак, для начала создайте новый гаджет для HTML кода. Что бы сделать такой виджет который вы видите на картинке, нужно разместить вот такой код, с поправкой для себя:

<noindex>
<a href="http://feeds2.feedburner.com/ваше имя фида" rel="nofollow" title="Ваш текст который выводиться при наведении мышки" type="application/rss+xml"> <img alt="Текст описывающий картинку, который видит робот (не пользователь, можно не заполнять)" style="border: 0pt none;" src="URL ссылки на картинку или RSS иконку" />
</a>
<a href="http://feeds2.feedburner.com/имя вашего фида" rel="nofollow">
<img style="border: 0pt none; padding-bottom: 7px;" alt="" src="http://feeds2.feedburner.com/%7Efc/имя фида?bg=FF9900&amp;fg=444444&amp;anim=0" height="26" width="88" />
</a>
<p style="font-size: 11px; padding-bottom: 7px; text-align: justify;">Текст о блоге</p>
<a style="padding-bottom: 13px;" href="http://fusion.google.com/add?feedurl=http://feeds2.feedburner.com/Имя" rel="nofollow">
<img style="padding-top: 3px;" alt="" src="http://buttons.googlesyndication.com/fusion/add.gif" title="Читать в Google.Reader" height="17" width="104" />
</a>
<a href="http://lenta.yandex.ru/settings.xml?name=feed&amp;url=http://feeds2.feedburner.com/ваше имя" rel="nofollow">
<img alt="" style="padding-top: 3px;" src="http://lenta.yandex.ru/i/addfeed.gif" title="Читать в Яндекс.Ленте" border="0" />
</a>
<a href="http://www.rss2email.ru/?rss=http://feeds2.feedburner.com/имя" rel="nofollow" title="Получать RSS-ленту на почту">
<img style="padding-top: 5px;" src="http://www.rss2email.ru/counter/rss2email_91x17_b.gif" border="0" />
</a>
</noindex>

Остальной текст добавляйте как вам надо, так же переместите иконки как нужно. Для управления иконками (лево, право) используйте <p style="ваши параметры">Иконки подписки</p>


  • Подписка - Вариант 2.

Подписка на блог внизу статьи. Мысли проста, пользователь, прочитав до конца статью, если понравиться то подпишется, не уходя с места. Наглядно:



Следующий код вставляется после элемента <data:post.body/>:

<noindex>
<div class='post-subscribe' style='vertical-align: middle'>
Текст свой или как на картинке<a href='http://feeds.feedburner.com/ваше имя фида' rel='nofollow'> <img alt='обозначение картинки для робота' src='URL ссылки на картинку' style='border: 0pt none; padding-right: 3px;'/>Название рядом с картинкой или RSS</a>, <a href='http://www.rss2email.ru/?rss=http://feeds.feedburner.com/имя' rel='nofollow'> <img alt='текст для робота' src='URL иконки' style='border: 0pt none; padding-right: 3px;'/>Текст рядом с иконкой или Email</a> или <a href='http://twitter.com/имя в твиттер' rel='nofollow'><img alt='' src='Ссылка на иконку' style='border: 0pt none; padding-right: 3px;'/>Название рядом с картинкой или twitter</a>! </div>
</noindex>

Так же нужно добавить стили в CSS:

.post-subscribe {
padding: 10px 0px 8px 0px;
font-size: 12px;
height: 30px;
text-align: center;
font-weight: bold;
border: 1px dashed #bfe3eb;
margin-bottom: 10px;
}

.post-subscribe IMG {
vertical-align: middle;
padding-top: 5px;
}

!!! Все иконки лучше заливать на web.picasa (родной) или на любой другой сервис хранения фото. !!!

Вот в принципе все несложные методы добавления подписки на блог Blogspot (Blogger), а главное ни чего не упущено, в сайдбаре есть, в конце статьи есть.

Статистика блога для Blogspot

Автор поста: Николай Шихтенков | 1 июля 2012 г. | 22:41

На Blogspot (Blogger) существует своя статистика посещения блога, в прочем, как и на любой другой бесплатной платформе. Но такая статистика посещений не дает точных показателей. Не точны такие показатели как: источники трафика, аудитория, просмотры страницы и прочее.

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

Популярные сервисы статистики посещений:


1. liveinternet.ru

Распространенная развитая система статистики посещений. Показывает много характеристик, параметров. Нужна установка счетчика. Является необходимой при монетизации блога.



2. Google Analytics

Мощная информативная система, для Blogspot (Blogger) является родной. Не требует установки счетчика. Доступна из вебмастера Google.

 
3. Яндекс.Метрика

Сервис представляет одновременно статистику и аналитику для блога Blogspot.

Более того можно посмотреть пути пользователя по блогу визуально, с помощью инструмента Вебвизор. Так же просмотреть карту путей, карту кликов.


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

Для установки статистик необходимо зарегистрироваться: на liveinternet.ru указывая тематику блога, для Google Analytics и Яндекс.Метрика в вебмастерах соответствующих поисковых систем.

Расположение для статистики


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

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

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

Теги для блога - выпадающее меню

Автор поста: Николай Шихтенков | 27 июня 2012 г. | 22:58

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

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

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

  2. Второе создать виджет ярлыков, если его нет.

  3. Третье. Заходим в редактор – дизайн – изменить HTML . Расширяем шаблоны, ставя галочку в соответствующее место.

  4. Четвертое. Воспользовавшись поиском (CTRL + F) ищем строчку в коде шаблона:
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

Для тех кто только что создал виджет.
<b:widget id='Label1' locked='false' title='Ваше Название' type='Label'/>

Для тех, у кого уже есть виджет, вместо Labels в title пишите ваше название виджета.

Теперь заменяем все от найденной строчки до строчки </b:widget>

<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<br />
<select onchange='location=this.options[this.selectedIndex].value;'>
<option>Выберите теги</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>
<b:include name='quickedit'/>
</div>
</b:includable>

Все, сохраните виджет и смотрите что получилось. Если что то пошло не так, загрузите ранее сохраненную копию шаблона на блог. За название в кошке отвечает строчка

<option>Выберите теги</option>

Можете написать вместо свой вариант.

Внимание: Если удалите именно этот виджет с тегами, то настройки скинуться и нужно будет все делать снова.

О настройках: в этом гаджете можно менять только порядок вывода тегов, по алфавиту или по популярности.

Если вам понадобиться обычный гаджет ярлыков, можете его создать. Он никаким образом не повлияет на переделанный. Если нужно создать еще выпадающее меню для блога, то искать его в шаблоне нужно по идентификатору элемента (порядковый номер), Id=’ Label от 1 до бесконечности’.

Спасибо авторам хака (теги для блога используя выпадающее меню) - Blogger Tip и Blogohelp.blogspot за найденную информацию о хаке.

Шапка для блога

Автор поста: Николай Шихтенков | 1 мая 2012 г. | 1:18

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

  У всех без исключения блогов Blogspot, шапка стандартная. Реализована она в виде вывода title (Название)и description (Описание) блога, вверху страницы. Будь у вас стандартный шаблон или уникальный. Если конечно ваш шаблон не делали под заказ. Настроить название и описание можно в “Панели инструментов” – “Настройки” - “Основное”.

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

Как сделать шапку для блога


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

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

  Если такого редактора нет в наличии, подойдет стандартный Paint Windows. Самое главное сохранять созданную картинку в формате PNG (Не потеряется качество и размер будет меньше). Про размер я упомянул не зря.

Большой размер шапки, может значительно увеличить все страницы, а так же скорость загрузки блога.

  Для создания своей шапки лично я использовал Photoshop Portable и Paint. Так как у Portable ограниченное количество функции, я чередовал два редактора изображений.

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

Как вставить шапку в блог


  После того как вы создали свой собственный логотип. Нужно вставить шапку в блог. Тут есть два варианта: Использовать стандартную настройку заголовка или найти в редакторе шаблона строку CSS, где нужно будет поменять URL картинки.

  • Первый вариант – Настройка заголовка. 

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

  Выберите загрузить картинку, после загрузки шапка появиться в окне. Выберите место размещения. Лучше всего, если вы хотите полностью убрать текстовое название и описание блога, выбрать “Вместо заголовка и описания”. В этом случае картинка полностью заменит стандартную шапку Blogspot.

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

  • Второй вариант – Изменение CSS

  Вставить шапку с помощью второго варианта будет значительно труднее, в особенности, если навыков в CSS и Html у вас нет. Кстати шапка блога Seo блогспот, реализована с помощью второго варианта, признаюсь мне пришлось попотеть.

Если не разбираетесь в CSS и HTML. Обязательно прочитайте до конца, не начиная применять второй вариант. Оцените ваши возможности и предупредите себя о возможных последствиях.

Перейдите в “Шаблон” - ”Изменить Html”.

Находим примерно такую строчку:

body{background

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

В строке находите

url(http:// - здесь то и будет вся шапка вашего блога. Всё верхнее изображение.

  Перейдите по url, скопируйте картинку, отредактируйте ее в редакторе (увеличьте, наведите красоту). Если такой строки в вашем шаблоне нет, ищите похожие, ориентируйтесь на url. Просматривайте все изображения, уверяю вас найдете для себя, что то новое. После редактирования старой шапки, сохраните новую, загрузите ее на хостинг изображений, в случае с Blogspot, желательно picasa.

  Скопируйте ссылку картинки в веб альбоме picasa, и вставьте ее в место ссылки на старую шапку. Сохраните шаблон. Если картинка будет повторяться, поставьте вместо вашего repeat, строку no-repeat. При этом шапка у вас должна быть на всю длину блога. Иначе обрыва шапки не избежать.

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

Поэтому перед изменением шаблона обязательно сохраните его копию.

Красивое оформление текста

Автор поста: Николай Шихтенков | 17 апр. 2012 г. | 22:07

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

  Узнав подробности, сделал тоже самое у себя в блоге. И через месяц решил написать статью. У оформления есть преимущества и недостатки.

Преимущества:
  • Смотрится оформление - красиво
  • Можно выделять текст разными рамками.
Недостатки:
  • Что бы выделить часть текста содержащего важную информацию, при написании статьи приходится постоянно лезть в HTML поста, находить нужный отрывок, заключать его в необходимый div class.
Красивые рамки для оформления текста чем то похожи на один из способов цитирования.

  Итак, красивое оформление текста реализуется блоками, сколько их будет решать вам. Я оставил три блока оформления текста:

Блок vajno, помещается информация о важных сообщениях.
Блок info, в этом блоке публикуется информация, которую необходимо знать, учесть.
Блок kod, им я оформляю текст содержащий коды HTML и CSS.

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

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

Как сделать красивое оформление текста


  Стандартно: заходим в “Панель инструментов” – “Шаблон” – нажимаем “Изменить HTML” – далее “Приступить”. Расширять ничего не надо. Красивое оформление достигается за счет добавления стиля CSS. Нужно найти конец CSS стиля и перед ним добавить CSS стиль для блоков.

С помощью поиска браузера (Ctrl+F) находим строчку конца стиля дизайна

]]></b:skin>

До этой строчки в шаблон блога, вставьте

.vajno, .kod, .info {
margin:10px;
padding:15px 20px 15px 80px;
border:1px solid #999999;
border-radius: 10px;
-moz-border-radius:10px 10px 10px 10px;
box-shadow:2px 2px 3px #999999;
-moz-box-shadow:2px 2px 3px #999999;
-webkit-box-shadow: #999 2px 2px 3px;
background-position:20px 50%;
background-repeat:no-repeat;
position:relative;
text-align:justify;
}
.vajno {
background-color:#FFD4A0;
background-image: url("http://lh4.ggpht.com/_G92voTj-yF0/TO0c43ebP4I/AAAAAAAAA7Y/9LgBZ8FG_70/vajno.png");
}
.info {
background-color:#FFFFCC;
background-image: url("http://lh5.ggpht.com/_G92voTj-yF0/TO0osHobz7I/AAAAAAAAA7c/UuJQ0vP5k18/info.png");
}
.kod { background-color:#E9FFD4;
background-image: url("http://lh3.ggpht.com/_G92voTj-yF0/TO0qiaCAffI/AAAAAAAAA7k/DRmMoObB4ss/kod.png");
}

  Названия блоков находятся в первой части кода CSS – это vajno, kod, info. При добавлении новых блоков, вписывайте в верхнюю часть кода их название. При редактировании названия блока меняйте его в верхней части и в нужном коде отдельного блока оформления текста. Не забывайте добавлять точку перед каждым названием.

Возможность редактирования:
  • Цвет тела в рамке, просто измените на свой, в background-color
  • Вывод картинки, вставьте ссылку вашей картинки, в background-image. Может найдете более красивое. Если картинка не нужна, удалите ссылку с путем картинки.
  • Можно изменить радиус закругления рамки и другие параметры.
После внесения изменений, если таковые были – Сохраните шаблон.

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

Пример оформления блока vajno:

<div class="vajno">Важная информация</div>

На деле выглядит так:

Важная информация

И еще я свой текст выравниваю по ширине, и каждая часть текста находится в теге:

<div style="tеxt-аlign: justify;">Часть текста</div>

  Вместо тега <div stylе="text-аlign: justify;"> поставьте тег блока. Закрывающую часть тега не трогайте (</div>)

  Что бы внести часть текста в любой другой блок замените название в теге <div class="Название любого блока">

  Красивое оформление текста не сложно реализовать. Что бы не вспоминать каким тегом закрывать текст, запишите его.

Похожие статьи для Blogspot (Blogger)

Автор поста: Николай Шихтенков | 16 апр. 2012 г. | 20:06


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

Похожие статьи для Blogspot (Blogger) можно сделать как с миниатюрами, так и без них. Это кому как нравится. Одно могу сказать что лишняя картинка грузит блог, увеличивая время загрузки. На моем блоге тоже стоит виджет без миниатюр (картинки из статьи).

  Устанавливать виджет можно как на светлый шаблон Blogspot (Blogger), так и на темный. Большой разницы нет, нужно только подкорректировать цвет. Виджет выводит похожие статьи через rss вашего блога Blogspot. 

Как установить виджет похожие статьи


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

  Зайдите в панель инструментов Blogspot – Шаблон – Изменить HTML – Приступить. Нажмите расширить шаблоны. Для необходимого поиска необходимой строчки воспользуйтесь поиском (Ctrl+F). Найдите конец тела шаблона, строчку:

</head>

Перед ней вставьте настройку дизайна виджета:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://dl.dropbox.com/u/48089857/relatedthumbs19.js' type='text/javascript'/>
</b:if>

  Теперь нужно вставить код в шаблон, в код конца сообщения. У каждого шаблона по разному. Обычно у конца сообщения в шаблоне 3 линии. У меня например две. НО в стандартных должно быть три.

Опять воспользуйтесь поиском. Найдите строчку кода линии:

<div class='post-footer-line post-footer-line-1'>

Или

<p class='post-footer-line post-footer-line-1'>

После строки вставьте код самого виджета:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.avitra.ru/' style='display:none;'>Related Posts for blogger</a><script type='text/javascript'>var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Похожие статьи";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>

Как настроить виджет


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

var maxresults=5;

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

var relatedpoststitle="Похожие статьи";

Есть возможность поменять цвет и размер шрифта, тела виджета.

Как изменить курсор мыши на Blogspot


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

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

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

Как изменить курсор мыши


  Изменить надо будет изображение отображения курсора на блоге, достаточно добавить в css стиль для курсора мышки. Достаточно добавить одну строчку стиля (кода).

Не во всех браузерах курсор мыши отображается.

Изменить курсор мыши можно следующим образом:

  Зайдите в “Панель инструментов” – “Шаблон” – “Изменить HTML” – “Приступить”. Расширять шаблоны не обязательно. В поиске (Ctrl+F) находим конечную строку дизайна

]]></b:skin>

Перед ]]></b:skin> вставьте стиль для курсора:

body, a, a:hover {cursor: url(Тут должна быть ссылка на картинку), progress;}

  Вставьте ссылку на картинку курсора. Сохраните шаблон. Посмотрите свой блог, оцените красоту, так сказать.

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

На все уходит меньше минуты и не чего лишнего открывать не надо.

Способы цитирования на Blogspot (Blogger)

Автор поста: Николай Шихтенков | 7 апр. 2012 г. | 23:09

  Цитирование выделяет особенно важные моменты в посте (статье) в блоге Blogspot (Blogger). На блогспот есть свое стандартное цитирование отрывка текста. Но оно не удовлетворяет запросам большинства владельцев блога. С помощью редактирования кода шаблона, а так же Css можно изменить стандартное цитирование на любое другое, более удовлетворяющее требованиям. 

  С одной стороны даже такое цитирование не может служить примером красоты оформления блога, но если посмотреть глазами простоты – это то что нужно, так как не надо вносить каждый раз как захотелось выделить текст изменение в HTML (добавлять свой код в статью) при редактировании статьи, поста. Намного проще просто выделить текст и нажать в меню редактора текста кнопочку “Цитировать”.

Кнопка цитирование

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

Способы цитирования:

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

  Для того что бы поменять способ цитирования нужно зайти в панель управления, выбрать вкладку шаблон – изменить HTML – Приступить – ставим галку расширить виджеты шаблона. С помощью поиска (Ctrl + F) ищем строчку

]]></b:skin>

Перед строчкой вставляем код представленный ниже

blockquote {
    background:#F9F9F9;
    border:1px solid #CCC;
    margin:10px 0;
    padding:10px;
}

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

]]></b:skin>

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

blockquote {
    background: none repeat scroll 0 0 #FFFBCC;
    border: 1px solid #E6DB55;
    font: 1em Georgia,Times,"Times New Roman",serif;
    padding: 10px;
    margin: 10px 0;
    text-align: justify;
}

Прозрачность баннера и счетчика

Автор поста: Николай Шихтенков | 4 апр. 2012 г. | 1:14

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

 Зайдите в “Панель управления” – “Шаблон”, сохраните копию вашего шаблона (навсякий). Ставьте галочку расширить шаблон, нажмите “Изменить HTML”. С помощью поиска (Ctrl + F) найдите строчку в коде

]]></b:skin>

Это будет конец вашего css шаблона. Перед строчкой вставьте следующий код:

/* ----////// Прозрачность баннера /////------- */

#banners a img {
opacity:0.3; -moz-opacity:0.3; filter:alpha(opacity=30);
}

#banners a:hover img {
opacity:1.0; -moz-opacity:1.0; filter:alpha(opacity=100);
}

Сохраните шаблон.

  Закрытую строчку /* …… */ можете не оставлять, она служит напоминанием зачем нужен данный код. Во всяком случае, строчка не влияет на эффект прозрачности. Так же можно написать другой текст, вместо присутствующего текста.

  Настройка кода: в первом случае первое 0.3, второе 0.3 и 30 - это процент видимости. Можете изменить процент на 0.5, 0.5 и 50, будет реализовано 50% прозрачности баннера или счетчика. Если изменять значения вниз, баннер будет менее виден, если вверх – более виден.

  Во втором случае, значения видимости баннера или счетчика при наведении на него мышки. В данном случае 100% видимость. Так же значения можно менять.

  Основной код внесли, теперь что бы сделать прозрачным счетчик, изображение, баннер. Нужно заключить их код в дивы (div) таким образом:

<div id="banners">коды баннеров, счетчиков</div>

  Слово banners можно изменить на любое понравившееся, главное чтобы в коде css такого слова (значения) не было. Повторюсь: прозрачность можно делать для любых изображений и кнопок. Зависит от вашей фантазии.
 
Все права защищены.
Copyright © 2011- Avitra - Персональный SEO блог
При копировании материалов гиперссылка на БЛОГ обязательна.
All Rights Reserved
Вверх