2015-12-31

Виджет Фейерверк для блога

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

Как установить виджет фейерверк для блога?

В редакторе блога найдите отрезок кода <body> и добавьте перед ним следующий код:
/*
<script type="text/javascript">
// <![CDATA[
var bits=80; // how many bits
var speed=33; // how fast - smaller is faster
var bangs=5; // how many can be launched simultaneously (note that using too many can slow the script down)
var colours=new Array("#03f", "#f03", "#0e0", "#93f", "#0cf", "#f93", "#f0c");
//                     blue    red     green   purple  cyan    orange  pink
var bangheight=new Array();
var intensity=new Array();
var colour=new Array();
var Xpos=new Array();
var Ypos=new Array();
var dX=new Array();
var dY=new Array();
var stars=new Array();
var decay=new Array();
var swide=800;
var shigh=600;
var boddie;
if (typeof('addRVLoadEvent')!='function') function addRVLoadEvent(funky) {
  var oldonload=window.onload;
  if (typeof(oldonload)!='function') window.onload=funky;
  else window.onload=function() {
    if (oldonload) oldonload();
    funky();
  }
}
addRVLoadEvent(light_blue_touchpaper);
function light_blue_touchpaper() { if (document.getElementById) {
  var i;
  boddie=document.createElement("div");
  boddie.style.position="fixed";
  boddie.style.top="0px";
  boddie.style.left="0px";
  boddie.style.overflow="visible";
  boddie.style.width="1px";
  boddie.style.height="1px";
  boddie.style.backgroundColor="transparent";
  document.body.appendChild(boddie);
  set_width();
  for (i=0; i<bangs; i++) {
    write_fire(i);
    launch(i);
    setInterval('stepthrough('+i+')', speed);
  }
}}
function write_fire(N) {
  var i, rlef, rdow;
  stars[N+'r']=createDiv('|', 12);
  boddie.appendChild(stars[N+'r']);
  for (i=bits*N; i<bits+bits*N; i++) {
    stars[i]=createDiv('*', 13);
    boddie.appendChild(stars[i]);
  }
}
function createDiv(char, size) {
  var div=document.createElement("div");
  div.style.font=size+"px monospace";
  div.style.position="absolute";
  div.style.backgroundColor="transparent";
  div.appendChild(document.createTextNode(char));
  return (div);
}
function launch(N) {
  colour[N]=Math.floor(Math.random()*colours.length);
  Xpos[N+"r"]=swide*0.5;
  Ypos[N+"r"]=shigh-5;
  bangheight[N]=Math.round((0.5+Math.random())*shigh*0.4);
  dX[N+"r"]=(Math.random()-0.5)*swide/bangheight[N];
  if (dX[N+"r"]>1.25) stars[N+"r"].firstChild.nodeValue="/";
  else if (dX[N+"r"]<-1.25) stars[N+"r"].firstChild.nodeValue="\\";
  else stars[N+"r"].firstChild.nodeValue="|";
  stars[N+"r"].style.color=colours[colour[N]];
}
function bang(N) {
  var i, Z, A=0;
  for (i=bits*N; i<bits+bits*N; i++) {
    Z=stars[i].style;
    Z.left=Xpos[i]+"px";
    Z.top=Ypos[i]+"px";
    if (decay[i]) decay[i]--;
    else A++;
    if (decay[i]==15) Z.fontSize="7px";
    else if (decay[i]==7) Z.fontSize="2px";
    else if (decay[i]==1) Z.visibility="hidden";
    if (decay[i]>1 && Math.random()<.1) {
       Z.visibility="hidden";
       setTimeout('stars['+i+'].style.visibility="visible"', speed-1);
    }
    Xpos[i]+=dX[i];
    Ypos[i]+=(dY[i]+=1.25/intensity[N]);
  }
  if (A!=bits) setTimeout("bang("+N+")", speed);
}
function stepthrough(N) {
  var i, M, Z;
  var oldx=Xpos[N+"r"];
  var oldy=Ypos[N+"r"];
  Xpos[N+"r"]+=dX[N+"r"];
  Ypos[N+"r"]-=4;
  if (Ypos[N+"r"]<bangheight[N]) {
    M=Math.floor(Math.random()*3*colours.length);
    intensity[N]=5+Math.random()*4;
    for (i=N*bits; i<bits+bits*N; i++) {
      Xpos[i]=Xpos[N+"r"];
      Ypos[i]=Ypos[N+"r"];
      dY[i]=(Math.random()-0.5)*intensity[N];
      dX[i]=(Math.random()-0.5)*(intensity[N]-Math.abs(dY[i]))*1.25;
      decay[i]=16+Math.floor(Math.random()*16);
      Z=stars[i];
      if (M<colours.length) Z.style.color=colours[i%2?colour[N]:M];
      else if (M<2*colours.length) Z.style.color=colours[colour[N]];
      else Z.style.color=colours[i%colours.length];
      Z.style.fontSize="13px";
      Z.style.visibility="visible";
    }
    bang(N);
    launch(N);
  }
  stars[N+"r"].style.left=oldx+"px";
  stars[N+"r"].style.top=oldy+"px";
}
window.onresize=set_width;
function set_width() {
  var sw_min=999999;
  var sh_min=999999;
  if (document.documentElement && document.documentElement.clientWidth) {
    if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth;
    if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight;
  }
  if (typeof(self.innerWidth)!="undefined" && self.innerWidth) {
    if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth;
    if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight;
  }
  if (document.body.clientWidth) {
    if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;
    if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight;
  }
  if (sw_min==999999 || sh_min==999999) {
    sw_min=800;
    sh_min=600;
  }
  swide=sw_min;
  shigh=sh_min;
}
// ]]>
</script>
Читать далее ...

2015-12-26

Open Live Writer для Blogspot

Я уже писала о том, что Windows Live Writer перестал публиковать записи в Blogger и о появлении нового блог-клиента – Open Live Writer, который пока не был совместим с Blogspot. В этой записи я предлагаю решение данной проблемы.
Для этого скачайте версию Nightly (Build 0.5.1.2)скачать >>>
Над этой версией работали добровольцы из Microsoft и устранила проблему соединения с Google Blogger, а также эта версия содержит некоторые функции, котоых нет в рабочей версии. Об этом в последующих статях..
Процесс установки OLW:
Open Live Writer установкаOpen Live Writer установка
/* Open Live Writer установкаOpen Live Writer установка
Добавляем ваш блог в OLW:
Open Live Writer добавляем блог1
Open Live Writer добавляем блогOpen Live Writer добавляем блог
Open Live Writer добавляем блог
Теперь вы можете приступать к написанию статей и публикации их в свой блог Blogger. Недостатки:
  • интерфейс на английском языке. Однако, если вы раньше работали с Windows Writer, то вы легко разберетесь,
  • не показываются из выпадающего списка ярлыки блога,
  • нет проверки правописания, так что все последующие мои сообщения с большой вероятностью будут с очепятками.
Читать далее ...

2015-12-17

Windows Writer теперь не работает с Blogger. Возможное решение

Неприятная новость произошла 11 ноября текущего года - редактор блогов Windows Live Writer перестал публиковать записи на Blogger. Причиной послужила изменение в системе аутентификации Blogger.

Теперь при попытке опубликовать запись из Writer появляется окно с сообщением об ошибке "Блоггер возвратил следующую ошибку: NotFound: Not Found"
windows live writer не работает на Blogger

И эта ошибка не будет никогда исправлена. Если вы пользовались Windows Writer для публикации записей на Blogspot, то можете его удалить со спокойной совестью.

Однако, есть и приятная новость - появился новый редактор блогов Open Live Writer с открытым исходным кодом. Это блог-клиент для ведения блогов на wordpress, blogger, livejournal и др.

Интерфейс клиента похож на Windows Writer.

Отличия Windows и Open Writter:

  • теперь в редакторе отсутствует проверка правописания,
  • нет фотоальбомов,
Open live writer

К сожалению, пользователи Blogger и в Open Writer при попытке авторизовать блог через клиент видят ошибку: "The username or password is incorrect. Please try again".
ошибка blogger Open live writer
Однако работа над OLW продолжается, и вскоре проблема будет решена, так как вскоре будет добавлена система аутентификации OAuth 2, с которой работает Blogger.  Скачать OLW вы можете уже сейчас -> Скачать
/* Установка OLW не требует предварительного удаления WLW.




Читать далее ...

2015-12-14

Новый виджет Blogger - Избранное сообщение


виджет избранное сообщение blogspot
В Blogger появился новый виджет - "Избранное сообщение". Его вы найдете в списке виджетов во вкладке "Дизайн" при добавлении новых элементов (гаджетов) на вашу страницу. 
добавить виджет избранное сообщение

Настройка виджета:


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

сохраните изменения.

/* Код виджета:

<b:widget id='FeaturedPost1' locked='false' title='Featured post' type='FeaturedPost'>
    <b:includable id='main'>
  <!-- Only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <b:include name='content'/>
  <b:include name='quickedit'/>
</b:includable>
    <b:includable id='content'>
  <div class='post-summary'>
    <b:if cond='data:showPostTitle and data:postTitle != &quot;&quot;'>
      <h3><a expr:href='data:postUrl'><data:postTitle/></a></h3>
    </b:if>
    <p>
      <data:postSummary/>
    </p>
    <b:if cond='data:showFirstImage and data:postFirstImage != &quot;&quot;'>
      <img class='image' expr:src='data:postFirstImage'/>
    </b:if>
  </div>

  <style type='text/css'>
    .image {
      width: 100%;
    }
  </style>
</b:includable>
  </b:widget>
Рекомендации:

Удалите из кода виджета (это можно сделать в разделе "Шаблон -> изменить html") все отрезки кода <b:include name='content'/>, чтобы избавиться от лишних внешних ссылок.

Изменить оформление виджета "Избранное сообщение"

Для этого пропишите код в редакторе перед тегом </b:skin>

#FeaturedPost1 {здесь блок объявлений стилей}
для изменения тела виджета, например фона, шрифта текста, цвета текста, ссылок и пр. Подробнее об изменении стилей других виджетов на Blogsot, а также статья основы css поможет вам узнать какие блоки объявлений можно прописать для изменения оформления блога.

Если вы хотите изменить оформление заголовка этого виджета, то вам понадобиться код:

#FeaturedPost1 h2{здесь блок объявлений стилей}
или

 #FeaturedPost1 h2{здесь блок объявлений стилей}
Пример:

#FeaturedPost1 {
    background: #A8D2EA;
    padding: 5px 15px 10px 5px;
    border: 2px solid #FCCF52;
    border-radius: 10px;
}


Читать далее ...

2015-12-12

Теги условных операторов Blogspot

условные операторы blogspot

Условные операторы помогут вам отображать или наоборот скрывать некоторые теги, виджеты и другие элементы на отдельных страницах блога. Так например, вы можете скрыть рекламу на странице "Контакты", изменить цвет фона на страницах сообщений блога, добавить описания ярлыков на страницах соответствующих меток (тегов, ярлыков) и т.д.

Общий вид кода условного оператора выглядит так:

<b:if cond='Ваше условия'>
<!-- ваш контент здесь (коды, виджеты и пр) -->
</b:if>


Как мы видим, условный оператор начинается с  <b:if cond=' и заканчивается тегом </b:if>.

Если вы хотите заключить в условие стили CSS, чтобы поменять элементы оформления на отдельных страницах, то шаблон условного оператора будет выглядеть так:

/*
<b:if cond='Ваше условие'>
<style>
<!-- Ваш  CSS код здесь! -->
</style>
</b:if>

Список условных операторов для Blogger

  1. Условие, верное для главной страницы

    <b:if cond='data:blog.url == data:blog.homepageUrl'>
     </b:if>
  2. Для отдельных записей и для статических страниц:

    <b:if cond='data:blog.url == data:post.url' ></b:if>

  3. Только для статических страниц

    <b:if cond='data:blog.pageType == "static_page"'>
     </b:if>

  4. Для первых сообщений

    <b:if cond='data:post.isFirstPost'>

  5. Только для страниц сообщений блога, постов

    <b:if cond='data:blog.pageType == "item"'>

  6. Для страниц, включающих главную страницу, страницы сообщений, архивов:

    <b:if cond='data:blog.pageType == "index"'>
    </b:if>

  7. Для ярлыков и страниц с результатами поиска по блогу:

    <b:if cond='data:blog.searchLabel'>
    </b:if>

  8. Для архивов:

    <b:if cond='data:blog.pageType == "archive"'>
    </b:if>

  9. Для страницы с определенным адресом:

    <b:if cond='data:blog.url == "your-desired-URL"'>
    </b:if>
  10. Для страницы ошибки, 404

    <b:if cond='data:blog.pageType == "error_page"'>
    </b:if>
Читать далее ...

2015-12-05

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


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

Как сделать резервную копию шаблона Blogger:

  1. Админпанель –> Шаблон –> Реервное копирование и восстановление:
    резервное копирование
  2. Загрузить шаблон полностью:
    резервное копирование и восстановление шаблона blogger

Шаблоны Blogspot на Рождество и Новый год

  1. Merry Christmas
    рождественский шаблон для blogspot
    Скачать здесь/*
  2. Modern Magic Christmas Template – простая тема к праздникам.
    рождественский шаблон для blogspot
    Скачать шаблон
  3. Happy holiday – яркая рождественская шапка и фон.
    новогодний шаблон blogspot
    Скачать здесь
  4. Snowman Christmas Blogger Template
    зимняя тема blogspot
    Скачать зимний шаблон со снеговиками здесь. Перед скачиванием в конце статьи нажмите на “I Have Read, Understand and Agree with the Terms and Conditions” – появится кнопка, нажав на которую вы скачаете шаблон.
  5. Christmas Blogger Template – 2 способа отображения ленты записей блога – сеткой и списком. Современные иконки социальных сетей для подписки на ваши аккаунты. Креативный слайдер. Выпадающее меню. Падающий снег. Рождественский фон.
    счастливого рождества - тема blogger
    Скачать
  6. Christmas Gifts – шаблон в темно-синих тонах со слайдером. Вертикальное меню в шапке блога.  
    шаблон blogger - рождество и новый год
    Скачать
  7. Christmas v1.1 – 2 столбца, сайдбар справа, горизонтальное меню под шапкой и в футере. В футере три столбца с виджетами. 
    рождество тема blogspot
    Скачать
  8. Christmas v2.2 – 2 столбца, 1 сайдбар справа
    новогодний дизайн для blogger
    Скачать
  9. Krismas – 2 столбца, 1 сайдбар справа. Цвета: белый и красный, рождественские украшения.
    рождество blogspot - оформление
    Скачать
Читать далее ...