Jimdo广告盒的自定义方法 - Jimdo广告盒缩小、横放及美化等

      记得当初学习Jimdo的动力之一,就是Jimdo广告盒的自定义,即它的拆分和重组,因为它的样式确实不怎么好看,同时占用的空间太多。当初有不少朋友跟网上邻居咨询过自定义问题,鉴于广告盒是Jimdo免费版的重要组成部分,一直没有直接公开过这方面的内容。目前这个问题好像不是那么敏感了,而且很多朋友也掌握了这方面的内容,这里介绍一下广告盒的自定义方法,谨供初学的朋友参考。

友情提醒:

      本文内容仅作为技术交流,网上邻居不承担您使用后可能面临的一切后果,比如遭到Jimdo官方封网等,请谨慎!

      Jimdo广告盒的内容一直在变化,从当初包含Google广告等,到现在只剩下Jimdo自身的广告语。不变的是它的尺寸,一直保持为182px*356px。下面将当初的Jimdo广告盒和现在的做个对比:

Pages to the People

添加为好友

你喜欢你所见的吗?
你也可以拥有 - 只需创建您自己的免费Jimdo网站。请浏览 cn.jimdo.com。注册后就可以开始新奇的旅程了!

- 广告 -
Pages to the People

      这是网上邻居通过代码模拟的,右边这个是现在的广告盒,它的广告词有四种,只要刷新页面,它们就会随机地交替出现。分别为:

你喜欢你所见的吗?

你也可以拥有 - 只需创建您自己的免费Jimdo网站。 请浏览 http://cn.jimdo.com

你也可以拥有自己的网站,
令人惊叹的设计,丰富的建站功能,现在就加入 Jimdo! 来创建属于你自己的网站

你也需要建网站吗?
立即来Jimdo创建免费专业网站! 在这里关注我们

喜欢你所见的吗?
你也可以拥有--来Jimdo立即创建自己的网站!

      它实际上是由以下的Google JS代码生成的:

<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", "Jimdo_CN_Userpage-Box_170x240");
</script><script type="text/javascript">
                  GA_googleFetchAds();
</script><script type="text/javascript">
                  GA_googleFillSlot("Jimdo_CN_Userpage-Box_170x240");
</script>

      通过对比可以发现,老式的广告盒内容还比较多,看上去不是怎么太空旷,而现在的广告盒,空白太多,字体也小,似乎更难看了。

      闲话少叙,下面进入正题。

一、Jimdo广告盒的自定义方法:

      要自定义Jimdo广告盒,需要会自定义模板,相关内容可以参阅网上邻居以前的博文,这里不再重复。

      在CSS里,广告盒的选择器名为 jimdobox,我们要对它进行自定义,前面需要加上一个自定义名称,使它成为后代选择器,比如我一般是这样用的:

#userbox #jimdobox {属性及值}

      在自定义模板的HTML里,自定义的代码是:

<div id="userbox">
    <var>sidebar</var>
</div>

二、Jimdo广告盒的几个自定义样式:

      自从学习Jimdo以后,网上邻居曾经尝试过多种方法,这里就不一一列举了,只介绍几种基本样式。

1、Jimdo广告盒的缩小(减小高度)

      由于现在广告盒内内容太少,减小高度好像是最迫切也是最简单的方法,比如改成下面这样,看上去就舒服多了。

Pages to the People

你喜欢你所见的吗?
你也可以拥有 - 只需创建您自己的免费Jimdo网站。 请浏览 http://cn.jimdo.com

CSS代码:

#userbox #jimdobox {float:left;height:150px}

      怎么样,自定义广告盒还是很简单的吧?

2、Jimdo广告盒的缩小(拉倒横放)

      出于布局的需要,很多朋友都喜欢将Jimdo广告盒横放,网上邻居在开始采用单栏布局时也这么用过,那时候广告盒里有很多内容,用了不少绝对定位等方法进行调整。现在实现起来就简单的多了,只要设置一下Jimdobox的宽度和高度数值即可。

Pages to the People

你喜欢你所见的吗?
你也可以拥有 - 只需创建您自己的免费Jimdo网站。 请浏览 http://cn.jimdo.com

CSS代码:

#userbox #jimdobox {float:left; width:450px;height:120px;}

3、删除Jimdo广告盒的一些内容

      前面的方法只是简单地改变了广告盒的高度和宽度,有时候为了和网站的风格相协调,还想去掉一些无关的内容,比如边框线,水平线,Jimdo口号等,可以进一步缩小它的尺寸。这些做起来也不难,只要明白各个部分的选择器名,用一句"display:none"即可。

      请看实例:

