Как добавить виджет в тело поста или страницы

понедельник, 25 июня 2012 г.
Вряд-ли кому-то из пользователей Blogger нужно объяснять как разместить (создать) тот или иной виджет в сайтбаре или футере. Это дело элементарное даже для новичка. Но, что если вам необходимо вставить виджет в само сообщение (как вариант – разместить на странице)? Такую возможность платформа не регламентирует, тем не менее, она есть. Забегая наперед, следует заметить, что реализация достаточно экзотическая и, возможно, будет использоваться достаточно редко.

Главная суть метода заключается в следующем: на конкретной странице или в определенном посте мысленно "делим" контент на две части - до виджета и после. Первую размещаем в блоге как обычно в блоге, дальше с помощью редактирования HTML шаблона добавим к ней и нужный виджет, и вторую заключительную часть. Да-да, я же говорил необычный хак:) Итак, давайте посмотрим как это можно сделать:
Шаг 1
Создаем новое сообщение или страницу, наполняем его (её) контентом, публикуем. Например, это будет страница "О блоге".
Шаг 2
Создаем необходимый нам виджет и пока размещаем его в удобном месте (например, под постом). Все это можно сделать в разделе "Дизайн" Я, например, создал опрос:

Шаг 3
Находим ID нашего виждета - для этого нажимаем редактировать виджет (Edit) и смотрим адресную строку браузера. Нас интересует написанное после последнего знака равно (параметр называется widgetId). В моем случае id «Poll1».
Шаг 4.
Поскольку наша реализация подразумевает наличие после виджета еще какого-нибудь текста, то вам необходимо:
  1. "Вырезать" текст (что будет располагаться после виджета) из поста/страницы и сохранить его в HTML формате
  2. Дальше возвращаемся к редактору макета в раздел "Дизайн", создаем HTML/JavaScript виджет, и вставляем этот код в поле "Содержимое" (Content) в формате HTML.
  3. Сохраняем виджет и размещаем его под нашим первым виджетом, который мы создавали с вами на втором шаге. 
  4. Вам так же нужно выяснить ID этого виджета.
Шаг 5
На этом шаге нам нужно чтобы наш виджеты отображались только на нужной нам странице. Перед реализацией этого шага обязательно нужно(!) прочитать предыдущий пост про отображение виджета на конкретной странице блога. Я не буду сейчас перепечатыать его полностью - лучше зайти туда и спокойно прочитать, так как там этот вопрос рассмотрел очень подробно.

Суть заключается в том, что в редакторе HTML шаблона нам нужно найти по ID виджеты который создали на втором и четвертом шаге, а потом добавить для них специальное условие "отображать только на нужной странице". В результате вы будете заходить на эту страницу видеть ее содержимое, потом виджет, а потом вторую часть статьи или страницы, которая фактически тоже является виджетом, но об этом знаете только вы:)

P.S. Купите своей девушке духи в интернет магазине парфюмерии http://makeup.com.ua/ который располагает широким ассортиментом качественных парфюмов.
Понравился пост? Подпишись на обновления блога по BlogoHelp RSSRSS, BlogoHelp по EmailEmail или twitter!
Как вам пост?   

Шаблон для видео блога на Blogspot

В блогосфере вы можете встретить тематические блоги где авторы пишут о разных направлениях - seo, путешествия, фриланс, медицина, кулинария, автомобили, дизайн и многое-многое другое. Всех их, так или иначе, объединяет способ подачи материала - текстовые статьи с изображениями, хотя в интернете есть и другие варианты. Так называемые "видео блоги" содержат преимущественно видео контент - авторские ролики, трейлеры, иногда даже фильмы и т.п. Сегодня представляю шаблон Trendy Tube который создан специально для виде блогов.
В принципе, здесь нет никаких особенных фишек и нестандартной функциональности, прототипом его выступил популярный блог Youtube Trends. В нем, как вы уже наверное, поняли все ролики представлены с видеосервиса Youtube.
Визуально шаблон достаточно простой, выполненный в серых цветах, состоит из двух колонок. Слева представлены посты с видео, справа сайдбар, где найдете такие элементы как список ссылок, последние записи и архив. Безусловно, сможете добавить туда все остальные виджеты, которые поддерживает Blogspot.
Что интересно, то для постов в самом конце имеются социальные иконки Blogger позволяющие добавить ссылку на пост в твиттер, фэйсбук или отправить на почту. В большинстве шаблонов данная функция не настроена. Здесь, в принципе, ее назначение больше востребовано, так как часто видеоролики являются хорошим вариантом вирусного маркетинга.
На странице с полным текстом записи вы также найдете список комментариев с поддержкой аватаров пользователей. Дата публикации, метки отображаются сразу после заголовка. В целом шаблон Trendy Tube достаточно прост и нельзя сказать, что он какой-то уникальный - видео из Youtube добавлять можно для любых блогов и так. Хотя, с другой, стороны, смотря на сайт Youtube Trends (где этот дизайн внедрен) можно сказать, что макет хорошо подходит блогу. 
P.S. Если же вы хотите разобраться в веб-разработке с нуля и узнать как сделать html сайт то заходите на наш сайт, html и css - основы основ, которыми нужно обладать.
Понравился пост? Подпишись на обновления блога по BlogoHelp RSSRSS, BlogoHelp по EmailEmail или twitter!
Как вам пост?   

