Виджет избранные статьи блога на Blogspot (лента новостей)

воскресенье, 26 декабря 2010 г.
Сейчас модны всякого рода новостные виджеты для блога (как вариант - «последние посты», «популярные посты» и так далее) содержащие помимо заголовков постов и краткого описания небольшие картинки-превьюшки. Общая особенность большинства таких виджетов в том что они, как правило автоматические. Но иногда возникают ситуации когда необходимо организовать показ определенных постов. То есть, например, это могут быть самые полезные публикации блога, которые выбираете именно вы, а не отображаемые случайные посты. Данную задачу можно без труда решить, воспользовавшись решением с сайта BloggerMint.

Но для начала сразу обозначим то что у нас должно получиться в результате, а в результате получится примерно такой виджет:



При этом анонсы постов, отображаемые в виджете, не статичные, а динамичные. То есть один пост сменяет другой что-то вроде "живой" новостной ленты". Ну, а теперь к делу.

Этап 1

Заходим в «админку» нашего блога в раздел Дизайн - Шаблон HTML. Перед тем как начнем «инсталляцию» виджета, как всегда делаем бекап. После этого ставим галочку «Расширить шаблон виджета», находим <head> и заменяем на следующий фрагмент:
<head>
<script src='http://sites.google.com/site/bloggermint/jquery-latest.pack.js' type='text/javascript'/>
<script src='http://sites.google.com/site/bloggermint/jcarousellite_1.0.1c4.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
$(&quot;.newsticker-jcarousellite&quot;).jCarouselLite({
vertical: true,
visible: 3,
auto:500,
speed:2000
});
});
</script>
Сразу хочу обратить ваше внимание на следующие переменные:
  • visible — количество одновременно отображаемых анонсов;
  • speed — скорость смены анонсов (2000 соответствует 2-ум секундам);
Оба параметра вы можете отрегулировать по своему вкусу и усмотрению.

Этап 2

На втором этапе нам необходимо добавить необходимые CSS стили, поэтому находим ]]></b:skin> и заменяем не данный фрагмент:
* { margin:0; padding:0; }
#newsticker-demo {
width:310px;
background:#EAF4F5;
padding:5px 5px 0;
font-family:Verdana,Arial,Sans-Serif;
font-size:12px;
margin:20px auto;
}
#newsticker-demo a { text-decoration:none; }
#newsticker-demo img { border: 2px solid #FFFFFF; }
#newsticker-demo .title {
text-align:center;
font-size:14px;
font-weight:bold;
padding:5px;
}
.newsticker-jcarousellite { width:300px; }
.newsticker-jcarousellite ul li{ list-style:none; display:block; padding-bottom:1px; margin-bottom:5px; }
.newsticker-jcarousellite .thumbnail { float:left; width:110px; }
.newsticker-jcarousellite .info { float:right; width:190px; }
.newsticker-jcarousellite .info span.cat { display: block; font-size:10px; color:#808080; }
.clear { clear: both; }
]]></b:skin>
Этап 3

Добавляем непосредственно виджет в макет. Для этого находим <div id=’sidebar-wrapper’> и добавляем после этого фрагмента:
<div id='newsticker-demo'>
<div class='newsticker-jcarousellite'>
<ul>
<li>
<div class='thumbnail'>
<a href='http://bloggermint.com'><img src='http://i39.tinypic.com/n47h8k.jpg'/></a>
</div>
<div class='info'>
<a href='http://www.bloggermint,com'>Blogger Plugins</a>
<span class='cat'>Your description goes here</span>
</div>
<div class='clear'/>
</li>
<li>
<div class='thumbnail'>
<a href='http://bloggermint.com'><img src='http://i39.tinypic.com/dcdjky.jpg'/></a>
</div>
<div class='info'>
<a href='http://www.bloggermint.com'>Wordpress Plugins</a>
<span class='cat'>Your description goes here</span>
</div>
<div class='clear'/>
</li>
<li>
<div class='thumbnail'>
<a href='http://bloggermint.com'><img src='http://i40.tinypic.com/15i4wav.jpg'/></a>
</div>
<div class='info'>
<a href='http://www.bloggermint.com'>10 Cool Footer Designs</a>
<span class='cat'>Your description goes here</span>
</div>
<div class='clear'/>
</li>
<li>
<div class='thumbnail'>
<a href='http://bloggermint.com'><img src='http://i41.tinypic.com/jtsxlt.jpg'/></a>
</div>
<div class='info'>
<a href='http://www.bloggermint.com'>Best 10 Inspirations</a>
<span class='cat'>Your description goes here</span>
</div>
<div class='clear'/>
</li>
</ul>
</div></div>
В моем шаблоне элемент <div id=’sidebar-wrapper’> отсутствовал, но никаких проблем у меня не возникло. Я нашел то место где начинается сайдбар и вставил указанный фрагмент вначале секции боковой панели (таким образом виджет расположился на самом верху сайдбара). Вы можете поступить как я или расположить виджет в любом другом удобном месте на боковой панели. Разобраться в коде большого труда не составит.

