Jimdo系统升级,全面支持HTML5-兼谈Jimdo新广告的美化及自定义

      从2013年六月下旬起,在编辑Jimdo网站时,经常出现一些问题,有不少朋友在本站留言提了这些问题。根据以往的经验,这种时候,除了网络的原因,一般都是Jimdo的系统在升级,也就是说,Jimdo将会做一些功能上的增删或改进。果然,从七月份起,我们看到Jimdo做出了两个重大变革:一是停止支持IE8 的兼容模式,全面支持HTML5,二是免费的Jimdo网站摒弃传统的广告盒,将新广告以简洁的方式放到页脚部分。

      关于Jimdo停止支持IE8 的兼容模式,全面支持HTML5,关注Jimdo的站长,应该会注意到Jimdo系统于6月20日前后所发出的邮件。它明确指出,为了Jimdo发展的需要,从2013年7月1日起,Jimdo将不再支持IE8的兼容模式,全面支持HTML5;从2013年7月15日起,Jimdo将完全停止支持IE8的兼容模式。有朋友反应本站介绍过的自动分页代码在部分版本的IE浏览器上失效,就是这个原因。当然,在最新版本的IE浏览器,以及Safari浏览器、谷歌Chrome、Mozilla Firefox等主流浏览器上,自动分页代码仍然有效。

      以下是本人收到的Jimdo系统邮件原文:

Starting July 1st, 2013, Jimdo will no longer support the Internet Explorer 8 compatibility mode. If your Jimdo site has a Widget / HTML element, a custom <head> section, or a Custom Layout, you may need to make changes.

Although it is difficult to leave old technologies behind, we feel that it is necessary to discontinue support for the Internet Explorer 8 compatibility mode in order to make Jimdo faster and more modern. As a direct result of this change, our layouts can now support all HTML5 tags, and this paves the way for enhancing the look and functionality of your website. 

Recent versions of Internet Explorer currently display some Jimdo websites through a compatibility mode. Once we disable support for this compatibility mode, websites with Widget / HTML elements, custom <head> sections, and Custom Layouts may appear differently in later versions of Internet Explorer.

What you need to do.

On July 1st, 2013, confirm that your site displays correctly in modern browsers: Google Chrome, Mozilla Firefox, Safari, and the latest version of Internet Explorer. We recommend that you use Chrome, Firefox, or Safari when editing your Jimdo site.

If you have previously used code specifically designed to ensure compatibility with Internet Explorer 8, you will need to update this code to meet the latest standards.

If you need to see how your site was previously displayed, you will be able to temporarily turn on the compatibility mode by clicking Settings > Jimdo > Additional Elements. Confirm in the popup that you would like to activate the compatibility mode.

On July 15th we will completely deactivate the compatibility mode—please make sure that any necessary changes have been made to your site by that date.

We're here to answer questions.

If you have questions about the changes that we are making to Jimdo, please get in touch with our support team. Note, however, that we do not have the resources to help modify code on a case-by-case basis.

The Jimdo Team

 

      关于Jimdo新广告,已在《Jimdo免费版网站将摒弃广告盒,启用新的广告形式》做了简单介绍。说实话,Jimdo的这次改进,已经使广告相当弱化了。从形式上看,免费版和专业版、商业版已没有太大的区别(当然在功能上,似乎较以前拉开了档次)。换句话说,较之以前的广告盒,现在的广告形式已经可以忽略它的存在。鉴于某些追求完美的Jimdo爱好者(当然也包括本人),企望对它采取某些手术,对它进一步美化或曰“忽略”,本人也研究了一下,下面做个简单介绍。

一、新广告的启用方法:

      对于免费的Jimdo网站,系统并不会自动去掉传统的广告盒,而启用新广告。这也许是Jimdo告诉我们那些久不更新的免费网站的一个方法吧。根据本人的观察及实践,只要我们对自己的免费网站做出任何的更新,也就是登录后做出任何更改,哪个添加一个元素再删除它,即会启用新的广告。

