Всё для Blogger

Шаблон для Blogger- тема Все о Android

2014-02-15T22:47:00.001+03:00

Привет всем! Ой сколько времени я сюда ни чего не добавлял. Блог почти заброшен, так ка основной мой проект это - "Школа Bloggera" на движке WordPress. Читайте, ищите все новое только там. Довольно много полезного, интересного можно найти в лучшем блоге рунета. Добро пожаловать! Жду. А кто оставит свой первый комментарий там, получит небольшой приз.

Раз посетители приходят сюда - Всё для Blogger, значит надо хоть иногда добавлять новый материал. Сегодня я поделюсь с вами шаблоном для Blogger. Автор Kang Ismet. Шаблон предназначен в основном для тех, кто пишет на тему Android. Если создать тему для своего блога "Все об Android" и прикрепить свой домен, то можно добиться хорошей посещаемости веб - ресурса. Тема Android остается очень популярной до сих пор. Демо делать не буду шаблона, только скрин:

Шаблон Android тема для Blogger

Шаблон для блоггер, с темой об Android имеет:
1. Действительный HTML5 и CSS3;
2. SEO 100%;
3. Кнопка вверх (плавная прокрутка);
4. Социальные кнопки поделиться;
5. Фиксированное меню;
6. Индивидуальные комментарии;
7. Похожие статьи и другое.

Скачать шаблон можно здесь.

Вроде все на сегодня. До встречи.

Сервис About.me: ваша персональная страница "Обо мне"

2013-06-07T12:45:00.000+03:00

Доброго времени суток, дорогие друзья! Как правило, авторы блогов к созданию страницы "Обо мне" относятся крайне не серьёзно. В том числе и я. Ещё не рассказал о себе ни слова. Может чуть позже, обычная отговорка.

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

Всё на вашем блоге должно быть выполнено добротно и очень качественно, в том числе страничка "Обо мне". Создать красивую страницу об авторе блога, нам поможет бесплатный сервис About.me. About.me предлагает вам создать красивую персональную страницу о вас.
После создания странички о себе, Вы можете вставить её на отдельную статическую страницу блога или просто дать ссылку в меню на вашу персональную страницу сервиса About.me. Посмотрите примеры как выглядят страницы созданные с помощью данного сервиса. Просто красота:

Персональные страницы сервиса About.me

Красивые персональные страницы сервиса About.me

Как создать персональную страницу "Обо мне" с помощью сервиса About.me

Для этого вам нужно зайти на сайт сервиса и пройти простую регистрацию:

Пройти простую регистрацию

Зарегистрироваться можно с помощью вашего аккаунта Twitter или Facebook. После регистрации, Вы можете сразу приступать к оформлению и настройкам своей персональной странички в интернете.

Оформление и настройка страницы

Вы можете: Получить собственный фон. Картину, которая отличает вас от остальных. Загрузите изображение - можно использовать любимый снимок Instagram или сделать коллаж! Загрузить картинку с компьютера. Далее, написать о себе. Создавая текст используйте юмор в пределах разумного, пишите так, чтобы заинтриговать читателей и так далее. Загрузите вашу самую лучшую фотографию. Друзья, возможностей настройки и оформления страницы множество, все не возможно описать. Шрифты, цвета, ссылки на блоги, поделиться в социальных сетях вашей страницей, чтобы о вас могли узнать больше людей и многое, многое другое.

Страничку можно вставить в Blogger, нажав соответственно на значок блоггера, получив тем самым скрипт. Я советую вам лучше всего вставить ссылку в меню вашего блога, на вашу персональную страницу "Обо мне" на сервисе About.me. Это будет лучшим вариантом. На сервисе ваши читатели, увидят вашу страницу о вас, во всей своей красе.

Получить код для Blogger

Уважаемые читатели блога, так как я купил надежный хостинг на Beget, то естественно создал свой блог Школа Bloggera на популярной платформе WordPress. Блогу всего пара месяцев. Заходите, там можно найти много полезного для блоггер. Подписывайтесь на обновления блога, буду очень рад. И, чтобы все посты здесь не повторять, я дам не большие анонсы своего нового блога.

"Окно поиск" (search) с эффектом расширения

Окно поиск по блогу

Окно "Поиск по блогу" (search) обязательный атрибут любого блога. С помощью его вашим посетителям легче находить нужную информацию в вашем блоге.Достаточно ввести ключевое слово в форму поиска и тут же появляются результаты искомых сообщений.Как установит виджет, читайте здесь.

Красивые социальные кнопки на боковую панель блога

Социальные кнопки

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

Эффективные способы вставки контекстной рекламы Google adsense в сообщения

Деньги, деньги....

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

Практически все способы, перечисленные ниже, легко применить у себя в блоге, я думаю справятся даже начинающие. Это по силам каждому. Как вставлять рекламные блоки в посты, знакомимся вот здесь.

Счетчик количества загрузок файлов

Счетчик загрузок файлов

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

И многое, многое другое.

Если Вы подумываете о приобретении надёжного и недорогого хостинга для своего сайта или блога, чтобы стать настоящим хозяином, а также зарегистрировать домен в зоне ru, рф за 99 руб. в год - об этом можно так же почитать на моём новом блоге. Или ознакомиться на сайте регистратора доменов 2domains:

И на сайте Beget:

Удачи вам. До новых встреч.

Карта блога для Blogger

2013-05-17T12:47:00.000+03:00

Приветствую вас, дорогие друзья! Посмотрел я свои записи, а оказалось нету у меня поста, о том, как сделать карту для блога (содержание, все статьи). В этом нам поможет скрипт на основе ленты фида вашего блога, он автоматически генерирует заголовки всех постов. Сама страница оглавления очень удобна для читателя, решившего ознакомиться с содержанием блога, так как все статьи разделены по ярлыкам.

Я считаю, что у каждого должен быть выбор. Поэтому сегодня, я покажу три вида карты для вашего блога:

1. Простая карта блога, подойдёт для тех у кого мало сообщений.
2.Содержание блога с эффектом аккордеона, для блогов с большим количеством статей.
3.Стильная карта блога, тоже самое, у кого много постов.
Простая карта, новые сообщения помечаются значком New !!

Карта блога

Для того чтобы установить такую карту в блог, нужно создать статическую страницу и в режиме HTML вставить такой скрипт:

<script src="http://dl.dropbox.com/u/48089857/sitemap1.txt"></script>
<script src="###/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script>

Заменяем решетки на URL адрес вашего блога. Готово.

Как создать карту блога с эффектом аккордеона для Blogger

Карта блога с эффектом аккордеона

Для такой карты блога, вставляем такой вот скрипт:

<link href="http://abu-farhan.com/script/acctoc/acc-toc.css" media="screen" rel="stylesheet" type="text/css"></link>
<script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js"></script>
<script src="###/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript"></script>

Меняем решетки на адрес блога. Всё. Скрипт - abu-farhan

Следующая карта блога, мне нравится больше всего.

Стильная карта блога для блоггер

Здесь так же как и у карты с эффектом аккордеона, при нажатии на крестик определённого ярлыка, открываются все названия сообщений. Очень удобно, занимает меньше места.

Такую карту делаем с помощью такого скрипта:

