2013-08-20

Textual description of firstImageUrl

Добавляем интернет-магазин в блог

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

Добавляем интернет магазин в блог  на Blogspot, Wordpress, Joomla , Drupal, Ucoz,  Google sites и даже на facebook вы можете сделать магазин.
Итак, создаем страницу с каталогом товаров в конструкторе ecwid.ru.
Конечно, у всего бесплатного есть ограничения. Так на бесплатном тарифе, можно добавить в каталог не более 10 товаров. Также некоторые функции доступны лишь в платных версиях.
Интуитивный русский интерфейс поможет вам быстро освоить сервис и создать магазин за 5 минут.
  1. Регистрация
  2. Переходим в административную панель блога, копируем код
    2открыть интернет-магазин с нуля 
  3. Создаем новую страницу блога Blogspot и вставляем полученный код в нее:
    интернет магазин в блог
  4. Сохраняем новую страницу. Наш интернет-магазин готов! Переходим к его заполнению.
  5. Теперь переходим к настройкам::
    интернет магазин в блог
    Здесь вы можете настроить интерфейс, выбрать яык магазина, способы оплаты, доставки и многое другое.
  6. Добавляем категории товаров и сами товары в магазин:
    2013-08-21_11-05-02
    Здесь все достаточно просто.
Желаю вам успешных продаж!
Читать далее ...

2013-08-19

Textual description of firstImageUrl

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

tynt.com
В прошлой записи мы уже рассматривали способы защиты текста от копирования. Сегодня вы узнаете о сервисе tynt.com, с помощью которого вы получите индивидуальный скрипт. Функция этого скрипта заключается в том, что он автоматически ставит ссылки при копировании на источник, оригинал статьи.
Читать далее ...

2013-08-17

Textual description of firstImageUrl

Горизонтальное меню css с иконками

Горизонтальное меню css с иконками
Хорошая навигация по сайту очень важна блоггеров. С ее помощью посетитель быстро находит нужную страницу блога. Ценят понятность сайта и поисковики. В этой статье вы узнаете как сделать горизонтальное меню для Blogger со всплывающими иконками.
Меню со всплывающими кнопками-иконками создан на CSS. Для просмотра меню, нажмите на кнопку ниже:

Похожие уроки:
- круглое меню с анимацией
- Вертикальное выпадающее меню на Jquery
- Вертикальное меню,
- а также другие уроки с меткой “меню”