你喜欢你所见的吗?
你也可以拥有 - 只需创建您自己的免费Jimdo网站。 请浏览 http://cn.jimdo.com

CSS代码:

#userbox #jimdobox {float:left;height:120px; border:none}

#userbox #jimdobox span, #userbox hr{display: none}

4、Jimdo广告盒logo图片大小的处理方法

      有时候,出于需要,希望更进一步综小Jimdo广告盒的尺寸,那就只有减小Jimdo logo图片的尺寸,演示如下:

你喜欢你所见的吗?
你也可以拥有 - 只需创建您自己的免费Jimdo网站。 请浏览 http://cn.jimdo.com

CSS代码:

#userbox #jimdobox {float:left;height:120px;}

#userbox #jimdobox span, #userbox hr{display: none}

#userbox #jimdobox img#jimdologo{width:80px}

5、Jimdo广告盒添加背景色或背景图片

      为了和网站的风格相协调,有时候希望Jimdo广告盒能添加背景色或背景图片,这个也是可以的。这里只演示一下背景色的效果。下面的代码中,给出了添加背景图片的方法。

Pages to the People

你喜欢你所见的吗?
你也可以拥有 - 只需创建您自己的免费Jimdo网站。 请浏览 http://cn.jimdo.com

CSS代码:

#userbox #jimdobox {float:left;height:150px;background:#eee url(图片名称,包括扩展名)}

6、Jimdo广告盒添加背景色或背景图片时logo图片的处理方法

      在上面的演示中,由于logo图片是白色的背景,加了背景色或背景图片后,反而显得很难看,网上邻居看到不少网站,目前一直是这样,经过研究,也是有解决的方法的。

      在Jimdo广告盒中,logo是调用这个地址 http://s.jimdo.com//s/img/cc/jimdo-sidebar.gif 的一张图片,实际上,在Jimdo网站上还有一张logo图片,它是透明的,即:http://s.jimdo.com/s/img/cc/login_jimdo.gif。我们只要将它借用到Jimdo广告盒里,就能解决添加背景色或背景图片时所遇到的问题。

      具体做法是,在CSS里,屏蔽掉#jimdobox img#jimdologo,然后在HTML相同位置添加上这张http://s.jimdo.com/s/img/cc/login_jimdo.gif 图片。

Pages to the People

你喜欢你所见的吗?
你也可以拥有 - 只需创建您自己的免费Jimdo网站。 请浏览 http://cn.jimdo.com

CSS代码:

#userbox #jimdobox {float:left;height:150px;background:#eee}

#userbox #jimdobox img#jimdologo{display:none}

HTML代码:

<div id="userbox">

    <img  src="http://s.jimdo.com/s/img/cc/login_jimdo.gif">
    <var>sidebar</var>
</div>

      这里仅仅做个演示,感兴趣的朋友可以试试,也可以看下实际效果:http://jdm2.jimdo.com/

      以上只是简单地介绍了一些Jimdo广告盒自定义的基本方法,其实还有多种方法。有一点应该指出,广告盒的下方,是一个可以在页面上直接编辑的公共区域,这是相当宝贵的资源,一些个人网站或者博客,最好把它利用起来,也就是将布局做成二分栏结构。当然,广告盒和它下方的编辑区,是可以分离的,不一定非要把广告盒放到侧栏上,也可以放到head或footer上去。

Write a comment

