色彩斑斓: JSON

显示标签为“JSON”的博文。显示所有博文

去掉首页地址多余部分

制作者：Singpolyma
Blogger默认的首页地址为：http://USERNAME.blogspot.com/index.html事实上那个Index.html没什么用处，看起来也很烦。点击下面按钮去掉它。

帮别人去掉，点下面按钮。

FTP方式Blogger一键添加最新文章模块

在以前介绍JSON的时候，曾介绍了几个一键Hack，但是不包括FTP发布的用户。Hans又为FTP用户做了一个添加最新文章的Hack，只需要简单的设置，点一下按钮就行了。

1.首先，设置你的Feed地址。如图（在新窗口中打开放大）。

你要得到的就是其中你设置的RSS地址，如图中的地址是：http://home.planet.nl/~hansoosting/testfeed/rss.xml
2.到模块生成页面（Recent Posts Widget for FTP Blogs），填写一些基本内容（要用到RSS地址），点“Creat”按钮，会生成代码，将这些代码复制到你想要的位置就可以了。

文章最大显示篇数为25。

3.安装之后要加一部分CSS来修饰添加上的模块。下面是作者的一个简单示例：

.bbrecpost {margin-top:10px;}.bbrecpostsum {font-style:
italic;}.bbwidgetfooter {margin-top: 10px;margin-bottom: 10px;}

Blogger相关文章模块升级版

之前显示BLogger相关文章的Hack模块，是根据文章的标题来判断文章的相关性。PurpleMoggy的这个Hack是根据标签来判断文章相关性的，应该更合适一些。（标签中不能包含像？/之类的字符）

1.把下面代码放在<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>

2.在代码中找到下面的部分。

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

3.更改为下面形式。其中的粗体为添加的部分。

<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:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

4.保存模板，并转到“页面元素”中，添加一个HTML/Javascript模块，在里面填上下面代码，并保存。

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

5.再回到Html编辑，选中“扩展窗口小部件模板 ”。找到下面的部分，其中粗体部分为要添加的部分。

<b:widget id='HTML13' locked='false' title='Related Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>

<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）出的部分我们可以自定义显示相关文章的数目。页面加载速度和相关文章的数目之间的平衡自己掌握好了。

Picasaweb幻灯片模块生成工具

Picasaweb自Blogger beta、Google base、Google calendar之后也支持JSON.

Phydeaux3因此为Picasaweb写了一个生成器把它应用到了Blogger中。

生成器地址

只要找到要显示的相册的RSS地址填到地址框里就行了。

做一个导航栏的下拉菜单如何？(已更新)

已经测试过了，示例请看我的测试Blog

因为晚上有课，写得非常匆忙，也未像以前一样自己试一下，可能存在一些错误。如果觉得写得不清楚，可查看原文。

有导航栏可以让Blog看起来更专业一点。以前也介绍过生成导航栏的方法。如果有大量的分类信息呢？当鼠标移过时显示下拉菜单怎么样？效果可以看原作者的Blog.这里介绍的是把一些链接模块放在导航栏上。

1.Head之间引用JS。比较建议自己下载并上传JS文件

<script src='http://non.alastor.googlepages.com/chrome.js' type='text/javascript'/>

2.定义CSS

chromestyle.css - 银色
chromestyle2.css -蓝色
chromestyle3.css - 绿色
chromestyle4.css - 红色

一共有四种样式，你可以选择一种跟Blog打配的，并把里面的内容添加到Blogger模板中。紧跟在]]></b:skin>之前就可以。

3.导航栏位置

一般我们会把它放在标题下方，不过，只要你愿意，可以放在任何你想要的地方，比如最上方。

这里我们把它放在标题栏下方，找到 header-section结束、content-wrapper开始的地方（即在div id='content-wrapper'这句之前），添加下面代码

<div class='chromestyle' id='chromemenu'>
<ul>
<li><a href='http://YOURBLOG.blogspot.com/'>Home</a></li>
<li><a href='#' rel='dropmenu1'>导航 1</a></li>
<li><a href='#' rel='dropmenu2'>导航 2</a></li>
<li><a href='#' rel='dropmenu3'>Content 3</a></li>
<li><a href='#' rel='dropmenu4'>Content 4</a></li>
</ul>
</div>
<script type='text/javascript'>
cssdropdown.startchrome("chromemenu")
</script>

4.把原侧边栏模块移到导航栏

找到相应的模块代码部分，做一些修改。添加红色部分。因为我们在第三步中已经定义了导航1、2等导航标题，有个Rel属性，下面代码中的Id属性应该与相应的Rel属性对应。