<link href='https://dl.dropbox.com/u/20885327/toggle_function.css' media='screen' rel='stylesheet' type='text/css'></link>
<script src='https://dl.dropbox.com/u/20885327/toggle_function.js' type='text/javascript'></script>
<script src='https://dl.dropbox.com/u/20885327/toggle_toc.js/' type='text/javascript'></script>
<script src='###/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc'></script>
<script type='text/javascript'>
var accToc=true;
</script>

Вместо решеток вставляем url адрес вашего блога. Готово. Всем пока. Удачи.
Скрипт - Bloggerzbible

С уважением, Сергей - блог Все для Blogger

Архив блога на статической странице в Blogger

2013-05-14T23:00:00.000+03:00

Приветствую вас, дорогой читатель! Как Вы заметили, в блоге произошли значительные изменения. Долго я не решался сменить шаблон и вот свершилось. Прошу вас дорогие друзья, высказать своё мнение по поводу нового облика блога Всё для Blogger. Замечания, предложения, всё будет учтено.

Сегодня я предлагаю вам убрать виджет "Архив блога" с боковой панели и вывести весь архив на статическую страницу. Благодаря этой операции, мы тем самым освободим драгоценное место на сайдбаре, для более полезного виджета или рекламного блока. Статическая страница с архивом, смотрится очень красиво и более удобна для посетителей.

Архив на статической странице

Виджет "Архив на статической странице" показывает все данные: дату, названия поста, список сообщений. Ссылку на архив можно вывести в меню блога, как у меня. Прошу ознакомиться и если понравилось, тогда в перёд, к установке.

Как вывести архив блога на статическую страницу в blogger

Для этого заходим в панель инструментов Blogger - Страницы - Создать страницу. Даём название и в режиме HTML вставляем скрипт:

<script>
var blog_archive = [];
var month_name = ["January", "February", "March", "April", "May","June", "July", "August", "September", "October", "November", "December"];
function blog_archive_callback(json){
 if(!("entry" in json.feed)) return;
 for(var i=0;i<json.feed.entry.length;i++){
  var e=json.feed.entry[i];
  var y=e.published.$t.substring(0, 4);
  var m=e.published.$t.substring(5, 7);
  var d=e.published.$t.substring(8, 10);
  var h='';
  for(var j=0;j<e.link.length;j++){
   if(e.link[j].rel=="alternate"){
    h=e.link[j].href;
    break
   }
  }
  if(h=='')continue;
  if(typeof blog_archive[y]=="undefined") blog_archive[y]=[];
  if(typeof blog_archive[y][m]=="undefined") blog_archive[y][m]=[];
  if(typeof blog_archive[y][m][d]=="undefined") blog_archive[y][m][d]=[];
  blog_archive[y][m][d].push("<a href='"+h+"'>"+e.title.$t+"</a>");
 }
}
function blog_archive_display(){
 var years = []; for ( y in blog_archive ) years.push(y);
 if(years.length<1) return;
 years.sort();
 years.reverse();
 for(var y=0;y<years.length;y++){
  var year = years[y];
  var months = []; for ( m in blog_archive[year] ) months.push(m);
  if(months.length<1) continue;
  months.sort();
  months.reverse();
  for(var m=0;m<months.length;m++){
   var month = months[m];
   document.write("<p><b><a href='/"+ year +"_"+ month +"_01_archive.html'>"+ month_name[parseInt(month)-1] +" "+ year +"</a></b></p>");
   var days = []; for ( d in blog_archive[year][month] ) days.push(d);
   if(days.length<1) continue;
   days.sort();
   days.reverse();
   document.write("<ul>");
   for(var d=0;d<days.length;d++){
    var day = days[d];
    if(blog_archive[year][month][day].length<1) continue;
    for(var i in blog_archive[year][month][day]) {
     document.write("<li>["+ day +"] "+ blog_archive[year][month][day][i] +"</li>");
    }
   }
   document.write("</ul>");
  }
 }
}
</script>

<script src="#####/feeds/posts/default?max-results=999&alt=json-in-script&callback=blog_archive_callback"></script>

<script>blog_archive_display();</script>

В коде скрипта меняем решетки #### на URL адрес вашего блога. Опубликовываем страницу. Всё. Готово. Всего доброго. До новых встреч.

Виджет: случайные сообщения для blogger

2013-04-25T07:43:00.000+03:00

Привет, дорогие мои друзья! Давненько я здесь не появлялся с новыми предложениями для Вас. Времени совершенно не хватает. Занимаюсь новыми проектами. Купил домены, хостинг (совсем не дорого) и создал свои блоги на движке WordPress. Знаете, отличная вещь. Больше возможностей, а следовательно в ближайшей перспективе надеюсь на хорошие заработки (тьфу, тьфу, чтоб не сглазить). И вам советую сделать тоже самое. Если возникнет желание, напишите, помогу, расскажу где, что, когда и сколько. А теперь давайте перейдём к нашей основной теме.

Виджет случайных сообщений для вашего блога

Кто не знаком с принципом работы виджета, коротко объясню. Каждый раз при обновление страницы, гаджет будет выводить разные случайные посты, то есть, ни когда не угадаешь, что он покажет в следующий раз. Виджет будет вытягивать совсем старые статьи, а это увеличит просмотры страниц. Вот как то так. Смотрите работу виджета тут. Обновляйте страницу и Вы всё увидите. Скриншот:

Случайные сообщения.

Для того, что бы установить красивый виджет случайных сообщений в блог, зайдите в панель инструментов blogger, выберите шаблон - дизайн - добавить гаджет HTLM/JavaScript и в его поле вставить код:

<style scoped="" type="text/css">
#random-posts img{float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:36px;height:36px;padding:3px}
</style>
<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=5;
var rdp_snippet_length=150;
var rdp_info='no';
var rdp_comment='Комментарии';
var rdp_disable='Off комментарии';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type='text/javaScript'>
function random_posts(json){a=location.href;y=a.indexOf('?m=0');for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;if(y!=-1){rdp_posturl=rdp_posturl+'?m=0'}var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png"}}};document.write('<li>');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script>
</ul>

Сохраните гаджет. Перетащите его в нужное вам место на боковой панели. В коде можете настроить различный цвет. : 5, - указать количество вывода сообщений и т.д.

Добавлю ещё один виджет - Случайные сообщения без миниатюр

Выберите гаджет HTLM/JavaScript и в его поле вставить код:

<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=5;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
document.write(item);}}
}document.write('</ul>');}
</script>
<script src="http://demo-school-blogger.blogspot.ru/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>
<div style="font-size:90%; text-align:right; text-shadow:2px 2px 2px #adadad;"></div>

Замените адрес блога http://demo-school-blogger.blogspot.ru на свой.

На этом позвольте попрощаться. До новых встреч. Желаю удачи во всём.

С уважением, Сергей - блог Всё для Blogger

Новое в блоге Школа Blogger(а)

2013-01-15T14:23:00.000+03:00

Всем привет! Дорогие друзья, что бы не повторяться здесь (писать одинаковые статьи) я сделаю краткий обзор моего блога "Школа Blogger(а)". А именно, что может Вам пригодится. Пожалуй начнём с социальных сетей (социальные кнопки под каждым постом). Совсем недавно появился новый сервис Pluso аналог американской AddThis. Проект совсем ещё как говорится зелёный, а уже завоевал популярность. Кнопки Pluso можно увидеть на многих популярных сайтах и блогах.