Отображение виджета на конкретной странице блога

суббота, 16 июня 2012 г.
Иногда возникают ситуации, когда та или иная информация должна отображаться только на специфической странице. Раньше я писал про условный оператор и вывод данных на главной что в последствии использовал, например, для задания МЕТА тегов. Данный вариант решения целиком и полностью размещался в коде, что не всегда понятно для пользователей-новичков. Поэтому есть смысл рассмотреть задачу отображения виджета на главной или определенной странице. В таком случае вы можете один раз настроить вывод блока, а потом спокойно редактировать его через админку в разделе "Дизайн" - получится наглядно и просто. На главной можно выводить какие-то приветственные сообщения, ссылки, разные скрипты, убрав их с остальных страниц дабы они не мешали посетителям.

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

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


2. Нужно определить ID для данного виждета - выбираете его редактирование и в адресной строке интернет браузера увидите ссылку, где параметр widgetId вам нужно запомнить, в данном примере там значение Poll1.

3. Находим код виджета в шаблоне. Для этого заходим в раздел "Шаблон" - кликаем по кнопке "Изменить HTML", а потом нажимаем "Приступить". По ID легко можно будет найти наш блок Poll1:
<b:section  class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Сообщения блога' type='Blog'/>
<b:widget id='HTML2' locked='false' title='' type='HTML'/>
<b:widget id='Poll1' locked='false' title='Голосование' type='Poll'/>
Если вы в данном окне отметите галочку "Расширить шаблоны виджета", то появится чуть больше кода для каждого из блоков, наше голосование будет иметь код:
<b:widget  id='Poll1' locked='false' title='Голосование'  type='Poll'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
 <div class='widget-content' id='widget-content'>
   <iframe allowtransparency='true' expr:height='data:iframeheight' expr:name='&quot;poll-widget&quot; + data:pollid' expr:src='data:iframeurl' frameborder='0' style='border:none; width:100%;'/>
   <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>
4. Дальше - добавляем в код условный оператор. Внимание, перед редактированием шаблона нужно его сохранить на компьютер дабы потом можно было восстановить. Формат этого "добавляемого условия" следующий. В данном случае условие отображает виджет только на главной странице.
<b:if cond='data:blog.url == data:blog.homepageUrl'>
Обычный код виджета...
<b:else/>
<style type='text/css'>
#XXXX {display:none;} /* убирает пустое место от виджета когда его нет */
</style>
</b:if>
Здесь XXXX это имя видежта, то есть в примере #Poll1. При этом вместе data:blog.homepageUrl вы можете поставить любую другую ссылку - например на страницу или пост блога. В таком случае виджет будет отображаться только на ней.

Дабы понять как именно должен быть размещен условный код предлагаю оценить как выглядит виджет после его вставки:
<b:widget  id='Poll1' locked='false' title='Голосование'  type='Poll'>
<b:includable id='main'>
<b:if cond='data:blog.url == &quot;http://new-tods-blog.blogspot.com/2009/03/2.html&quot;'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content' id='widget-content'>
<iframe allowtransparency='true' expr:height='data:iframeheight' expr:name='&quot;poll-widget&quot; + data:pollid' expr:src='data:iframeurl' frameborder='0' style='border:none; width:100%;'/>
<b:include name='quickedit'/>
</div>
<b:else/>
<style type='text/css'>
#Poll1 {display:none;}/*remove blank space that the gadget leaves*/
</style>
</b:if>
</b:includable>
</b:widget>
Начинает условие после строки и заканчивается сразу перед . После того как весь код добавлен, внимательно проверьте все ли указали и сохраняйте. Если возникла ошибка, что-то сделали не так, еще разок все тщательно посмотрите. Дальше идете на сайт и проверяете работает ли условие для отображения виджета - у меня получилось:)