Как вставить горизонтальное меню css с иконками на Blogger

  1. Перейдите во вкладку “Шаблон”, поставьте курсор в редактор (в любое место),
  2. Нажмите Ctrl + F для поиска по коду и найдите отрезок кода ]]></b:skin>
  3. Вставьте перед этим кодом следующий код:
    ..
    /* The CSS Code for the menu starts here bloggertrix.com */ #btrix-nav {margin: 100px auto;list-style: none;width: 632px;height: 87px;overflow-y: hidden;}
    #btrix-nav li {float: left;}
    #btrix-nav li a {display: block;color: white;width: 120px;height: 61px;margin-top: 24px;text-decoration: none;text-align: center;border-top: 1px solid #bbb;border-bottom: 1px solid #555;}
    #btrix-nav li a span.aname {font: bold 17px/61px "Arial";color: #fff;text-transform: uppercase;cursor: pointer;position: relative;top: 0;transition: top .5s ease;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);}
    #btrix-nav li a img {position: relative;top: 0;transition: top .5s ease;}
    #btrix-nav li a:hover {cursor: pointer;}
    #btrix-nav li a:hover img {top: -85px;}
    #btrix-nav li a:hover .aname {top: 85px;}
    #btrix-nav li:nth-child(1) a {background: #3eb006;border-radius: 5px 0 0 5px;border-left: 1px solid #bbb;}
    #btrix-nav li:nth-child(2) a {background: #9bc704;}
    #btrix-nav li:nth-child(3) a {background: #0dc3ff;}
    #btrix-nav li:nth-child(4) a {background: #51a2ec;}
    #btrix-nav li:nth-child(5) a {background: #6e3cab;border-radius: 0 5px 5px 0;border-right: 1px solid #555;}
  4. Теперь перейдите во вкладку “Дизайн”,
  5. Добавьте новый элемент HTML / JavaScript и добавьте код:
    <div id="btrix-nav">
    <li> <a href="#"><span class="aname">Главная</span> <img src="http://2.bp.blogspot.com/-vcR6lUGsroY/Ug5ATZk8oZI/AAAAAAAAA00/XENkFMaBgv0/s1600/btrix-home.png" /> </a> </li>
    <li> <a href="#"> <span class="aname">Скачать</span> <img src="http://2.bp.blogspot.com/-TcXder58ssQ/Ug5ASx8pT0I/AAAAAAAAA0o/5UdA4_gLnV8/s1600/btrix-download.png" /> </a> </li>
    <li> <a href="#"> <span class="aname"> MySql</span> <img src="http://2.bp.blogspot.com/-umlQ7fKXobk/Ug5AT2bLnnI/AAAAAAAAA08/yrQHl6qPMH8/s1600/btrix-mysql.png" /> </a> </li>
    <li> <a href="#"> <span class="aname"> Html</span> <img src="http://2.bp.blogspot.com/-2-iy8RJ92V8/Ug5ASDCru-I/AAAAAAAAA0c/GOBCPpZlA04/s1600/Btrix-html.png" /> </a> </li>
    <li> <a href="#"> <span class="aname">Контакты</span> <img src="http://4.bp.blogspot.com/-vsm9s0yQr9I/Ug5ASjqawnI/AAAAAAAAA0k/rqb01AbGaFw/s1600/btrix-contact.png" /> </a> </li> </div>
  6. Внесите в код, который добавили в гаджет HTML / JavaScript необходимые изменения:
    • Значок # измените на ссылку на нужную страницу блога (например, страницу метки, страницу “контакты”, главную страницу блога и др)
    • ссылку на картинку, выделенную оранжевым, замените на прямую ссылку на иконку-картинку для соответствующего пункта.
    • Пункт, выделенный синим, это название страницы меню css.
  7. Переместите элемент HTML ? JavaScript в нужное место во вкладке “Дизайн” блога.
Для вашего меню вы можете использовать иконки, логотипы и другие картинки png с прозрачным фоном. Для того, чтобы найти нужные картинки лучше использовать поиск по иконками. Например, iconsearch.ru
Примеры:
создание логотипа - для главной страницы,
Горизонтальное меню css с иконками - портфолио,
 меню css с иконками - обратная связь
 меню css с иконками- обо мне, о блоге.
Читать далее ...

2013-08-15

Textual description of firstImageUrl

Новая фишка Youtube 1980

youtube-missile-easter-egg
На Youtube новая фишка. Вы можете разбить любое видео ракетами. Если вам не понравился ролик, то можете отомстить автору некачественного видео Подмигивающая рожица. В этой статье я расскажу, как это сделать.
Читать далее ...

2013-08-11

Textual description of firstImageUrl

Плагин CommentLuv для Blogspot (Социальный замок)

commentluv blogspot
Все больше завоевывает популярность плагин для wordpress commentluv. Для тех, кто не знает, поясню commentluv позволяет оставлять вашим комментаторам ссылки на записи их блогов в комментариях.
В первом комментарии, дается инструкция о том, как оставить комментарий со ссылкой на свой блог.

Как установить CommentLuv на блог Blogger (Blogspot)


Оговорюсь, что сделать это в стандартной системе комментирования Blogger невозможно. Для подключения плагина, прежде всего нужно установить систему IntenseDebate. Это система, поддерживающая древовидные комментарии. В ней можно подключить множество функций, такие как прикрепление видео к комментариям, добавление кнопок социальных закладок, смайлы, кнопка ретвита и многое другое.
Как установить систему комментирования IntenseDebate, уже говорилось в моем блоге ранее. Несмотря на то, что пост о системе от 2011 года, последовательность шагов установки осталась прежней, не изменился и интерфейс сайта. так что запись рабочая, можете пользоваться.
После установки комментариев от IntenseDebate во вкладке “My account”, вы видите список подключенных к системе блогов:
как играть в покер
Нажмите на ссылку “Setting” (Настройки) под нужным адресом блога:
настройки commentluv
Далее перейдите в категорию “Plugins” в вертикальном меню справа, затем активируем плагин commentluv (нажимаем на Active возле плагина):
комментарии commentluv
Вот собственно и все. Если у вас блог с подключенным плагином commentluv, то вы можете оставить адрес своего блога в комментариях ниже.
Читать далее ...

