2009年5月9日星期六

Blogger添加“相关文章”(Related Post)功能

看了Hoctro's类似功能的Blogger Hack后,我首先有了这样想法。不幸的是,他要求我们去更改所有帖子的标题,让每一个相关文章的标题都有个相同的前缀。我想应该可以通过帖子的标签将并相关帖子显示出来。最后,我用了Json的新方法来做。 我也看过一些通过Json方法而做的Blogger Hacks,我将通过他们来分析Json方法是如何做到的。
(注:如果你的标签使用了Blogger的问号(?)、斜杠)/)等保留字的法,这可能不能正常起作用。在这里,我不能编辑他们。)
先首,进入Blogger 布局里的“修改HTML”(Edit HTML),将下面的代码粘贴到头部,即<head></head>中,(最好直接粘贴在</head>的前面。)

<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>

点击保存,然后勾选“扩展小工具”(Expand Widget Template)复选框,找到下面的代码。

<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>


替换成下面的代码,红色粗体为我增加的。

<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>&lt;b:if cond='data:label.isLast != "true"'>,</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

保存它,然后回到模板布局(Layout)下,增加一个HTML/Javascripts的小工具(Widget)。我是在博客帖子下面增加的。在弹出的对话框的上面代码区内,拷贝下在的代码进入。

<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>

现在,再回到模板(Template)=>修改HTML(Edit HTML)下,勾选“扩展小工具”(Expand Widget Template)复选框,并找到你刚才加入的HTML/Javascripts小工具。它看出来类似下面的代码:(注:粗体红色部分为新增加的代码)

<b:widget id='HTML13' locked='false' title='Related Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

你可以增加与减少显示相关帖子的数量。在这个代码框中,你可以改变 i < 20 与max-results=10的值,来改变显示数量,而视你的网页情况而定。数字太大,会影响你的页面加载速度。
(注:这里的我代表:原作者PurpleMoggy)
Read rest of entry(全文阅读)...

2009年5月8日星期五

如何为你的Blogger安装Google的Analytics(分析)


如果知道每天有多少人、那里的人访问了你的Blog,一定是件非常让人高兴的事。当然大家可以直接将51La、站长统计或Yahoo统计放到某个HTML&Javascript的“Wigdet”里,但想知道你博客里的某个文章的情况,用Google的Analysics(分析)就是不错的选择,而且是完全免费的。

Google Analysics(分析)是个非常不错的工具。它能告诉你那些人是如何进入你的博客的:通过什么关键词搜索而来、从那里而来、在你的博客上停留了多久等信息。你还可以知道你的访问才来自哪里,他们如何与你的博客产生互动。根据这些信息,你才有可能建立一个有利的博客,否则你就象是只在大海里失去目标的小船一样。

本文将告诉你如何在你的Blogger博客里增加Google Analytics。这里一个非常简单的过程,而基本不需要特别的技术。

第一步:建立一个Google Analytics帐户
因为你在使用Google Blogger,所以我假设你已有了Google帐户了。(如果你有用使用Google的其它产品或服务,如Gmail,也表明你有Google帐户了。)这样,你就可以直接登入开通Analytics(分析)这项服务了。你也可以点击“Google Analytics”现在注册或登入。一旦你登入,你将看到类似下面的界面。


点击“Sing UP>>”按钮进入下一步,其将要求填写你的一些信息:网站地址(即你博客的地址)、帐户名、国家、时间区域等。类似下面的界面:


你是否注意到上面图片里Blogger的地址是没有带“Http://”开头的,并命为“David's Account”,因为你可以建立100个不同的网站,而这样命名是非常好地去区别他们的。下一步将要求你填写你的联系信息,包括你的名字、电话号码、国家等,这些应该非常容易了。


最后一步将要求你接受Google的服务协议,直接点接受吧,我想是没有人会去主读它的。其界面类似如下:


进入下一步,界面如下。这一步非常重要。你需要将下面的代码拷贝并粘贴到你Blogger模板里面去。点击代码框,其将自动高亮,并全部选中。你需要将其拷贝并粘贴到记事本或Word文档里,并保存它,晚些时候我们将要用到它。


做完上面的工作后,当你点击“Continue>>”后,你将进入一个全新的、只属你的控制界面。你将看到你自己的Blogger,只是其没有任何Analytics(分析)数据。