Этап 4

Настройка виджета. Этапом №3 установка виджета не заканчивается. Как помните, нашей задачей была установка виджета где анонсы постов можно задавать вручную. Только что установленный виджет содержит "болванки" анонсов - заголовки, ссылки и картинки "производителя". Их нужно заменить на собственные. Если вы еще не успели разобраться сами вот Вам небольшая шпаргалка:
<div class='thumbnail'>
<a href='http://целевая ссылка картинки.com'><img src='http://ссылка на картинку.jpg'/></a>
</div>
<div class='info'>
<a href='ссылка на пост.com'>Ваш заголовок</a>
<span class='cat'>Ваше описание</span>
</div>
<div class='clear'/>
Таким образом нужно вернувшись к этапу 3, изменить каждый анонс. Плодотворной вам работы! Данный виджет может быть весьма полезным элементом в блоге и направлять новых посетителей на самые актуальные или просто лучшие статьи.

P.S. Постовой. Хотите создать портфолио онлайн? - скачайте шаблоны wordpress портфолио 17 бесплатных красивых тем для сайтов.
Собрались в Питер на праздники или экскурсию? - лучшие хостелы санкт-петербурга вам пригодятся как нельзя кстати, полезное чтиво.
Каждый праздник не обходится без сладкого, научитесь готовить торты по рецептам с фото и вам не будет цены.

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

Рождественские и новогодние шаблоны для Blogger

среда, 22 декабря 2010 г.
До католического Рождества, а потом и Нового Года (с последующим православным Рождеством) остается совсем немного времени, а значит самое время устроить небольшой обзор рождественских и новогодних шаблонов для Blogspot. Я отобрал для вас те, что на мой взгляд, должны представлять наибольший интерес. Их можно использовать для своего блога дабы обновить тему на период зимних праздников либо, конечно, они идеально подойдут для блогов на новогоднюю и рождественскую тематику.

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

Учитывая что все шаблоны не так много занимают, предлагаю скачать рождественские и новогодние шаблоны Blogspot одним архивом здесь (450Кб).

Merry Christmas

рождественский шаблон Blogspot

Merry Christmas - шаблон оформлен в традиционной рождественской стилистике со всеми вытекающими. Предусмотрена одна колонка слева. Предустановлен поиск, определены страницы (Home, About, Contact, Log in). Шаблон во всех смыслах этого слова "классический", но до сих пор актуальный. За счет множества символических деталей создает замечательное праздничное и рождественское настроение, уверен ваши читатели оценят данный дизайн по достоинству.

BloggerBruster Хmas

новогодний шаблон Blogspot

BloggerBruster Хmas - рождественский шаблон от известного портала Blogger Buster. Как этого и стоило ожидать, тема реализована современно и грамотно. с предустановленными функциями. Из основных особенностей следует отметить:

- Праздничная цветовая схема и дизайн;
- Секции "популярный контент" на главной странице (вернее целых 3 секции);
- Виджет "About Me" на боковой панели;
- Совместима с новым редактором шаблонов (Blogger Template Designer);
- Подготовлены шаблоны страниц (Home, About, Contact);
- Оформленный "подвал" (по умолчанию там располагаются текстовый виджет и "Twitter Updates");

По многим параметрам шаблон BloggerBuster Xmas можно считать эталонным, поэтому если ищите новогодний шаблон для Blogspot, обязательно обратите на него самое пристальное внимание!

