jimdo代码:jimdo博客标题栏及其时间部分(datetime)修饰和美化

jimdo代码:jimdo博客标题时间部分(datetime)修饰和美化-诸葛草帽电脑工作室

        前几天网友zjqyd在《在jimdo博客文章之间加一条水平分隔线》留言说“请教一个问题:现在用的JIMDO博客中有一个表明博客日期的小图标,上面只有“月”与“日”,是否能在小图标中再增添一个“年份”?”,我看到感觉这个想法不错,所以就看了下官方的代码,代码里有年份的部分和星期的部分,但是被隐藏了,所以我就小小修改了下,让它显示出来了,见左图:

jimdo博客标题栏的官方代码为“.post”,我现在的标题栏效果如下图:

jimdo博客标题栏-诸葛草帽电脑工作室

        代码是:

.post

{

padding-left:10px;

padding-top:10px;

margin-top:10px;

border:1px solid #17A4C7;

background:#f0ffff;

}

        这段代码的大致意思就是给标题栏加个背景色,加个边框,标题定个位置之类的。

        现在可以主攻jimdo博客标题栏时间部分的美化了:这部分的官方代码是:.post .datetime

可以换背景、加边框、定位之类的,举个例子:

 

.post .datetime{border:1px solid #17A4C7;}

 

就是给它加个边框,我觉得官方默认的就不错了,所以我就没动。

        之后就是jimdo博客标题栏时间部分的修改了:这个部分包括:月(mon)、日(day)、年(yr)、星期(day-word);官方隐藏了星期和年,先写出我的修改代码吧:

.post .datetime .day

{

padding-top:3px;

font-size:12px;

line-height:13px;

}
.post .datetime .mon

{

font-size:10px;

line-height:12px;

}
.post .datetime .yr

{

display:block;

font-size:11px;

line-height:12px;

color:#ffffff;

text-align: center;

}   

        这样的话日期部分就有月、日、年了,感兴趣的朋友可以试着修改下,有什么好的意见和建议就提出来大家一起研究研究

Write a comment

Comments: 40
  • #1

    net123 (Monday, 02 August 2010 00:20)

    呵呵, 这文章不错, 我早就想修改一下这个时间显示方式了. 回头马上试一下.

  • #2

    诸葛草帽 (Monday, 02 August 2010 07:22)

    回复net123:现在还不太美观,还在改进,有什么好的想法大家一起研究!

  • #3

    网上邻居 (Tuesday, 03 August 2010 23:16)

    Jimdo这个日期的显示方式固然有其特色,感觉还是有点不好看,要是把它拆分跟普通博客那样就更好了。

  • #4

    诸葛草帽 (Wednesday, 04 August 2010 07:30)

    回复网上邻居:嗯,试着做做

  • #5

    zjqyd (Sunday, 08 August 2010 19:51)

    对不起,我还是没有搞懂。你已给出了修改的代码,但不知道该往哪里修改?能否告知?

  • #6

    诸葛草帽 (Sunday, 08 August 2010 21:18)

    回复zjqyd:登陆网站之后选择网站模板/自定义模板/css里添加以上代码就可以了,这篇文章没有写全,还有一部分在这里:http://zhugecaomao.jimdo.com/2010/08/01/jimdo-blog-datetime/

  • #7

    诸葛草帽 (Sunday, 08 August 2010 21:21)

    回复zjqyd:对了,代码要自定义模板才可以使用,官方模板使用不了

  • #8

    zjqyd (Sunday, 08 August 2010 23:50)

    那就是说,对于我这个网站是不适用的了?!谢谢指教。如果将官方模板作为自定义模板如何呢?对不起我对CSS一穹不通,所以提出些怪问题请包涵。

  • #9

    诸葛草帽 (Monday, 09 August 2010 13:40)

    回复zjqyd:是的,你的网站是用的官方模板,不是自定义html和css的,但是如果你非要用的话也是有方法的,登陆后台之后选择--设置--编辑head部分-添加以下代码同样达到效果!<style type="text/css">
    /*<![CDATA[*/
       <!--
    .post .datetime .day

    {

    padding-top:3px;

    font-size:12px;

    line-height:13px;

    }
    .post .datetime .mon

    {

    font-size:10px;

    line-height:12px;

    }
    .post .datetime .yr

    {

    display:block;

    font-size:11px;

    line-height:12px;

    color:#ffffff;

    text-align: center;

    }
    .blogselection .clearover .datetime .day

    {

    padding-top:3px;

    font-size:12px;

    line-height:13px;

    }
    .blogselection .clearover .datetime .mon

    {

    font-size:10px;

    line-height:12px;

    }
    .blogselection .clearover .datetime .yr

    {

    display:block;

    font-size:11px;

    line-height:12px;

    color:#ffffff;

    text-align: center;

    }

       -->
      
    /*]]>*/
    </style>

  • #10

    上海闸北骑游队 (Monday, 09 August 2010 14:47)

    已按你的指教,试验成功。谢谢!还望今后多指点。

  • #11

    诸葛草帽 (Monday, 09 August 2010 15:45)

    回复上海闸北骑游队:呵呵,那就好,不客气

  • #12

    上海闸北骑游队 (Tuesday, 10 August 2010 04:04)

    又来打扰你了:你能否帮助看一下我那个广告盒,里面空白了一大块,又难看又占了不少空间,能否将它缩小一点?

  • #13

    诸葛草帽 (Tuesday, 10 August 2010 07:18)

    回复上海闸北骑游队:这个jimdo广告盒是个比较敏感的话题,而且因为你用的模板是官方模板,所以是没有办法自定义它的

  • #14

    诸葛草帽 (Tuesday, 10 August 2010 07:28)

    回复上海闸北骑游队:刚才又做了个实验,编辑head部分添加代码

    <style type="text/css">
    /*<![CDATA[*/
       <!--
    div#jimdobox {
    width: 170px;
    height: 344px;}
       -->
      
    /*]]>*/
    </style>


    可以实现你想要的效果,长度和宽度换成你想要的大小,我第一次是在opera下做的实验,没有效果,但是ie内核浏览器下成功,提醒一下,不要太小遮挡住gg广告和其他部位

  • #15

    上海闸北骑游队 (Tuesday, 10 August 2010 14:01)

    又一次成功,将高度缩小了一半多。再次感谢“诸葛”!

  • #16

    诸葛草帽 (Tuesday, 10 August 2010 14:52)

    回复上海闸北骑游队:一半多?我看了,你连gg广告都挡没了,这很危险呢

  • #17

    上海闸北骑游队 (Tuesday, 10 August 2010 21:31)

    什么是gg广告?我缩小的部分完全是空白部分,并没有任何的文字或其它什么广告的。这与其它的JIMDO网站是有些不同,我看到其它的网站上还有些其它的内容,可是在我的网站上没有,除了你现在能看到的JIMDO图标及一个“添加为好友”外,什么都没有了。我想原因是这样的吧:原先本站在一次偶然的机会,被JIMDO网站评选为“JIMDO十大特色网站”之一,故奖励为一年期的专业网站,同时这广告盒也去除了。后奖励期过后,因无法付费,就又转回为普通的免费网站,JIMDO就又加上了这个广告盒,但添加后的广告盒一直就是现在这样,内中除你现在能看到的以外,就是空白,并没有了其它的内容。我不知你所称的gg广告是什么?

  • #18

    上海闸北骑游队 (Tuesday, 10 August 2010 21:42)

    我看了一些其它的站,你所称的gg广告,是不是指那一段五行的文字?可是自从本站转回为免费站后,一直没有这段文字的。正因为空白太多,我才想将其缩小的。

  • #19

    诸葛草帽 (Tuesday, 10 August 2010 21:48)

    回复上海闸北骑游队:呵呵,原来贵站这么厉害啊,这些情况我不了解,贵站比较特殊,应该没有问题了

  • #20

    上海闸北骑游队 (Wednesday, 11 August 2010 13:26)

    这不是我们网站“厉害”,只不过当时占了“老年骑游队”这个特殊题材的光,才被选为“有创意”。要说创建网站的经验与技巧,怎能比得上老兄你呢!在这里我们也要感谢网友们的帮助和指导。特别是“老胡”、“点子之家”、“小盗花园”、“网型网秀”、“网上邻居”、还有你的帮助指导。在我遇到问题与困难时,你们都能无私、热情、不厌其烦地伸出援助的手!真心地谢谢!

  • #21

    诸葛草帽 (Wednesday, 11 August 2010 16:08)

    回复上海闸北骑游队:呵呵,客气了

  • #22

    上海闸北骑游队 (Thursday, 02 September 2010 08:15)

    看来JIMDO的广告盒是不允许修改的了!前些日子我将广告盒缩小并加上了背景,今天忽然发现又被改为原来的样子了,这应该是JIMDO的手笔吧。这又何必呢,我的修改又没有妨碍它的广告呀!

  • #23

    诸葛草帽 (Thursday, 02 September 2010 21:14)

    回复上海闸北骑游队:我去你那里看了一下,你自定义都广告盒还在,很漂亮!

  • #24

    上海闸北骑游队 (Thursday, 02 September 2010 23:14)

    诸葛你好!我不知你是用哪种浏览器看的?经你一说,我又重新看了一下,发现不同浏览器的结果竟然不一样。我试用了三种浏览器,用傲游时看到的还是自定义的广告盒,可用IE及360安全浏览器看时已被取消了自定义广告盒(我平时一直用360浏览器),不知是何原因?不知你能解释一下吗?

  • #25

    上海闸北骑游队 (Thursday, 02 September 2010 23:19)

    另外,我发现你的评论栏似乎有些变化:以前写评论要密码登录,现在却不需要了。是这样吗?方便了很多!

  • #26

    诸葛草帽 (Friday, 03 September 2010 10:34)

    回复上海闸北骑游队:呵呵,网站在不同浏览器下出现不同结果的原因应该是兼容性的问题,各个浏览器对代码的执行标准并不一致,所以效果也有所不同,要保证网页效果就要尽量使用兼容性好的代码代码并且经过调试,很多浏览器像360浏览器就是ie内核,遨游听说是双核的。另外关于jimdo评论问题我没有做修改,只是留言时jimdo可以识别类似xxx.jimdo.com的格式,你最近的留言填写的是zbqyd@163.com,所以没有提示输入密码。

  • #27

    上海闸北骑游队 (Friday, 03 September 2010 11:01)

    可是我原先修改时是在360浏览器内做的,修改后也能显示缩小的自定义广告盒,可现在怎么就会变成修改前的状态了呢?对不起,我是不是有点钻牛角尖?

  • #28

    上海闸北骑游队 (Friday, 03 September 2010 11:05)

    我同时修改的芷江骑游队网站(http://zjqyd.jimdo.com/)也是出现同样的情况。

  • #29

    诸葛草帽 (Friday, 03 September 2010 11:22)

    回复上海闸北骑游队:呵呵,怎么说呢,我这里ie内核浏览器看你的网站修改正常,其他浏览器没有效果,这个好像没有什么太好的方法解决

  • #30

    上海闸北骑游队 (Friday, 03 September 2010 16:03)

    我回忆了一下,是否是升级360浏览器引起的?上述改变是昨天发生的,而昨天刚将360浏览器升级到了最新的3.3正式版。

  • #31

    上海闸北骑游队 (Friday, 03 September 2010 16:08)

    网型网秀8月16日的博客http://wxwx.jimdo.com/2010/08/16/hdphoto/,介绍了JIMDO “网店商品”元素的别样用法,很有意思,你看过吗?

  • #32

    诸葛草帽 (Saturday, 04 September 2010 07:56)

    回复上海闸北骑游队:听你这么一说我也把我的360浏览器升级了一下,发现工具里有一项“启用高速渲染模式”,我理解应该是调用非ie内核加快浏览速度,而且取消那项之后你的网站广告盒就是有背景的了,所以你做的修改在ie内核下没有问题。网型网秀的关于图片局部放大的文章我有看过,想法很不错!

  • #33

    上海闸北骑游队 (Sunday, 05 September 2010 22:42)

    又想来请教一个问题:在系统模板中,是否可将广告盒位移至页面的底部且是一个横向的长方形?

  • #34

    诸葛草帽 (Sunday, 05 September 2010 22:48)

    回复上海闸北骑游队:感觉应该可以,改天试试看,如果成功的话我会到贵站留言告知。

  • #35

    上海闸北骑游队 (Monday, 06 September 2010 20:04)

    最近碰到一个怪现象:我的IP号是注册在上海的,可是在我翻阅本网站各网页后,明明是本人的浏览记录,可是出现在浏览记录上的却是一个北京的IP号,这现象已出现多次。不知是怎么一会事?是不是碰到黑客了?或是我的电脑已被这个北京的IP号控制了?

  • #36

    诸葛草帽 (Monday, 06 September 2010 20:50)

    回复上海闸北骑游队:你上网方式是什么?你有没有使用类似代理的软件或者设置呢?其实很多原因可以出现这样的现象,不必太惊慌,如果你对自己电脑不放心可以全盘杀下毒,卡巴斯基、NOD32、小红伞、Avast和微软的mse都是不错的

  • #37

    上海闸北骑游队 (Monday, 06 September 2010 22:17)

    我一般都用360安全浏览器上网。偶而也用IE8及傲游浏览器上网。我用360杀毒软件杀过,结果表明没有病毒。你做的那个广告盒,我试过了,在傲游中正常,在360中需要去除工具栏中的“启用高速渲染模式”才能正常,而用IE8时则盒的位置不对,它不是在底部,而是在网页的上半部。另外,我用你的源代码(例于后面)再在这三种浏览器中试验时,盒的位置均出现在上部。(难道是我节录的源代码有误?)
    <style type="text/css">
    /*<![CDATA[*/
       <!--
    #container{position: relative; top: 0px;left:0px;}
    #jimdobox
    {
    display:block!important;
    width:570px!important;
    height:100px!important;
    position:absolute!important;
    left: 340px!important;
    bottom:50px!important;
    }
    div#systemWorking{
    display:block!important;
    width: 100px!important;
    height:100px!important;
    position:absolute!important;
    left: 160px;
    bottom:50px;
    }
    div#jimdobox hr {
    display:none;
    }
    -->
    /*]]>*/
    </style>

  • #38

    诸葛草帽 (Monday, 06 September 2010 22:33)

    回复上海闸北骑游队:你说的这个问题我之前已经知道了,代码没有错,360浏览器的新版加入了调用ie8内核的高速渲染模式,据我估计这个模式导致ie8兼容性视图设置修改,在ie6和ie8兼容性视图中比较正常,我正在找解决方法

  • #39

    wxyz0001 (Friday, 10 September 2010 07:45)

    上面代码中的bottom:50px是不是相对定位?可以用绝对定位吗?

  • #40

    诸葛草帽 (Friday, 10 September 2010 08:38)

    回复wxyz0001:你的试验站?呵呵,上面的那个bottom:50px是绝对定位,但是由于用户显示器的宽度不确定,所以需要在CSS中的container下面加入position: relative; top: 0px;left:0px;