Как на базе Blogspot сделать сайт визитку

пятница, 29 октября 2010 г.
Вы когда-нибудь задумывались над тем что базу Blogspot можно использовать не только для традиционного блога? Речь не о фото- или видеоблоге. Блогхостингу можно найти массу прочих интересных применений. Одно из оригинальных решений - конструирование на платформе Blogger сайта-визитки. Все что нам потребуется - подобрать подходящий шаблон!

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

Первый шаблон который можно попробовать если вам захотелось создать “визитку” - Minicard.


Как видите, структура шаблона проста и понятна. Главная страница является чем-то вроде картотеки мест вашего обитания на популярных социальных сервисах. Помимо этого, в шаблоне предусмотрены страницы About, Contact и Service, название которых говорит само за себя.

MiniCard имеет дизайн в стиле веб 2.0 можно признать более чем приятным и удачным. Но, если его стилистика вам не подходит или просто не нравится, я нашел для вас две хорошие альтернативы. Первая - весьма неплохой шаблон того же рода - Visiting Card:


Принцип тот же самый, функционально он практически ничем не отличается от Minicard, поэтому выбор в пользу того или иного шаблона - вопрос вкуса! Все нужные и популярные социальные сети на месте - FaceBook, MySpace, Twitter, Digg, Flickr и т.п.

Несколько отличается от двух первых шаблон The Antagonist:


Причем отличается сразу по ряду параметров. Во-первых, он темный, в то время как прочие оформлены в светлой гамме. Во-вторых, разработчики шаблона Antagonist оставили пользователям возможность вести блог. С помощью JavaScript реализовано красивое эффектное переключение между страницами и вы можете посмотреть ссылки на социальные сервисы либо глянуть блог. Изначально отображается текст об авторе.

Первых два шаблона функционально являются “визитками” в чистом виде, поэтому если вы хотите совместить блог и “визитку”, выбор данного шаблона будет для вас оптимальным решением. Ну, а если необходима исключительно “визитка”, смело выбирайте MiniCard или Visiting Card! Подобные решения, в принципе, хороши если вы только задумываетесь о блоге или хотите собрать все свои контакты в одном месте, добавляя страницы можно организовать что-то вроде портфолио, разместить перечень услуг, цены и получить даже небольшой мини сайт. В последнем случае есть даже опция добавить записи блога, что также весьма удобно.

P.S. Постовой. Успешный интернет проект должен быть надежен во всем - это и качественный хостинг, и хороший домен, не говоря уже о дизайне и разработке.
Чтобы облагородить свой приусадебный участок вы можете добавить водные объекты, советуем бассейн купить киев или донецк, компания "Империя воды".

Делать покупки в сети выгодно, например в интернет-магазине "Для детей" вы можете купить коляски выбрав из большого ассортимента и с доставкой на дом!

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

Блок социальных кнопок в стиле Mashable на Blogger

среда, 20 октября 2010 г.
В наше время кнопки добавления в социальные закладки, сервисы или подписки стали для блогов просто обязательным атрибутом. Их польза и назначение больше ни у кого не вызывает сомнения, а главные дискуссии и отличие можно наблюдать лишь в способе размещения (оформления) данных кнопок. В данном блоге уже было несколько публикаций, посвященных кнопкам социальных закладок, надеюсь, уроки вам пригодились:
Теперь самое время рассказать о том как можно соединить воедино несколько этих элементов, причем сделать это весьма оригинальным образом. Нечто подобно реализовано на известном сайте Mashаble, когда вместе с прокруткой страницы блок социальных иконок также передвигается.



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

Вариант 1

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

Шаг1. Находим в верхней части кода ]]></b:skin> и перед ним добавляем стили оформления:
#sharebox {
background-color:#FFFFFF;
border-color:#C1CDCD;
border-style:solid;
border-width:1px;
left:103px;
bottom:40px;
margin-top:10px;
position:fixed;
width:64px;
}

#sharebox .float {margin:7px}
.FBConnectButton_Text
{
font-size: 8px;
padding:2px 4px 3px !important;
}