Elegant Christmas

рождественский шаблон Blogger

Elegant Christmas - первое что бросается в глаза при знакомстве с этим шаблоном (кроме темного фона) - галерея картинок которая располагается прямо под “шапкой”. В остальном шаблон можно назвать традиционным - две колонки, красивые рождественские иконки в дизайне и прочее. Elegant Chrismas возможно и не создает впечатления какого-то особо элегантного шаблона, как обозначено в названии, но чего разработчикам удалось добить точно - впечатления теплоты и уюта.

Winter Christmas

зимний шаблон Blogspot

Winter Christmas - данный шаблон попал в подборку не случайно, во многом благодаря отличной цветовой схеме (на сей раз - холодной). Вообще, Winter Christmas не является "радикально" новогодним шаблоном, наверное, больше зимним, что впрочем, не мешает его использовать в качестве оного.

Шаблон выглядит современно, верстка - трехколоночная, скругленные углы, предусмотрительно подготовлены страницы (Home, Posts RSS, Comments RSS и Edit). По моему субъективному мнению данная тема так же удалась. Скачать шаблон Winter Christmas.

Ну, а у меня на этом все, желаю вам продуктивной подготовки к грядущим праздникам! Не забудьте украсить свои блоги до Нового года, некоторые дополнительные материалы для этих целей, кстати, появятся в ближайшее время на Дизайн Мании.

P.S. Постовой. Если вы занимаетесь косметикой, оцените предложение Demiost Company Ukraine - духи оптом и элитная косметика мировых брендов.
В наше время не обязательно сидеть в офисе работа фриланс интернет может приносить немалый стабильный доход для ИТ специалиста.
Чтобы разместить в квартире много гостей покупайте надувной матрас и используйте его в качестве дополнительных спальных мест.
Понравился пост? Подпишись на обновления блога по BlogoHelp RSSRSS, BlogoHelp по EmailEmail или twitter!
Как вам пост?   

Продвинутая форма контактов для Blogger с LightBox

среда, 15 декабря 2010 г.
На страницах Blogohelp я уже рассказывал о том как сделать контактную форму для Blogger с помощью сервиса Kontactr. Сегодня я хочу предложить вашему вниманию продвинутый вариант реализации контактной формы с помощью jQuery lightBox.

Если вы слабо представляете о чем идет речь, jQuery lightBox — это плагин с помощью которого сейчас модно организовывать, например, галереи. При этом галерея появляется по верх содержимого, а содержимое в свою очередь затемняется. В нашем случае, это будет выглядеть вот так:



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

Шаг 1: Регистрируемся на сервисе Kontactr
Первое что нам нужно сделать — зарегистрироваться в сервисе Kontactr. На это потребуется несколько минут, в конце регистрации вы получите URL ссылку на вашу контактную форму:



он то нам и понадобится. Если у вас уже есть аккаунт просто зайдите в него и посмотрите адрес URL.

Шаг 2: Добавляем виджет на сайт
Теперь, добавляем в макет вашего блога элемент HTML/JavaScript виджет со следующим кодом:
<script type="text/javascript"  src="http://bloggerbuster-tools.googlecode.com/files/jquery.js"></script>
<script type="text/javascript" src="http://bloggerbuster-tools.googlecode.com/files/thickbox.js"></script>
<a href="URL-ВАШЕЙ-ФОРМЫ?TB_iframe=true&height=480&width=640" class="thickbox">
Send Me An Email
</a>

Обратите внимание на 2 момента в коде — вместо, URL-ВАШЕЙ-ФОРМЫ, как вы уже догадались, нужно поставить адрес вашей формы, полученный на первом этапе. Кроме того, замените надпись «Send Me An Email» на ту что вам больше нравится - «связаться со мной», «написать мне» и так далее (ну или оставьте как есть, если угодно). Сохраняем виджет.

Далее заходим в HTML шаблон блога и где-то в самом верху посреди остальных CSS стилей вставьте следующий фрагмент:

