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; изменение размера, стиля и цвета границы, которая находится в самой нижней части виджетов под ссылками.
Читать далее ...