利用Jimdo分栏元素,改造Jimdo博客结构的一种方法

发表日期:

2012-10-06

标签:

Jimdo技巧

blog

网上邻居


      最近逛了不少国外优秀的Jimdo网站,从内容到模板,都有很多值得学习的地方。其中有个博客,也是用的Jimdo平台,但是看上去和一些独立博客没什么二样,如上截图。

      这是一个二分栏布局,上面的截图是主栏的博客部分。但是,我们看到,在博文的左边,又单独生出了一个侧栏,显示博客发表的时间,标签等。通过下面的截图,可能看的更全面一点。

      它这个博客侧边栏是怎么做出来的呢?分析了一下它的代码,原来采用了这样的方法:

      1、博客标题部分,将博客显示和博客正文里的“时间”、“分类”全部屏蔽掉(display:none),只保留博客标题,并使其右移(padding-left: 107px)。同样的道理,在博客显示页面,“查看全文”和“评论”也要做相应的右移。

      2、博客正文里,全篇使用Jimdo分栏元素,第一个元素左栏写时间、标签等,右栏写正文。

      本文就是按这种方法所做的演示,在这里完全按照设想进行的。至于博客显示页面,由于和全局有牵连,没做演示。感兴趣的朋友可以去原站看看,除了本文所述的博客改造外,还有很多实用的内容,且基本上都有相应的网站进行演示。网址:

      http://www.hembarevskyy.com/blog/

      这种手动操作的方法略显复杂,不过,由于CSS里对样式进行了设定,也就是写博客的时候多了添加分栏这一步骤,再说,左边还可以加些广告等内容。感兴趣的朋友可以试试。


Write a comment

Comments: 2
  • #1

    网型网秀 (Saturday, 06 October 2012 11:24)

    这就是我所喜欢Jimdo的原因,在这里,可以自由的设计,基本上想得到的都是能实现的。目前还在研究Jquery,向国外的朋友学习。
    可惜国内Jimdo的观众太少了。。。

  • #2

    网上邻居 (Saturday, 06 October 2012 17:58)

    网型网秀:
    本文介绍的网站,和Jimdo相关的博文后面,基本上都用一个免费的Jimdo网站进行代码演示,是一个学习Jquery的好地方。