Показаны сообщения с ярлыком Интересно. Показать все сообщения
Показаны сообщения с ярлыком Интересно. Показать все сообщения

8.22.2009

Как добавить чат на свой блог

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

Есть способ, при помощи которого видишь, владелец блога и читатели в сети, отключены или не делали логин.

Для этого вы можете добавить чат в свой блог.



Если вы хотите добавить его в свой блог, следуйте по инструкции ниже...


Первым делом потребуется регистрация на сайте

chatroll.

Перейдите по ссылке расположенной выше, а потом
на странице вверху, будет ссылка sign up(как на изображении ниже), перейдите по ней и создайте аккаунт. 






Затем перейдите по ссылке Home

Найдите кнопку Create a chatroll(как на изображении ниже)


Нажминте на неё, и создайте форму.



В форме добавьте имя будущего поля и url(Как показано на изображении выше)

Перейдите по ссылке Next>

Затем выберите, в форме опцию  публикации для всех(как на изображении ниже)


Тепеть перейдите по ссылке Embed(как на изображении ниже)

Вы увидите такое окно


Чуть выше выделеного фрагмента находится два текстовых поля,  левое отвечает за ширину, а правое за длину.

Выставляет в пикселях.

Этот виджет можно вставлять в колонку своего блога, в пост и мн. др.



Выставите точный размер, который вам подойдёт.

Код выделеный красном - это html код виджета, не закрывайте эту страницу.

Перейдите в настройки блога > Макет > Добавить гаджет

Выберите Html/javascript

Перейдите на страницу с кодом виджета(где настройки чата), скопируйте html код и вставьте его в виджет. Теперь сохраните. Виджет поместите на то место, которое планировали.

На этом всё! Чтобы опубликовать своё сообщение, введите его в текстовое поле и нажмите enter.

8.17.2009

Ajax облако тегов для Blogger

11 коммент
На сегодняшний момент это новейшая функция, которая улучшает работу блога в разы.

Ajax на много ускоряет работу блога. Это очень удобный виджет, работает в броузерах FireFox, Opera, InternetExplorer6 и др.

Хитрость быстроты работы такого облака тегов, это то, что перезагружается только колонка с сообщениями, а вы остаётесь на прежней странице.

Для того, чтобы облако работало нужно использовать XML шаблон(Не класический)

На моём блоге установлено ajax облако тегов, можете использовать в качестве примера.

Чтобы установить ajax облако тегов на своём блоге, выполните операции по инструкции, которые расположены ниже:


Шаг #1 | Шаг #2 | Шаг #3 | Шаг #4 | Шаг #5 | Шаг #6 |


Установка Ajax облака тегов(Инструкция)

Эту операцию (Шаг #1,#2) необходимо сделать если у вас ещё не установлено облако тегов.

Если установлено, то переходите к Шагу #3

Приступим к раблоте...

Шаг #1

Чтобы добавить ajax облако тегов в свой блог нужно выполнить не сколько действий:


Перейдите в Настройки блога > Макет >


Затем перейдите по ссылке: "Добавить гаджет"


Добавьте виджет "Ярлыки"

Теперь перейдите в вкладку Макет> Изменить HTML

Найдите в шаблоне тег

]]></b:skin>

Перед ним вставьте код расположеный ниже:

/* Label Cloud Styles



----------------------------------------------- */

#labelCloud {text-align:center;font-family:arial,sans-serif;}

#labelCloud .label-cloud li{display:inline;background-image:none
!important;padding:0 5px;margin:0;vertical-align:baseline
!important;border:0 !important;}

#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}

#labelCloud a img{border:0;display:inline;margin:0 0 0
3px;padding:0}

#labelCloud a{text-decoration:none}

#labelCloud a:hover{text-decoration:underline}

#labelCloud li a{}

#labelCloud .label-cloud {}

#labelCloud .label-count{padding-left:0.2em;font-size:9px;color:#000}

#labelCloud .label-cloud li:before{content:"" !important}

Шаг #2

Теперь найдите следующий код

]]></b:skin>

Сразу после него, но перед этим тегом

</head>

вставьте скрипт расположеный ниже:
<script type='text/javascript'>

// Label Cloud User Variables

var cloudMin = 1;

var maxFontSize = 20;

var maxColor = [0,0,255];

var minFontSize = 10;

var minColor = [0,0,0];

var lcShowCount = false;

</script>


Шаг #3

Сейчас вы должны будете выполнить ответственную операцию

Проверьте галочку "Расширить шаблоны виджета", она должна быть не нажата

Найдите код примерно похожий на этот:


<b:widget
id='Label1' locked='false' title='Labels' type='Label'/>



Замените его на следующий:


<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>

<b:includable id='main'>

<b:if cond='data:title'>

<h2><data:title/></h2>

</b:if>

<div class='widget-content'>

<div id='labelCloud'/>

<script type='text/javascript'>

// Don't change anything past this point -----------------
// Cloud function s() ripped from del.icio.us

function s(a,b,i,x){

if(a&gt;b){

var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)

}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}

var c=[];

var labelCount = new Array();

var ts = new Object;

<b:loop values='data:labels' var='label'>
var theName = &quot;<data:label.name/>&quot;;