Кнопки социальных сетей от сервиса Pluso для blogger

сервис Pluso

Pluso - это сервис для удобного и простого добавления кнопок крупнейших социальных сетей на сайт или блог, с возможностью визуальной настройкой. Есть много сервисов, с помощью которых можно установить к себе на блог кнопки социальных сетей, но у Pluso есть преимущества: Pluso предлагает более 300 вариаций кнопок! Вы легко сможете сами подобрать тот вариант, который больше всего подходит вашему блогу или сайту. Плюс к этому: Установка в один клик, без регистрации, статистика нажатий, оценка эффективности.
Как установить кнопки в blogger читайте здесь.

Далее перейдём к Google AdSense. Как вставить рекламный блок Google AdSense выше/ниже сообщения в blogger

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

Как поставить рекламный блок Google AdSense выше или ниже сообщения (поста, статьи) читайте тут.

Ещё тема Google AdSense - Вставка рекламы Google AdSense в тело сообщения для blogger

Вставлять рекламу можно будет в любом месте статьи. Об этом читайте вот.

Теперь перейдём к комментариям. Как установить в blogger многоуровневую (резьбовую) форму комментариев как в WordPress

Форма комментариев как в WordPress может отображать код, изображения и файлы YouTube. Можно вставлять в комментарии забавные Smiley/смайлик.

Резьбовая форма комментариев WordPress легко устанавливается в blogger. Пробовал установку на стандартный и нестандартный шаблон. Везде установка прошла успешно, с первого раза.

Читайте Как установить в blogger многоуровневую (резьбовую) форму комментариев как в WordPress

Следующее тоже о виджете комментариев для blogger.

Виджет комментариев Cackle для Blogger и WordPress

Что такое cackle?

Cackle - это система комментирования с возможностью авторизации через популярные социальные сети, такие как Google+, Facebook, Twitter, LinkedIn, Вконтакте, Одноклассники, Мой Мир и многие другие.
Важное преимущество Cackle это снижение нагрузки с вашего блога. Если вы используете родную систему комментирования, это может привести к значительным потерям производительности. При использовании Cackle производительность вашего блога может вырасти в два раза.

Как вставить виджет комментариев Cackle в блог можно ознакомится туточки.

Пока всё. Добро пожаловать в Школу Blogger(а). До новых встреч.

Виджет последние статьи с анимацией для Blogger

2012-12-01T13:36:00.000+03:00

Привет всем! Представляю Вам виджет для Blogger: последние статьи (сообщения) с анимацией. Виджет с большим выбором опций. Скриншот виджета Вы видите, если есть желание посмотреть в живую, пожалуйста сюда.

Теперь давайте установим виджет последние сообщения с анимацией в блог.

Вам нужно сделать следующее. Перейти в Blogger. Выбрать дизайн блога. Затем нужно - добавить гаджет HTML / JavaScript, а затем скопируйте представленный код и вставьте его в поле гаджета. Гаджету не давать название.
Вот код виджета:

<style type="text/css"> div.spy-outer { border:2px solid white; -webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.4); -moz-box-shadow:0px 1px 3px rgba(0,0,0,0.4); box-shadow:0px 1px 3px rgba(0,0,0,0.4); margin:0px auto; } div.spy-outer h2 { margin:0px 0px; padding:5px 10px; background-color:#646464; background-image:-webkit-linear-gradient(top, #8B8B8B, #3D3D3D); background-image:-moz-linear-gradient(top, #8B8B8B, #3D3D3D); background-image:-ms-linear-gradient(top, #8B8B8B, #3D3D3D); background-image:-o-linear-gradient(top, #8B8B8B, #3D3D3D); background-image:linear-gradient(top, #8B8B8B, #3D3D3D); color:white; font:bold 12px Arial,Sans-Serif; text-transform:none; text-shadow:0px 1px 2px black; } ul.spy { margin:0px 0px; padding:0px 0px; font:normal 10px/12px Arial,Sans-Serif; color:#353535; overflow:hidden; } ul.spy li { list-style:none; text-align:left; margin:0px 0px; padding:5px 7px; background-color:#9E9E9E; background-image:-webkit-linear-gradient(top, #B1B1B1, #F7F7F7); background-image:-moz-linear-gradient(top, #B1B1B1, #F7F7F7); background-image:-ms-linear-gradient(top, #B1B1B1, #F7F7F7); background-image:-o-linear-gradient(top, #B1B1B1, #F7F7F7); background-image:linear-gradient(top, #B1B1B1, #F7F7F7); border-top:1px solid #4E4E4E; border-bottom:1px solid #FFFFFF; word-wrap:break-word; overflow:hidden; } ul.spy a {text-decoration:none;} ul.spy li em { font-weight:bold; color:#0B5D94; } ul.spy a.header { font:bold 12px/14px 'Trebuchet MS',Arial,Sans-Serif; display:block; color:#C00000; text-shadow:0px 1px 0px rgba(0,0,0,0.2); } ul.spy a.header:hover { color:#0556CF; text-decoration:underline; } ul.spy li .summ { margin-top:5px; overflow:hidden; } ul.spy li .imgwrap, ul.spy li img { float:right; margin:0px 0px 2px 7px; width:72px; height:72px; border:4px solid #E6E6E6; background:#fff url('http://reader-download.googlecode.com/svn/trunk/images/loading-white.gif') no-repeat 50% 50%; padding:0px; } ul.spy li .imgwrap { -webkit-box-shadow:0px 0px 2px rgba(0,0,0,0.7); -moz-box-shadow:0px 0px 2px rgba(0,0,0,0.7); box-shadow:0px 0px 2px rgba(0,0,0,0.7); } ul.spy li img { border:none !important; float:none; margin:0px 0px; padding:0px 0px; display:none; } </style> <script type='text/javascript'> var spyTitle = "Последние статьи блога", numposts = 7, numchars = 127, komentar = "Комментарии", pBlank = "http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg", modeID = true, showSummaries = true, openNewTab = false, showPostDate = true, showComment = true, showThumbnails = true, animatedRecentPost = true, limitspy = 4, intervalspy = 4000, tickspeed = 1000; </script> <script type="text/javascript" src="https://ivyth.googlecode.com/svn/js/rp-spy-whatever-v1-dte.js"></script> <script src="http://forbloggerhelp.blogspot.ru/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp"></script>

Далее меняем http://forbloggerhelp.blogspot.ru на свой адрес блога. numposts = 7- указать сколько последних постов Вы хотите, что бы выводил виджет. spyTitle = "Последние статьи блога"- напишите свой текст. tickspeed = 1000; - скорость прокрутки. Многое сможете настроить сами.

Сохраните гаджет и переместите его в нужное Вам место на боковой панели. Вот вроде всё. Всем пока. До новых встреч.

Виджет взят за бугром -- mkr-site.blogspot.com

Виджет-счётчик просмотра постов (статей) для Blogger

2012-05-23T07:46:00.002+03:00

Привет друзья!Для тех кто не заглядывает ко мне на огонёк, на мой основной блог - Школа Blogger(а). Хочу предложить Вам отличный счётчик просмотров сообщений (постов, статей). Можете посмотреть у меня вверху каждого сообщения. Счетчиков несколько вариантов. Каждый может выбрать на своё усмотрение. И так начнём с самого простого счётчика просмотров постов.

Счётчик с картинкой и без

И так как обычно идём Шаблон--Изменить HTML с помощью сочетания клавиш (Ctrl+F) находим строчку /data:post.body Ставим до или после (смотря, где нужен счётчик: вверху или внизу) следующий код.
С картинкой:

<!--blogger post counter-->
<b:if cond='data:blog.pageType == &quot;item&quot;'><div align='center' style='border:solid 1px #999999; padding:2px; margin:2px; width:100px; display:compact'><img height='16' src='http://blogabloger.ru/images/stats.gif' width='16'/> <a href='#'><b><font size='2'><script src='http://blogabloger.ru/counter.php' type='text/javascript'/> Просмотров</font></b></a></div></b:if>
<!--end-->

Без картинки:

<!--blogger post counter-->
<b:if cond='data:blog.pageType == &quot;item&quot;'><div align='center' style='border:solid 1px #999999; padding:2px; margin:2px; width:100px; display:compact'><a href='#'><b><font size='2'><script src='http://blogabloger.ru/counter.php' type='text/javascript'/> Просмотров</font></b></a></div></b:if>
<!--end-->

Теперь немного пояснения:

Код b:if cond='data:blog.pageType == "item"' - заставляет отображаться только на странице поста.
Код border:solid 1px #999999 - толщина и цвет рамки.

А теперь рассмотрим, как же можно изменить внешний вид счётчика.
Попробуем сменить шрифт.Идём на Google Web Fonts, выбираем шрифт и получаем ссылку + код для css.

Ссылка на веб-шрифт:
<link href="http://fonts.googleapis.com/css?family=Lobster&subset=cyrillic,latin,cyrillic-ext" rel="stylesheet" type="text/css"></link>

Запись о шрифте для стилей:
font-family: 'Lobster', cursive;
Теперь установим счётчик, вот такой получится по умолчанию:

1) Ссылка на шрифт (ставится в <head></head>):

