PROGMANIST: настройка Blogger

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

25 сент. 2010 г.

Настраиваем свой блог на Blogger.com. Локализация

Всем привет! В этом посте я расскажу, как выполнить локализацию вашего блога на Blogger.com с помощью Google Translate.

Локализация:

Перейдите на вкладку "Дизайн"->"Элементы страницы", и выберете добавить гаджет. В списке гаджетов выберете "HTML/JavaScript".

В данном гаджете, в поле "Содержание" вставьте следующий код:

<style> 
.google_translate img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
.google_translate:hover img {
filter:alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
.google_translatextra:hover img {
filter:alpha(opacity=0.30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
</style> 
<div> 
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=ru%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-zMDySZ5XeGIgo73_EKjKEaFT1f66s1ICZvWo1lO2QRpZj9Rc13ehIrPgp3pFpegRBF7dFtKI_B8av_TvmgXgCaRskpCZOrXMCS_Jcm9wSSP3qXsGRjabuIDOd_HG4s4r3EgfkRMSDIo/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24" /></a>
 
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=ru%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnYV1-x0QdM84dTDlqMMO0vxFMmsnuuoqenyjfmKk9qZa-lnHl8xZEHdidPB5XqvcEm7hPeAUocarJD6k-kKy8skKXxSiSVTXGQdqUH5SCxuqr42xZu62zwD3GX5a0ri3Du03xClyvrTs/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24" /></a> 
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=ru%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR94afT2pyeg-nmMgp-s_lv7gXHr4XF2qJ7QkgB2Pmu9QlzPOoM0MJ9ry5lJszEsjV4bCJ5yuaKd4h4VqLbkK9tFFSn0lY0C9hyphenhyphenXlkSV-joHSNYx_LvkgoUSfBp8_NQv6uHSdS6wMzCsMx/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24" /></a> 
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=ru%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiruv0kzpMkGHQE9AaBXW1BTH30ByeN4njJ2l40XIEtpsG8oZUZgz1l4GQaWIWzdTBT9W0RE0M6FjbIUt-1RfFpfZKXZTmyMKP9JLWBd7lsKOSnOTpLs6rk80qyalamAb4R18Lwg3PddMNE/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24" /></a> 
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=ru%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilvtYX8N5y1wFoSQGVeAlIf4C34W-d9qCtwMrceIyfFWgzTnJqYkbbN8qz77iJISQqzHk2MAZDm7O1hQ2m3XnFkTlmyrPuzxJ9HlOpGIVZ6pqDj6jTSi3j9FFUtmWKQwPvjkMZG3semm8/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24" /></a> 
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=ru%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh72rt6mNeVM2HLZ76Ei5BQr17AHdwSqFv0LgBh-PnWuEEuOMQtcZ4fA45RTSEYQLQMFPu4fgCotKyE2XekhFKkdA5W2kOIQCyi7MoNI27WbLMA9R_oO8JsojWS2845KFJ2FasQXlBWupo/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24" /></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=ru%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzUPGjIzKlWDmOR1MysWOnjMmKi_Zaj7um2rfunXp6isZkCOhVl3hA2GaM7R7DIzhiGOL_j2TYJXA_vqf3xJJtV6Zq2GI15s7rGLyhSofWTmlbT1awOA4R-vDZsOrx_BOYffqMEZyKDno/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24" /></a> 
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=ru%7Cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK4CR5HZdL9OZGnIFpWWKs9c2OD_WjFusGlGeWZTa_iXo82VkL-pR1E7NLL9R_2Ble94RhQtFIkhaSDxCwLLzmPpis6YxEikIzU1HQDODJVi6-NV7zoobENtG-5rK15qhm0I9RH5E5pvY/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24" /></a> 
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=ru%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibDCZSL_DlW-UEnUn2gAOXzmN3WJt8gOUVr0qrt2GqGS486uTc8H4VY5eByh38B-b-jpBfKXLNQ9nKVyroplwB7FYfZ976sdzmf9H3nxVZ0-JnHQFxiiRUKX9mVhOb-w-ZciLHXiBTi7zG/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24" /></a> 
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7N_5aCJNdVrd3d8bzjDyYqtEDoNDqRrDxEKGlbcyh78VHdsHkNr96H9dOtj0cfGvuaUkfbHtol5QI6iAVfoRQrTqf2LIPqlleA5SV_1CdO5oG2U770tKg_gS3t0C1NFQsQp4RlhfWOws/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24" /></a> 
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=ru%7Car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhwXwmCebqk5UlGR05uOWeaM_KGv6KYzpXWXSadfZfu3AtKlIVl1r_NzyCfQqF5f5DTdVBqb8Ix42WQ6SACHqSWr0r84Kj74LSoInFnNsB2sU0y_AyA93K-3GvGzQLlGz2b6Gknc0957g/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24" /></a> 
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=ru%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii8mILXMCMlQotU2ZmOR_jOrJM7ROU_mxPgdZnbtHFaHg4nE86C_lVR973o8N9x8nTIqE7LODNyfGZofrXF_Z-t0Ywpqi1nL6p8H6kOnCWa-5TGIqHStWITBs2R9iaLiQkfUBzprRRIL4/?imgmax=800"
style="cursor: pointer;margin-right:13px" width="24" /></a></div>

Нажмите "сохранить" в гаджете и на вкладке "Элементы страницы".

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

Источник.

Настраиваем свой блог на Blogger.com. Подсветка кода.

Всем привет! В этом посте я расскажу, как сделать подсветку синтаксиса вставляемого кода в ваш блог на Blogger.
5JGRS3JHEN2V

Подсветка синтаксиса в Blogger:

В этом методе будет использоваться opne-source проект Alexa Gorbatcheva - SyntaxHighlighter.

Войдите в свой аккаунт на Blogger.com, Перейдите "Дизайн" -> "Изменить HTML"
Выберете "загрузить весь шаблон", чтобы сохранить текущую версию шаблона. Это нужно для того чтобы если что-то пойдет не так, вы всегда могли восстановить старую версию шаблона.
Нажмите Ctrl-F, чтобы открыть поисковик, и найдите тег </head>. Перед этим тегом вставьте следующий код:

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<!-- добавляйте языки сюда -->
<script type='text/javascript'>
  SyntaxHighlighter.config.bloggerMode = true;
  SyntaxHighlighter.all();
</script>

После комментариев "Добавляйте языки сюда", вставьте языки которые вы собираетесь использовать. Допустим вы собираетесь использовать языки: JavaScript, Java, SQL, XML, C++, C#, тогда вам нужно вставить следующий код:

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>

Ознакомьтесь также с

полным списком языков

Сохраните изменения, нажмите "сохранить шаблон".
Теперь вы можете использовать подсветку синтаксиса в ваших постах. Для этого вставляйте код между тегами <pre class="brush:язык"> </pre>. Приведу пример с языком SQL. Допусти нам надо вставить следующий код: SELECT * FROM users WHERE userID = 1:

SELECT *

FROM users

WHERE userId = 1;

</pre>

SELECT *
FROM users
WHERE userId = 1;

И напоследок если так получается, что ваш код вставляется в одну строчку, или вообще редактор выдает ошибки на вставляемый код, воспользуйтесь HTML Encoder.

Настраиваем свой блог на Blogger.com. Пишем статьи под катом.

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

Добавляем возможность писать статьи под катом:

Войдите в свой аккаунт на Blogger.com, Перейдите на вкладку "Дизайн" -> "Изменить HTML".
Выберете "загрузить весь шаблон", чтобы сохранить текущую версию шаблона. Это нужно для того чтобы если что-то пойдет не так, вы всегда могли восстановить старую версию шаблона.
Поставьте галочку напротив "Расширить шаблоны виджета". Найдите в коде закрывающийся тег </head> и прямо перед ним вставьте следующий код:

<b:if cond='data:blog.pageType != "item"'>
<script type="text/javascript">

var fade = false;
function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Appear(spans[i]);
} else spans[i].style.display = 'inline';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'none';
if (spans[i].id == "hidelink")
spans[i].style.display = 'inline';
}
}