Шаг 2. Находим строку <div class='post-header-line-1' /> и вставляем после нее следующий фрагмент:

<b:if cond='data:blog.pageType ==  &quot;item&quot;'>
<div id='sharebox'>
<div class='float'><script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/></div>
<div class='float'><a href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/><div class='clear'/></div>
<div class='float'><a class='google-buzz-button' data-button-style='normal-count' href='http://www.google.com/buzz/post' title='Post on Google Buzz'/>
<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/></div>
<div class='float'><script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/></div>
</div>
</b:if>

В данном случае вы найдете кнопки добавления в социальную сеть tweetmeme, facebook, сервис Google Buzz, а также популярных на западе stumbleupon.

Вариант 2

Если описанный выше вариант вам по каким-то причинам не подходит, могу предложить вам еще один набор кнопок там немного другой и оформление тоже.




Шаг1. Как и в первом варианте находим ]]></b:skin>, но добавляем перед ним в этот раз другие стили:
.post_share{float:left;border:1px solid #DDD;margin-right:10px; top:215px; padding-top:10px;position:fixed;background:#FFF;margin-left:-80px; padding-bottom:10px;} .post_share .wdt_button{clear:left;margin:0}


Шаг 2. Находим блок похожий на <p><data:post.body/></p> (может быть без Р) и вставляем впереди данный фрагмент:
<b:if cond='data:blog.pageType == &quot;item&quot;'> 

<div class='post_share'>
<div class='wdt_button'>
<center>
<script type='text/javascript'>
tweetmeme_url = &#39;<data:post.url/>&#39;;
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'> </script>
</center>
</div>
<div class='wdt_button'>
<center>

<a expr:href='&quot;http://www.google.com/reader/link?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' onClick='return buzzPopup(this, &apos;Buzz this&apos;)' rel='nofollow'><img src='http://2.bp.blogspot.com/_hrhg1n2KA3Y/S3Y8Gi87V8I/AAAAAAAADDc/xpLQ5jnX_Gk/s1600/g-buzz.png'/></a>
</center>
</div>
<div class='wdt_button'>
<center>
<script type='text/javascript'>
scoopeo_url=&quot;<data:post.url/>&quot;;
</script>
<script src='http://scoopeo.com/clicker/insert/large' type='text/javascript'/>
</center>
</div>
<div class='wdt_button'>
<center>
<a href='http://www.facebook.com/sharer.php' name='fb_share' type='button_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</center>
</div> >
<div class='wdt_button'>
<center>
<span class='post-icons'>
          <!-- email post links -->
          <b:if cond='data:post.emailPostUrl'>
            <span class='item-action'>
              <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
                <img alt='' class='icon-action' src='http://www.blogger.com/img/icon18_email.gif'/>Email
              </a>
            </span>
          </b:if>
          <!-- quickedit pencil -->
          <b:include data='post' name='postQuickEdit'/>
        </span>
</center>
</div>
</div>
</b:if>
Здесь кроме Tweetmeme, Google Buzz и Facebook найдете некий сервис scoopeo, а также возможность отправить ссылку на статью друзьям по почте.

Вообще, если вы внимательно посмотрите на приведенные примеры и разберете подробно хотя бы один из них, то добавлять любые кнопки социальных закладок и разных сервисов сможете самостоятельно. Коды для кнопок, как правило, находятся в самих сервисах. В обеих примерах разным было ли оформления блоков, которое также можно поменять под свои нужды с помощью CSS стилей.

P.S. Постовой. Если вы начинающий оптимизатор, то советую сходить на курсы СЕО и продвижения для улучшения своих навыков - +3(097)8535669, Киев.
Последнее интересное и прибыльное событие блогосферы - конкурс Bestmasterиzация для всех вебмастеров будет полезным.
Если вам надоел стандартный пляжный отдых, закажите себе туры в Китай и окунитесь в мир традиций, необычного окружения и восточной экзотики.
Понравился пост? Подпишись на обновления блога по BlogoHelp RSSRSS, BlogoHelp по EmailEmail или twitter!
Как вам пост?   

Blogger становится все лучше и лучше

вторник, 12 октября 2010 г.
В блоге разработчиков системы Blogspot появилась небольшая запись новостного характера. Нет, новых функций они в этот раз не предоставляли, но пост получился весьма ценным, особенно для начинающих. Если вы все еще сомневаетесь в том, что Blogspot лучшая бесплатная система для блога, то в данной статье я вам это докажу. На втором месте я бы наверное расположил бесплатный блогохостинг wordpress.com, но там все скорее строится вокруг оригинальной CMS wordpress, то есть в большей степени хостинг для блога не совсем самодостаточный, хотя и функциональный. Про живой журнал Livejournal я уже не говорю - если раньше его можно было рассматривать как альтернативу Blogger, то сейчас это сравнение вызывает исключительно улыбку. Во многом благодаря последнему году разработок в Blogspot.

Приблизительно год назад создатели системы предложили пользователям написать и высказать своем мнение относительно того, какие функции, возможности смогут сделать систему Blogger лучше. В результате были получены тысячи идей, за которые потом проголосовало около 75тысяч пользователей. Именно на основании этих итогов был сформирован план действий на ближайшее время. А разработчиков ожидал длинный и сложный год чтобы все это привести в порядок и сделать как можно больше. На сегодня им есть чем гордиться, были запущены практически все основные функции из списка запросов пользователей. Предлагаю освежить в памяти все эти достижения:

Blogger Template Designer - новый Дизайнер Шаблонов для блога. Просто мега достижение и громадная работа, судя по конечному результату. Теперь пользователи могут запросто создавать сложные, красивые, оригинальные, яркие, функциональные шаблоны для своих блогов. Инструмент получился простым, наглядным и понятным.

Фильтрация спама в комментариях была представлена пользователям в качестве обновления системы комментирования в Blogger. В админке появился новый раздел Comments, а также были применены фильтры от спама, которые используются гуглом в других продуктах. Вы можете удалять, отменять отметки сообщения как спам и вообще контролировать записи комментариев в блоге.

Встроенная статистика блога в системе Blogger - в админку системы был добавлен раздел с отображением простой статистики по работе блога и посещениям. Нет необходимости использовать сторонние разработки, виджеты и сервисы, все теперь доступно по умолчанию, особенно полезно будет начинающим пользователям.

Улучшение текстового редактора - в черновиках блоггера вы можете найти очень функциональный текстовый редактор с кучей возможностей для публикации текста. В последнем обновлении была реализована возможность добавления заголовков для картинок, а также простого изменения размеров окна ввода текста.

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

Кнопка «читать далее» в Blogger
- тоже простая функция, которой в Блоггере долгое время не было. Приходилось использовать различные хаки и хитрости для вывода ссылки "Читать далее" на полный текст статьи. Как хорошо, что теперь это делается очень просто - новички должны оценить.

Установка своего изображения для фона блога Blogger - в новом дизайнере шаблонов вы могли использовать для фонового изображения множество красивых и ярких картинок, задавая им разные параметры отображения. Но ведь ничто не сравниться в данном случае со своим личным изображением, которое вы сможете расположить, сделав дизайн своего блога действительно уникальным.

Улучшенный предварительный просмотр публикаций в Blogger позволяет увидеть не только текст сообщения как это было раньше, но и вставляет публикуемый пост в ваш дизайн блога. Данный новый просмотр показывает статью именно так, как она будет размещена в блоге со всеми деталями и нюансами.

...и это только начало списка! Как говорят разработчики, сейчас они с энтузиазмом трудятся над некоторыми большими улучшениями, о которых расскажут уже совсем скоро. Кроме того, точно также как это было сделано в прошлом году, все создатели системы просят пользователей проголосовать за существующие варианты или добавить свои идеи по развитию Blogspot на этой странице. Сейчас там есть много интересных возможностей - связные посты, новая система комментирования, фавиконка и даже столь ожидаемые категории для постов:)

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