Comments: 5
  • #1

    网型网秀 (Tuesday, 01 November 2011 22:42)

    感觉Jimdo官方很妥协,这么久时间也没看到封过哪个屏蔽sidebar的站呢。

  • #2

    网上邻居 (Wednesday, 02 November 2011 06:46)

    呵呵,据我所知,○九年的时候封过很多,Jimdobox方面的、内容方面的,比如中国圆号、诸葛草帽。我的Jimdo好友中,还有不少到现在都一直没有被解封,他们都放弃不用了。现在因为隐藏Jimdobox被封的,确实不多了。

  • #3

    网络斌兵 (Saturday, 25 February 2012 02:01)

    来学习了!

  • #4

    馨雨_淘宝网_品牌网络零售商圈 (Wednesday, 23 May 2012 15:16)

    看不懂呀

  • #5

    wlp (Friday, 03 July 2015 12:31)

    http://www.guccihandbags.com.co/
    http://www.gucci-outlet.in.net/
    http://www.gucci--outlet.com.co/
    http://www.guccishoes.net.co/
    http://www.guccishoes.us.org/
    http://www.hermesbags.com.co/
    http://www.hermesbirkin.com.co/
    http://www.hermesoutlet.net.co/
    http://www.hollister.us.org/
    http://www.hollisterclothing-store.in.net/
    http://www.insanityworkout.net.co/
    http://www.iphone-cases.us/
    http://www.ralphlaurenpolo.in.net/
    http://www.ray-ban-outlet.us.com/
    http://www.raybans.us.org/
    http://www.rayban-sunglasses.org.uk/
    http://www.rayban-sunglasses.us.org/
    http://www.raybansunglassesoutlet.net.co/
    http://www.raybanwayfarer.in.net/
    http://www.replicahandbags.com.co/
    http://www.replicawatches.us.com/
    http://www.retro-jordans.com/
    http://www.rolex-watches.me.uk/
    http://www.rosherun.org.uk/
    http://www.rosheruns.us/
    http://www.salvatoreferragamo.in.net/
    http://www.soccer-shoes.org/
    http://www.softball-bats.us/
    http://www.suprashoe.net/
    http://www.swarovskicrystal.com.co/
    http://www.swarovskijewelry.com.co/
    http://www.swarovski-uk.org.uk/
    http://www.the-northface.com.co/
    http://www.the-northface.in.net/
    http://www.thenorth-face.org.uk/
    http://www.thenorthface.us.org/
    http://www.thenorthfacejackets.in.net/
    http://www.thomassabo-uk.org.uk/
    http://www.tiffanyandco.net.co/
    http://www.tiffanyjewelry.us.org/
    http://www.tory-burch-outlet.in.net/
    http://www.tory-burchoutlet.us.com/
    http://www.louboutin.jp.net/
    http://www.louis-vuittoncanada.ca/
    http://www.louisvuitton.jp.net/
    http://www.louis--vuitton.org.uk/
    http://www.louisvuitton.so/
    http://www.louisvuittonas.com/
    http://www.edhardy.in.net/
    http://www.levisjeans.com.co/
    http://www.bcbgdresses.net/
    http://www.bebeclothing.net/
    http://www.harrods-london.co.uk/
    http://www.guccishoes.com.co/
    http://www.ralphlaurenoutletonline.us.org/
    http://www.true-religion.com.co/
    http://www.truereligionjeans.net.co/
    http://www.truereligion-outlet.com.co/
    http://www.uggaustralia.net.co/
    http://www.uggboots.net.co/
    http://www.uggbootsclearance.com.co/
    http://www.uggsonsale.com.co/
    http://www.uggsoutlet.com.co/
    http://www.uptocoachoutlet.com/
    http://www.vansshoes.us/
    http://www.weddingdressesuk.org.uk/
    http://www.yogapants.com.co/
    http://www.ugg-boots.us.org/
    http://www.poloralphlaurenoutlet.net.co/
    http://www.burberryoutletonline.ar.com/
    http://www.toms-outlet.net.co/
    http://www.michaelkors.in.net/
    http://www.christianlouboutinoutlet.net.co/
    http://www.toryburchsale.com.co/
    http://www.pradaoutlet.com.co/
    http://www.longchamp-handbags.in.net/
    http://www.longchampoutlet.com.co/
    http://www.chanel-bags.com.co/
    http://www.truereligion-outlet.us.org/
    http://www.abercrombie-and-fitch.us.com/
    http://www.timberlandboots-outlet.net/
    http://www.timberland-shoes.com/
    http://www.tommyhilfiger.net.co/
    http://www.tommy-hilfigeroutlet.com/
    http://www.tomshoesoutlet.com/
    http://www.toms-outlet.in.net/
    http://www.toms-shoes.com.co/
    http://www.hollisterclothing.in.net/
    http://www.newbalance-shoes.org/
    http://www.converse--shoes.net/
    http://www.lululemonoutlet.com.co/
    http://www.nfl-jerseys.in.net/
    http://www.cheapjerseys.us.org/
    http://www.rolex-watches.us.com/
    http://www.rolexwatchesforsale.us.com/
    http://www.p90xworkout.in.net/
    http://www.giuseppezanotti.com.co/
    http://www.maccosmetics.net.co/
    http://www.instyler.in.net/
    http://www.mizunorunning.net/
    http://www.handbagsoutlet.com.co/
    http://www.hilfigeroutlet.in.net/
    http://www.kate-spade.com.co/
    http://www.katespade-outlet.com.co/
    http://www.kate-spades.com/
    http://www.longchamp.us.org/
    http://www.longchamp.com.co/