Posts Tagged ‘ Blogger ’

从 Blogger 转移到 WordPress 的技巧

本站已经由 Google 的 Blogger 转移到 WordPress，这是转移到 WordPress 之后的第一篇文章。

用过 WordPress 之后才知道 WordPress 的好，WordPress 相对于 Blogger 的优点如下:

  1. 像标签云、搜寻、继续阅读、最新文章、最新留言、分页…等等基本功能，已经内建在 WordPress 里了，不需要辛辛苦苦去改范本、研究程式码，而 Blogger 往往因为手动加了这些功能，而变得极为拥肿。
  2. 可以上传图片、影片、音乐…等档案，以往这些在 Blogger 里，都需要再寻找额外的网页空间存放，并且 WordPress 上传的图片会自制缩图。
  3. 对于读取权限的控管，WordPress 可以做到完全公开、公开给特用用户、单篇密码保护、禁止搜寻引挚、完全隐藏。
  4. WordPress 已经内建几个知名部落格系统的转移工具，当然包括 Blogger。
  5. WordPress 同时有免费线上部落格(BSP)及部落格架站程式。
  6. WordPress 的布景主题(Themes)更多、更漂亮。
  7. 琳瑯满目的外挂程式，很难找不到你想要的功能。

Read more

下载本站的 Template

访客留言要索取本站的 Template，不过他没有留下 E-Mail，所以我就直接打包释出给大家下载。

这是 Blogger 的 Template，而不是 WordPress 的 Template。

这个 Template 的原始版本应该是来自 Designfruit 及 Blogcrowds，我把这个 Template 改成 Blogger 可用，并且是 “不限宽度” 的版本，也加入了一些我自己写的 Script，如果觉得改得还可以的，请直接取用。

安装至 blogger 时须选取 “展开小装置范本”，将 template.txt 的内容全部贴上即可，里面很多连结至 http://citypig.googlepages.com/ 的项目，请自己上传、更改至自己的网络空间，本站下次如有改版，可能就会全部删除了。

另外，这个 Template 在 IE 下是有 Bug 的，如果萤幕不够宽，内容的部份会跑到侧边栏的下面，就等待 CSS 能力比较强的人来解决了。

解决当 Blogger 的 "隐藏全文/继续阅读" 功能因为点选较新或较旧的文章而失效的状况

在 Blogger 加入 “隐藏全文/继续阅读” 的功能之后，会因为点选 Blogger 下方的 "较新" 或 "较旧" 的文章连结而导致功能失效!!

会失效原因是因为你在点 "较新" 或 "较旧" 的连结时，所要切换的内容会以 AJAX 的方式加载，而大家所写的 “隐藏全文/继续阅读” 都是以 JavaScript 所写的，当 AJAX 直接切换内容时，并没有触发到用 JavaScript 所写的程式，所以，我们要做的就是让 AJAX 的这个功能失效。

修改 Blogger 范本，点选 “展开小装置范本”，找到下列原始码，这些原始码就是新旧文章的连结，将 “红色” 的字串去掉，最后再存盘即可:

<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

将 Blogger 中的标签改成标签云(Tag Cloud)

当 Blogger 中的文章一多，标签也跟着变多，而 Blogger 的标签元件就会变得落落长，不好看也不好搜寻。

这时候如果改成 “标签云” 就会是一个不错的作法。在标签云中运用字体大小及颜色的变化，就可以很快的找你要的标签。

修改步骤

  1. 编辑 Blogger 样板，并 “展开小装置范本”。
  2. 在 <Style> 区块内加入: 
    #Label1 ul { font-family:Arial; padding:0px; text-align:justify; }
#Label1 li { display:inline; }
  3. 搜寻 </head>，在上一行加入: 
    <script>
