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

суббота, 23 апреля 2011 г.

Новый дизайн профиля Blogger.

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


Главным преимуществом этой панели, насколько можно понять по картинке, будет то, что будет удобно читать блоги других пользователей Blogger через интерфейс самого "Блоггера".
Типа как "френдлента" в LiveJournal.
Хорошо это или плохо - судите сами. Мне лично, после Google Reader-а не охота это использовать, так как Ридер более универсален.

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

Новый профиль будет доступен пользователям Blogger Draft, но не всем и не сразу. Функция будет подключаться постепенно, никаких действий со стороны пользователя не требуется.
Ждите =)


четверг, 1 июля 2010 г.

Социальные кнопки для Blogger.

Меня некоторое время назад заинтересовала тема - а как поставить на Blogspot кнопки внизу постов типа "сохранить вконтакте", добавить в Facebook и т.п.
То есть кнопки, нажав на которые ваш читатель может легко опубликовать ссылку на ваш материал в своём аккаунте какой-нибудь популярной социальной сети.
Но в Blogger как обычно возникли сложности: например родной java-скрипт предложеный на сайте вконтакте - на Blogger отчего-то не действует.
Пришлось искать другие пути. И они были найдены.

Дело в том, что на иностранных кнопках вроде "AddThis" или "ShareThis" предложено много сервисов, популярных в Европе и Америке. Но у нас-то в России своя специфика.
У нас популярны "вконтакте", "Я.ру", "мой мир и т.п. Вот для этого-то и надо поставить кнопки, которые актуальны для русскоязычного читателя.
Я нашёл способ сделать кнопки для Livejournal, вконтакте, Blogger, Facebook, Мой Мир, Я.ру, GoogleBuzz и Twitter.
Возможно позже список расширится.
К Liveinternet пока способа не нашёл.
Как это выглядит можно посмотреть у меня в блоге внизу сообщений. Значки кнопок можно ставить разные, смотря какие подходят к вашему дизайну.

Способы были найдены с помощью постов двух людей: sovety и artinblog. Спасибо этим людям!
Долго расписываться не хочу, публикую код сразу ко всем кнопкам. Кто хочет может взять только то, что нравится.
Надо нажать "расширить шаблоны виджета" в разделе "изменить html".
не забудьте на всякий сделать резервную копию своего шаблона.
Код следует вставлять после строки <data:post.body/> (Хотя если хотите можете вставить куда-нибудь ещё).

Код:
<b:if cond='data:blog.pageType == &quot;item&quot;'><noindex><div class='sharebuttons'><span style='color: #999999;'><b>Понравилось? опубликуй у себя:</b></span>
<div align='right'><p>


<a class='shareme' expr:href='&quot;http://www.livejournal.com/update.bml?subject=Ссылка: &quot; + data:post.title + &quot;&amp;event=&quot; + data:post.title + &quot;: &quot; + data:post.url' rel='nofollow'><img src='PICTURE' style='border: 0pt none;' title='TEXT'/></a>

<a class='shareme' expr:href='&quot;http://vkontakte.ru/share.php?url=&quot; + data:post.url' rel='nofollow'><img src='PICTURE' style='border: 0pt none;' title='TEXT'/></a>

<a class='shareme' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url ' rel='nofollow'><img src='PICTURE' style='border: 0pt none;' title='TEXT'/></a>

<a expr:href='&quot;http://www.blogger.com/blog_this.pyra?t&quot; + &quot;&amp;u=&quot; + data:post.url + &quot;&amp;n=&quot; + data:post.title + &quot;&amp;pli=&quot; + 1' target='_blank' title='В Blogger!'><img alt='TEXT' src='PICTURE' style='border: 0pt none;'/></a>

<a class='shareme' expr:href='&quot;http://connect.mail.ru/share?share_url=&quot; + data:post.url ' rel='nofollow'><img src='PICTURE' style='border: 0pt none;' title='TEXT'/></a>

<a class='shareme' expr:href='&quot;http://my.ya.ru/posts_add_link.xml?title=&quot; + data:post.title + &quot;&amp;URL=&quot; + data:post.url' rel='nofollow'><img src='PICTURE' style='border: 0pt none;' title='TEXT'/></a>

<a class='shareme' expr:href='&quot;http://www.google.com/buzz/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;srcURL=&quot; + data:blog.homePageUrl + &quot;&amp;srcTitle=&quot; + data:title' rel='nofollow'><img src='PICTURE' style='border: 0pt none;' title='TEXT'/></a>

<a class='shareme' expr:href='&quot;http://twitter.com/home?status=RT @ваш_ник_в_твиттере + &quot; + data:post.url + &quot; &quot; + data:post.title' rel='nofollow'><img src='PICTURE' style='border: 0pt none;' title='TEXT'/></a>