2) Стили счётчика (ставится в css часть шаблона; перед ]]></b:skin>)

Код стиля такой:

.zebra{
font-family: 'Lobster', cursive;
color:#ff0000;
text-align: center;
border:solid 1px #999999;
padding:12px;
margin:12px;
width:100px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
-moz-box-shadow: 0 2px 10px #999999;
-webkit-box-shadow: 0 2px 8px #999999;
box-shadow: 0 2px 8px #000000;

Сам код счётчика такой:

<div style="color:red; padding:2px; margin:2px; width:100px; display:compact;"><img height='16' src='http://2.bp.blogspot.com/-GtFBeZjSyT8/Tqcov3KtjRI/AAAAAAAAGkI/lRHWwed10vw/s1600/eye.png' width='16'/>+<font size='3'><script src='http://blogabloger.ru/counter.php' type='text/javascript'/></script></font></div>

Теперь рассмотрим другой улучшенный вариант:

Установка в шаблон блога по той же схеме.
Готовый код такой:

<!--blogger post counter-->
<b:if cond='data:blog.pageType == &quot;item&quot;'><div style="color:red; padding:2px; margin:2px; width:100px; display:compact;"><img height='16' src='http://2.bp.blogspot.com/-GtFBeZjSyT8/Tqcov3KtjRI/AAAAAAAAGkI/lRHWwed10vw/s1600/eye.png' width='16'/>+<font size='2'><script src='http://blogabloger.ru/counter.php' type='text/javascript'/></script></font></div></b:if>
<!--end-->

Можно установить этот код-
ПОСЛЕ ЭТИХ СТРОЧЕК НА ВЫБОР ГДЕ ХОТИТЕ ЧТО БЫ СТОЯЛ СЧЁТЧИК:

Перед "Автором":
<b:if cond="data:top.showAuthor">

Перед отметкой времени:
<b:if cond="data:top.showTimestamp">

Перед ярлыками:
<b:if cond="data:post.labels">

Вот вроде и всё. За разъяснениями прошу обращаться в комментариях. Всего доброго. До новых встреч.

Виджет украшение колокольчики для Blogger

2012-01-21T08:06:00.001+03:00

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

Если хотите установить виджет украшение колокольчики для Blogger,Пожалуйста войдите Blogger-Дизайн-Добавить гаджет HTML / JavaScript и в его поле вставляем этот код:

<img src="https://lh6.googleusercontent.com/-5R7C9LMfqKY/Txo_0iOthMI/AAAAAAAAELw/rzmYWYHYXBs/w189-h197-k/christmas-icon.png" style="position:fixed; top: 0px;left:0px;border:none;z-index:5;"/><img src="https://lh4.googleusercontent.com/-PbiGUGyANAs/Txo_yfoVXSE/AAAAAAAAELw/cZylwGVCEuw/s145-c/212012" style="position:fixed; top: 0px;right:0px;border:none;z-index:5;"/>

Всё. Сохраняем гаджет. Желаю удачи. Всем пока.

Виджет плавающая панель LikeBox Facebook

2012-01-11T01:08:00.002+03:00

Привет! Дорогие посетители моего блога, прошу Вас станьте моими постоянными читателями. Хоть какая то будет благодарность за мои не лёгкие труды. Большое спасибо за понимание. А теперь перейдём к делу. Все знают,что социальная сеть Facebook самая популярная в мире. Поэтому я хочу Вам представить замечательный виджет плавающая панель Facebook Like Box для Blogger. Расхваливать и объяснять,что это такое, будет лишним, если есть возможность посмотреть и испытать Facebook Like Box в моём демонстрационном блоге для виджетов.С правой стороны. Прошу нажать "мне нравится".
Перед установкой этого интересного виджета необходимо создать страницу Facebook для вашего блога. Зачем это нужно? Создавая страницу бренда своего блога в этой социальной сети, Вы получаете платформу для публикации своего собственного контента. Используя страницу в Facebook как дополнительную бесплатную площадку для публикации ваших статей, Вы можете привлекать дополнительный трафик на ваш блог. Не забывайте о вирусном потенциале социальных сервисов: чем интереснее этот контент, тем больше людей его увидят, прокомментируют и поделятся с друзьями.

Как установить виджет плавающею панель Facebook Like Box в Blogger

Вам нужно зайти в Панель управления -- Дизайн - Добавить гаджет HTML/JavaScript и в его поле вставить код:

<script type="text/javascript">

//<!--

$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});

//-->

