分享一种Jimdo博客日期时间显示样式代码

      Jimdo博客的日期时间还是别具一格的,不过,也有很多朋友并不喜欢这种显示样式,包括网上邻居本人,都比较喜欢那种文字横排的样式。为此,本人曾做过一些探索,如《Jimdo网站的美化 - Jimdo博客标题中日期的修改方法(一)》、《Jimdo网站的美化 - Jimdo博客标题中日期的修改方法(二)》,再如《Jimdo博客中日期显示的多样化及在IE6中存在的问题(含CSS代码)》、《Jimdo博客中日期显示不兼容IE6问题的解决方法(含CSS代码)》。这些文章中介绍的方法和代码,或者代码写的不合理、不完善,或者由于Jimdo系统在进行改进时,没有充分考虑兼容性问题,结果在IE6浏览器里,显示时总是存在一些问题。为此,本文再分享一种兼容性较好的CSS代码。

      本文介绍的代码,它的具体效果见本站的博客显示页面和博客正文。较之以前的代码,这里只用一组代码,就解决了博客显示和博客正方标题栏中日期的问题。代码相对比较简单,兼容性很好,只需要简单调试。感兴趣的朋友可以拿去试试,也可以对其中的一些设置进行修改,看看会出现一些什么效果。

      CSS代码如下:

/* 去除日期背景图片 */

.blogselection .datetime, .post .datetime
{position:relative; width:70px; height:20px; margin:0px;background:none !important;

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='', sizingMethod = 'crop');} 

/* 设置“日”位置、字体 */
.blogselection .datetime .day, .post .datetime .day
{position:absolute;top:0px;right:0px;width:20px;font-size:14px; font-weight: bold;line-height:20px; color:#333;}

/* 设置“月”位置、字体 */
.blogselection .datetime .mon, .post .datetime .mon
{position:absolute;top:3px;*top:4px;right:20px;font-size:14px;font-weight: bold;line-height:20px;color:#333;}

      其中,“.blogselection .datetime”是博客显示标题栏部分的日期, “.post .datetime”是博客正文标题栏部分的日期, .day”  是日,.mon”是月份。

      这个代码使用了Jimdo的默认设置,也就是标准显示风格,不显示“年份”和“星期”。对于IE6以外的浏览器,只要按以上代码修改,采用Jimdo默认的显示风格即可。如果在意IE6的兼容问题,还需要按以下两点做些设置:

      1、进入右上角“A”显示风格里,再进入“博客风格”,将“背景颜色”设置成页面一样的颜色,否则会出现一条“蓝色竖线”。

      2、系统默认情况下,在IE6下,会显示年份和星期,去除的方法是改进代码,具体见《Jimdo博客中日期显示不兼容IE6问题的解决方法(含CSS代码)》一文。

      下面给出一些博客风格部分默认的设置和需要调整部分的截图。

Write a comment

Comments: 3
  • #1

    网型网秀 (Friday, 05 October 2012 16:47)

    我还是比较喜欢默认的蓝色风格。

  • #2

    网上邻居 (Saturday, 06 October 2012 09:38)

    原来默认的蓝色风格确实也不错,后来Jimdo系统改造已不再兼容IE6,虽然采用一些代码能修正一下,还是显得比较难看。本文代码在IE6上加载时稍有点延迟,显示效果基本上一样。当然,IE6迟早要被消灭的...

  • #3

    cartier replica (Monday, 18 April 2016 11:24)


    I would like to say that this blog really convinced me to do it! Thanks, very good post.