2012-12-30

Textual description of firstImageUrl

С Новым годом 2013!

Дорогие друзья! Поздравляю всех с наступающим Новым 2013 годом!

Пусть сбудутся самые неожиданные желания! Пусть вас сопровождает весь год Добро, Любовь и Удача! 

Читать далее ...

2012-12-23

Textual description of firstImageUrl

Новогодние иконки социальных сетей

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

Инструкция по установке новогодних иконок в блог Blogspot

  1. Перейдите в редактор html админки blogspot.com и найдите тег </head>, вставьте до него отрезок кода:
    ..
    <script type="text/javascript" src="http://w.sharethis.com/gallery/shareegg/shareegg.js"></script>
    <script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
    <script type="text/javascript">stLight.options({publisher: "bea50586-2b9f-448d-947a-01385f28e305", onhover:false});</script>
    <link media="screen" type="text/css" rel="stylesheet" href="http://w.sharethis.com/gallery/shareegg/shareegg.css"></link>

  2. Найдите в шаблоне блога тег </body> и вставьте до него код:
    <div style='position: fixed; bottom: 2%; left: 2%;'><div id='shareThisOrnament' class='shareEgg'></div>
    <script type='text/javascript'>stlib.shareEgg.createEgg('shareThisOrnament', ['facebook','twitter','googleplus','pinterest','stumbleupon','linkedin','email','sharethis'], {title:&#39; <data:blog.pageTitle/>&#39;,url:&#39;<data:blog.url/>&#39;,theme:'holiday'});</script>
    </div>
  3. Виджет разработал Paul Crowe
Читать далее ...

2012-11-24

Textual description of firstImageUrl

До Нового года осталось… (2020 год)



До нового года осталось..



Посетителям вашего блога будет интересно знать сколько дней осталось до нового года. К приближающемуся празднику разрабатывают уже специальные информеры – скрипты, флэш и др.
Хочу предложить вам информер нового года,
Читать далее ...
Textual description of firstImageUrl

3D социальные иконки


Сегодня вы узнаете как установить на свой блог 3d социальные иконки с эффектом вращения. Известно, что чем более оригинально выглядят ваши иконки, тем больше будут кликать по ним ваши посетители, и тем больше соответственно будет у вас подписчиков по rss и e-mail, фолловеров в твиттере, друзей в google + и fasebook.
Похожие записи:
Вот так выглядят социальные иконки:

Icon Icon Icon Icon Подпишись на Pinterest

Для того, чтобы вставить их на страницы вашего блога, вам нужно добавить гаджет HTML / JavaScript с кодом:
..
<style> #social a:hover {background-color: transparent;opacity:0.7;} #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style> <center><div id="social"> <!--Start Rss Icon--> <a title="Подпишись на RSS" href="URL RSS" target="_blank"><img border="0" src="https://3.bp.blogspot.com/-JJAnjTFe4mQ/UA6_gexOboI/AAAAAAAAH8w/pUVfxnjRUM4/s1600/RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Rss Icon--> <!--Start Email Rss Icon--> <a rel="nofollow" title="Подпишись письмом" href="Ссылка на подписку по email" target="_blank"><img border="0" src="http://4.bp.blogspot.com/-1BWe2ZnJHas/UA6_hrD6_GI/AAAAAAAAH80/exs4JwDuyhY/s1600/RSS-EMAIL-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Email Rss Icon--> <!--Start Facebook Icon--> <a rel="nofollow" title="Like Our Facebook Page" href="Ссылка на ваш профиль fasebook" target="_blank"><img border="0" src="https://4.bp.blogspot.com/-dkmDM3RXcoE/UA6_d28wCyI/AAAAAAAAH8Y/9E3PI3lXueM/s1600/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Facebook Icon--> <!--Start Twitter Icon--> <a rel="nofollow" title="Стань читателем в twitter" href="Ваш профиль twitter" target="_blank"><img border="0" src="http://3.bp.blogspot.com/-TrNf8cdHE6w/UA6_iRAUK_I/AAAAAAAAH88/Jo7RAX207xo/s1600/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Twitter Icon--> <!--Start Google+ Icon--> <a title="Стань читателем на Google+" rel="nofollow" href="Ссылка на ваш профиль GOOGLE-PLUS здесь" target="_blank"><img style="margin-right:1px;" src="https://2.bp.blogspot.com/-VeOVFTKCvHw/UA6_em6-aOI/AAAAAAAAH8c/Uu4blSzFwLk/s1600/GOOGLE-PLUS-48x48.png"/></a> <!--End Google+ Icon--> <!--Start Pinterest Icon--> <a title="Follow Our Pins" rel="nofollow" href="URL-PINTEREST" target="_blank"><img style="margin-right:1px;" src="https://4.bp.blogspot.com/-uSSbLLRLSIE/UA6_fTHiLrI/AAAAAAAAH8k/OxlFAJozvX8/s1600/PINTEREST-48x48.png" alt="Подпишись на Pinterest" /></a></center> <!--End Pinterest Icon--> </div><br/>
Обязательно замените отрезки кода, выделенные желтым на ссылки на ваши профили соцсетей.
По желанию вы можете вынести css из данного кода в шаблон блога (вставить отрезок кода, заключенный между <style>  и </style> в редакторе шаблона блога до  ]]></b:skin>.
Читать далее ...

2012-10-24

Textual description of firstImageUrl

Футбольные шаблоны blogspot

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

2012-09-29

Textual description of firstImageUrl

Шаблоны Blogger галерея

blogger gallery
Недавно вы узнали как сделать простую галерею на blogspot. Сегодня мы будем воплощать идею создания галереи blogger посредством шаблонов. Галерея – отличный вариант фотоблога, блога-визитки дизайн-студии
и др.  На сегодняшний день разработано много шаблонов галереи blogger, в этой записи вы найдете лишь лучшие шаблоны 2012.

Simplex_photogallery – Простая фотогалерея

simplex_photogallery
Demo
Скачать
Автор NhamNgaHanh
Профессиональная галерея от дизайнеров. Фон блога занимает просмотр фотографии, по центру проходит полоса слайдов, которую можно скрыть по желанию. Также в виде появляющихся вкладок скрыты гаджеты по краям блога. Они появляются при клике мышки по им.

PicFolio Blogger  - элегантный шаблон для фотоблога

picfotoplate
Demo
Скачать
Автор Fowziey
Темный стильный шаблон-галерея для blogger. Шаблон имеет одну колонку, разбитую на 3 колонки фотографий. Вся дополнительная информация о блоге, а также гаджеты расположены в футере.

Elegance

Elegance_
Демо
Скачать
Галерея на светлом фоне. 2 колонки блога. Сайдбар справа. Выпадающее меню на Jquery.

Ligbtroom

ligbtroom
Демо
Скачать
Автор:  Biyan
Стильная галерея blogger имеет 2 колонки, сайдбар слева. Основные цвета шаблона – белый, черный, красный. Стиль построен на контрасте.

VTube – шаблон для видеоблога blogspot

vtube
Demo
Скачать
Автор Jacky Baby
Вы не можете загружать видео в этот блог. Добавляем ролики, залитые на видеохостинги (например, youtube), вставляя код.
Читать далее ...

2012-09-23

Textual description of firstImageUrl

Выбираем бесплатный сервис для блога

бесплатные сервисы для блога
Доброго дня, читатели блога . В данной статье мы поговорим о том, на каком бесплатном сервисе ведении блогов лучше начать вести свою блоггерскую жизнь. Сегодня много сервисов бесплатно предлагают создать свои персональные страницы в Интернете, где вы можете публиковать любые свои мысли. Кто не знаком с такими понятиями, как платный хостинг, CMS, FTP и PHP - то создание своего блога в интуитивно понятных блог-сервисах будет лучшим вариантом.
Рассмотрим самый популярный сервис для ведения блога - ЖЖ (Livejournal).
 бесплатный сервис для блога жж

И начнем с минусов - для пользователей Казахстана данный сайт заблокирован. Поэтому заходить на него можно только с прокси. Для России и других стран СНГ - это один из популярнейших сервисов блогов и новостей. Ежечасно публикуются сотни уникальных актуальных блог-постов. И вы можете присоединившись, завести тут блог. Редко когда удаляют ваш аккаунт. Из плюсов стоит отметить, что на нем можно зарабатывать, ставить красивые темы. Да к тому же он просто удобен в управлении - 1 место в ТОП-е сервисов бесплатных блогов. Ссылка: www.livejournal.com My Opera - большие возможности маленького блога. Очень удобный сервис, где приятно делиться своими мыслями. В один клик можно добавить видео с Youtube, загрузить картинку и отформатировать текст. Если материал еще и будет интересным - то получите пару десятков комментариев. Но есть большой минус - если в ваших постах будет очень много ссылок на другие сайты - антиспам сайта подумает, что вы просто распространяете спам и удалит Ваш аккаунт. Ссылка: my.opera.com

Blogger - лучший вариант для ведения блога от Google.

Blogger- Create your free Blog

В чем его плюсы?
  • Создать и настроить блог можно за 10 минут
  • Большой выбор красивых готовых шаблонов
  • Простота и легкость добавления статей на ваш сайт
  • Можно установить рекламу и еще зарабатывать
Также имеется ряд полезных дополнений и функций. Прост в освоении и легок в управлении. Если не смотреть на длинное доменное имя вашблог.blogspot.com, то он не уступает по скорости платным хостингам. Ссылка: www.blogger.com

Я.ру: минимализм - это круто!

бесплатный сервис для блога я.ру

Сервис от Яндекса очень отстает от своих конкурентов, и вряд ли там вам удастся создать полноценный блог. А вот для создания микроблога Я.ру подойдет. Также очень плохой выбор с дизайнами дневников. Из пяти баллов данный сервис заслуживает только 2,5. Ссылка: my.ya.ru
Блоги@Mail.Ru - тысячи читателей, которым интересны ваши мысли.Блоги@Mail.Ru- бесплатный сервис для блога Если вы будете обновлять ваш блог очень часто, то уже через неделю увидите первые результаты. Ваши записи начнут комментировать заинтересованные люди, которые хотят высказаться по какой-либо теме. Здесь не нужно регистрироваться, потому что у каждого (почти у каждого) есть почта на Майл.ру и поэтому ваш блог уже создан изначально, только он пока что пустой и непопулярный. Исправьте это и заведите себе онлайн хобби - блоггинг. Очень легко редактировать статьи, добавлять фото и изменять дизайн вашего блога. Поэтому если вам сложен в освоении лидер бесплатных блогов ЖЖ - Блоги от Майл.ру будут достойной заменой. Ссылка:
Одним из минусов ведения блога на бесплатных платформах является то, что на них сложно заработать. Сложно продать ссылку или установить рекламный баннер. Поэтому если вы настроены писать просто "для души", не извлекая какой-либо выгоды от блога - то бесплатные сервисы будут отличным вариантом любому начинающему блоггеру.
Гостевой пост от Дмитрия Копилова
Читать далее ...

2012-09-12

Textual description of firstImageUrl

Создание простой галереи blogspot

Такую галерея фотографий blogspot вы можете добавить в свой блог, как в гаджет HTMl / Javascript в любую часть блога – колонку или футер, так и в отдельное сообщение блога.

Код галереи blogspot:

Читать далее ...

2012-09-10

Textual description of firstImageUrl

Создание горизонтальной прокрутки изображений


Сегодня вы узнаете как сделать горизонтальную карусель jcarousel на jquery (или прокрутка изображений) в blogger.
С помощью данного плагина вы сможете продемонстрировать в вашем блоге миниатюры ваших фотографий или работ.


Установка карусели:
  1. Административная панель blogger.com –> Дизайн –> Добавить новый элемент гаджета (тип HTML / JavaScript).
  2. Добавляем код в гаджет:
    <script src='http://code.jquery.com/jquery-latest.js'></script>
    <script src='http://mybloggertricks.googlecode.com/files/jquery.jcarousel.min.js' type='text/javascript'></script>
    <script src='http://mybloggertricks.googlecode.com/files/mycarousel.js' type='text/javascript'></script>
      <style>
    .jcarousel-skin-tango .jcarousel-container {
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
       border-radius: 10px;
        background: #F0F6F9;
       
    }
    .jcarousel-skin-tango .jcarousel-direction-rtl {
        direction: rtl;
    }
    .jcarousel-skin-tango .jcarousel-container-horizontal {
       width:425px;
        padding: 20px 40px;
    }
    .jcarousel-skin-tango .jcarousel-container-vertical {
        width: 75px;
        height: 245px;
        padding: 40px 20px;
    }
    .jcarousel-skin-tango .jcarousel-clip {
        overflow: hidden;
    }
    .jcarousel-skin-tango .jcarousel-clip-horizontal {
        width:  425px;
        height: 75px;
    }
    .jcarousel-skin-tango .jcarousel-clip-vertical {
        width:  75px;
        height: 245px;
    }
    .jcarousel-skin-tango .jcarousel-item {
        width: 75px;
        height: 75px;
    }
    .jcarousel-skin-tango .jcarousel-item-horizontal {
        margin-left: 0;
        margin-right: 10px;
    }
    .jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-item-horizontal {
        margin-left: 10px;
        margin-right: 0;
    }
    .jcarousel-skin-tango .jcarousel-item-vertical {
        margin-bottom: 10px;
    }
    .jcarousel-skin-tango .jcarousel-item-placeholder {
        background: #fff;
        color: #000;
    }
    /**
    *  Horizontal Buttons
    */
    .jcarousel-skin-tango .jcarousel-next-horizontal {
        position: absolute;
        top: 43px;
        right: 5px;
        width: 32px;
        height: 32px;
        cursor: pointer;
        background: transparent url(http://mybloggertricks.googlecode.com/files/next-horizontal.png) no-repeat 0 0;
    }
    .jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-next-horizontal {
        left: 5px;
        right: auto;
        background-image: url(http://mybloggertricks.googlecode.com/files/prev-horizontal.png);
    }
    .jcarousel-skin-tango .jcarousel-next-horizontal:hover,
    .jcarousel-skin-tango .jcarousel-next-horizontal:focus {
        background-position: -32px 0;
    }
    .jcarousel-skin-tango .jcarousel-next-horizontal:active {
        background-position: -64px 0;
    }
    .jcarousel-skin-tango .jcarousel-next-disabled-horizontal,
    .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover,
    .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:focus,
    .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {
        cursor: default;
        background-position: -96px 0;
    }
    .jcarousel-skin-tango .jcarousel-prev-horizontal {
        position: absolute;
        top: 43px;
        left: 5px;
        width: 32px;
        height: 32px;
        cursor: pointer;
        background: transparent url(http://mybloggertricks.googlecode.com/files/prev-horizontal.png) no-repeat 0 0;
    }
    .jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-prev-horizontal {
        left: auto;
        right: 5px;
        background-image: url(http://mybloggertricks.googlecode.com/files/next-horizontal.png);
    }
    .jcarousel-skin-tango .jcarousel-prev-horizontal:hover,
    .jcarousel-skin-tango .jcarousel-prev-horizontal:focus {
        background-position: -32px 0;
    }
    .jcarousel-skin-tango .jcarousel-prev-horizontal:active {
        background-position: -64px 0;
    }
    .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal,
    .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover,
    .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:focus,
    .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {
        cursor: default;
        background-position: -96px 0;
    }
    /**
    *  Vertical Buttons
    */
    .jcarousel-skin-tango .jcarousel-next-vertical {
        position: absolute;
        bottom: 5px;
        left: 43px;
        width: 32px;
        height: 32px;
        cursor: pointer;
        background: transparent url(http://mybloggertricks.googlecode.com/files/next-horizontal.png) no-repeat 0 0;
    }
    .jcarousel-skin-tango .jcarousel-next-vertical:hover,
    .jcarousel-skin-tango .jcarousel-next-vertical:focus {
        background-position: 0 -32px;
    }
    .jcarousel-skin-tango .jcarousel-next-vertical:active {
        background-position: 0 -64px;
    }
    .jcarousel-skin-tango .jcarousel-next-disabled-vertical,
    .jcarousel-skin-tango .jcarousel-next-disabled-vertical:hover,
    .jcarousel-skin-tango .jcarousel-next-disabled-vertical:focus,
    .jcarousel-skin-tango .jcarousel-next-disabled-vertical:active {
        cursor: default;
        background-position: 0 -96px;
    }
    .jcarousel-skin-tango .jcarousel-prev-vertical {
        position: absolute;
        top: 5px;
        left: 43px;
        width: 32px;
        height: 32px;
        cursor: pointer;
        background: transparent url(http://mybloggertricks.googlecode.com/files/prev-horizontal.png) no-repeat 0 0;
    }
    .jcarousel-skin-tango .jcarousel-prev-vertical:hover,
    .jcarousel-skin-tango .jcarousel-prev-vertical:focus {
        background-position: 0 -32px;
    }
    .jcarousel-skin-tango .jcarousel-prev-vertical:active {
        background-position: 0 -64px;
    }
    .jcarousel-skin-tango .jcarousel-prev-disabled-vertical,
    .jcarousel-skin-tango .jcarousel-prev-disabled-vertical:hover,
    .jcarousel-skin-tango .jcarousel-prev-disabled-vertical:focus,
    .jcarousel-skin-tango .jcarousel-prev-disabled-vertical:active {
        cursor: default;
        background-position: 0 -96px;
    }

      </style>
     
      <ul id="mycarousel" class="jcarousel-skin-tango">
       
    <li><a href="#"><img src="IMAGE LINK" width="75" height="75" alt="Description" /></a></li>
       
    <li><a href="#"><img src="IMAGE LINK" width="75" height="75" alt="Description" /></a></li>

    <li><a href="#"><img src="IMAGE LINK" width="75" height="75" alt="Description" /></a></li>

    <li><a href="#"><img src="IMAGE LINK" width="75" height="75" alt="Description" /></a></li>

    <li><a href="#"><img src="IMAGE LINK" width="75" height="75" alt="Description" /></a></li> 

      </ul>
Настройка jcarousel карусели:

  1. Изменить IMAGE LINK на ссылку на изображение. Оно будет отображаться в уменьшенном виде, а именно 75 на 75 пикселей. Вы можете изменить размеры и миниатюры (не забудьте в этом случае изменить высоту height виджета).
  2. Вместо # вы можете добавить ссылку на изображение в оригинальном размере или на любой другой веб-адрес (например, на страницу с описанием фото).
  3. Вы можете изменить ширину виджета  jquery jcarousel изменив параметр width:425px;
  4. Изменяем суммарную ширину всех миниатюр через изменение параметра width: 425px;
Читайте также похожие темы:
  1. Виджет социальных закладок
  2. Анимированная панель блога
  3. twitter виджеты
Читать далее ...

2012-09-06

Textual description of firstImageUrl

Делим footer blogger на 3 колонки с виджетами

footer_blogger
В некоторых шаблонах blogger вы уже встречали оформление footer (футер, подвал, нижняя часть блога) в виде колонок. В footer вы можете добавить необходимую для вас или ваших читателей информацию, используя виджеты. Например, это может быть виджет популярные сообщения, топ комментаторов, реклама google adsense, ваша статистика и другое.  В результате ваш footer примет следующий вид:

Как разбить footer на 3 колонки:
  1. Админка –> Шаблон –> изменить html
  2. Находим код ]]></b:skin>
  3. Вставляем перед кодом ]]></b:skin> следующий код:
    /* -----   LOWER SECTION   ----- */
    #lower {
           margin:auto;
           padding: 0px 0px 10px 0px;
           width: 100%;
           background:#333434;
    #lower-wrapper {
           margin:auto;
           padding: 20px 0px 20px 0px;
           width: 960px;
    }
    #lowerbar-wrapper {
         border:1px solid #DEDEDE;
           background:#fff;        float: left;
           margin: 0px 5px auto;
           padding-bottom: 20px;
           width: 32%;        text-align: justify;
           font-size:100%;
           line-height: 1.6em;
           word-wrap: break-word; 
           overflow: hidden;
    }
           .lowerbar {margin: 0; padding: 0;}
           .lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
    .lowerbar h2 {
          margin: 0px 0px 10px 0px;
           padding: 3px 0px 3px 0px;
           text-align: left;
           color:#0084ce;         text-transform:uppercase; 
    font: bold 14px Arial, Tahoma, Verdana;
           border-bottom:3px solid #0084ce;
    }
    .lowerbar ul {
          margin: 0px 0px 0px 0px;
          padding: 0px 0px 0px 0px;
          list-style-type: none;
    }
    .lowerbar li {
          margin: 0px 0px 2px 0px;
          padding: 0px 0px 1px 0px;
          border-bottom: 1px dotted #ccc;
  4. Теперь находим код </body> и вставляем перед ним код: 
    <div id='lower'>
    <div id='lower-wrapper'>
    <div id='lowerbar-wrapper'>
    <b:section class='lowerbar' id='lowerbar1' preferred='yes'>
    </b:section>
    </div>
    <div id='lowerbar-wrapper'>
    <b:section class='lowerbar' id='lowerbar2' preferred='yes'>
    </b:section>
    </div>
    <div id='lowerbar-wrapper'>
    <b:section class='lowerbar' id='lowerbar3' preferred='yes'>
    </b:section>
    </div>
    <div style='clear: both;'/>
    </div> </div>

Вам осталось лишь перейти во вкладку Дизайн, и вы увидите в нижней части блога 3 колонки элементов страницы, в которые вы можете добавить гаджеты:
гаджеты_blogger
Настройка оформления footer blogger:
Вы можете легко изменить внешний вид и цвет виджетов. Разными цветами в первом коде я выделила отрезки, которые вы можете изменять.
  • background:#333434; основной фон виджетов
  • width: 960px;   Ширина отдельного виджета в пикселях.
  • background:#fff;   и  width: 32%; это цвет фона и ширине из трех столбцов, где виджеты добавляются.
  • color:#0084ce; Цвет названия рубрики
  • font: bold 14px Arial, Tahoma, Verdana; Изменить для изменения размера шрифта и семьи.
  • border-bottom:3px solid #0084ce; Изменение толщины, стиля и цвета линии, отделяющей заглавие от основного текста виджетов.
  • border-bottom: 1px dotted #ccc; изменение размера, стиля и цвета границы, которая находится в самой нижней части виджетов под ссылками.
Читать далее ...

2012-08-18

Textual description of firstImageUrl

Контакты - формы Google

Google docs form
Обновлено 12 февраля 2019 года. Урок больше не работает. С помощью Google теперь форму обратной связи создать нельзя.
Сегодня вы узнаете как создать обратную связь, сделать опрос или анкету для своего блога с помощью google формы. Эту форму можно встроить в блог blogspot, wordpress, сайт joomla, ucoze, google site и др. Напомню, что в прошлой статье мы рассматривали, как создать форму с помощью jotform.
Плюсы формы google:
  • простота создания,
  • быстро грузится,
  • бесплатность,
  • надежность.
Минус лишь один – обратная ссылка на google.
Для создания формы в конструкторе от google необходима регистрация. Если вы уже являетесь пользователем youtube, гугл + или blogger.com, то у вас имеется учетная запись в google.
Перейдите в google документы, нажмите на кнопку Create –> Form
создание_формы_google
В новом окне откроется конструктор:

В верхней строке вместо Untitled form вам нужно ввести название. В строке ниже (“you can include any text or info that will help people fill this out”) вы можете дать краткое описание формы.
Ниже вы видите 2 поля Sample Question 1 и 2 (простые вопросы). Для того, чтобы изменить эти поля, нажмите на знак редактирования поля (иконка карандаш справа):
редактирование формы google

Следующий значок означает дублирование элемента, а значок корзины – удаление элемента.
Теперь приступим к редактированию:
google_docs_form
Question title – вопрос, help text – вспомогательный текст, question type – тип элемента из следующих вариантов:
тип элемента формы перевод
text, простое текстовое поле
paragraph text многострочное текстовое поле
multiple choice, множественный выбор
checkboxes, флажки
choose from a list, выбрать из списка
Scale, шкала
Grid сетка
Галочка напротив пункта Make this a required question добавляет значок * – обязательность заполнения.
Для того, чтобы добавить дополнительный элемент в вашу анкету или опрос, нажмите на кнопку add_item и выберите тип элемента.
Кнопка сохранить - сохранить изменения.
Кнопка тема_формы переместит вас в новое окно, где вы сможете выбрать тему оформления.
Кнопка результаты позволит вам отследить результаты анкетирования.
Конка код формы google More actions –> embed для получения кода для вставки в блог. Вставьте его в сообщение блога, страницу или виджет html / javascript (последний использовать, если позволяет место).
Если же вы выберите пункт ниже Edit confirmation, то сможете отредактировать сообщение, которое увидят пользователи после отправки сообщение / результатов анкетирования.
спасибо
Вот такая пробная форма получилась у меня. Можете попробовать ее в действии.

Результаты опроса вы можете посмотреть, открыв сохраненный документ анкетирования (снова пройдите в документы гугл). Вы увидите в виде таблице. Специальные инструменты позволят анализировать полученные данные, редактировать, распечатать, скачать и многое другое). Вот такие результаты анкеты получились у меня через несколько часов после публикации этой записи с опросником.
.
Ваш любимый цвет [] Ваш пол Сколько вам лет?
.
8/18/2012 16:14:56 красный женский 27
.
8/18/2012 16:27:50 белый мужской 21
.
8/18/2012 16:39:11 черный мужской З8
.
8/18/2012 19:12:56 красный мужской лет?
Надеюсь, что вам понравился новый урок. Жду ваших комментариев и откликов. Спасибо за внимание.
Читать далее ...

2012-07-30

Textual description of firstImageUrl

Jotform–уникальный конструктор форм

jotform
Недавно я опубликовала перечень сервисов для создания обратной связи. В этой статье речь пойдет о конкретном сервисе – jotform (ссылка jotform.com его преимуществах и недостатках, о том как создавать в нем формы и лучший вариант использования.
Читать далее ...

2012-07-02

Textual description of firstImageUrl

Система комментариев от Cackle

cackle
Сегодня расскажу о простой в установке системы древовидных комментариев Cackle.ru. Эта система с успехом интегрируется в Blogger.com. Стоимость размещения комментариев системы Cackle - всего 200 рублей в месяц.

Ранее мы уже рассматривали добавление сторонних систем комментирования в блог, таких как disqus и intensedebate.
Плюсы системы:
  • очень проста в установке, русскоязычный интерфейс поможет вам без труда разобраться в настройках виджета.
  • любой читатель вашего блога сможет прокомментировать запись (не секрет, что многие не понимают как комментировать Blogger.com без регистрации),
  • Публикация комментариев в социальные сети, что может стать дополнительным источником трафика.
  • Поддержка древовидных комментариев,
  • Возможность вставки в комментарий изображения или видео.
  • Система администрирования позволит вам бороться с троллями, спамерами и пр.
  • Специальное дополнение поможет отобразить список последних комментариев вашего блога.
Минусы:
  • Не смотря на то, что установка и использование системы комментариев от Cackle.ru является бесплатной, но все же за важные функции, такие как индексация комментариев, придется заплатить. Стоимость удовольствия 250 рублей в месяц на сегодняшний день. Вы можете обойтись и без платных услуг, если для вас это не важно.
  • Прикреплять систему комментирования лучше к блогу без комментариев (это касается блогов Blogger.com), так как после перестают отображаться (но не удаляются!) старые комментарии вашего блога. Можно, конечно, поковыряться в кодах и прикрепить систему как дополнение, но, как мне кажется, что это уже будет излишком.

Как установить систему комментирования Cackle в Blogger

..
  1. 1. Проходим несложную процедуру регистрации на сайте.
    регистрация_cackle.ru
  2. Через некоторое время приходит письмо активации аккаунта, кликаем по ссылке подтверждения.
  3. Войдите на сайт, и вам будет предложено добавить блог в систему:
    добавление_сайта
    В этапе Выбор провайдеров, вы указываете комментарии от пользователей каких соц.сетей будут публиковаться в вашем блоге.
  4. После того, как вы добавили блог в систему, вам будет предложено 2 варианта установки комментариев:
    • первый – путем редактирования шаблона и добавления предложенного кода,
    • второй – через специальный плагин для Blogger. Жмите на кнопку Blogger (выделена на скриншоте красным):
      Blogger

      Добавляем виджет:
      добавлить_виджет

      добавляем_виджет
  5. Теперь вы можете перейди во вкладку Настройка и сделать комментирование более удобным.
Читать далее ...

2012-06-30

Textual description of firstImageUrl

Видоизменяем рейтинг записей блога Blogspot

рейтинг записей блога
Отследить реакцию ваших читателей вы можете при помощи рейтинга записей блога. Именно об этом пойдет речь в этой статье. Не все читатели любят оставлять комментарии, но они могут оценить статью при помощи удобного виджета Blogger. Представлю для вас виджет рейтинга двух видов:
  1. рейтинг в виде звезд (оценка от1 до 5),
  2. рейтинг большого пальца (оценка понравилось / не понравилось).
Установка виджета рейтинга записей:
  1. Прежде чем приступить к редактированию шаблона, сделайте резервную копию (Шаблон –> резервное копирование и восстановление –> Загрузить шаблон полностью). Этот шаг предотвратит вас от неожиданных ошибок и потерь. Если что-то пойдет не так, вы всегда можете вернуть свой шаблон до изменений.
  2. Теперь можете смело приступить к редактированию шаблона. Перейдите во вкладку Дизайн –> Изменить HTML: 
    изменить_HTML
  3. Поставьте галочку напротив пункта Расширить шаблон виджета:

    расширить шаблон виджета
  4. Найдите в коде шаблона отрезок <div class='post-header-line-1'/> и вставьте после него код:
    <div class='js-kit-rating' expr:path='data:post.url' expr:permalink='data:post.url' expr:title='data:post.title'>
    </div>
    Это будет выглядеть следующим образом:
    код_рейтинга_записей
  5. Теперь найдите </body> и вставьте перед ним отрезок кода:

    <script src='http://js-kit.com/ratings.js'/>
    body
  6. Теперь добавьте следующий стиль CSS перед ]]></b:skin>
    .js-kit-rating {
    height:45px;
    text-indent: -9999px;
    overflow:hidden;
    text-indent: -9999px;
    width:85px !important;
    }
    стиль css
Для того, чтобы установить в блог рейтинг записей в стиле большого пальца, вам нужно заменить код в четвертом пункте (код после <div class='post-header-line-1'/> на код:
<div class='js-kit-rating' view="score"  expr:path='data:post.url' expr:permalink='data:post.url' expr:title='data:post.title'>
</div>
Остальные этапы идентичны установки рейтинга звезд. После всех проделанных изменений вы получите рейтинг вида:
htqnbyu pfgbctq
Читать далее ...