好了,现在你已经建立好你的Google Analytics帐户了。下一步是将刚才保存下来的代码放到你的Blogger的模板里。这些代码能传达报告给Google Analytics,并向你提供一些非常好的数据。

第二步:增加代码到你的Blogger模板中

这一步没有什么复杂的,即是你担心需要向你的模板代码动粗。进入你的Blogger帐户,点击“Layout(布局)”=>“Edit HTML(编辑HTML)”。这时,你将看到你Blogger模板的代码。在你动手动粗前,我建议你那备份好你的模板代码(最好养成这样的习惯)。备份好的,继续往下看。
在模板代码窗口,找到</body> 标签。在你的模板代码里,只有一个</body> 标签。如果你没有找到它,那么你的模板是不正确产生的,你应该在</html>右边增加它。而</html>通常在你模板代码的最下面几行里。它表示你的模板代码结束。

现在回到刚才我们保存下来的Google Analytics代码来,将其拷贝并粘贴到</body> 标签的前面。如下图所示,这黄色高亮代码就是刚刚粘贴到模板里的代码。


保存你模板,你应不会找到出错的信息。如果你看到,那大部分与你的Google Analytics代码或你模板本身有问题。如果你成功保存了,那你就完全嵌入了Google Analytics代码到你的Blogger 模板了。

第三步:证实你Google Analytics已经跟踪
回到你的Google Analytics帐户下,看看你的控制界面。你将在“Status”一栏下,到看到一个黄色小感叹号。这意味着你的成功安装Google Analytics的跟踪。因为我们还没有告诉Google Analytics已经加入跟踪代码到我们的模板了。点击最右边的“Edit”。

点击后,你将看到另外一个类似下面的界面。它将告诉你“Tracking Not Installed”,而其后面有一个“Check Status”的链接。点击此链接,告诉Google Analytics去访问你的博客去寻找你刚才贴进你模板里的代码。


如果你按上面指导贴入了代码到你的Blogger模板里,Google Analytics将找到他们,并开始跟踪你的Blogger每一件事情。如果你发现还有问题,那很可能是你Google Analytics的问题了,你应该去看一看他们的相关帮助文件。


成功完成后,你将看到“Waiting for Data”信息。这表示,你已经成功建立了Google Analytics了,其正在收集数据。点击左上角的Google Analytics的Logo,你将回到你的控制面板。在这里,你可以点击“View Report”链接,你将看到关于访问你Blogger的一数据了。

OK,就这么简单。
此文章参考:http://www.eblogtemplates.com/how-to-install-google-analytics-on-blogger/
Read rest of entry(全文阅读)...

Blogger Template精选站点

自己最初建Blogger时,由于不熟悉没有选择好Template,导至后面更改花了很多时间。所以建议开始建博客时,一定要先挑个好点的Template,对以后自己管理也非常有必要。
下面就是自己收录的Blogger Template精品站点。


BTemplate:


此站站是分类非常详细的,所有Template都得到作者授权,其更新速度也非常快,如果你正在找Template,先去这里看看,是最明智的选择了。下载里面的Template完全免费,还不需要注册,非常方便。


Eblog templates
也是一个非常不错的Blogger Template站点,分类也非常详细。站点除了提供下载Blogger Template外,还提供WordPress的Theme。并且里面有很多关于Blogger技巧文章,还有一个代码转换的小工具,很实用。只是要下载里面的Template需要注册,其技巧类的文章更新也很慢。同时其还对一些优质Template收费。

Falcon Hive
此站点是个人Blogger Template制作类的,里面的Template均为作者制作,下载还有相关安装说明文件。并附还许多小技巧,是非常不错的一个个人博客站站。

BloggerTricks
此站同样是Blogger博客站点,里面的 template 均为作者kranthi制作,下载页面会有相关安装与注意事项说明。

Zixpk.com
本站的Blogger Template都非常棒,里面的作者应都是设计高手,里面还有高品质的壁纸与Icon图标下载。

Gisele Jaquenod
此站提供的Blogger Template跟上面的图片一样可爱,爱酷的朋友一定不要错过哦。同时也提代WordPress的Theme。使用WP的朋友也可以去看看。

搏一博

这里最后一个要介绍给大家的,就是本站了,本站将会介绍更多的、最新的Blogger Template与技巧文章与大家,大家要记住哦。
Read rest of entry(全文阅读)...
 

搏一博 Copyright © 2009 影视助手小刀