P.S. Для создание своего представительства в сети пригодится бесплатный конструктор сайтов для бизнеса - сервис Nethouse с хорошей функциональностью.
Сделайте замечательный подарок своей половинке в интернет магазине парфюмерии http://makeup.com.ua/ заказав ей прекрасные духи от ведущих европейский брендов.

Понравился пост? Подпишись на обновления блога по BlogoHelp RSSRSS, BlogoHelp по EmailEmail или twitter!
Как вам пост?   

КупонГид - скидки по хостингу, доменам и другим интернет услугам

пятница, 15 июня 2012 г.
Сервисы скидок в интернете популярны вот уже который год подряд, но в отличии от самого начала, сейчас встречается достаточно много реально интересных предложений. И что самое главное - тематика купонов значительно расширилась, теперь можно найти скидки даже для интернета. Чем не повод заказать, скажем, услугу VPS сервера с приличной скидкой у одного из хостеров? Найти подобные предложения можно в сервисе КупонГид. Данный проект является агрегатором всех популярных скидочных сервисов, что значительно упрощает работу с ними.
С его помощью разные предложения по купонам будут регулярно проходить на вашу почту. Я, как и многие пользователи, уже достаточно давно пользуюсь услугами КупонГида, время от времени просматривая интересные предложения. Ведь не зря говорится: сэкономленные деньги – всё равно, что заработанные. Вот и решил для себя: почему бы кроме различных скидок на кафе и бары не попробовать что-то связанно с компьютерами - по сути, разницы нет какие услуги заказывать.
Предложения по интернет направленности вы сможете найти в разделе Бизнес. Здесь есть скидки на:
  • Создание сайтов, разработку логотипов.
  • Посещение различных вебинатор, курсов и семинаров.
  • Домены и хостинг.
  • SEO аудит и продвижение сайта.

В общем, для тех, кто работает в интернете или делает здесь бизнес, подобные услуги будут не лишними, поэтому имеет смысл, так сказать, держать руку на пульсе актуальных скидочных предложений. Также раздел Бизнес содержит купоны, которые непосредственно связны с ведением своего дела - это и регистрация предприятия, и специальное программное обеспечение, и бухгалтерские/юридические услуги. 
Кстати КупонГид, вместе с другими скидочными сервисами, можно использовать в качестве хорошей рекламы для своих интернет проектов и начинаний. То есть, например, если вы занимаетесь созданием сайтов или у вас есть, допустим, программа-конструктор сайтов, которую хотите продавать, - скидки помогут привлечь клиентов и покупателей!. По сути, купоны изначально для этого и задумывались.
Что удобно в КупонГид так это просмотр всех предложений в одном месте - проект реально заменил для меня десяток скидочных сайтов, на которые я был подписан. Кроме того, не обязательно даже заходить на сам проект - ведь на почту приходят ежедневные рассылки. Можно искать предложения там, а потом уже переходить на сайт дабы не терять время изначально. За счет имеющихся фильтров в КупонГид вы можете выбирать скидки в конкретном городе, а также просматривать определенную тематику - это упростит задачу поиска среди многочисленных предложений.
Вообще интернет направленность в КупонГиде это лишь малая толика того, что там имеется. Все мы люди и живём не только в сети, поэтому скидки для покупок, походов в кино, кафе явно не будут лишними.
Понравился пост? Подпишись на обновления блога по BlogoHelp RSSRSS, BlogoHelp по EmailEmail или twitter!
Как вам пост?   

Как изменить цвет сайдбара в Simple шаблоне?

