Jimdo网站RSS Feed显示样式的一种CSS修改方法

      为了获取兄弟Jimdo网站(博客)最新内容,很多朋友都在自己的Jimdo网站上添加了“RSS Feed”元素,只要订阅的博客有了更新,都会及时显示的。还有,RSS Feed也可以作为自己最新博客显示用。不过,默认的Jimdo RSS Feed显示样式,在只显示标题(不显示描述)时,标题之间空白有点大,看上去不是太紧凑,这里介绍一种CSS修改代码。

      以本人博客为例,默认的显示样式如下:

     它的具体操作是这样的:添加“RSS Feed”元素,然后按以下的方法设置,就出现了上面的结果。

      由于没有显示描述(如果显示的话,对Jimdo博文来说,简直就是一堆乱文,更难看。),我们可以把标题文字由粗体改为普通字体,再把标题间的空隙改小一点。基于这个思路,改后的效果如下:

Jimdo网站登录入口 (Sat, 07 Oct 2017)
>> Read More

百度贴吧视频外链测试——2017年女排大奖赛龚翔宇集锦 (Sun, 06 Aug 2017)
>> Read More

视频测试——女排龚翔宇比赛视频集锦 (Sat, 29 Jul 2017)
>> Read More

SHARP(中国)官方网站数码复印机产品网卡和扫描软件的下载地址(最近更新) (Sat, 21 Jan 2017)
>> Read More

Jimdo网站下拉式导航菜单代码简介 (Sun, 26 Oct 2014)
>> Read More

      CSS代码如下:

#cc-matrix-470702904 .rssFeed            /* 设置Feed宽度、背景色、边框及圆角等*{float:left;width:548px;background:#f2f5f2;border:#ccc solid 1px; border-radius:8px; -moz-border-radius:8px; padding:10px;margin-bottom:8px;}
#cc-matrix-470702904 .rssFeedTitle     /* 设置标题字体*/

{display:block;padding-top:8px; font:12px/100% verdana,宋体; color:#000;}
#cc-matrix-470702904 .rssFeed br       /* 屏蔽换行标签*/

{display:none;}

      除了更改标题字体和去掉html换行标签<br />以外,还加了边框和背景色,其中,#cc-matrix-470702904 是本页主编辑区ID号,加上了它,只对本页有效,去掉的话,对全站有效;“border-radius:8px; -moz-border-radius:8px; 是圆角,IE家族及采用IE内核的浏览器目前还不支持,只能显示矩形边框,而Opera、Google Chrome、Firefox等主流浏览器都会显示圆角效果。

      下面以老胡网型网秀等博客订阅为例,看下效果(加了标题显示):

      此外,我们也可以看下有内容描述的RSS效果,以新浪新闻为例,其RSS地址为:http://rss.sina.com.cn/news/marquee/ddt.xml,效果如下:

新闻要闻-新浪新闻

[播客]独家实拍:我那永远跪着的母亲(11/07 22:10) ()
独家实拍:我那永远跪着的母亲
>> Read More

      除了本文介绍的方法以后,我以前也实验了一些,如本博右上角的“最近更新”,以及Jimdo blog等。

Write a comment

Comments: 10
  • #1

    网型网秀 (Monday, 12 December 2011 10:02)

    Jimdo的订阅有时不是很稳定。

  • #2

    中国圆号网 (Monday, 12 December 2011 19:16)

    邻居能不能研究一下文件下载元素的横向排列,谢谢。呵呵。

  • #3

    网上邻居 (Monday, 12 December 2011 21:46)

    网型网秀:
    Jimdo的RSS和Jimdo的速度同步的,还算能接受。

  • #4

    网上邻居 (Monday, 12 December 2011 21:49)

    中国圆号网:
    下载元素很少用,没太注意那个。王老师应该用的比较多,有什么体会希望共享一下。

  • #5

    网型网秀 (Tuesday, 13 December 2011 13:24)

    中国圆号网:直接在CSS添加一段简单的浮动代码就行了啊
    .j-downloadDocument{float:left;width:300px;}

  • #6

    中国圆号网 (Tuesday, 13 December 2011 20:36)

    邻居你好:
    文件下载元素的横向排列的问题已解决。用的是网形网秀提供的代码,效果很好。谢谢二位。

  • #7

    网上邻居 (Tuesday, 13 December 2011 23:18)

    谢谢网型网秀提供的CSS代码和中国圆号网回馈的信息!
    看了一下Jimdo下载方面的CSS设置,它主要分三个部分:
    .j-downloadDocument 是全局设置;
    .leftDownload 是左边图片设置;
    .rightDownload 是右边文字及下载链接设置。
    王老师如果对这方面有特殊的要求,可以把要下载的东西上传到一个页面,然后,在别的地方做些漂亮的组合链接,效果可能更好一点...仅供参考。

  • #8

    网型网秀 (Wednesday, 14 December 2011 11:31)

    要是我可以能会自己设置一个下载图标,Jimdo的下载图标不是很好看,再链接到自己的网盘里就是,最近在使用115网盘,感觉还不错。

  • #9

    protective iphone 6 case (Wednesday, 06 April 2016 16:40)

    Assuming that the replacement screen is not defective and working properly then the problem could be caused during the replacement process. The black shadow that you see on top of the screen could be caused by too much pressure on that part. Try loosening up that part first.

  • #10

    罗夕木 (Thursday, 01 February 2018 10:31)

    我把代码放进edit head没用啊,删掉了#cc-matrix-470702904