function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Fade(spans[i]);
} else spans[i].style.display = 'none';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'inline';
if (spans[i].id == "hidelink")
spans[i].style.display = 'none';
}
post.scrollIntoView(true);
}

function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink") &amp;&amp; (found == 0))
spans[i].style.display = 'none';
}
}

</script>
</b:if>

Теперь найдите тег <data:post.body/>, чуть выше него будет тег <div class='post-body entry-content'/>, измените его следующим образом:

<div class='post-body entry-content' expr:id='&quot;post-&quot; + data:post.id'>

<b:if cond='data:blog.pageType == "item"'>
        <style>#fullpost{display:inline;}</style>
        <p><data:post.body/></p>
     <b:else/>
        <style>#fullpost{display:none;}</style>

        <p><data:post.body/></p> <!-- это уже есть -->

       <span id='showlink'>
        <a expr:href='data:post.url'>Читать дальше......</a>
       </span>
       <script type='text/javascript'>
         checkFull("post-" + "<data:post.id/>");
       </script>
     </b:if>

Сохраните изменения. Теперь перейдите на вкладку "Настройки"->"Форматирование" и в поле "Шаблон сообщения" вставьте код:

Превью поста

<span id="fullpost">

То, что скрыто под катом

</span>

Теперь при создании нового сообщения у вас будет появляться данный шаблон. То что вы будете писать до тега <span> будет отображать в превью поста, а содержимое заключенное в тег <span id="fullpost"> </span> будет скрыто под катом.
На этом всё, удачного вам написания статей.