2013-08-06

Textual description of firstImageUrl

Анимированный виджет Популярные сообщения для Blogspot

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

  1. В административной панели блога перейдите в раздел Дизайн,
  2. Добавьте гаджет, выберите из списка гаджетов “Популярные сообщения”. Количество сообщений укажите больше, чем 4:
    доработка сайта на Bitrix
  3. Зайдите в раздел Шаблон, найдите отрезок кода ]]></b:skin>, и вставьте выше этого кода следующее:
    <!----Start copy here---->
    <style type="text/css" media="screen">
    #PopularPosts1 {
    overflow:hidden;
    margin-top:5px;
    width:100%;
    padding:0px 0px;
    height:310px; }
    #PopularPosts1 ul {
    width:310px;
    overflow:hidden;
    list-style-type: none;
    padding: 0px 0px;
    margin:10px 0px 0px 10px;
    }
    #PopularPosts1 li {
    width:290px;
    padding: 5px 5px;
    margin:0px 0px 5px 0px;
    list-style-type:none;
    float:none;
    height:80px;
    overflow: hidden;
    background:#fff url(http://4.bp.blogspot.com/-AexFsTTa33c/TmFNoxg9zSI/AAAAAAAAE6I/7K8bPKYBr8Q/s400/popular%2Bposts.jpg) repeat-x;
    border:1px solid #ddd;
    }
    #PopularPosts1 li .item-title {
        font-size:1em;
        margin-bottom:0.5em;
    }
    #PopularPosts1 li .item-title a {
    text-decoration:none;
    color:#7CA2C4;
    font:bold 12px verdana;

    height:18px;
    overflow:hidden;
    margin:0px 0px;
    padding:0px 0px 2px 0px;
    }
    #PopularPosts1 li img {
    float:left;
    margin-right:5px;
    background:#EFEFEF; border:2px solid #7CA2C4;
    }
    #PopularPosts1 li .item-snippet {
      overflow:hidden;
    font-family:Tahoma,Arial,verdana, sans-serif;
    font-size:10px;
    color:#289728;
    padding:0px 0px;
    margin:0px 0px;
    }
    #PopularPosts1 .item-snippet a,
    #PopularPosts1 .item-snippet a:visited {
        color:#3E4548;
        text-decoration: none;
    }
    #PopularPosts1 .spyWrapper {
        height: 100%;
        overflow: hidden;
        position: relative;
    }
    #PopularPosts1 {
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
    }
    .tags span,
    .tags a {
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
    }
    a img {
        border: 0;
    }
    -->
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" charset="utf-8">
    $(function () {
        $('.popular-posts ul').simpleSpy();
    });
    </script>
    <script src="http://accordion-for-blogger.googlecode.com/svn/trunk/simplespy.js" type="text/javascript"></script><div style="float:   left;"><a href="http://freewidget4u.blogspot.com/2012/11/scrolling-popular-post-gadjet-widget.html" target="_blank"><sup> GrabThis!! </sup></a></div>
    <!----Stop copy here---->
Читать далее ...

2013-08-05

Textual description of firstImageUrl