二、新广告的美化与自定义:

      新广告的位置是系统设定的,位于页面的最下方(页脚的左下方),这对于网页内容的加载是最合理的了。为了对它研究,我们先看下网页源码,在每个网页的下方,我们会看到下面的代码:不同的语言,会调用不同的语言(如中文,其代码为:zh_CN),其余部分完全一样。

<script type="text/javascript" src="http://partner.googleadservices.com/gampad/google_service.js">
</script>
<script type="text/javascript">
    GS_googleAddAdSenseService("ca-pub-0286599533665329");
    GS_googleEnableAllServices();
</script>
<script type="text/javascript">
    GA_googleAddSlot("ca-pub-0286599533665329", 'zh_CN_Footer_Ad');
</script>
<script type="text/javascript">
    GA_googleFetchAds();
</script>
<script type="text/javascript">
    GA_googleFillSlot('zh_CN_Footer_Ad');
</script>

      上面这个JS代码,只决定了所生成的广告内容,对于我们所关心的关于广告的美化与自定义没有一点用处。那好,我们换个方法,用开发工具,比如 Firefox 浏览器的扩展工具 Firebug 查看一下,即可捕获到以下内容:

<div class="jimdo-free-footer-ad">
        <a class="jimdo-footer-branding pull-left" href="http://adclick.g.doubleclick.net/aclk?sa=L&ai=BFjUUE07lUaC7GY2FkgXC54CICaH-rZ8DAAAAEAEg1e6GBjgAWJGtj4ZXYJ351IG0BbIBDWpkbS5qaW1kby5jb226AQlnZnBfaW1hZ2XIAQnaARVodHRwOi8vamRtLmppbWRvLmNvbS-YAmSpApcg97Eh_7U-wAIC4AIA6gIPemhfQ05fRm9vdGVyX0Fk-ALy0R6QA7AJmAPIBqgDAeAEAaAGFg&num=0&sig=AOD64_2vTEMsf8QTgQ-wOjdXjP7m-A8Zuw&client=ca-pub-0286599533665329&adurl=http://www.jimdo.com/?utm_source=own_ads_footer&utm_medium=text&utm_campaign=zh">Jimdo</a>
    <p class="pull-left">
         <strong>喜欢这样的网站?</strong>
         创建属于自己的Jimdo网站。登陆
       <a class="jimdolink" href="http://adclick.g.doubleclick.net/aclk?sa=L&     ai=BFjUUE07lUaC7GY2FkgXC54CICaH-rZ8DAAAAEAEg1e6GBjgAWJGtj4ZXYJ351IG0BbIBDWpkbS5qaW1kby5jb226AQlnZnBfaW1hZ2XIAQnaARVodHRwOi8vamRtLmppbWRvLmNvbS-YAmSpApcg97Eh_7U-wAIC4AIA6gIPemhfQ05fRm9vdGVyX0Fk-ALy0R6QA7AJmAPIBqgDAeAEAaAGFg&num=0&sig=AOD64_2vTEMsf8QTgQ-wOjdXjP7m-A8Zuw&client=ca-pub-0286599533665329&adurl=http://jp.jimdo.com/?utm_source=own_ads_footer&utm_medium=text&utm_campaign=zh">www.jimdo.com</a>

   </p>
</div>

      以上代码只是一种形态,刷新页面的话,相关内容是会变化的,但对于我们来说已经足够,我们只要知道相关的CSS的类名就行了。

      查看Jimdo系统CSS文件(Web.css)可以知道,相关设置如下:

.jimdo-free-footer-ad{margin-top:20px;display:inline-block;width:100%;position:relative}

.jimdo-free-footer-ad p{border-left:1px solid #444;

border-left:1px solid rgba(0, 0, 0, 0.5);box-shadow:-1px 0 0 #EEE;

box-shadow:-1px 0 0 rgba(255,255,255,0.3);padding-left:10px;width:auto;

line-height:2em; margin-left:84px}

.jimdo-free-footer-ad>a{display:inline}

#contentfooter a.jimdo-footer-cta-btn{display:inline-block;text-align:right;

