WebApp | Vixual

解决当 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>

WebApp

Blogger

17 Sep 2007
Write comment

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

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

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

修改步骤

编辑 Blogger 样板，并 “展开小装置范本”。

在 <Style> 区块内加入:

#Label1 ul { font-family:Arial; padding:0px; text-align:justify; }
#Label1 li { display:inline; }

搜寻 </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 行用来调整颜色变化。

继续搜寻 <body>，在标签内的 onload 事件加入:
```
parseTag();
```

继续搜寻:

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

存盘完成。

WebApp

Blogger

14 Sep 2007
Write comment

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
blogger 的留言的 ATOM/RSS 网址为:
- http://vixual.blogspot.com/feeds/comments/default
- http://vixual.blogspot.com/feeds/comments/default?alt=rss

如何让 blogger 不自动加载 ajax

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

WebApp

Blogger

21 Aug 2007
Write comment

[JavaScript]让网页的“外部超连结”自动开启在新视窗

在编辑网页时，如果要让某个超连结 (Link) 开启在新的浏览器视窗，我们可以在超连结加上“href="_blank"”属性，但如果超连结很多，要一个一个加上去毕竟麻烦!!

以下的程式码可以帮你把网页内所有针对“外部”的超连结自动设为在新视窗开启。

一般网页

将下列程式码加到网页的 <head> 区段:

<script type="text/javascript">
function parseLink(){
  var tagA = document.getElementsByTagName( "a" );
  re = new RegExp( "^(http://" + document.domain + ")|(javascript:)", "i" );
  for( var i=0; i < tagA.length; i++ ){
    if( !tagA[i].href.match( re ) ){ tagA[i].target = "_blank"; }
  }
}
</script>

在 <body> 标签内的 onload 事件加入:
```
parseLink();
```
Ex:
```
<body onload="parseLink();">
```

WordPress 外挂程式

如果你的网站是用 WordPress 架设，可直接在控制台搜寻并安装“Open external links in a new window”这个外挂程式 (版本: 1.3.1 作者: Kristian Risager Larsen)，这样就不用添加任何程式码了。

另外需注意，如果本外挂程式与其它像 LightBox、FancyBox...之类的图片灯箱特效的程式一起使用，有可能会造成同时显示灯箱特效，又同时将图片开启于新视窗!!

16 Aug 2007
11 comments

Blogger 的样版下载网站

Blogger 可用的样版

02 Aug 2007
1 comment

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

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

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

缺点就是加载速度较慢。

安装步骤

修改 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 上，你可以视情况下载回来放到自己的服务器)

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

储存即可

使用方法

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

参考网页

使用 google-code-prettify 显示程式码

29 Jul 2007
Write comment

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

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

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

缺点为:

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

安装步骤

修改 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 上，你可以视情况下载回来放到自己的服务器)

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

使用方法

使用 "<pre>" 区块，需将 "&" 转换为 "&"、"<" 转换为 "<"、">" 转换为 ">":

<pre class="prettyprint">
程式码
</pre>

参考网页

使用 dp.SyntaxHighlighter 显示程式码

28 Jul 2007
2 comments

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

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

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

安装步骤

编辑样版，搜寻 “</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>

继续搜寻 “<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” 的连结就会自动消失了。

储存即可

使用方式

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

全部展开/隐藏全文

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

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

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

WebApp

Blogger

28 Jul 2007
5 comments

各大网站客服电话 (持续收集中...)

PCHome

线上购物: (02)2704-0999
城邦集团: (02)2500-0888

Yahoo!奇摩

客服电话: (02)6639-5691
总　　机: (02)2365-9898
传　　真: (02)2365-7302

Google 常用服务及网址

搜寻引挚

搜寻引挚首页进阶搜寻网址登录

图片搜寻最先进的网络图片搜寻工具

网上论坛建立邮寄清单和讨论群组

新闻建立您自己自订的 Google 新闻

Blog 搜寻 Find blogs on your favorite topics (Beta)

个人化搜寻取得与您最相关的搜寻结果

Google 快讯透过电子邮件接收新闻和搜寻结果

Google Answers 提出问题，设定价格，取得答案

Co-op 自定你要的搜寻引挚

网站管理

网站管理员工具

Analytics 网站流量统计

网站应用服务 GMail for your doamin

AdSense 广告轮播 Discover your site’s full revenue potential

网络服务

Google 网上论坛 (Beta)

Picasa Web Albums (Test)

Google Spreadsheets 线上电子试算表 (Beta)

GMail Google 在电子邮件上的革新 (开放申请)

orkut 与可靠的朋友所建立的社群联系

免费网页空间 Create your own web pages, quickly and easily (Beta)

个人化首页其它模组

Google Moon

Google Mars

Blogger 现在就建立您的 Blog

Google Talk Web 版 Beta

Froogle 购物清单利用您的喜爱产品之愿望清单，做出明智的购物选择

More Google Products…

商业

Google AdWords 寻找正在搜寻您销售产品的消费者

软件

Google Pack - 实用软件集合 Beta

Picasa - 相片管理软件

Desktop Beta

ToolBar

Google Talk Web 版 Beta

Google Earth Beta

Google Web Accelerator Beta

程式开发

Web Toolkit

Google 网页 API 提供给软件开发人员自动查询 Google 的工具

Gadgets Add Gadgets

23 Nov 2005
Write comment

Archive for the ‘ WebApp ’ Category

修改步骤

RSS 相关

如何让 blogger 不自动加载 ajax

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

一般网页

WordPress 外挂程式

Blogger 可用的样版

安装步骤

使用方法

参考网页

安装步骤

使用方法

参考网页

安装步骤

使用方式

全部展开/隐藏全文

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

PCHome

Yahoo!奇摩

搜寻引挚

网站管理

网络服务

商业

软件

程式开发

PAGE NAVI

INFORMATION

简繁转换

热门文章

文章分类

友站连结

近期回响

赞助商连结

其它