jimdo教程:美化与自定义Google Reader Shared Items调用的“最近更新”模块

jimdo教程-jimdo技巧-jimdo代码-诸葛草帽
图一

        以前写过文章《巧用谷歌阅读器(google reader)实现网站自动调用“最近更新”模块》,虽说这个最近跟新模块是诸葛草帽在网上苦苦寻觅到的相对比较好的,但是可以选择的样式很有限,而且调用的文章数量也只有几个备选可选,受到很多约束!正好诸葛草帽我也好些日子没有写什么关于jimdo的东西了,今天就研究一下这个“自动更新模块”吧!

        首先先看一下原始的自动更新模块样子吧,如图二(下面那个,点击查看大图), 这个还是我选的和我的诸葛草帽电脑工作室比较搭调的样子呢,接下来一步一步“修理它”!

        先用默认的设置项简单设置设置一下,把默认的Title删除,Items选择10,Show item sources取消选择,然后会看到下方给出了一段类似于下面的脚本(巧用谷歌阅读器(google reader)实现网站自动调用“最近更新”模块里已经给出过的):

 

<script type="text/javascript" src="http://www.google.com/reader/ui/publisher-zh_CN.js"> </script><script type="text/javascript" src= "http://www.google.com/reader/public/javascript/user/18424442014719979446/label/%E5%85%B1%E4%BA%AB%E6%96%87%E4%BB%B6%E5%A4%B9?n=10&callback=GRC_p(%7Bc%3A%22blue%22%2Ct%3A%22%22%2Cs%3A%22false%22%2Cn%3A%22true%22%2Cb%3A%22false%22%7D)%3Bnew%20GRC"> </script>

 

        先说调用个数,默认提供的最多是最近的10条,如果觉得少的话,可以把第二个脚本中的“%B9?n=10”部分中的n=10改成你喜欢的个数。我改成了20,呵呵。

        如果有时间,可以不要第一个脚本,自己写一个显示函数,譬如只显示标题,而来源/摘要等当鼠标指上去后以浮动DIV显示等。最后记得把“callback=GRC_p(%7Bc%3A%22blue%22%2Ct%3A%22%22%2Cs%3A%22false%22%2Cn%3A%22true%22%2Cb%3A%22false%22%7D)%3Bnew%20GRC”中的回调函数名及参数改成与你写完的函数相对应的就可以了。

        最后在把脚本放到自己的BLOG中后记得在CSS中增加“#readerpublishermodule0”、“#readerpublishermodule0 li”、“readerpublishermodule0 .f ”几个定义来美化和自定义这个自动更新模块,我自己的定义如下:

#readerpublishermodule0{border:0px!important;margin:0 auto!important;}
#readerpublishermodule0 li{line-height:20px;width:195px;white-space:nowrap;text-overflow:ellipsis;overflow: hidden;}
#readerpublishermodule0 .f{display:none;}

        下面诸葛草帽就分别就说各个部分都是干什么的,感兴趣的朋友可以自行对照修改,或者发挥想象力做出自己最满意的吧。

 

         首先第一排红色部分“border:0px!important;margin:0 auto!important;”是干什么呢?border就是边框的意思,0px的意思就是去掉原来的那个灰色边框,margin定义外边距属性,同样取了0px,这里我在代码后面都加了“!important”,因为这个Google Reader Shared Items调用的时候已经给出了border和padding、margin之类的元素定义,如果单单在css中添加这些代码,会被“override”,即被覆盖,不会出现效果,所以使用了“!important”。

 

         其次是第二行的,规定了字行高度宽度,之后通俗来讲“white-space:nowrap”的意思就是“不自动换行”,而“text-overflow:ellipsis;overflow: hidden;”实现的效果是当标题比较长但是之前规定不自动换行的情况下标题长度溢出时,标题会出现省略标记“......”的标记。(注:text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省略号的效果。还必须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden)。只有这样才能实现溢出文本显示省略号的效果。)

 

        最后一行就好理解了,“display:none ”即是隐藏的意思,并且隐藏之后不占用任何空间,那隐藏的是哪个部分呢?就是原来最下面“查看所有链接”的部分!