white-space:pre-wrap;width:25%;line-height:2em}

.jimdo-free-footer-ad.jimdo-kddi-footer{min-height:30px}

.jimdo-kddi-footer .jimdo-footer-branding{background-image:url(/s/img/cc/jimdologo_kddi_footer.png);height:30px;width:178px}

.jimdo-free-footer-ad.jimdo-kddi-footer>p{margin-left:188px}

.pull-left{float:left}

      相信对HTML和CSS知识有点了解的朋友,看了上面的代码应该就明白了,这里不做更多的解释。只指出两点:

       1、 “.jimdo-free-footer-ad” 是定义整个广告的,可以给它加边框,设底色,背景图片等;

       2、“.jimdo-kddi-footer .jimdo-footer-branding ”是设置Jimdo logo图片的。至于如何美化和自定义,大家可以根据自己的喜好而定。

三、关于本站目前的广告自定义:

      由于本站的页脚部分是居中放置的,当然希望将广告也放到中间部分,加上中文的广告文字较少,放到一起会更协调一些。由于广告部分采用了绝对定位,仅修改它的CSS是很难实现的。最后通过修改页脚部分的CSS,在大部分主流浏览器上,如Google Chrome、Mozilla Firefox、Opera等,实现了居中的效果。而IE系列,测试了IE8,通过,IE6不行,IE7没有测试。

相关文章

Jimdo系统升级,全面支持HTML5-兼谈Jimdo新广告的美化及自定义 (Mon, 15 Jul 2013)
>> Read More

Jimdo自定义模板揭密:Jimdo首页及博客页面CSS的独立设计方法 (Tue, 12 Mar 2013)
>> Read More

Jimdo网站上能正常显示多大尺寸的图片 (Fri, 07 Dec 2012)
>> Read More

利用Jimdo分栏元素,改造Jimdo博客结构的一种方法 (Sat, 06 Oct 2012)
>> Read More

Jimdo网站安全模式登录 - 删除Jimdo网站错误代码的好方法 (Thu, 27 Sep 2012)
>> Read More

Jimdo博客通过RSS直接调用中文分类博文的方法 (Fri, 07 Sep 2012)
>> Read More

Jimdo博客中日期显示不兼容IE6问题的解决方法(含CSS代码) (Fri, 10 Aug 2012)
>> Read More

Jimdo博客中日期显示的多样化及在IE6中存在的问题(含CSS代码) (Sat, 23 Jun 2012)
>> Read More

Jimdo“分栏”元素嵌套“博客显示”的方法及其CSS自定义与美化 (Sun, 06 May 2012)
>> Read More

Jimdo博客实现段落缩进两个字的CSS代码 (Thu, 22 Mar 2012)
>> Read More

Write a comment

Comments: 6
  • #1

    Yjb.a person (Tuesday, 16 July 2013 19:46)

    邻居请问 为什么我给.jimdo-free-footer-ad 加text-align:center; 它还是不能在中间呢?

  • #2

    网上邻居 (Thursday, 18 July 2013 17:34)

    Yjb.a person:
    “text-align:center;”只是文本居中对齐,而Jimdo的广告是JS生成的,不是单纯的文本。同时,现在Jimdo新广告置于页脚之中(下方),一定要设置“footer”居中才行,建议用以下代码试试:
    #footer{clear:both;width:**px; margin:0 auto; text-align:center;}

  • #3

    Yjb.a person (Monday, 22 July 2013 20:17)

    感谢邻居的帮助, 我发现只要退出登录后广告就会处于中间。

  • #4

    鲜活 (Thursday, 25 July 2013 02:58)

    现在国内貌似无法申请免费jimdo了

  • #5

    网上邻居 (Sunday, 18 August 2013 01:55)

    鲜活:
    使用中国大陆的IP确实申请不到免费的Jimdo了,使用国外的IP,去其他十一种语言的官网,还是可以申请的。

  • #6

    杭州网站建设 (Wednesday, 24 June 2015 10:19)

    会代码真厉害