P.S. Постовой. Каждому успешному и перспективному интернет проекту понадобиться услуга продвижение сайта Киев под поисковые системы Яндекс и Google.
Для всех вебмастеров рекомендую полезную статью TOP биржи блогов, которая содержит перечень всех существующих бирж ссылок, блогов и статей.
Коктейль винтажа и инноваций: ретро стиль в веб-дизайне - источники вдохновения, эпохи, тенденции и примеры ретро дизайна сайтов.
Понравился пост? Подпишись на обновления блога по BlogoHelp RSSRSS, BlogoHelp по EmailEmail или twitter!
Как вам пост?   

Особенности раскрутки сайтов интернет-магазинов.

пятница, 8 октября 2010 г.
В последние годы интернет-магазины стали практически неотъемлемой частью жизни современных пользователей. В сети можно приобрести бытовую технику, одежду, игрушки, детские принадлежности, ювелирные украшения и многое другое. Фактически, среди множества интернет-магазинов можно найти ресурсы практически любой направленности, предлагающие самый разнообразный товар. Потребители давно оценили преимущества интернет-магазинов, а бизнесмены, в ответ на спрос, открывают все новые и новые сервисы в сети.
Понравился пост? Подпишись на обновления блога по BlogoHelp RSSRSS, BlogoHelp по EmailEmail или twitter!
Как вам пост?   