function parseTag(){
  var tagA = document.getElementsByTagName('a');
  for(var i=0; i<tagA.length; i++){
    if(tagA[i].id == 'tag'){
      var tag = tagA[i];
      var width = tagA[i].title;
      tag.style.fontSize = 14 + parseInt(width/5);
      tag.style.color = 'rgb(0,0,' + width*5 + ')';
    }
  }
}
</script>

    其中的第 8 行可用来调整字体大小，第 9 行用来调整颜色变化。

  4. 继续搜寻 <body>，在标签内的 onload 事件加入: 
    parseTag();
  5. 继续搜寻: 
    <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>

    取代成:

    <li>
  <b:if cond='data:blog.url == data:label.url'>
    <a id="tag" expr:title='data:label.count' expr:href='data:label.url'><u><data:label.name/></u></a>
  <b:else/>
    <a id="tag" expr:title='data:label.count' expr:href='data:label.url'><data:label.name/></a>
  </b:if>
</li>
  6. 存盘完成。

blogger 资料整理

RSS 相关

  • blogger 的 ATOM/RSS 默认是依更新时间排序，网址为:
    • http://vixual.blogspot.com/feeds/posts/default
    • http://vixual.blogspot.com/feeds/posts/default?alt=rss

    如果要让它依发表时间排序，网址须改为:

    • http://vixual.blogspot.com/feeds/posts/default?orderby=published
    • http://vixual.blogspot.com/feeds/posts/default?alt=rss&orderby=published
  • Label(标签)的 RSS 网址:
    • http://vixual.blogspot.com/feeds/posts/default/-/label

      • 将上方的”label“换成 Blogger 上的标签名称即可。

  • blogger 的留言的 ATOM/RSS 网址为:
    • http://vixual.blogspot.com/feeds/comments/default
    • http://vixual.blogspot.com/feeds/comments/default?alt=rss

如何让 blogger 不自动加载 ajax

    在 <body> 的下一行加上:

    <script type='text/freezescript'>
_WidgetManager._Init=function(){};
_WidgetManager._SetPageActionUrl=function(){};
_WidgetManager._SetDataContext=function(){};
WidgetManager._SetSystemMarkup=function(){};
WidgetManager._RegisterWidget=function(){};
</script>

如何让版面依内文或列示加载不同项目

  • 判断是否为内文: 
    <b:if cond='data:blog.pageType == "item"'>
加载的项目
</b:if>
  • 判断是否为文章列示: 
    <b:if cond='data:blog.pageType != "item"'>
加载的项目
</b:if>

Blogger 的样版下载网站

Blogger 可用的样版

  1. Mashable
  2. Final Sense
  3. Blogcrowds
  4. Blogger Templates
  5. Free Templates

在 Blogger 中使用 dp.SyntaxHighlighter 显示程式码

db.SyntaxHighlighter 是一支不错的程式码高亮度显示程式，特点为:

  1. 显示行号
  2. 支援12种程式语言
  3. 模组化加载需要的程式语言
  4. 支援 “<pre>” 及 “<textarea>” 区块
  5. 纯文字检视
  6. 复制到剪贴簿
  7. 直接打印程式码

缺点就是加载速度较慢。

安装步骤

  1. 修改 blogger 样板，搜寻 “</body>”，在 “上方” 加入(你可以选择你要的语言加载即可): 
    <script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shCore.js'></script>
<script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushPhp.js'></script>
<script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushJScript.js'></script>
<script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushSql.js'></script>
<script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushXml.js'></script>
<script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushDelphi.js'></script>
<script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushPython.js'></script>
<script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushRuby.js'></script>
<script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushCss.js'></script>
<script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushCpp.js'></script>
<script class='javascript'>
dp.SyntaxHighlighter.ClipboardSwf = 'http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>

    (因为 “偷吃步” 的关系，程式直接连到 dp.SyntaxHighlighter 的 SVN 上，你可以视情况下载回来放到自己的服务器)

  2. dp.SyntaxHighlighter 原本已经有一个 CSS 档了，但如果将这个 CSS 档以 “Link” 的方式加载，却无法正常显示。所以，请自行增加下列 CSS 到 blogger 样板的 CSS 区段: 
    /*dp.highlighter*/