пятница, 1 июня 2012 г.
Один из стандартных шаблонов для Blogger, который пользуется большой популярностью, - это Simple. Недавно нашел в интернете интересный "рецепт" по его модификации, который может многим пригодится. Там, конечно, есть свои нюансы и в итоге все получилось не очень гладко с установкой, но в общеобразовательных целях, думаю, в сегодняшним посте все это можно рассмотреть. Речь пойдет об изменении цвета фона и сайдабре, похожие "цветовые хаки" я уже однажды рассматривал в посте про то как изменить цвет заголовка постов в новых шаблонах.
Но сейчас речь пойдет не о заголовках, а о расцветке боковых колонок блога - что если вы захотите вдруг их изменить для шаблона Simple? Решение этой задачи займет считанные минуты. Итак:
Шаг 1
Заходим в админку Blogger в раздел Шаблон, где кликаем по ссылке "Изменить HTML" и открываем редактор кода (кнопка Продолжить). Далее находим следующий фрагмент кода:
/* Variable definitions
====================

<Variable name="keycolor" description="Main Color" type="color" default="#66bbdd" value="#66bbdd"/>
Шаг 2
Добавляем сразу после этого фрагмента следующие строки:
<Group  description="Sidebar Background" selector="body">
<Variable name="sidebar.bgl.color" description="Left Sidebar BG Color" type="color" default="#DCDCDC" value="#DCDCDC"/>
<Variable name="sidebar.bgr.color" description="Right Sidebar BG Color" type="color" default="#666666" value="#666666"/>
</Group>
В результате у нас должно получится что-то вроде:
/* Variable definitions
====================
<Variable name="keycolor" description="Main Color" type="color" default="#66bbdd" value="#66bbdd"/>
<Group description="Sidebar Background" selector="body">
<Variable name="sidebar.bgl.color" description="Left Sidebar BG Color" type="color" default="#DCDCDC" value="#DCDCDC"/>
<Variable name="sidebar.bgr.color" description="Right Sidebar BG Color" type="color" default="#666666" value="#666666"/>
</Group>
Шаг 3
Далее находим ]]></b:skin> и вставляем перед этой строкой стили оформления для только что созданного блока сайдбара:
.column-left-inner, column-left-outer { background: $(sidebar.bgl.color); }
.column-right-inner, column-right-outer { background: $(sidebar.bgr.color); }
Шаг 4
Сохраняем код, после чего вы сможете увидеть изменения в фоне сайдбара на самом сайте. Чтобы изменить цвет фона идем в дизайнер шаблона (Template Designer). Он находится в том же разделе админки "Дизайн", но уже кликаем по кнопке "Настроить".
Добавленные цвета вы найдете в пункте меню "Дополнительно" - Sidebar Background (Фон боковой панели). Причем здесь будет 2 значения - для правого и левого сайдбара. Если у вас в шаблоне только один, то изменение второго значения ни на что влиять не будет. 
В принципе, сам хак на этом можно считать завершенным, но, как я уже сказал в начале, есть тут небольшая проблемка. Шаблон Simple устроен таким образом, что высота его боковой колонки (height) является фиксированной и зависящей от количества элементов / контента в сайдбаре. То есть, если, например, основная область контента будет слишком длинной, а сайдбар "покороче", то фон не будет будет растягиваться до низу - выглядеть это все будет достаточно "уныло" и некрасиво. Конечно, можно задать для соответствующего стиля высоту:
.column-right-inner, column-right-outer { background: $(sidebar.bgr.color); height: 1000px;}
Но вы не можете знать насколько большой по высоте у вас получится сайт в целом. Значение height: 100%, что иногда помогает в таких случаях и выравнивает сайдбар по всех ширине колонки, применить не удается за счет особенностей структуры шаблона Simple. Если внести в его код определенные дополнительные изменения - думаю, задачу можно решить. Хотя, с другой стороны, большинству пользователей, далеких от HTML и CSS проще выбрать иной, подходящий их шаблон.
P.S. Мониторинг обменных пунктов позволяет находить самый выгодный курс на обмен wmr - wme и других электронных валют, на больших суммах экономия существенна.
Закажите подарок для своей любимой девушки, лучшая элитная парфюмерия http://makeup.com.ua/ доступна в нашем интернет магазине по доступным ценам с доставкой.
Спортивный покер набирает огромную популярность, на сайте internet poker вы узнаете про секреты и особенности этой игры.
Понравился пост? Подпишись на обновления блога по BlogoHelp RSSRSS, BlogoHelp по EmailEmail или twitter!
Как вам пост?   
Related Posts with Thumbnails