Статистика в реальном времени на Blogger - сервис Whos.amung.us

среда, 6 октября 2010 г.
В последние месяцы тему статистики поднимал неоднократно, так ка это штука важная и полезная для владельца сайта. Так в посте статистика блога на Blogspot были рассмотрены внешние механизмы анализа посещаемости (счетчик Li.ру, Google Analytics). Чуть позже я рассказывал вам о виджете статистики собственной разработки (имеется в виду разработки команды Blogger) который появился в Blogspot. Виджет, на мой взгляд очень даже симпатичный, но как и большинство подобных виждетов (кнопок и прочее) он отображает не совсем то что происходит на блоге данный момент в реальном времени.

Конечно, если разобраться, статистика в реальном времени вещь не самая необходимая. Но, если вы все же хотите ее получать (а иногда интересно узнать сколько сейчас человек находится на сайте), сделать это можно с помощью сервиса Whos.amung.us, который, кстати, предлагает и несколько других интересных виджетов. Но, начнем все-таки со статистики в реальном времени.

Для установки виджета статистики от Whos.amung.us не понадобится даже регистрации! Просто перейдите на главную страницу сервиса:



Выберите местоположение счетчика (слева, справа или «на дне»), полученный код вставьте в HTML/JavaScript виджет в любом месте вашего макета где вашей душе угодно. В результате ваша кнопа будет выглядеть примерно так:



Видежет показывает количество людей находящихся на сайте в данный момент онлайн. Если на него кликнуть, можно получить более детальную информацию о том сколько людей и на каких страницах находится. Статистика, конечно, не супер сложная, но весьма наглядная - красивый график показывает кривую посещаемости за последние 24 часа, можно узнать когда в блоге наступает пик активности. Интересно смотреть как цифры статистики обновляются в реальном времени, конечно, если у вас достаточно большая читательская аудитория.

Кстати, вы можете существенно расширить возможности статистики от Whos.amung.us, если приобретете платный аккаунт. Стоит удовольствие от $5 в месяц, но несколько уникальных фишек содержит (например, статистика по тому сколько картинок с вашего блога было сохранено или сколько знаков текста или какие слова скопированы).

Как я уже рассказывал выше, виджет «посетители real-time» не единственный заслуживающий внимания. С помощь Whos.amung.us можно поместить на блог виджет-карту, которая будет отображать из каких точек земного шара приходят ваши посетители:



Установка «карты» аналогична установке виджета статистики - переходите на страницу кастомизации виджета, выбираете дизайн, маркеры, размещаете полученный код на блоге, наслаждаетесь статистикой. По-моему все просто и удобно!