jimdo教程-jimdo技巧-jimdo代码-诸葛草帽
图二

        补充说明:有热心网友留言“照做了,没成功。以下是jimdo给的信息:我们在您的HTML代码中找到{countAnzahl 错误/警告!line 28 column 139 - Warning: unescaped & or unknown entity "&callback" ”,其实谷歌给出的代码中含有“&”,现在已经被认为是不规范的写法了,所以保存的时候出现警告,你可以使用“ &amp; ”代替“ & ”,这样就不会提示错误了,或者直接“自动修改”系统会自动修复保存的!所以如果以后碰到什么东东里面还有“&”代码你就可以直接修改免得再报错。

Write a comment

Comments: 14
  • #1

    汤圆 (Friday, 30 July 2010 15:42)

    继续学习,我怎么就没想到用CSS来美好一下它呢?好呀!谢谢!

  • #2

    独星 (Saturday, 31 July 2010 15:50)

    哇……这个也能用CSS……大人真厉害- =||

  • #3

    诸葛草帽 (Sunday, 01 August 2010 09:52)

    能用就好,我选的是蓝色的那款,但是初始没有样式的那款好像没有好的美化方式。

  • #4

    独星 (Wednesday, 04 August 2010 15:42)

    我的……我的宽度有问题……

  • #5

    诸葛草帽 (Wednesday, 04 August 2010 15:52)

    回复独星:恩,的确是有问题,在ie6下出现错位现象,初步估计是content和sidebar的宽度出现的问题

  • #6

    独星 (Monday, 16 August 2010 22:14)

    解决方法~~~
    把white-space:nowrap去掉即可~~
    我用firebug在你的网站上测试的~~

  • #7

    独星 (Monday, 16 August 2010 22:45)

    最后我的代码为~~
    /* Readerpublishermodule0
    ---------------------------------------------------- */

    #readerpublishermodule0
    {
    border:0px!important;
    margin:0 auto!important;
    }

    #readerpublishermodule0 li
    {
    line-height:20px;
    width:165px;
    text-overflow:ellipsis;
    overflow: visible;
    }

    #readerpublishermodule0 .f
    {
    display:none;
    }

  • #8

    诸葛草帽 (Tuesday, 17 August 2010 07:41)

    回复独星:解决方法?什么解决方法?white-space:nowrap是我加都让它强制不换行,在我这里没有问题

  • #9

    qingwen (Monday, 06 September 2010 21:51)

    照做了,没成功。以下是jimdo给的信息:

    我们在您的HTML代码中找到{countAnzahl 错误/警告!

    line 28 column 139 - Warning: unescaped & or unknown entity "&callback"

  • #10

    诸葛草帽 (Monday, 06 September 2010 21:59)

    回复qingwen:这个问题涉及到新旧代码交替的问题,以前可以直接使用“&”代码,现在被认为不规范,要使用“&amp;”代替“&”,你可以直接写成“&amp;”或者“自动改正”也是可以的

  • #11

    飞帆 (Tuesday, 14 September 2010 21:50)

    Jimdo 本身的博客显示就具备这个功能了!

  • #12

    诸葛草帽 (Tuesday, 14 September 2010 22:47)

    回复飞帆:这个我当然知道,我在http://zhugecaomao.jimdo.com/2010/06/20/google-reader 已经有所说明,博客显示和rss订阅都可以实现这个功能,只是我觉得不够美观不太符合我的想法而已

  • #13

    飞帆 (Wednesday, 15 September 2010 22:39)

    似乎在CSS 中加点代码就可以解决了!请看我的博文http://wybgx.jimdo.com/blogs/

  • #14

    诸葛草帽 (Wednesday, 15 September 2010 22:46)

    回复飞帆:没有权限看你的文章!不过看你的文章的标题的意思是自定义博客显示,我曾经试验过,但是自定义博客显示css会影响整站的博客显示风格,还不是我想要的效果,这点有待研究