</p></div></div></noindex></b:if>
То что выше выделено зелёным - это тег, который делает так, чтобы кнопки появлялись только на самой странице поста, а не прямо на первой странице блога после каждого сообщения. Если вы этого не хотите - уберите его.
Где написано PICTURE - впишите адрес картинки для своей кнопки.
Где TEXT - впишите пояснительную фразу, которая будет появляться при наведении мышки на кнопку.

UPD! О том, как добавить к этим кнопкам кнопку "Google +1" написано в моём посте "Кнопка Google +1 для Blogger".

Чтобы кнопки немного "ожили" и меняли цвет при наведении на них - вставьте в свой CSS следующий код, придуманный artinblog:
.sharebuttons{
font-size: 13px;            /* размер шрифта */
font-weight: bold;         /* стиль текста: жирный */           
padding:5px;               /* отступ от границ */
border: none;   /* толщина и цвет рамки */
background: #FFFFFF;   /* фоновый цвет */
}

.sharebuttons a img{
border: none;
opacity:1.0;                 /* непрозрачность: 100% */
}

.sharebuttons a:hover img{
border: none;
opacity:0.7;                 /* непрозрачность: 70% */
}
Я вставил этот код себе перед строкой /* Footer
Пояснения в коде имеются, можно менять цвета, степень прозрачности и т.п.
Надеюсь, что это будет вам полезно.
Да, и ещё: чтобы незалогиненый в Я.ру пользователь при нажати на вашу кнопку вначале попадал на страницу с предложением залогиниться - вставьте себе в код перед тегом </head> следующий java-скрипт, который придумал sovety:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $("a.shareme[href^='http://my.ya.ru']").attr("href", function() {
      return "http://passport.yandex.ru/passport?mode=auth&amp;retpath=" + escape(this.href);
  });
});
</script>
За подробностями ещё раз приглашаю всех в посты sovety и artinblog.

среда, 23 июня 2010 г.

Как сделать в Blogger виджеты без названия.

В последнее время кто-то из разработчиков Blogger вдруг решил, что у каждого виджета типа HTML/Javascript обязательно должно быть название.
То есть теперь невозможно поставить или изменить старый виджет, если не присвоить ему какое-нибудь название. А в случае, если название не введено Blogger выдаёт ошибку и просит его ввести.
Увы, не для всех дизайнов это подходит. Кроме этого иногда содержание виджета и так бывает настолько очевидным, что название над ним выглядит лишним.
Однако можно сделать так, чтобы виджеты и по-прежнему можно было размещать без названия.
Для этого всего-то надо ввести в строку названия код:

<h2></h2>

И всё будет как прежде.

UPD: на блоге разработчиков Блоггера обещают скоро исправить эту ошибку.

Способ взят из bloggeruniversity.

вторник, 1 июня 2010 г.

Убрать внизу страницы ссылки "Следующие / Главная страница / Предыдущие".

Мне тут задали вопрос:
"не могу убрать внизу страницы ссылку  на главную своего блога "Главная страница"".

Убрать эту ссылку, вместе со ссылками "следующие" и "предыдущие" можно, насколько мне известно, следующим способом.

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

<b:include name='nextprev'/>

И удалить её.
На всякий случай, как обычно, сохраните перед этой операцией свой шаблон.

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

О том, как убрать надпись "Подписаться на сообщения (Atom)" внизу блога я уже писал.

воскресенье, 14 марта 2010 г.

Размещение фотографий в блогах Blogger, или как сделать красивый фотоблог.

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

Главным неудобством является то, что стандартные размеры фото не всем подходят.
А размеры эти следующие. Фотографию уменьшают по большей стороне (меньшая сторона в этом случае уменьшается автоматически, пропорционально первой).
Размеры большей стороны в автоматическом редакторе фото выходят такие:
  • "маленький" - 200 px
  • "средний" - 320 px
  • "крупный" - 400 px
  • "очень крупный" - 640 px
Но дело в том, что не у всех ширина блога одинаковая. Тем более, с появлением новых шаблонов, где ширина регулируется куда проще, чем раньше.
Оптимально (особенно для людей, выкладывающих фотографии в большом разрешении), чтобы все фотографии были равны ширине основной колонки блога.
Это выглядит эстетично и, кроме этого, позволяет читателю видеть фото в максимальном, насколько то позволяет дизайн блога, разрешении.

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



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



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

<div class="separator" style="clear: both; text-align: left;">
<a href="ссылка на фотографию"><img border="0" src="ссылка на фотографию" title="Название картинки" alt="Тэги картинки" width="ширина вашего блога" /></a>
</div>

Указывать теги изображения полезно для того, чтобы оно легче искалось поисковиками. Название картинки будет видно, если человек наведёт мышку на фото.
Узнать нужную ширину для вашего блога (если у него постоянная ширина, естественно, т.е. если это не "резиновый" шаблон) можно следующим образом.

Если вы пользуетесь старыми (уже два дня как старыми =)) шаблонами - то надо зайти в "Дизайн / изменить html", и посмотреть там в разделе #main-wrapper строку, выделенную ниже жирным:

#main-wrapper {
margin-$startSide: 20px;
width: 680px;

Значит, ширина вашей основной колонки блога - 680 пикселей. Она может быть и другой.
Всё, вы узнали ширину основной колонки.

Если же вы пользуетесь новыми шаблонами - то можете даже не лезть в код и посмотреть ширину основной колонки в "Дизайн / Дизайнер шаблонов / Дизайн / Изменение ширины" и вычесть из общей ширины блога ширину боковых колонок.
Предположим, что общая ширина вашего блога - 900 пикселей, а боковые колонки - 290 пикселей.
900 - 290 = 610.
Казалось, бы, это значит, что длина основной колонки блога - 610 пикселей.

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

В действительности всё проще. Вы можете создать сообщение с фотографией. Если количество пикселей, указанное в коде как "ширина вашего блога" будет избыточным - вы сразу это заметите, так как изображение не будет полностью влезать. Тогда надо уменьшать в вышеприведённом коде изображения количество пикселей до той поры, пока оно не будет полностью влезать.
Если картинка будет меньше чем нужно - наоборот увеличить.
За 5 минут можно легко узнать оптимальное количество.
Надеюсь, кому-нибудь поможет эта информация.

P.S.: В старом "интернет-эксплорере" уменьшенные таким образом изображения показываются с грубой пикселизацией. Но учитывая, что этим браузером уже почти никто не пользуется (и мы должны делать всё, чтобы про него и вовсе забыли) - можно этим пренебречь.

суббота, 13 марта 2010 г.

Новый редактор шаблонов.

В блоггере появился новый редактор дизайн шаблонов.
Вы можете его увидеть на странице настроек: "Дизайн / Дизайнер шаблонов".
Там куча всего нового и красивого, и полезного - никак не сравнить с тем, что мы имели до этого. Я рад.
Работает в Draft Blogger.
Александр уже перевёл официальную статью о новых возможностях: новый дизайнер шаблонов для блога. Можете почитать.
Интереснее всего, конечно, смотреть и щупать новый редактор собственными глазами и руками.

Краткое видео с демонстрацией новых возможностей:



Если компания Blogger ещё внедрит возможность ветвей комментариев, а также возможность писать "только для друзей" - то, думаю, можно будет забыть про ЖЖ.

четверг, 14 января 2010 г.

Как поменять шрифт и положение ссылки на комментарии в Blogger?

Когда мы смотрим на наш блог, то мы видим сообщения, и внизу, под сообщением, ссылку на комментарии (она же ссылка для того, чтобы написать комментарий).
Но иногда нам может захотеться сделать её покрупнее, переместить из левого края в правый, и т.п.
Сделать это не сложно. (Как обычно сохраняем существующий шаблон на всякий случай).
Заходим в дизайн/изменить html.
Щёлкаем "расширить шаблоны виджета".
Ищем строку a class='comment-link' expr:href='data:post.addCommentUrl'
(Обычно я ищу с помощью комбинации "Ctrl+F" на клавиатуре).
Находим строку, и видим примерно следующий код, в котором эта строка присутствует:

<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/>

Именно этот кусок нам надо окружить нужными нам тегами, чтобы ссылка на комментарии на нашей странице была такой, как мы хотим.
Чтобы лишний раз не заморачиваться поиском тегов я просто захожу в блоггер, нажимаю "создать новое сообщение", пишу там пару символов вроде "sdfsdfg" и потом делаю их, с помощью существующего визуального редактора жирными, большими, выровненными по левому/правому краю или центру - короче то что мне нужно. Потом захожу в "изменить html" и копирую оттуда нужные теги, которые появились в процессе редактирования вокруг слова "sdfsdfg".
нужными тегами окружаем указанный выше кусок кода.
В результате, если посмотреть на весь код среди которого мы рылись, выходит нечто вроде (красным выделено то, что теоретически мы добавили):

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.allowComments'>
<div align='right'><span style='font-size: large;'><b><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a></b></span></div>
</b:if>
</b:if>
</span>

Щёлкаем "Просмотр" и смотрим - вышло ли то, что мы хотели, потом сохраныем шаблон.
В некоторых шаблонах код, теоретически, может отличаться от приведённого здесь. У меня нет времени и желания это проверять - тем более что, если это действительно так, вы сами это выясните, и разберётесь по обстоятельствам.

вторник, 12 января 2010 г.

Favicon для Blogger в Opera.

Недавно я обнаружил, что favicon из некоторых наших блогов не отображается в Opera.
Так происходит у тех, кто держит свою favicon на сайтах Google.
Но решение найдено.
Как мы помним, раньше у нас стоял тот код, что указан здесь. Это правильно.
Но на гугл-сайтах есть какой-то редирект на картинки, или что-то в этом роде, что даже и не важно. Так вот, Opera такие штучки не кушает (всегда ли так было или недавно так стало - не знаю).
Поэтому надо добавить картинку в другое место, где на неё будет прямая ссылка.
Сайты народ для этого прекрасно подходят.
Итак, мы заходим в наш аккаунт на народ.ру (регистрируемся, если у нас там ещё нет учётной записи). Слева написано - "Управление сайтом". Щёлкаем на "редактировать".
Дальше - "Ещё инструменты", там - "Управление файлами" и "загрузить файл".
Загружаете иконку, и берёте ссылку на неё из того места, где написано "ссылка".
То есть ссылка на файл должна выглядеть не как http://ваш_сайт.narod2.yandex.ru/иконка.ico а как
http://ваш_сайт.narod2.ru/иконка.ico.

При этом всём строку со ссылкой на favicon в google-sites не надо удалять. Дело в том, что после смены адреса с гугл-сайтов на яндекс у некоторых, несмотря на то что иконка появилась в Опере, она пропала в Firefox. Поэтому надо оставить строку со ссылкой на строку в гугл-сайтах и добавить к ней такую-же со ссылкой на народ ру.
В результате это должно стоять перед тегом </head> в вашем коде блога, и выглядеть примерно так:

<link href='http://sites.google.com/site/ваш_сайт/адрес_favicon.ico' rel='shortcut icon' type='image/x-icon'/>
<link href='http://ваш_сайт.narodhttp://2.ru/адрес_favicon.ico' rel='shortcut icon' type='image/x-icon'/>

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


P.S.: Запоздало поздравляю всех с прошедшими Новым годом и Рождеством! =)
Желаю вам здоровья, благоразумия, и успеха в добрых делах!

понедельник, 19 октября 2009 г.

Как убрать строку "Подписаться на: Сообщения (Atom)" внизу блога.

Где-то месяц с лишним назад автор блога Boneshakers.ru, с которым мы случайно познакомились катаясь на велосипедах, спрашивал меня о том, как удалить строку "Подписаться на: Сообщения (Atom)" внизу блога.
Ведь многие из нас и так ставят ссылку на свою rss-ленту в FeedBurner где-нибудь в начале блога, и внизу ссылка уже не нужна. К тому же некоторым может показаться что она не вписывается в дизайн.

Сделать это, как оказалось, довольно просто.
Помните, мы с вами удаляли navbar? Вот это очень похоже.
Надо тоже вставить маленькую строку в код.
Когда мы удаляли navbar - мы вставляли строку прямо над словами "/* Variable definitions" или, в случае другого шаблона, над "GENERIC STYLE". На всякий случай - те же скриншоты этих двух случаев:

 
Так вот, в данном случае строку надо вставить точно там же.
Я поставил её сразу после строки для скрытия navbar-а (#navbar-iframe.......)
А строку надо вставить эту:

.feed-links {display: none; }

После этого ненужная нам ссылка внизу блога исчезнет.

По мотивам поста Aasthedonutturns.

вторник, 15 сентября 2009 г.

Вставить кат в нестандартный шаблон и настроить его.

Вчера наблюдал странный глюк из-за нового ката: после того, как я вставил его в пост сайдбар почему-то вниз. Как только убрал тег <!-- more --> всё вернулось на свои места.
Сегодня попробовал снова - и в этот раз вроде всё в порядке. Странно...
Кстати, тем у кого стоят нестандартные шаблоны - надо самостоятельно добавить в код пару строк, чтобы кат заработал и у них. (Как обычно на всякий случай сохраняем перед этим свой существующий шаблон).
В режиме html-коде блога нажимаем "расширить шаблоны виджета". Ищем строку <data:post.body/&gt;
Вставляем после неё код:

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if >

Сохраняем, готово.

Кроме того, что можно заменить надпись "далее" на что-нибудь другое, можно также настроить шрифт и положение этой надписи на странице. Мне, к примеру, нравится, когда она не в левом углу сообщения, а в правом, и выделена жирным шрифтом.
Для этого я добавил в html-шаблоне теги, выделенные ниже синим:

<b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <div align='right'><b><a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a></b></div> 
      </div>
    </b:if>

Вы, соответственно, можете добавить любые другие теги.

Да, и ещё: вот тут можно следать красивый виджет своего блога (а также твиттера, фото- или видео- аккаунта и т.п.), чтобы вешать его в каких-нибудь нужных местах: widgetbox.com

понедельник, 7 сентября 2009 г.

Превью сайтов в пустой вкладке Firefox.

В дополнение ко вчерашнему:
Вместо аддона New Tab JumpStart мне посоветовал добрый человек другой, как мне показалось более удобный.
А именно - Fast Dial. 
Мне понравилось. Много возможностей настройки.
Когда заходите на страницу и хотите её добавить - нажимаете правой копкой мыши по ней и отмечаете "Добавить в Fast Dial". А там уж двигаете как хотите, правите ссылку в свойствах, название (если нужно, конечно).

суббота, 1 августа 2009 г.

Убрать верхнюю панель и панель навигации в Mozilla Firefox.

Как я уже говорил в позапрошлом посте о недостатках дизайна Firefox - меня раздражали две лишние панели:


Со строкой "Файл, Правка, Вид" мы справились с помощью аддона Hide Menubar.
UPD: Теперь этот плагин не нужен! В новых версиях Mozilla Firefox чтобы убрать панель меню - надо зайти в Вид/Панели инструментов и снять галочку с "Панель меню".
После этого она исчезнет, но её можно будет вызвать в любое время, с помощью кнопки Alt.

Оказывается, возможно убрать и самую верхнюю панель с помощью Hide Caption.
Он, правда, сейчас относится к экспериментальным аддонам, но у меня всё нормально работает, под последней версией Мозиллы.
Кроме этого,  вроде как можно даже убрать панель навигации, то есть ту строку, в которой написаны веб-адреса. Мне правда, это не нужно. Но сделать это можно с помощью Hide Navigation Bar. Обратно панель навигации при этом можно будет вызывать щелчком F2. Правда на одном форуме, говорили что он глючный, когда браузер открыт в полноэкранном режиме (F11).

Так что теперь верх браузера у меня выглядит так:


Ничего лишнего. Всё остальное, при необходимости, вызывается нажатием клавиши Alt.

воскресенье, 26 июля 2009 г.

Недостатки Mozilla Firefox и попытка их преодолеть.

Браузер Chrome меня приучил раз и навсегда к отсутствию на экране всяких лишних элементов, которые занимают место при минимальной функциональности.
Не знаю почему, но уже на протяжении почти года, с выхода Chrome происходит одна неприятная вещь.
Иногда комп отрубается и выдаёт ошибку. Притом происходит это только тогда, когда включен Хром, и никогда больше. К счастью - редко. Но всё равно неприятно.
Поэтому иногда я перехожу обратно на Mozilla. И когда я на неё перехожу - меня сразу дичайшим образом начинают раздражать
  1. Совершенно нефункциональная строка сверху (точнее верх окна браузера), на котором написано Mozilla Firefox и название страницы, которая в данный момент открыта. Почему разработчики до сих пор не убили её - я на знаю. Давно пора.
  2. Строка "Файл, Правка, Вид, Журнал...". К ней обращаешься, может быть раза два за день, и она тупо занимает место.
По поводу второго пункта есть оговорка - кнопка "Закладки". Но панель закладок я давно приучился вызывать кликом Ctrl+B. В Хроме, надо сказать, панель закладок тоже удобнее, по моему скромному мнению: по горизонтали у меня в ней расположены все основные тематические папки с закладками. В Фаерфоксе же панель с закладками вертикальная - а это неудобно тем, что при открытии одной папки другие, те что ниже, улетают вниз. Приходится проматывать вверх-вниз этот "столбик" с папками закладок, или каждый раз закрывать уже открытую папку.

К счастью, на пункт 2 есть лекарство: аддон Hide Menubar для Mozilla Firefox, который прячет панель "Файл, Правка..." и её можно в любой момент вызвать нажатием клавиши Alt. очень удобно.
Осталось разделаться с пунктом 1, а также как-то сделать обращение к закладкам более удобным.
Если кто-то знает о таких аддонах - сообщайте, буду рад.

P.S.: Да, предвижу ответ, что можно нажать F11 и ненужные панели пропадут. Я знаю. Но тогда не будет видно, как пришло сообщение в iсq и т.п. Это неудобно.
Блогун - монетизируем блоги

пятница, 23 января 2009 г.

Кат не работает в Google Chrome.

Неожиданно для себя открыл, что мой любимый способ ката не работает в Google Chrome.
Во всяком случае в бета-версии Chrome 2.0 (я её тестю).
Точнее сказать, там надпись "читать далее" отображается внизу поста, но подкат ничего не скрывается.
Я просто редактировал свой пост про "Литой свинец" как раз в Хроме, и с удивлением увидел, что никакого ката нет. Несколько раз просматривал html-код, думая что куда-то мог затесаться лишний тег, но безуспешно.
Потом поэкспериментировал в Firefox - и всё было нормально (в результате кат так и не стал там делать - надоело возиться).
Естественно, в этом вина не ката, которым мы пользуемся, а браузера. Я им в поддержку написал, что есть такой глюк - может быть исправят.
Всё-таки "Хром" ещё очень сырой, хотя в целом мне нравится.

воскресенье, 14 декабря 2008 г.

Favicon в Google Chrome и Internet Explorer. Анимированная favicon.

Как я вчера заметил - в Google Chrome (а также ещё и в Internet Explorer) favicon в Blogger, сделанный по ранее описанному мною способу, не отображается.
Но это исправимо.
Чтобы всё заработало - надо вставить перед тегом </head> следующую строку:

<link href='адрес_ico-файла_в_сети.ico' rel='shortcut icon' type='image/x-icon'/>

При этом старую строку можно не убирать.
И ещё: если у кого-то вместо ico-файла стоит анимированная gif-иконка - знайте, в Интернет-эксплорере она работать не будет. Добавьте вышеприведённую строку с ico-файлом, если хотите чтоб в Эксплорере и Хроме была видна хотя бы статическая.

И, собственно, способ сделать анимированную favico:
Чтоб это сделать вы, естественно, должны иметь анимированную картинку в формате gif, которую хотите поставить.
А затем, снова перед тегом </head> вставить код:

<link href='адрес_gif-файла_в_сети.gif' rel='icon' type='image/gif'/>

Эту инфу я нашёл в Blogger4you.

UPD: Чтобы favicon отображалась в браузере Opera - прочтите этот пост: favicon для Blogger в Opera, где написано как это сделать.

вторник, 2 декабря 2008 г.

Сообщения под кат в Блоггере. Ещё один способ.

Вот ещё один способ убирать сообщения под кат.
В отличии от предыдущего способа он намного проще, хотя принцип тот же.
Также он отличается тем, что скрытую часть сообщения (ту, что под катом) невозможно прочитать на той же странице, на которой находится читатель - при нажати на ссылку "читать полностью" идёт направление с главной страницы блога на саму страницу поста.
Это нормально, я не вижу в этом ничего странного.
Недостаток в том, что в этом способе, после его реализации и правки кода, ссылки "Читать полностью" появляются совершенно во всех сообщениях без исключения.
Даже если они просто короткие, и там не было предусмотрено никакого ката.
Всё равно появится ссылка, при нажатии на которую человек попадёт на страницу этого же сообщения, но не найдёт там ничего такого, чего бы он уже не прочёл.
Говнецо =)
Тем не менее, хотя бы для порядку, этот способ надо упомянуть.

Реализация:

Заходим в макет/изменить HTML.
Делаем, на всякий случай, резервную копию своего, уже существующего, шаблона, сохраняем её себе на компьютер.
Ставим справа вверху, над рамкой с кодом, галочку "расширить шаблоны виджета".
Затем прямо перед тегом </head> вставляем код:

<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>

После этого мы должны найти у себя тег <data:post.body/>
И после него вставляем:

<b:if cond='data:blog.pageType != "item"'><br />
<a expr:href='data:post.url'>Читать полностью...</a>
</b:if>

Сохраняем.
Затем идём в настройки/форматирование.
И внизу, в рамочке "шаблон сообщения" вставляем:

Видимый текст<span class=fullpost>скрытый текст</span>

Всё, этот последний тег будет появляться в форме составления сообщения при написании каждого нового сообщеия.
Соответственно - то, что надо поместить вне ката, т.е. видимым (обычно это первые один-два абзаца), мы помещаем, при написании нового сообщения, до этого тега - вместо слов "видимый текст".
А то что надо скрыть под кат - помещаем между тегами <span class=fullpost> и </span> т.е. вместо слов "скрытый текст".
Эти теги видны при написании поста в режиме "изменить HTML", а не в визуальном редакторе, естественно! Всё.
Этот способ я нашёл у Pehota, а он нашёл у Vonderer; на этом цепочка ссылок к первоначальному источнику теряется... Ставьте обратные ссылки!
P.S.: Готов вас обрадовать: этот способ вообще взят из официального хелпа к Blogger.

Однако я рекомендую использовать лучший - третий способ ката!

Как сделать кат (cut) в Blogger, так же как это можно в Livejournal? Post Summaries.

Как сделать сообщения, убирающиеся под кат в Blogger, также как можно сделать это в Livejournal?

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

Другие способы сделать кат: второй способ и третий способ.

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

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

Реализация:
Как обычно, не забываем сделать резервную копию своего шаблона и сохранить её на своём жёстком диске.
Затем идём в макет/изменить HTML.
И там, сразу после тега <b:skin> вставляем код:

    .expand
    {
        display: inline;
    }
    .collapse
    {
        display: none;
    }

А сразу перед этим же тегом <b:skin> вставляем код:

<script type="text/javascript" language="javascript">
    //<![CDATA[
    function toggleMore() {
    var currentText = this.innerHTML;
    if (this.nextSibling.nodeName == "#text") {
    this.parentNode.removeChild(this.nextSibling);
    }
    if (currentText == "More...") {
    this.innerHTML = "Hide <br />";
    this.nextSibling.className = "expand";
    }
    else {this.innerHTML = "More...";
    this.nextSibling.className = "collapse";
    }
    }
    function attachHndlr() {
    var anchors = document.getElementsByName("ToggleMore");
    for (var i = 0; i < anchors.length; i++) {
    anchors[i].onclick = toggleMore;
    anchors[i].href="#" + i;
    }
    }
    //]]>
    </script>

Потом заменяем тег <body> тегом <body onload='attachHndlr();'>

Сохраняем темплейт.
Потом идём в настройки/форматирование.
Находим там внизу строку "шаблон сообщения", и вставляем в рамочку эти строки:

    <a href="#" name="ToggleMore">More...</a><span class="collapse">

  </span>

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

<span class="collapse"> и </span> 

Слово "More..." вы можете заменить на любое своё. Но если вы заменяете его на своё - то, после щелчка по нему мышкой, на месте ваших слов всё равно появится слово "More...", которое читателю придётся щёлкнуть ещё раз, чтобы развернуть пост. Поэтому, чтобы терпение читателей не лопнуло - лучше не меняйте слово "More...".
И вообще, этот способ из-за всех его недостатков мне не нравится.
Я б его не использовал (и не использую).
Хотя я его потестил - работает.

P.S .: Да, чуть не забыл. Способ найден здесь.

воскресенье, 2 ноября 2008 г.

Футер из трёх колонок для Blogger.com.

Сейчас модно всякие штуки в стиле веб 2.0.
То, из всей этой дванольщины, что касается дизайна а не функциональности, я считаю просто поветрием моды. Если мы посмотрим на эволюцию рекламных плакатов, или, к примеру, оформления сигаретных пачек, то много из того что мы увидим покажется нам забавным (или даже смешным).
Мы с удивлением смотрим на старинные одежды, в которых ходили люди пару веков назад. А я, даже, к примеру, нахожу нелепыми модную одежду и причёски женщин времён 60-х.
Точно также будут смотреть и на нынешних эмо =)
Впрочем, в 2.0 есть и довольно функциональные стороны (некоторые из этих фишек, возможно, были и раньше - просто их не называли таким модным ныне словом).
Я слышал мнения, что футер сайта (footer) т.е. его нижяя часть, разделенная на несколько частей - это заслуга веб 2.0.
Не знаю, может быть это и так. Но в любом случае, присоединяться к сообществу тех людей, которые при словосочетании "веб 2.0" блаженно замирают, я не собираюсь. Не люблю модные слова и подобные же веяния. Время отсеет лишнее, и посмотреть на вещи более трезво мы сможем лишь в ретроспективе.

Итак, на движке Blogger, если захотеть, можно сделать и трёхколоночный футер.
Т.е. добавить места ещё для трёх виджетов внизу.
Я лично пробовал это на своём персональном блоге, но, за ненадобностью и отсутствием чего-то такого, что можно было бы в это появившееся место добавить, удалил это новшество.
Должен отметить: всё-таки похоже что в некоторых дизайнах блоггера приведённый ниже способ не действует.

Итак, чтобы сделать это, как обычно, перед всеми изменениями делаем бэкап своего шаблона на тот случай чтобы можно было всё вернуть, если что-то пойдёт не так как надо (делается это в макет/изменить HTML / загрузите шаблон из файла на жестком диске - и сохраняете его себе на жёсткий диск).
После этого, если в вашем футере на данный момент уже расположен какой-либо виджет, уберите его на время (предположим переместите куда-нибудь на боковую сторону).

Затем находим в коде строки:

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

Кстати, эта секция (т.е. footer-wrapper) у вас может называться и несколько иначе - к примеру "footer-wrap" или "footer").
Затем, внимание, мы должны заменить ту строку, что выделена красным цветом, следующим кодом:

<div id='footer-column-container'>

        <div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>

   <b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
        </div>

        <div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
   <b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
        </div>

        <div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>

   <b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
        </div>

<div style='clear:both;'/>
<p>
<hr align='center' color='#5d5d54' width='90%'/>
</p>
<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>

<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>

</div>
<div style='clear:both;'/>

</div>


Затем в своём коде вы находите вот такой вот маленький фрагмент:
</b:skin>

И сразу прямо над строкой в которой он расположен вставляете это:


#footer-column-container {
clear:both;
}

.footer-column {
padding: 10px;
}

Можете предварительно нажать "просмотр", на всякий случай, если вы где-то ошиблись.
Скорее всего ошибка, если вы её допустили, будет заметна.
Сохраняете шаблон, идёте в элементы страницы и видете места для новых трёх виджетов в вашем футере.
Затем можно заменить <hr align='center' color='#5d5d54' width='90%'/> на более удобоваримый цвет (то что выделено красным), если этот вам не подойдёт. Код можно посмотреть в таблице цветов.

Мне, кстати, не понравилось в данном коде то, что он расставляет виджеты почти по всей ширине страницы (ведь не все блоги растянуты по всей ширине страницы, некоторые расположены по её центру).
Чтобы убрать этот разброс поменяйте "90%" (то что выше выделено синим) на 80 или 70.
Всё, наслаждайтесь, придумывайте что вам запихнуть в новые футеры.

В CSS я особо не разбираюсь, и если что-то и понимаю, то только благодаря моему примитивному знанию английского языка. Поэтому этот код я придумал не сам, а взял отсюда. Не знаю, законно ли это, но никакого слова вроде "copyright" я там не нашёл, так что будем считать что автор поста разрешил себя копировать, тем более что я ссылаюсь на неё.

пятница, 31 октября 2008 г.

Изменить отображение названия поста на странице.

Когда мы открываем страницу сообщения блога на движке blogspot, то мы видим в заголовке страницы (сверху в названии папки браузера и во вкладке самой страницы):

Название блога: Название поста.

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

Название поста.

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

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

<title><data:blog.pageTitle/></title>

Это, кстати, та самая строка, после которой вставляется значение favicon.
И эту строку мы заменяем на:

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>

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

Да, чуть не забыл, узнал я это отсюда.

четверг, 23 октября 2008 г.

Сделать favico в blogger.

Сегодня утром я проснулся с похмелья и обнаружил, что favicon на некоторых блогах blogger исчезли, в смысле перестали работать и отображаться.
Ну что же хорошего?
Favicon (т.е. картинка, которую видно во вкладках вашего браузера) это та небольшая деталь, которая делает восприятие сайта приятным, добавляет профессионализма в его облик.
Для того чтобы сделать favico для блога надо взять вот этот код:


И указать в нём адрес вашего favico-файла в интернете. Такой файл должен иметь расширение ".ico".
Так вот, почему же сегодня иконки у некоторых перестали отображаться?
Потому что у этих людей эта строка кода был не в том месте.
У тех, у кото favico в blogger перестала работать (или не работает до сих пор) эта строка кода вставлена сразу после тега

Т.е.где-нибудь неподалёку от других мета-тегов.

А вставлять его надо не там, а непосредственно под строкой:

Внимание! Если вы ранее меняли отображение названия поста на странице, то эта строка будет выглядеть как описано здесь!

Если код находится там, то всё прекрасно работает.
Итак, как сделать favico для blogger?
Идём в панель инструментов / макет / Изменить HTML.
Находим строку

(Для нахождения нужной строки удобно пользоваться сочетанием клавиш Ctrl+F)

И сразу под ней вставляем код:


Перед этим, естественно, надо залить свою иконку в инет. А перед этим её надо сделать, или позаимствоать. Я лично для изготовления файлов ico ползуюсь программкой IcoFX (насколько помню, она вроде даже фриварная).
Сделали иконку, залили в инет, указали её адрес в вышеуказанном месте кода. И всё работает.
А если у вас нет места в интернете куда можно было бы заливать файлы - то добро пожаловать на sites.google.com - там вам предоставят 100 Мб свободного места для хранения ваших файлов (впоследстви можно сделать больше если будет надо). Там можно даже не делать сайт, а просто хранить файлы.

О том, что сделать для того чтобы favicon отображалась также в Chrome и Internet Explorer, и о том, как сделать анимированную фавикон - читайте тут: Favicon в Google Chrome и Internet Explorer. Анимированная favicon.