Источник.

24 сент. 2010 г.

Настраиваем свой блог на Blogger.com. Создаем облако тегов.

Всем привет!!! В этой статье я расскажу как добавить облако тегов в ваш блог на Blogger.com.

Добавляем облако тегов:

Войдите в свой аккаунт на Blogger.com, Перейдите на вкладку "Дизайн" -> "Элементы страницы". Нажмите "Добавить гаджет" и в списке гаджетов выберите "Ярлыки". Добавьте данный гаджет в свой блог без всяких изменений.
Перейдите на вкладку "Изменить HTML". Выберете "загрузить весь шаблон", чтобы сохранить текущую версию шаблона. Это нужно для того чтобы если что-то пойдет не так, вы всегда могли восстановить старую версию шаблона.
Найдите в шаблоне следующий тег "]]>" и прямо перед ним вставьте следующий код:

#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}

Следующий код настраивает параметры облака тегов, его необходимо вставить после тегов "]]>" "</b:skin>":

<script type='text/javascript'>
// Пользовательские настройки облака тегов
var cloudMin = 1;
var maxFontSize = 21;
var maxColor = [79,148,205];
var minFontSize = 11;
var minColor = [180,205,205];
var lcShowCount = false;
</script>

Теперь нужно изменить гаджет "Ярлыки". Для этого найдите в коде объявление данного гаджета, это строка примерно такого вида:

<b:widget id='Label2' locked='false' title='Ярлыки' 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.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>

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

Описание параметров облака тегов:

cloudMin = 1; - количество повторений ярлыка в статьях, требуемых чтобы включить данный ярлык в облако тегов. В данном случае в облако включаются все ярлыки которые использовались хотя бы в одной статье.
maxFontSize и maxColor - задают цвет и размер соответственно, для ярлыков которые повторяются чаще всего.
minFontSize и minColor - задают цвет и размер соответственно, для ярлыков которые повторяются реже всего. Все остальные ярлыки принимают промежуточное значение между этими цветами и размерами, в зависимости от количества их повторений.
lcShowCount = false; - если значение = "false" - то количество повторений каждого ярлыка не отображается в облаке тегов, если = "true", то отображается.

На этом всё, и до встречи в следующих постах:)

Источник

25 сент. 2010 г.

Настраиваем свой блог на Blogger.com. Локализация

Настраиваем свой блог на Blogger.com. Подсветка кода.

Настраиваем свой блог на Blogger.com. Пишем статьи под катом.

24 сент. 2010 г.

Настраиваем свой блог на Blogger.com. Создаем облако тегов.

25 сент. 2010 г.

24 сент. 2010 г.