*{padding: 0; margin: 0;} 
#TB_window {
font: 12px Arial, Helvetica, sans-serif;
color: #333333;
}
#TB_secondLine {
font: 10px Arial, Helvetica, sans-serif;
color:#666666;
}
#TB_window a:link {color: #666666;}
#TB_window a:visited {color: #666666;}
#TB_window a:hover {color: #000;}
#TB_window a:active {color: #666666;}
#TB_window a:focus{color: #666666;}
#TB_overlay {
position: fixed;
z-index:100;
top: 0px;
left: 0px;
height:100%;
width:100%;
}
.TB_overlayMacFFBGHack {background: url(macFFBgHack.png) repeat;}
.TB_overlayBG {
background-color:#000;
filter:alpha(opacity=75);
-moz-opacity: 0.75;
opacity: 0.75;
}
* html #TB_overlay { /* ie6 hack */
position: absolute;
height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}
#TB_window {
position: fixed;
background: #ffffff;
z-index: 102;
color:#000000;
display:none;
border: 4px solid #525252;
text-align:left;
top:50%;
left:50%;
}
* html #TB_window { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement &amp;&amp; document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}
#TB_window img#TB_Image {
display:block;
margin: 15px 0 0 15px;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-top: 1px solid #666;
border-left: 1px solid #666;
}
#TB_caption{
height:25px;
padding:7px 30px 10px 25px;
float:left;
}
#TB_closeWindow{
height:25px;
padding:11px 25px 10px 0;
float:right;
}
#TB_closeAjaxWindow{
padding:7px 10px 5px 0;
margin-bottom:1px;
text-align:right;
float:right;
}
#TB_ajaxWindowTitle{
float:left;
padding:7px 0 5px 10px;
margin-bottom:1px;
}
#TB_title{
background-color:#e8e8e8;
height:27px;
}
#TB_ajaxContent{
clear:both;
padding:2px 15px 15px 15px;
overflow:auto;
text-align:left;
line-height:1.4em;
}
#TB_ajaxContent.TB_modal{
padding:15px;
}
#TB_ajaxContent p{
padding:5px 0px 5px 0px;
}
#TB_load{
position: fixed;
display:none;
height:13px;
width:208px;
z-index:103;
top: 50%;
left: 50%;
margin: -6px 0 0 -104px; /* -height/2 0 0 -width/2 */
}
* html #TB_load { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement &amp;&amp; document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}
#TB_HideSelect{
z-index:99;
position:fixed;
top: 0;
left: 0;
background-color:#fff;
border:none;
filter:alpha(opacity=0);
-moz-opacity: 0;
opacity: 0;
height:100%;
width:100%;
}
* html #TB_HideSelect { /* ie6 hack */
position: absolute;
height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}
#TB_iframeContent{
clear:both;
border:none;
margin-bottom:-1px;
margin-top:1px;
_margin-bottom:1px;
}


В результате вы получите ссылку при нажатии на которую будет появляться LightBox-форма для обратной связи. Если ссылка вас не устраивает, вы можете сделать кнопку для контактов, для этого придется вернуться на первую стадию «Шага 2» и заменить ссылку на ссылку-картинку, а у меня на этом все!

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

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

Контролируй свой RSS фид в Blogger - новая фича

пятница, 10 декабря 2010 г.
Для многих блоггеров RSS канал это не только возможность предоставить читателям удобный и быстрый формат получения обновлений блога, но также источник дополнительного трафика в блог. По статистике указанной в блоге Блоггера иногда объем такого трафика может составлять четверть(!) всех посещений блога. Но, думаю, тут нужно учитывать специфику именно англоязычных блогов, где подписчиков бывает очень и очень много. Хотя и для рунета справедливо утверждение, что посетители весьма часто переходят в блог из RSS ридера, если у вас там отображается не полный фид. Лично я отдаю весь текст статьи в RSS так как считаю, что если автор уже подписался, то ему удобнее читать в своем ридере и нет смысла ходить на сайт, то есть это сознательное действие для ускорения и облегчения процесса чтения новых постов. Подробнее когда-то давно рассказывал об этом в статье сообщения под катом: исследования и советы.