ts[theName] = <data:label.count/>;

</b:loop>
for (t in ts){

if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])

}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');

ul = document.createElement('ul');

ul.className = 'label-cloud';

for(var t in ts){
if(ts[t] &lt; cloudMin){

continue;
}
for (var i=0;3 &gt; i;i++) {

c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)

}

var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);

li = document.createElement('li');

li.style.fontSize = fs+'px';

li.style.lineHeight = '1';

a = document.createElement('a');

a.title = ts[t]+' Posts in '+t;

a.className = 'phyLabel';

a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';

a.href = '/search/label/'+encodeURIComponent(t);

if (lcShowCount){

span = document.createElement('span');

span.innerHTML = '('+ts[t]+') ';

span.className = 'label-count';

a.appendChild(document.createTextNode(t));

li.appendChild(a);

li.appendChild(span);

}

else {a.appendChild(document.createTextNode(t));

li.appendChild(a);

}
ul.appendChild(li);

abnk = document.createTextNode(' ');

ul.appendChild(abnk);
}
lc2.appendChild(ul);

</script>

<noscript>
<ul>

<b:loop values='data:labels'
var='label'>

<li>

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


<data:label.name/>

<b:else/>

<a expr:href='data:label.url'><data:label.name/></a>

</b:if>

(<data:label.count/>)

</li>

</b:loop>

</ul>

</noscript>

<b:include name='quickedit'/>

</div>

</b:includable>

</b:widget>


Шаг #4

Теперь найдите этот тег
]]></b:skin>


Сразу после него, но перед этим тегом

</head>

вставьте скрипты расположеные ниже:


<script src='http://myslvscript.googlecode.com/files/jquery-latest_pack.js'
type='text/javascript'/>


<script src='http://myslvscript.googlecode.com/files/jq_plugins.js'
type='text/javascript'/>



<script src='http://myslvscript.googlecode.com/files/slvbase1.js'
type='text/javascript'/>

<script type='text/javascript'>


function labelLabel(label){

$(&#39;#top&#39;).ScrollTo(100);

$(&#39;#main&#39;).html(&#39;&lt;div id=&quot;phyLoad&quot; style=&quot;margin-top:5px&quot;&gt;&lt;img src=&quot;http://myslvscript.googlecode.com/files/spinner_white.gif&quot; style=&quot;vertical-align:middle; padding-right:5px;&quot;/&gt;Загрузка...&lt;/div&gt;&#39;).json( &#39;http://ВашUrlБлога.blogspot.com/feeds/posts/summary/-/&#39;+label+&#39;?max-results=50&amp;orderby=published&amp;alt=json-in-script&amp;callback={callback}&#39;, pDisplayLabels );

}

</script>


<script src='http://myslvscript.googlecode.com/files/slvbase2.js'
type='text/javascript'/>

Не забудьте заменить Слово в скрипте ВашUrlБлога на url-адрес вашего блога.


Шаг #5

Эта операция понадобится, если вы свой шаблон сильно изменяли или он имеет не стандартный вид.

Найдите в шаблоне код похожий на этот

<b:widget id='Blog1' locked='true' title='Сообщения блога' type='Blog'/>

Перед ним располжен код похоий на этот

<b:section class='main' id='center-wap' showaddelement='no'>

или этот

<b:section id='main' showaddelement='no'>

Замените его на код расположеный ниже:

<b:section class='main' id='main' showaddelement='no'>

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

Найдите этот код в шаблоне

<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'/>


Его нужно обязательно удалить.

Эта операция не повлияет на работу архива блога в виде календаря.


Шаг #6

Дальше уже идёт настройка дизайна.

Перейдите по ссылке которая расположена ниже...


Галерея дизайнов сообщений для ajax облака тегов

Шаг #1 | Шаг #2 | Шаг #3 | Шаг #4 | Шаг #5 | Шаг #6 |

8.05.2009

А можно ли скрывать навбар?

4 коммент


Есть много статей, в которых пишется, как скрыть навбар при помощи стилей.

А можно ли это делать? Как сервис BLOGGER отреагирует на это?

Меня однажды замучил этот вопрос, полез в интернет и нашёл интересную статью(Сервис BLOGGER) Перейти

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

И вдруг я увидел в самом конце отрывок текста:

"
  • Если Вы публикуете блог не через FTP, отключить Navbar нельзя.
  • Мы приложили все усилия к тому, чтобы панель Navbar удачно вписывалась в дизайн индивидуальных шаблонов. Некоторые проблемы с ее отображением все же могут возникнуть. Если это произойдет, можно попробовать предпринять некоторые шаги, чтобы их устранить.

"


Когда мне захотелось посмотреть XML шаблоны в интернете, я увидел, что у всех до одного скрыт навбар. Blogger разрешает публиковать блог через FTP сервер только если вы используете классический шаблон в HTML виде.

Это даёт повод задуматься...

Если вы хотите отобразить навбар на блоге(Если он скрыт) нужно сделать одну операцию:

Перейдите в настройки блога> Макет > Изменить HTML


Найдите код



#navbar-iframe {
height:0;
visibility:hidden;
display:none;
}


Теперь просто его удалите.

Это всё!

Последние комментарии