Виджет Blogspot “Анимированные последние сообщения блога”

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


  1. В админке Blogspot перейдите во вкладку “Дизайн”.
  2. Здесь добавьте новый элемент – “Добавить гаджет”
    разработчики-создатели сайтов
  3. Из списка гаджетов выберите HTML / JavaScript:
    html___javascript
  4. Скопируйте следующий код:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>



    <style type="text/css" media="screen">
    <!--

    #spylist {
    overflow:hidden;
    margin-top:5px;
    padding:0px 0px;
    height:350px;
    }
    #spylist ul{
    width:220px;
    overflow:hidden;
    list-style-type: none;
    padding: 0px 0px;
    margin:0px 0px;
    }
    #spylist li {
    width:208px;
    padding: 5px 5px;
    margin:0px 0px 5px 0px;
    list-style-type:none;
    float:none;
    height:70px;
    overflow: hidden;
    background:#fff url(http://1.bp.blogspot.com/-yp42zoYRFkg/UZDjUlgLHCI/AAAAAAAAAYM/SGHerEtqkgc/s1600/24work-blogspot-com.jpg) repeat-x;
    border:1px solid #ddd;
    }
    #spylist li a {
    text-decoration:none;
    color:#4B545B;
    font-size:11px;
    height:18px;
    overflow:hidden;
    margin:0px 0px;
    padding:0px 0px 2px 0px;
    }
    #spylist li img {
    float:left;
    margin-right:5px;
    background:#EFEFEF;
    border:0;
    }
    .spydate{
    overflow:hidden;
    font-size:10px;
    color:#0284C2;
    padding:2px 0px;
    margin:1px 0px 0px 0px;
    height:15px;
    font-family:Tahoma,Arial,verdana, sans-serif;
    }
    .spycomment{
    overflow:hidden;
    font-family:Tahoma,Arial,verdana, sans-serif;
    font-size:10px;
    color:#262B2F;
    padding:0px 0px;
    margin:0px 0px;
    }

    -->

    </style><script language='JavaScript'>

    imgr = new Array();
    imgr[0] = "http://3.bp.blogspot.com/-Q1rsi1mma6I/UZDiiNy6guI/AAAAAAAAAYE/W9qgYs331f8/s1600/noimage.png";
    imgr[1] = "http://3.bp.blogspot.com/-Q1rsi1mma6I/UZDiiNy6guI/AAAAAAAAAYE/W9qgYs331f8/s1600/noimage.png";
    imgr[2] = "http://3.bp.blogspot.com/-Q1rsi1mma6I/UZDiiNy6guI/AAAAAAAAAYE/W9qgYs331f8/s1600/noimage.png";
    imgr[3] = "http://3.bp.blogspot.com/-Q1rsi1mma6I/UZDiiNy6guI/AAAAAAAAAYE/W9qgYs331f8/s1600/noimage.png";
    imgr[4] = "http://3.bp.blogspot.com/-Q1rsi1mma6I/UZDiiNy6guI/AAAAAAAAAYE/W9qgYs331f8/s1600/noimage.png";
    showRandomImg = true;
    boxwidth = 255;
    cellspacing = 6;
    borderColor = "#232c35";
    bgTD = "#000000";
    thumbwidth = 70;
    thumbheight = 70;
    fntsize = 12;
    acolor = "#666";
    aBold = true;
    icon = " ";
    text = "comments";
    showPostDate = true;
    summaryPost = 40;
    summaryFontsize = 10;
    summaryColor = "#666";
    icon2 = " ";
    numposts = 10;



    home_page = "http://privet-site.blogspot.ru/";



    limitspy=4
    intervalspy=4000
    </script>
    <div id="spylist">
    <script src='http://photoforum.do.am/js/recent.js' type='text/javascript'></script></div>
  5. Добавьте код в гаджет HTML / Javascript.
    Внимание!!! Предварительно нужно изменить адрес страницы на url своего блога:
    home_page = "http://privet-site.blogspot.ru/"; Измените url, выделенный желтым на адрес вашего блога.

    Вы можете также изменить в коде:
    • Размер виджета
      width : 220px;
      height:350px;
    • Фон виджета:
      background:#fff url(http://1.bp.blogspot.com/-yp42zoYRFkg/UZDjUlgLHCI/AAAAAAAAAYM/SGHerEtqkgc/s1600/24work-blogspot-com.jpg) repeat-x;
    • размеры изображения:
      thumbwidth = 70;
      thumbheight = 70;
    • Количество отображаемх последних сообщений блога:
      numposts = 10;
Читать далее ...