Тем не менее, многие авторы публикуют лишь вступительную часть (анонс) статьи в свой ридер, дабы заинтересовавшиеся пользователи переходили на сам сайт. До сих пор на Blogspot не было возможности контролировать какая именно информация попадает в RSS фид. В меню "Настройки" - "Канал сайта" в самом первом пункте были 2 варианта - отдавать полный фид либо короткий. Последний содержал приблизительно 400 первых символов записи с удаленными изображениями и HTML кодом, в то время как "полный" фид все эти элементы в rss включал.

Собственно, возникает вопрос что делать, если вы хотите сделать анонс определенной длинны именно для конкретного поста, не думать где же закончится 400 символов или, например, разместить в короткий rss текст картинку? С сегодняшнего дня такая опция возможна! Чуть более года назад разработчики добавили в Блоггер кнопку «читать далее», которая отделяла текст анонса на главной и страницах архива от полноценного отображения всей статьи на отдельной странице. Теперь эта настройка может учитываться и при работе с RSS фидом.

Для этого заходим в меню "Настройки" - "Канал сайта", где в первой строке для параметра "Разрешить каналы блога" указываем значение "До перехода" (Until Jump Break)



Таким образом, при включенной опции, когда вы в следующий раз будете публиковать статью в использованием ссылки "Читать далее" пользователи увидят весь текст с HTML и картинами до этого места. Если в посте не будет ссылки "Читать далее", то в RSS пойдет весь пост целиком. В самом фиде с анонсами пользователям нужно будет нажать на все ту же ссылку "Читать далее" чтобы попасть в блог и продолжить чтение публикации. Благодаря этому у вас теперь будет полноценный контроль над свои RSS фидом в плане отправки туда нужных материалов так, как вы этого пожелаете. Решать о том сколько текста отправлять читателям в фид только вам.

Заработок в интернете тесно связан с разными биржами и системами, если хотите узнать какая биржа ссылок наиболее эффективна смотрите ТОП в блоге Shaman`a.
Что может быть лучше чем тихий и спокойный отдых в подмосковье - компания Протэй Тревэл подарит вам эти приятные и незабываемые мгновения.
Если вы ищете исполнителей для набора услуг цифровая печать цены которых вас бы устраивали также как и качество работы, обращайтесь в Художественно-издательский центр.

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

Последние апдейты и багфиксы в Blogger

понедельник, 6 декабря 2010 г.
Работа над системой Blogspot для улучшения удобства и функциональности системы не прекращаются ни на секунду. Кроме постоянных и относительно глобальных обновлений, о которых разработчики пишут в черновиках Blogger Draft, недавно была произведена парочка менее значимых изменений. В блоге системы по этому поводу была опубликована небольшая заметка, спешу поделиться с вами этими новостями.

Уведомления о новых комментариях по умолчанию

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

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

Альбомы Picasa создаются автоматически

В принципе, уже достаточно давно при загрузке изображения в систему Blogger оно автоматически добавляется в специальный альбом сервиса Picasa, который связан с вашим блогом. Благодаря этому каждую загруженную картинку вы сможете посмотреть, отредактировать и разделись с кем либо когда заходите в галерею Picasa.
Тем не менее, если вы вдруг удалите этот специальный альбом, который привязан к Blogger аккаунту, то с благодаря последним исправлениям, будет создаваться новый альбом, куда вы сможете продолжать загружать изображения. Я так понимаю, был небольшой глюк, когда после удаления альбома возникала проблема с загрузкой, теперь все в норме.

Кнопка загрузки изображения в режиме редактирования HTML (для Blogger Draft)

Дело в том, что от пользователей поступило множество сообщений, где они предлагали или просили добавить кнопку загрузки изображений в текстовый редактор при работе в режиме HTML. Оно и не удивительно, сам пару рас сталкивался с ситуацией когда нужно добавить в статью, например, PHP код и для этого приходится работать исключительно в режиме редактирования HTML, а как быть если в таком случае нужно вставить картинку? ведь при переходе в обычный режим PHP код сохраниться неверно. В общем, разработчики услышали просьбы и добавили загрузку изображений в HTML режим редактора, за что им больше спасибо.

И напоследок bug fix

На форуме было много замечаний, что при загрузке изображений через новый текстовый редактор html тег IMG неправильно закрывался. Это приводило к ошибкам и проблемам с форматированием. Собственно, в последнем апдейте ошибка была исправлена.

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

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