<b:widget id='...' locked='false' title='...' type='...'>
<b:includable id='main'>
<div class='dropmenudiv' id='dropmenu1'>
<div class='widget-content'>
.
.
.
</div>
</b:includable>
</b:widget>

记住要删除原侧边栏模块的标题。

5.美化部分

尽管按上面的方法已经实现了下拉菜单，但对于一些模块会不太完美，比如标签，记数器会让菜单扭曲，作者提供了相应的方法，即把计数器放在链接内部。

<b:widget id='Label1' locked='false' title='Categories' type='Label'>
<b:includable id='main'>
<div class='dropmenudiv' id='dropmenu1'>
<div class='widget-content'>
<b:loop values='data:labels' var='label'>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/> (<data:label.count/>)
<b:else/>
<a expr:href='data:label.url + "?max-results=100"'><data:label.name/> (<data:label.count/>)</a>
</b:if>
</b:loop>
<b:include name='quickedit'/>
</div>
</div>
</b:includable>
</b:widget>

下面代码针对订阅链接，真实效果查看作者导航栏的NewsFeeds。

<b:widget id='Label2' locked='false' title='Newsfeeds' type='Label'>
<b:includable id='main'>
<div class='dropmenudiv' id='dropmenu2'>
<div class='widget-content'>
<a href='http://YOURBLOG.blogspot.com/feeds/posts/default/-/' target='_blank' title='Subscribe to Posts'><img src='http://non.alastor.googlepages.com/rss_icon.gif'/> Posts</a>
<a href='http://YOURBLOG.blogspot.com/feeds/comments/default/-/' target='_blank' title='Subscribe to Comments'><img src='http://non.alastor.googlepages.com/rss_icon.gif'/> Comments</a>
<b:loop values='data:labels' var='label'>
<a expr:href='"http://YOURBLOG.blogspot.com/feeds/posts/default/-/" + data:label.name' target='_blank'><img src='http://non.alastor.googlepages.com/rss_icon.gif'/> <data:label.name/></a>
</b:loop>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

最简单的生成Blogger下拉菜单的方法

Hackosphere做了一个下拉菜单生成器，如果你的侧边栏上有大量的链接，除了用以前的方法将它收缩起来，也可以试试下拉菜单的形式。

生成地址

注：anniyalogam.com原来在中国是无法访问的，不知道为什么现在解封了。

上文中提到的JSON不知道有没有心动，没有？来体验一下吧，或许你会改变观点！

只要点击下面的按钮就可以“安装”Hack，无需修改任何代码，给喜欢偷懒的人带来的机会哦
首先，在Head之间引用JS，<script src='http://home.planet.nl/~hansoosting/downloads/beautifulbeta.js' type='text/javascript'/>
1.最新文章模块（与通过RSS添加有所不同）

其中涉及到一些自定义选项。点击上面的按钮之后会出现对些模块的最基本设置，如标题，以及选择想要添加的Blog（前提你建了多个Blog）。下面有个“Edit Content”就是要编辑的内容了。点击一下。我们要针对自己的Blog做一些修改。

把“beautifulbeta.blogspot.com”替换成你的Blog地址;numposts代表要显示的文章数，默认为10;numchars代表显示摘要的字数，默认为100；showpostsummary是不是显示摘要，值为True和False;showpostdate是不是显示日期，值同样为True或False。

2.最新评论模块

同样我们要自定义一下以适应自己的Blog。替换 'beautifulbeta.blogspot.com' 为你的Blog地址;设置 numcomments为显示的评论数大小;numchars为评论摘要的字数;showposttitle是不是显示评论所属文章的标题，值为True或False;showcommentdate是不是显示评论日期，值为True或False;

3.搜索模块

via BeautifulBeta&Hackospere

迟来的介绍——JSON

因为心情的原因，这篇文章迟来了几天。

Blogger Buzz于21日宣布Blogger支持JSON，同时还有Google Base、Google calendar以及后来的Picasaweb。尽管这一声明对我们普通用户没什么太大的意义，但对那些Blogger hackers们却是件值得惊喜的事。当然我们也是最终受益者。

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。是针对程序员的，如果有兴趣可以看下面的一些资料：

JSON官方中文页面

一个更通俗易懂的介绍

JSON究竟可以为我们普通用户带来什么呢？简单！以前我们要实现一个Hack往往要修改大量代码，现在我们甚至只要点一下按钮，国外的一些Hackers们已经把以前的一些Hack转化成了这种形式。

Blogger帮助里提供了一个API来实现这个过程，感兴趣可以看一下。

订阅：博文 (Atom)

色彩斑斓