</script>
<style type="text/css">
.w2bslikebox{background: url("http://1.bp.blogspot.com/--tscpVzcBjo/TdUarKtcAlI/AAAAAAAAA3I/qVkypiYO9rc/s150/w2b_facebookbadge.pn") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #808080;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style=""><div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fzagulyaevsv&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp; connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe><span>Widget:<a href="#">Facebook</a></span></div></div>

Теперь замените моё имя страницы zagulyaevsv на своё. Сохраните гаджет. Гаджет перетащите куда нибудь вниз шаблона. Всё. Желаю удачи . Присоединяйтесь ко мне.

Красивое горизонтальное выпадающее меню

2011-12-29T05:46:00.003+03:00

Всем привет. Давненько я сюда не заглядывал. Всё занимаюсь другим блогом.Блог называется Школа Blogger(а), в принципе на эти же тему: виджеты, трюки и т.д. Только там к оформлению статей отношусь более серьёзно. Кому интересно, милости прошу. И так сегодня представлю Вам очень красивое горизонтальное меню. Ставится в блог всего в три шага. Но сначала немного о меню. Очень полезно знать каждому. Меню бывает трёх видов. Верхнее меню – оно должно быть обязательно. В нём обычно размещают разные страницы блога такие как например: карта сайта обо мне, о блоге, контакты и т. д. Меню в сайдбаре – сайдбар может быть расположен слева или справа, но в нём также должно быть меню. В таких меню чаще всего размещают категории, разделы, рубрика, что в принципе одно и то же.

Меню в футере. Поисковик с большой вероятностью может учесть наличие нижнего меню в футере в вашем блоге и поставить ему не большой плюсик в колодочку «юзабилити». Функциональность блога – один из множества факторов ранжирования. Теперь перейдём к нашему горизонтальному меню. Вот скриншот:

Выпадающее горизонтальное меню

А вот в демонстрационном блоге Вы можете его потрогать,пощупать. Демо. Если Вас всё устраивает тогда в перёд.
Как установить в блог горизонтальное меню

Для этого перейдите Шаблон -- Изменить HTML и теперь в шаблоне найдите такой код
]]></b:skin> и перед ним вставьте код стиля:

#jsddm {
margin: 0;
padding: 15px;
z-index:1000000000;
position:relative;
}
#jsddm li {
float: left;
list-style: none;
font: 12px Tahoma, Arial;
}
#jsddm li a {
display: block;
white-space: nowrap;
margin:1px 3px;
border: 1px solid #AAAAAA;
background: #cccccc;
background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cccccc));
background: -moz-linear-gradient(top, #ebebeb, #cccccc);
padding: 5px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: #ffffff 0 1px 0;
color: #363636;
font-size: 15px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}
#jsddm li a:hover {
background: #C8C8C8;
}
#jsddm li ul {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white;
}
#jsddm li ul li {
float: none;
display: inline;
}
#jsddm li ul li a {
width: auto;
background: #CAE8FA;
}
#jsddm li ul li a:hover {
background: #A3CEE5;
}

Далее найдите такой код </head> и до него вставьте следующий код:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'/>
  <script type='text/javascript'>
  //<![CDATA[
var timeout    = 500;
  var closetimer = 0;
  var ddmenuitem = 0;
function jsddm_open()
  {  jsddm_canceltimer();
  jsddm_close();
  ddmenuitem = $(this).find('ul').css('visibility', 'visible');}