.dp-highlighter {
  font-family: "Consolas", "Courier New", Courier, mono;
  font-size: 12px;
  background-color: #E7E5DC;
  width: 99%;
  overflow: auto;
  margin: 18px 0px 18px 0px;
  padding-top: 1px; /* adds a little border on top when controls are hidden */
  border:1px inset;
  max-height:200px;
}
.dp-highlighter .bar {
  padding-left: 45px;
}
.dp-highlighter.collapsed .bar,
.dp-highlighter.nogutter .bar {
  padding-left: 0px;
}
.dp-highlighter ol {
  list-style: decimal; /* for ie */
  list-style: decimal-leading-zero; /* better look for others */
  background-color: #fff;
  margin: 0px 0px 1px 45px; /* 1px bottom margin seems to fix occasional Firefox scrolling */
  padding: 0px;
  color: #5C5C5C;
}
.dp-highlighter.nogutter ol {
  list-style-type: none !important;
  margin-left: 0px;
}
.dp-highlighter ol li,
.dp-highlighter .columns div {
  border-left: 3px solid #6CE26C;
  background-color: #f8f8f8;
  padding-left: 10px;
  line-height: 14px;
}
.dp-highlighter.nogutter ol li,
.dp-highlighter.nogutter .columns div {
  border: 0;
}
.dp-highlighter .columns {
  color: gray;
  overflow: hidden;
  width: 100%;
}
.dp-highlighter .columns div {
  padding-bottom: 5px;
}
.dp-highlighter ol li.alt {
  background-color: #fff;
}
.dp-highlighter ol li span {
  color: Black;
}
/* Adjust some properties when collapsed */
.dp-highlighter.collapsed ol {
  margin: 0px;
}
.dp-highlighter.collapsed ol li {
  display: none;
}
/* Additional modifications when in print-view */
.dp-highlighter.printing {
  border: none;
}
.dp-highlighter.printing .tools {
  display: none !important;
}
.dp-highlighter.printing li {
  display: list-item !important;
}
/* Styles for the tools */
.dp-highlighter .tools {
  padding: 3px 8px 3px 10px;
  font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif;
  color: silver;
  background-color: #f8f8f8;
  text-align1: right;
  padding-bottom: 10px;
  border-left: 3px solid #6CE26C;
}
.dp-highlighter.nogutter .tools {
  border-left: 0;
}
.dp-highlighter.collapsed .tools {
  border-bottom: 0;
}
.dp-highlighter .tools a {
  font-size: 9px;
  color: #a0a0a0;
  text-decoration: none;
  margin-right: 10px;
}
.dp-highlighter .tools a:hover {
  color: red;
  text-decoration: underline;
}
/* About dialog styles */
.dp-about { background-color: #fff; margin: 0px; padding: 0px; }
.dp-about table { width: 100%; height: 100%; font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; }
.dp-about td { padding: 10px; vertical-align: top; }
.dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; }
.dp-about .title { color: red; font-weight: bold; }
.dp-about .para { margin: 0 0 4px 0; }
.dp-about .footer { background-color: #ECEADB; border-top: 1px solid #fff; text-align: right; }
.dp-about .close { font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; background-color: #ECEADB; width: 60px; height: 22px; }
/* Language specific styles */
.dp-highlighter .comment, .dp-highlighter .comments { color: #008200; }
.dp-highlighter .string { color: blue; }
.dp-highlighter .keyword { color: #069; font-weight: bold; }
.dp-highlighter .preprocessor { color: gray; }
  3. 储存即可

使用方法

  • 方法一 - 使用 “<textarea>” 区块，需将 “&” 转换为 “&amp;”: 
    <textarea name="code" class="程式语言">
程式码
</textarea>
  • 方法二 - 使用 “<pre>” 区块，需将 “&” 转换为 “&amp;”、”<” 转换为 “&lt;”、”>” 转换为 “&gt;”: 
    <pre name="code" class="程式语言">
程式码
</pre>

参考网页

在 Blogger 中使用 google-code-prettify 显示程式码

google-code-prettify 是一支不错的程式码高亮度显示程式，特点为:

  1. 支援 15 种程式语言(但某些语言似乎还没完成)
  2. 程式仅两个档案
  3. 加载速度较快

缺点为:

  1. 跟 IE 的相容性比较不佳，在 IE 内复制程式码时无换行符号
  2. 无行号显示
  3. 仅支援 "<pre>" 区块
  4. 程式码过长时不会自动显示卷轴 (可透过修改 CSS 解决)

安装步骤

  1. 修改 blogger 样板，搜寻 "</head>"，在 "上方" 加入 
    <link href='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css' type='text/css' rel='stylesheet' />
<script type='text/javascript' src='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js'></script>

    (因为 "偷吃步" 的关系，程式直接连到 google-code-prettify 的 SVN 上，你可以视情况下载回来放到自己的服务器)

  2. 继续搜寻 "<body>"，在标签内的 onload 事件加入: 
    prettyPrint();
  3. 储存即可。

使用方法

      使用 "<pre>" 区块，需将 "&" 转换为 "&amp;"、"<" 转换为 "&lt;"、">" 转换为 "&gt;":
<pre class="prettyprint">
程式码
</pre>

参考网页

在 Blogger 的文章中加入 "隐藏内文/继续阅读" 功能

Blogger 中的文章因为没有 “隐藏内文” 及 “继续阅读” 的功能，所以就会把整个网页拉得很长，较不利于阅读。并且，如果文章内有很多图片的话，那加载的时间就会变得很长。

以下的内容是我参考其它 Blogger 的做法所做的改良，主要的不同，就是我觉得其它 Blogger 在加载时会先显示全文，再做隐藏，视觉上的效果比较不好，我把它改成一开始就会隐藏内文了，也可以避免自动加载内文的图片。

安装步骤

  1. 编辑样版，搜寻 “</head>”，在其上方加入: 
    <b:if cond='data:blog.pageType != "item"'>
<style>
#fullpost { clear:both; display:none; }
#read-more { float:left; color:#FFFFFF; background-color:#00FF00; border:1px outset; padding:2px; text-decoration:none; font-weight:bold; font-family:Arial; }
</style>
</b:if>
  2. 继续搜寻 “<body>”，在标签内的 onload 事件加入: 
    if(window.readMore){readMore();}

    继续在下一行加入:

    <b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
var tagSpan = document.getElementsByTagName('span');
var more1 = new Array();
var more2 = new Array();
function readMore(){
  var x = 0;
  for(var i=0; i&lt;tagSpan.length; i++){
    if(tagSpan[i].id == 'fullpost'){
      more1[x] = tagSpan[i];
      var readMore = document.createElement('a');
      readMore.setAttribute('id','read-more');
      readMore.setAttribute('href','javascript:toggleMore('+x+')');
      readMore.setAttribute('onclick','toggleMore('+x+');return false;');
      readMore.appendChild(document.createTextNode('Read more &gt;&gt;'));
      more2[x] = more1[x].parentNode.insertBefore(readMore,more1[x]);
      x++;
    }
  }
}
function toggleMore(theElement,theStatus){
  if(theStatus == true || more1[theElement].style.display=='' || more1[theElement].style.display=='none'){
    more1[theElement].style.display = 'block';
    more2[theElement].innerHTML = '&lt;&lt; Less';
//  more2[theElement].parentNode.removeChild(more2[theElement]);
  }else{
    more1[theElement].style.display = 'none';
    more2[theElement].innerHTML = 'Read more &gt;&gt;';
  }
}
function expandAll(theStatus){
  for(var i=0; i&lt;more1.length; i++){
    toggleMore(i,theStatus);
  }
}
</script>
</b:if>

    请注意一下程式码的第 25 行，如果将前面的注解拿掉，则访客展开内文之后，”Read more” 的连结就会自动消失了。

  3. 储存即可

使用方式

    你必需在 Blogger 编辑文章时使用 “修改 HTML” 模式，在要显示/隐藏内文的部份用下列标签包起来:

    前文
<span id="fullpost">
欲隐藏的内文
</span>

全部展开/隐藏全文

    你如果想要增加一个的控件，可以用来展开或隐藏所有文章的内文，则请自行新增一个 “HTML/Javascript” 网页元素，内容:

    <input id="expand-all" onclick="if (window.expandAll){expandAll(this.checked)}" type="checkbox">
<label for="expand-all">Expand All</label>

解决 “隐藏内文/继续阅读” 失效的问题

RETURN HOME

INFORMATION

我们解决了什么问题？我们创造了什么价值？

return top