Давно видел в блогах Whos.amung.us, но все никак не доходил до описания сервиса, в рунете можно встретить на некоторых проектах. Хотя карта больше актуальна для глобальных англоязычных сайтов, где посещают сайт люди из разных стран.

P.S. Постовой. Опытные seo оптимизаторы и компании часто совмещают продвижение сайта бесплатно с другими эффективными, но уже платными методами раскрутки.
Если же вы сами хотите научиться оптимизации сайтов, то blog по SEO станет для вас весьма полезным открытием.
Для желающих получить красивый оригинальный интернет проект заказывайте услугу разработка дизайна сайта у опытных веб дизайнеров.
Понравился пост? Подпишись на обновления блога по BlogoHelp RSSRSS, BlogoHelp по EmailEmail или twitter!
Как вам пост?   

Как скрыть дату постов в Blogger

суббота, 2 октября 2010 г.
Все, что касается даты публикации с точки зрения пользователя я уже как-то рассматривал в блоге - кроме редактирования дат и времени говорил также о запланированных постах. Подробнее об этом можете почитать в статье дата и время публикации в блоге Blogspot, сегодня же хотелось затронуть несколько иную схожую тему.

Казалось бы, зачем кому-то нужно скрывать даты постов в блоге? У блогов, в частности blogspot, (как у типичного представителя) есть одна особенность — все посты строго привязаны к календарю, то есть публикуются в хронологическом порядке. С одной стороны это очень удобно и даже чем-то ценно, с другой, иногда такой порядок дел не нужен.

Во-первых, если ваш блог обновляется не часто, иногда есть смысл не афишировать дату последнего обновления. Новый посетитель (например, пришедший из поисковой системы) заходит, видит пост на главной странице и ему невдомек что публикации уже несколько месяцев. В обратном случае он может решить что проект полностью заброшен.
Другой пример — некоторые блог-хостинги (Blogger, опять же, в их числе) пригодны не только для создания на их базе типичных блогов (блог на самом деле понятие условное, в первую очередь это сайт). Если того позволяет платформа, вместо блога можно сделать «одностраничник» на Flash, каталог сайтов или даже интернет-магазин.

Я клоню к тому, что не каждому от блог-хостинга нужен формат блога. Вашей целью, может быть, например, «одностраничник» где привязка к дате неуместна.

В общем, иногда скрыть дату просто необходимо. Но как это сделать? Легче простого! Оставим сложные «хирургические методы», они нам ни к чему. Решение должно быть простым, изящным, а результат обратимым (на случай если вы решите все вернуть на место). Поэтому вряд-ли можно придумать что-то более удачное чем небольшая и безболезненная модернизация CSS.

Если вам нужно скрыть дату постов, заходим в наш аккаунт Blogger и следуем привычным адресом - «Панель управления» → «Дизайн» → «Изменить HTML».

Далее находим приблизительно следующий код:
date-header {

Приблизительный потому что в зависимости от шаблона это может быть h2.date-header или h3.date-header {. Добавляем в описание стиля «волшебный ингредиент»:

visibility:hidden;

В результате у вас получится что-то вроде:
.date-header{
visibility:hidden;
color:#222222;
font-size:14px;
padding:0px;
font-family:Georgia, "Times New Roman", Times, serif;
}
Если вам когда-нибудь понадобиться вернуть дату на прежнее место, просто уберите «visibility:hidden;». Вот так все просто!

P.S. Постовой. Кроме внешнего вида для интернет проекта важным моментом является продвижение сайта Киев для привлечения посетителей из поисковиков.
Но перед этим, конечно, нужно будет найти кого-то для создания и разработки веб сайтов в интернете.
Полезная статья про создание и управление меню в wordpress 3.0 - новая функция, которая делает работу с меню очень удобной.
Понравился пост? Подпишись на обновления блога по BlogoHelp RSSRSS, BlogoHelp по EmailEmail или twitter!
Как вам пост?   
Related Posts with Thumbnails