function jsddm_close()
  {  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
function jsddm_timer()
  {  closetimer = window.setTimeout(jsddm_close, timeout);}
function jsddm_canceltimer()
  {  if(closetimer)
  {  window.clearTimeout(closetimer);
  closetimer = null;}}
$(document).ready(function()
  {  $('#jsddm > li').bind('mouseover', jsddm_open)
  $('#jsddm > li').bind('mouseout',  jsddm_timer)});
document.onclick = jsddm_close;
  //]]>
  </script>

Теперь сохраните шаблон. Далее перейдём к самой установки горизонтального меню в блог. Для этого перейдите "Элементы страницы" нажмите добавить гаджет HTML/JavaScript. В верху шаблона. Название гаджета оставьте пустым,а в его поле вставьте следующий код:

<ul id="jsddm">
  <li><a href="#">Home</a>
  <li><a href="#">Menu 1</a>
  <ul>
  <li><a href="#">Drop 1-1</a></li>
  <li><a href="#">Drop 1-2</a></li>
  <li><a href="#">Drop 1-3</a></li>
  </ul>
  </li>
 <li><a href="#">Menu 2</a>
  <ul>
  <li><a href="#">Drop 2-1</a></li>
  <li><a href="#">Drop 2-2</a></li>
  </ul>
  </li>
 <li><a href="#">Menu 3</a>
  <ul>
  <li><a href="#">Drop 3-1</a></li>
  <li><a href="#">Drop 3-2</a></li>
  <li><a href="#">Drop 3-3</a></li>
  <li><a href="#">Drop 3-4</a></li>
  </ul>
  </li>
 <li><a href="#">Menu 4</a></li>
  <li><a href="#">Menu 5</a></li>
  <li><a href="#">Школа Blogger(а)</a></li>
  </li></ul>

Всё. Теперь давайте свои названия меню и меняйте решётки на URL адреса страниц. Желаю удачи. До новых встреч.

Поселите птичку Twitter в уголок блога

2011-12-20T06:30:00.001+03:00

Всем приветик! Нам ни как не обойтись без этой прекрасной птички Twitter. Рост популярности Твиттера с начала года составил 82%. Каждый день сервис микроблогов посещает почти половина пользователей (в январе этот показатель составлял всего 30%).

По словам исполнительного директора Twitter Дика Костоло, количество пользователей, которые хотя бы раз в месяц заходят в Twitter, уже превышает 100 миллионов.

Ежедневно пользователи Твиттера пишут около 250 миллионов сообщений (в начале года — 100 миллионов сообщений). В любом блоге или сайте она обязательно присутствует. Поэтому предлагаю выделить уголок в Вашем блоге для кнопки в виде маленькой пташки Twitter. При прокрутке страницы блога, эта птичка будет всё время находится в углу,который Вы ей укажете.

Птичка Twitter в уголку

Ставится этот виджет с помощью незаменимого гаджета HTML/javascript.
Как добавить виджет: плавающая статическая птичка Twitter для Blogger

Зайдите в Дизайн -- Добавьте гаджет -- HTML/javascript. Скопируйте в него приведённый код:

Теперь сделайте эти изменения: выделено красным-ссылку на свой твиттер.Синим - можно поменять на свою картинку. Можно заменить bottom на top (птичка тогда будет вверху блога). Также заменить right (право) на left (влево). Ну и естественно Follow Me On Twitter поменять на своё. Сохраните гаджет. Перетащите его куда нибудь вниз шаблона и забудьте про него. Всё. Желаю удачи.

Полезный виджет объявления для Blogger

2011-12-09T09:13:00.003+03:00

Привет! Ещё один полезный виджет для Вашего блога.Виджет можно использовать для показа заголовков ваших объявлений, последних обновлений вашего блога или ссылки на ваши лучшие статьи. Возможностей много. Текст с прокруткой,при наведении курсора мыши он останавливается. Можно настроить цвет, скорость показа, размер шрифта, использовать свою картинку, установить ширину виджета. Посмотреть виджет объявлений с прокруткой можно здесь. Для тех кто в танке смотреть нужно над сообщениями.Кому лень нажимать ссылку приведу скриншот:

Как установить виджет объявлений с прокруткой в блог
Перейдите Дизайн. Выберите HTML/JavaScript гаджет. Вставьте в его поле следующий длинный код:

Теперь настройки: width: 430px;--ширина виджета.color:#0080ff;--цвет выводимого текста. Можно подобрать генератором цвета.

#--замените на Ваш URL адрес ссылки. Ваш текст здесь--замените на название заголовка объявления. 1000--Изменить время задержки прокрутки. Чем меньше это значение, тем быстрее будут меняться заголовки. Теперь можно сохранить гаджет и переместить в нужное для Вас место. Всё. Всем пока.

Также Вам может понравиться Виджет: последние сообщения бегущей строкой
Простой Scroller Highlighter текст для Blogger

Виджет:падающий снег для Blogger

2011-12-08T07:59:00.001+03:00

Привет всем! Скоро новый год,а снега не хватает. Но на наше счастье есть возможность добавить снежку в блог. Что может быть более приятным, чем приветствуя посетителей блога с падающим снегом. Снег плавно падает вниз страницы, а затем исчезает. Мы можем контролировать количество снежинок, а также время, после которого они должны исчезнуть. Вы можете легко заменить снег с любым Вашим изображением, который вы предпочитаете. Виджет хорош тем, что он всепогодный. Стоит только поменять снег на осенние листья или сердечки и т.д. Виджет: красиво падающий снег установить можно с помощью обыкновенного гаджета HTML/JavaScript.

Давайте сначала посмотрим. Демо. Теперь перейдём к установке.
Как установить виджет: красиво падающий снег в блог

Перейти Дизайн. Выберите HTML/JavaScript гаджет.Вставьте в его поле следующий код:

Настройки: var no = 15; -- это строчка отвечает за количество падающих снежинок. Выделенным жирным шрифтом это URL адрес изображения снежинок. Вы можете менять картинки на свои: листья,бриллианты, сердечки,да на что угодно по вашему желанию. Теперь сохраните гаджет и перетащите его куда нибудь,желательно на верх в свободное место. Всё. Мы установили в блог виджет: красиво падающий снег на Новый год. До новых встреч.

Как добавить простой Scroller Highlighter текст для Blogger

2011-12-05T21:23:00.003+03:00

Добрый вечер! Нашёл вот интересный виджет: текст бегущей строкой (Scroller Highlighter текст для Blogger). Как использовать? Можно например для приветствия или поздравить ваших посетителей с Новым годом.

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

Ставится этот виджет с помощью гаджета HTML/Javascript

Вот она красивая бегущая строка с эффектом Scroller Highlighter:

Как добавить простой Scroller Highlighter текст для Blogger

Зайдите Дизайн -- "Добавить гаджет"- "HTML / Java Script" затем вставьте в поле гаджета этот код:

<div style="position:relative;left:0px;top:0px">
<span id="highlighter" style="position:absolute;left:0;top:0;font-size:18px;font-family:Verdana;background-color:yellow;clip:rect(0px 0px auto 0px)"></span>
</div>
<script type="text/javascript">
var tickercontents=new Array()
tickercontents[0]='Ваш Highlighter Scroller текст здесь.Добро пожаловать!'
var tickdelay=3000
var highlightspeed=10
var currentmessage=0
var clipwidth=0
function changetickercontent(){
crosstick.style.clip="rect(0px 0px auto 0px)"
crosstick.innerHTML=tickercontents[currentmessage]
highlightmsg()
}
function highlightmsg(){
var msgwidth=crosstick.offsetWidth
if (clipwidth<msgwidth){
clipwidth+=highlightspeed
crosstick.style.clip="rect(0px "+clipwidth+"px auto 0px)"
beginclip=setTimeout("highlightmsg()",20)
}
else{
clipwidth=0
clearTimeout(beginclip)
if (currentmessage==tickercontents.length-1) currentmessage=0
else currentmessage++
setTimeout("changetickercontent()",tickdelay)
}
}
function start_ticking(){
crosstick=document.getElementById? document.getElementById("highlighter") : document.all.highlighter
crosstickParent=crosstick.parentNode? crosstick.parentNode : crosstick.parentElement
if (parseInt(crosstick.offsetHeight)>0)
crosstickParent.style.height=crosstick.offsetHeight+'px'
else
setTimeout("crosstickParent.style.height=crosstick.offsetHeight+'px'",100) //delay for Mozilla's sake
changetickercontent()
}
if (document.all || document.getElementById)
window.onload=start_ticking
</script>

Сохраните гаджет. Теперь можно поговорить о настройках:

Замените Ваш Highlighter Scroller текст здесь. Добро пожаловать! на Ваш текст.
Эта строка var highlightspeed=10 отвечает за скорость - время показа.
background-color:yellow;--эта строчка за фон,в данный момент стоит жёлтый цвет (yellow).

Подобрать цвет можно генератором цвета.

Вот мы и добавили в блог виджет: красивая бегущая строка с эффектом Scroller Highlighter.
Всего доброго. Всем пока.

Как красиво оформить блок цитаты

2011-12-05T20:13:00.001+03:00

Всем привет! Сегодня я покажу как красиво оформить блочную цитату. Эти стили довольно старенькие, но до сих пор вполне актуальны. Посмотреть и выбрать себе стиль оформления можно в демонстрационном блоге. Смотреть. Если выбрали, тогда можем приступать.

Cоздаем эффектно оформленную красивую блочную цитату - стили CSS

Вариант первый:

blockquote.style1 {
font: 14px/20px italic Times, serif;
padding: 8px;
background-color: #faebbc;
border-top: 1px solid #e1cc89;
border-bottom: 1px solid #e1cc89;
margin: 5px;
background-image: url(https://lh3.googleusercontent.com/-W_t4kr_cnL8/TryHmrdUhJI/AAAAAAAABs8/wFN5wlQGaQ0/s25/openquote1.gif);
background-position: top left;
background-repeat: no-repeat;
text-indent: 23px;
}
blockquote.style1 span {
display: block;
background-image: url(https://lh4.googleusercontent.com/-P6iY1yjxSZo/TryHkst54uI/AAAAAAAABs0/rUsUI0EgBEw/s25/closequote1.gif);
background-repeat: no-repeat;
background-position: bottom right;
}

Вариант второй:

blockquote.style2 {
font: 14px/22px normal helvetica, sans-serif;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 50px;
padding-left: 15px;
border-left: 3px solid #ccc;
}

Вариант третий:

blockquote.style3 {
font: 18px/30px normal Tahoma, sans-serif;
padding-top: 22px;
margin: 5px;
background-image: url(https://lh3.googleusercontent.com/-rpej94PjpCQ/TryOIy2XNRI/AAAAAAAABt4/7UzggrE0a1I/s65/openquote3.gif);
background-position: top left;
background-repeat: no-repeat;
text-indent: 65px;
}
blockquote.style3 span {
display: block;
background-image: url(https://lh4.googleusercontent.com/-cf5lYCVjw1U/TryOHB0bR4I/AAAAAAAABtw/JSBQhLoekxY/s65/closequote3.gif);
background-repeat: no-repeat;
background-position: bottom right;
}

Вариант четвёртый:

blockquote.style4 {
font: 14px/20px italic Times, serif;
padding-left: 70px;
padding-top: 18px;
padding-bottom: 18px;
padding-right: 10px;
background-color: #dadada;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin: 5px;
background-image: url(https://lh3.googleusercontent.com/-Ug9Gb1WVyso/TryHgrZkqcI/AAAAAAAABss/ejUw-in9dKU/s96/openquote4.gif);
background-position: middle left;
background-repeat: no-repeat;
text-indent: 23px;
}

Вариант пятый:

blockquote.style5 {
font: 12px/18px normal "Courier New", sans-serif;
padding-left: 70px;
padding-top: 2px;
padding-bottom: 2px;
background-color: #000;
color: white;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin: 5px;
background-image: url(https://lh5.googleusercontent.com/-FE9KBDRGPXU/TryOMrkGGMI/AAAAAAAABuI/JnOFc9fOP3w/s96/openquote5.gif);
background-position: middle left;
background-repeat: no-repeat;
text-indent: 23px;
}
blockquote.style5 div {
padding-right: 50px;
display: block;
background-image: url(https://lh5.googleusercontent.com/-IJBaN0C6Ut0/TryOLMDUG1I/AAAAAAAABuA/le8LXAuQzMw/s96/closequote5.gif);
background-repeat: no-repeat;
background-position: bottom right;
}

Код стиля вставляется после строчки ]]></b:skin> в вашем шаблоне.
Во время написания поста нужный Вам фрагмент текста заключаем в <blockquote class="style1">Ваша цитата или текст</blockquote> Код общий для всех примеров, неободимо только подставить нужное название стиля 1,2,3 или 4,5. Можно все стили использовать в шаблоне. Вот вроде и всё.Пока.

На вопрос Как красиво оформить блок цитаты? мы ответили.

Навигация страниц с помощью Javascript

2011-12-01T06:44:00.001+03:00

Привет друзья! Постраничная навигация удобная вещь. В прошлый раз я показал как можно установить с помощью гаджета "HTML / Java Script" постраничную навигацию. Теперь другой вариант. Выбирайте какой Вам удобней устанавливать.

Как установить постраничную навигацию для Blogger

Вот как она выглядит:

Заходим в Дизайн -- Изменить HTML. Далее с помощью поиска (Ctrl+F) найдите эту строку в вашем шаблоне: ]]></b:skin>. Перед этой строкой Вам надо будет поставить CSS стиль вашей навигации. Обязательно перед ]]></b:skin> вставляем этот код:

.showpageNum a {
color:#FFF;padding:4px 10px;
margin:0 2px;
text-decoration:none;
-webkit-border-radius:2px;-
moz-border-radius:2px;
background:#848484
}
.showpageOf {
color:#222;
margin:0 6px 0 0
}
.showpageNum a:hover {
background:#222;
color:#FFF
}
.showpagePoint {
color:#FFF;
text-shadow:0 1px 2px #333;
padding:4px 10px;
margin:0 2px;
-webkit-border-radius:2px;
-moz-border-radius:2px;
background:#222;
text-decoration:none
}

Теперь находим другую строчку: </body> и над ней вставляем код:

Сохраняем шаблон. Выделенное можете настроить на своё усмотрение.
var postperpage=10;- это количество сообщений на одной странице
var numshowpage=7;- это количество кнопок навигации на одной странице.
Всё. Любуемся навигацией по страницам, а я тихонько в сторонке горжусь собою. Желаю удачи.

Как добавить "Показать все сообщения" (содержание) в Blogger

2011-11-29T10:13:00.002+03:00

Всем привет. Вот раздобыл интересный виджет: как добавить "Показать все сообщения" (содержание) в Blogger. Мы обычно делаем карту блога, но Ваши посетители просто не знают что это такое. А я покажу Вам отличный хак для вывода всех ваших постов в блоге на главную страницу. Давайте смотреть как это выглядит,чтобы Вы знали о чём идёт речь.Просто нажмите на боковой панели "Показать все сообщения". Смотреть. Если вас всё устраивает,тогда можно приступать.

Как добавить виджет: "Показать все сообщения" (содержание) в Blogger

Заходим в Шаблон--Изменить HTML. Далее с помощью поиска (Ctrl+F) найдите эту строку в вашем шаблоне: <b:include data='post' name='post'/> и заменяем её вот этим кодом:

<b:if cond='data:blog.homepageUrl !=
data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<div style="padding:6px 0 6px 5px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;margin-bottom:2px;background:#999999;color:#406A0E;">
<data:post.title/></div></a>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Сохраните шаблон. Следующее действие. Теперь идите Дизайн и нажмите кнопку "Добавить гаджет"-- "HTML / Java Script" затем вставьте в поле гаджета этот код:

<a href="http://zsvblogger.blogspot.com/search?max-results=200">Показать все сообщения »»</a>

Теперь сохраните гаджет и вставьте его в нужное Вам месте. Естественно нужно заменить адрес URL блога на Ваш. Так же можете поменять "Показать все сообщения" и число выводимых постов на своё. Вот и всё. До новых встреч.

P.S. В коде выше Вы можете настроить цвет на Ваше усмотрение. Подобрать цвет можно при помощи Генераторы кодов цвета HTML

Оформление изображения в тексте

2011-11-27T20:05:00.005+03:00

Всем привет! Сегодня мы займёмся оформлением текста с картинками. В самом редакторе Blogger есть возможность вставлять изображения слева,справа и посередине текста. Я покажу Вам другие способы: Текст между двух картинок, картинка между текстом, картинка в центре текста.

Делается это легко. Я не буду показывать примеры, слишком большой пост получится. Покажу Вам только коды. Итак приступим.
Код для текста между двух картинок:

<table align=center border=0>
<tr>
<td><img src="URL АДРЕС КАРТИНКИ"></td>
<td>Ваш текст будет здесь</td>
<td><img src="URL АДРЕС КАРТИНКИ"></td>
</tr>
</table>

Примечание: чтобы текст лег красиво, нужно, чтобы картинки были по длине больше, чем по ширине.

Код для изображения между текстом:

<table align=center border=0>
<tr>
<td>ВАШ ТЕКСТ</td>
<td><img src="URL АДРЕС КАРТИНКИ"></td>
<td>ВАШ ТЕКСТ</td>
</tr>
</table>

Код для картинки в центре текста:

Первая часть Вашего текста <img src="URL АДРЕС КАРТИНКИ" align="middle" border="0"> Вторая часть Вашего текста.

Всё таки не удержался.Покажу Вам один пример: Код для изображения между текстом:

Очень красивый корабль Посередине синего моря .

Всем пока. До новых встреч.

Виджет похожие сообщения от Linkwithin

2011-11-26T22:24:00.002+03:00

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

Сервис от Linkwithin вообще полезная вещь. Ведь ссылки на статьи в конце поста могут задержать читателя на блоге. После прочтения очередного поста и быстро предоставить доступ к другим постам. Эффект увеличивается, если эти ссылки достаточно оригинально оформлены и способны самостоятельно привлечь внимание читателя. Делаем первый шаг -переходим на страницу Linkwithin.
Описывать заполнение формы я не буду, об этом написано довольно много. Мой пост не об этом. После того как Вы получили код для вставки в гаджет ,нам нужен только Ваш ID блога по версии Linkwithin. Вот так будет выглядеть скрипт:

Записываем свой ID номер. Шаблон - "Изменить HTML" и находим фрагмент кода шаблона:
<div class='post-footer'>
При отсутствии такового находим похожий. Я лично у себя нашёл именно такой код и всё отлично получилось. И перед этой строчкой вставляем следующий скрипт:

<b:if cond='data:blog.pageType == "item"'>
<script>
var linkwithin_site_id = полученный ID ;
(function () {
var elem = document.createElement('script');
elem.type = 'text/javascript';
elem.src = 'http://www.linkwithin.com/widget.js?rand=' + Math.random();
document.getElementsByTagName('head')[0].appendChild(elem);
})();
</script>
<a href="http://www.linkwithin.com/" rel="nofollow"><img
src="http://www.linkwithin.com/pixel.png" alt="Blog Widget by LinkWithin"
style="border: 0" /></a></b:if>

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

P. S. Виджет выводит надпись на английском языке в заголовке, можно написать на своём родном языке например: случайно вылезло почитать или Вам также может понравиться. Для этого нам нужно вписать в самом начале скрипта код:

<script>linkwithin_text='Ваш придуманный текст:'</script>

На этом позвольте распрощаться. Сегодня мы установили виджет от Linkwithin "Похожие статьи" в сам шаблон блога и по запросам: как спрятать или убрать виджет от Linkwithin с главной страницы, чтобы он отображался только на внутренних. Всего доброго.Пишите.

Бесплатный хостинг для файлов с прямой ссылкой на скачивание

2011-11-25T14:50:00.001+03:00

Привет всем! Кто сталкивался с проблемой где можно бесплатно хранить Ваши файлы и не только хранить, но и чтобы посетители могли кликнуть по ссылке прямо из поста и скачать файл. Тогда эта тема для Вас. Скажу честно, не я нашёл этот замечательный способ.

Дать возможность скачать файл по прямой ссылке, оказывается можно с помощью Google Сайтов. Попробуйте сами. Нажмите скачать файл. Там находится шаблон для Blogger. Скачивается очень быстро. Google дает нам возможность реализовать это очень легко. Для этого нам нужно создать свой сайт или выбрать уже готовый. Начнём действовать.

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

Заходим в свой аккаунт на Google. Находим ссылку на сайты и кликаем по ней.

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

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

Нажмите кнопку - Ещё. Выпадет меню: выбираем пункт Управление сайтом. Попадаем на страницу Управление сайтом. Нажимаем пункт: Приложения

Дальше жмем на кнопку Загрузить и загружаем файл с компьютера.

Когда загрузите файл. Жмем правой кнопкой мыши по ссылке загрузить. И выбираем пункт Копировать ссылку.Но эту ссылку пока нельзя вставлять в блог. Её необходимо немного отредактировать. Из моего примера, у меня ссылка на шаблон в формате rar который я Вам предложил скачать выше. Вот такая получается ссылка.

https://sites.google.com/site/svzagulyaev/WebProBloggerTemplate.rar?attredirects=0&d=1

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

https://sites.google.com/site/svzagulyaev/WebProBloggerTemplate.rar

Вот такую ссылку можно вставлять в блог. Могу ещё раз продемонстрировать для тех кто сомневается. Скачать. Вот и всё. Мы разобрали: хостинг для файлов с прямой ссылкой для скачивания для Blogger. Надеюсь у Вас получилось. Можете задавать вопросы в комментариях. Желаю удачи.

Постраничная навигация (page navigation) для Blogger

2011-11-23T13:03:00.005+03:00

Привет всем! Сегодня будем ставить удобную систему навигации для Вашего блога. Стандартный вид навигации - отображён ссылками: Следующее; Главная страница; Предыдущее; что очень не удобно для посетителей. Я покажу Вам как поставить нормальную постраничную навигацию с помощью простого Java Scriptа. Прежде я пошлю Вас посмотреть этот виджет в действии. Смотреть Демо. Теперь можно приступать.

Как поставить нумерованный Page Navigation для блоггера
Заходим в Шаблон -- Изменить HTML. Далее с помощью поиска (Ctrl+F) найдите эту строку в вашем шаблоне: ]]></b:skin>. Перед этой строкой Вам надо будет поставить CSS стиль вашей навигации. Обязательно перед (чуть выше) ]]></b:skin> вставляем этот код:

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
border:1px solid #CCCCCC;
margin:0 3px;
padding:3px 7px;
text-decoration:none;
}
.showpageNum a:hover {
background-color:#CCCCCC;
border:1px solid #CCCCCC;
}
.showpagePoint {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#CCCCCC none repeat scroll 0 0;
border:1px solid #CCCCCC;
color:#333333;
margin:0 3px;
padding:3px 7px;
text-decoration:none;
}
.showpageOf {
margin:0 3px 0 0;
padding:3px 7px;
text-decoration:none;
}
.showpage a {
border:1px solid #CCCCCC;
padding:3px 7px;
text-decoration:none;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link, .showpage a:link {
color:#333333;
text-decoration:none;
}

Сохраните шаблон.Теперь идите Дизайн -- Элементы страницы и нажмите кнопку "Добавить гаджет"- "HTML / Java Script" затем вставьте в поле гаджета этот код: код длинный с прокруткой.

Перетащите новый гаджет под раздел "Сообщения блога". Выделенное зелёным цветом Вы можете поменять на свои значения. Вот и всё.Мы установили виджет: Постраничная навигация (Page Navigation) для Blogger. Незабываем благодарить, нажимая на кнопочки здесь. Всего доброго.

Как добавить опцию "Печатать страницу" для Blogger

2011-11-23T11:48:00.007+03:00

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

Как добавить опцию "Печатать страницу"для Blogger

Переходим к Blogger - Шаблон - Изменить HTML (не забываем резервное копирование шаблона). Поиск этой строчки </head> и перед этой строчкой </head> вставляем этот код:

Теперь ищем такую строчку (для быстрого поиска пользуемся сочетанием клавиш Ctrl+F) <data:post.body/> и вставляем после этой строки код:

<a href="javascript:window.print()">Print Page</a>

На этом всё. Сохраните шаблон. Видите, всё очень просто. Как легко мы добавили опцию "Печатать страницу"для Blogger. Желаю удачи.
P.S.Print Page можете заменить на своё русское слово. Например: Печатать страницу.

Как оптимизировать блог - настроить мета-теги

2011-11-22T00:54:00.001+03:00

Привет дорогие друзья! Сегодня тема важная: как оптимизировать блог.Чем больше сидишь в интернете, тем больше узнаёшь. Вот и я нашёл хороший совет по настройке мета-тегов для поисковиков. Теперь спешу поделиться с Вами.

Как оптимизировать блог и настроить-мета-теги

Совет первый: Скрываем ярлыки и архив от индексации. Поисковые роботы отрицательно относятся к повторяющему контенту, а архив и ярлыки автоматически генерируют новые ссылки на уже существующие страницы, поэтому нужно запретить их индексацию. Вставляем этот код сразу после тега <head>

<b:if cond='data:blog.pageType == "archive"'>
<meta content='noindex,follow' name='robots'/>
</b:if><b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<meta content='noindex,follow' name='robots'/>
</b:if>
</b:if>

Совет второй: Теперь оформляем заголовки страниц title.У каждой страницы блога заголовки и описание (description) должны быть уникальными. Поисковые роботы придают заголовку страницы большое значение. Поэтому в нём должны содержаться ключевые слова, которые будут соответствовать содержимому на странице. Нужно вставить такой код:

<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/>: <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title> </b:if>

Вот на этом можно закончить оптимизацию и настройку мета-тегов. Всего доброго. Желаю удачи.