介绍一个仿腾讯微博的二分栏博客模板代码 - 含Jimdo广告盒自定义

      好久没写东西了,前几天把这个模板做了点调整。有的朋友也看出来了— 有点仿腾讯微博的样子。形式上有点像,背景图片和背景色确实是用它的,不过,圆角的效果是用图片做出来的,而腾讯用的是代码,用IE6看还是直角,另外,版面宽度是900px,而腾讯微博是810px。

      还有重要的一点,下面的这个模板代码中,我首次公布了Jimdo广告盒的自定义代码。其实很多朋友都掌握了Jimdo广告盒的自定义,由于目前Jimdo好象摒弃了Google广告,我这里用了最简单的自定义。

      这个模板代码比较简洁,或者说比较简单,仅供初学者学习,呵呵,高手请飘过...

HTML:

<div id="container">
    <div id="header">
        网上邻居
    </div>

    <div id="headerb">
        — Jimdo 爱好者
    </div>

    <div id="navigation">
        <var>navigation[1|2|3]</var>
    </div>

    <div id="content">
        <div id="left">
            <div class="gutter">
                <var>content</var>
            </div>
        </div>

        <div id="right">
            <div class="gutter">

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

            </div>
        </div>
    </div>

    <div id="footer">
         <var>footer</var>
    </div>
</div>

CSS:

body{padding: 0px 0px !important; background:#73CFF1 url(http://u.jimdo.com/www3/o/sbdb78c758da45054/userlayout/img/bg.jpg) no-repeat center top;}


#container{position:relative; top:0px;left:0px;margin:0 auto;width:900px;}

/* head部分 */
#header{float:left;width:200px;padding:25px 0px 15px 0px;color: #fff;
font:bold 42px/130% 楷体_GB2312,黑体;height:48px;}
#headerb{float:left;width:200px;padding:55px 0px 10px 5px;color: #ff9; font: 13px/100% Verdana,宋体;}


#content{float:left; background: url(http://u.jimdo.com/www3/o/sbdb78c758da45054/userlayout/img/2.png) repeat-y;margin:0px auto;text-align:left;width:900px;}

/* 左部主栏 */
#left{float:left; margin:0 auto; width:665px;padding-top:10px;}

/* 右侧栏 */
#right{float:right; width:230px;}

/* 导航菜单 */
#navigation{float:left;width:890px;padding: 10px 0px 10px 10px;background: url(http://u.jimdo.com/www3/o/sbdb78c758da45054/userlayout/img/menu.png) no-repeat;border-bottom:1px solid #ccc;}

/* footer部分 */
#footer{clear:both;width:880px;background: url(http://u.jimdo.com/www3/o/sbdb78c758da45054/userlayout/img/3e.png) no-repeat;
height:30px;margin-top:0px;padding:10px 10px 5px 10px;margin-bottom:10px;}
#footer a{font:normal 12px/140% Verdana, 宋体;color: #888;text-decoration: none;}
#footer a:hover {color:#000; text-decoration: none;}


#left .gutter{padding: 0px 10px 0px 10px;}
#right .gutter{padding: 0px 8px 0px 2px;}


/*  自定义Jimdo广告盒 */
#userbox #jimdobox {float:left;margin:8px 0px;border:0;width:210px;height:100px;

background:url(http://u.jimdo.com/www3/o/sbdb78c758da45054/userlayout/img/jimdo.png) no-repeat;}   
#userbox #jimdobox img#jimdologo{width:80px;}   
#userbox #jimdobox SPAN, #userbox hr, #userbox .addfriend{display: none;}
/* 导航菜单样式 */
ul.mainNav1{margin:0;padding: 0;}
ul.mainNav1 li{float:left;display:inline; margin:0; padding: 0;}
ul.mainNav1 li a{font:bold 12px/140% Verdana, 宋体;text-decoration: none;

display: block;color:#333;border-right:1px solid #ccc;}
ul.mainNav1 li a {padding:0px 4px 0px 6px;}
ul.mainNav1 a:hover,ul.mainNav1 a.current{color:#f00;}

几点说明:

      1、如果有朋友感兴趣拿去试验,可以将上述代码复制到“自定义设计模版”下的“HTML”和“CSS”下,并保存确定,即可看到效果。

      2、如果想长期使用,请在浏览器地址栏里复制上述红色的图片地址,并回车,把图片下载到你的电脑里,改名后从“文件”里上传到你的Jimdo网站,再把CSS里的图片地址做相应更改。因为上述图片在我的Jimdo网站上,我不敢保证我永远保存它们。

      3、上述代码只是一个基本的模板布局代码,仅供实验之用,可以根据需要任意修改。

PS1:关于布局图片的下载、上传和调用

      以上CSS中的布局图片,目前是放在我这个站空间的,做试验的朋友,只要复制以上代码就行。但是,我以后有可能更改模板,所以我不敢保证这些图片一直保留。所以建议使用的朋友,将它们下载到自己的电脑,然后再上传到自己的网站空间。

      有些朋友可能初次接触Jimdo网站,下面尽量详细说明一下。

1、图片的下载

      凡是上属CSS代码中,红色地址的图片,都是这个模板中的布局图片,共计五张图片。它们分别为:

http://u.jimdo.com/www3/o/sbdb78c758da45054/userlayout/img/bg.jpg 

http://u.jimdo.com/www3/o/sbdb78c758da45054/userlayout/img/2.png

http://u.jimdo.com/www3/o/sbdb78c758da45054/userlayout/img/menu.png

http://u.jimdo.com/www3/o/sbdb78c758da45054/userlayout/img/3e.png

http://u.jimdo.com/www3/o/sbdb78c758da45054/userlayout/img/jimdo.png  

      下载的方法是,将以上五个图片地址分别复制到浏览器地址栏里,然后回车,页面上就会显示相应的图片,然后在图片上点右键,通过“图片另存为”就可以将图片保存到你的电脑里了。文件名(包括扩展名)不要更改。

2、图片的上传

      在“自已的版面设计”下,有一个“文件”工具菜单,点击后出现以下界面:

      通过“浏览”和“上传”就可以将上述布局图片上传到你的网站上了。

三、CSS代码的修改

      我上面给出的CSS代码中,图片都是用的绝对地址,如果图片上传到了你的网站上,则需要修改地址,即改为:background: url(图片文件名-包括扩展名),比如 background: url(http://u.jimdo.com/www3/o/sbdb78c758da45054/userlayout/img/2.png),需改为 background: url(2.png),其余类推。

PS2:下载说明

      可能开始有一些朋友拿这个模板代码做了试验,由于后来我更改了我的模板,删除了布局图片,而有些朋友没按上面的说明去做,可能造成了一定的影响,在此说声抱歉。

      下面给出本文完整的代码和布局图片,感兴趣的朋友可以按重新给出的代码和图片再试试,如果有什么问题,可以继续留言交流。

仿腾讯微博的二分栏博客模板.rar
compressed file archive 6.6 KB
PS3:仿腾讯微博二分栏960博客模板下载

       应部分朋友的要求,这里再提供一种版面宽度为960的模板,它包括 CSS+HTML 代码及布局图片,还提供了一张效果图。

仿腾讯微博960模板.rar
compressed file archive 108.0 KB

Write a comment

Comments: 19
  • #1

    独星 (Saturday, 11 December 2010 01:46)

    有点怪异的说~~

  • #2

    3m3 (Saturday, 11 December 2010 13:48)

    完全公开分享,邻居大方。代码简洁、有条理,可以作为自己写代码的重要参考。另今天的广告盒好象连文字也不显示了。

  • #3

    Suitear (Saturday, 11 December 2010 14:07)

    不错~~

  • #4

    诸葛草帽 (Saturday, 11 December 2010 16:29)

    代码够简洁

  • #5

    网型网秀 (Saturday, 11 December 2010 17:56)

    很不错,可惜我没时间去琢磨

  • #6

    tx021 (Sunday, 12 December 2010 11:39)

    不错

  • #7

    淘宝600家园 (Sunday, 12 December 2010 21:10)

    之前我也有想过用这个模板的,更喜欢用灰色的背景~~~~~

  • #8

    网上邻居 (Thursday, 16 December 2010 07:34)

    淘宝600家园:
    我也比较喜欢灰色的,呵呵,有备案:http://jdm2.jimdo.com

  • #9

    verywoman (Tuesday, 28 December 2010 20:41)

    谢谢,很好

  • #10

    网上邻居 (Wednesday, 29 December 2010 18:45)

    verywoman:你好!
    谢谢支持!
    这是一个博客模板,用作淘客网站的话,至少版面尺寸等还是不合适的。用IE6看你的网站有点接受不了的...

  • #11

    verywoman (Friday, 31 December 2010 12:30)

    邻居你好,我把图片下载下来了,已经上传至文件里,但找不到我的图片网址

  • #12

    zhqy (Saturday, 01 January 2011 19:16)

    不错借用了,不过:如果想长期使用,请在浏览器地址栏里复制上述红色的图片地址,并回车,把图片下载到你的电脑里,我怎么不会找啊!木瓜一个哦!哈哈

  • #13

    网上邻居 (Sunday, 02 January 2011 00:42)

    verywoman、zhqy:
    就你们二位的问题,文后写了补充。

  • #14

    失色天空 (Saturday, 08 January 2011 20:10)

    邻居,,用了你的模板。。,,学习ING。。。。谢谢~~~可可

  • #15

    mqflfw (Wednesday, 23 March 2011 22:17)

    我把登陆密码发给你,你能帮我改一下吗

  • #16

    网上邻居 (Wednesday, 23 March 2011 22:30)

    没问题,请发到我的邮箱:jdm_@sohu.com,顺便说下你想要的效果。今晚可能没时间了,会尽量帮你改的,我白天没时间上网,可能这个周日。

  • #17

    华哥娱乐 (Friday, 18 May 2012 22:43)

    很好,我拿去用了啊

  • #18

    egou (Sunday, 07 October 2012 09:44)

    如果广告盒在左边原来的位置上,修改大小,用了你的代码,造成版面错位,那又怎么改代码呢

  • #19

    晨曦骄阳 (Monday, 24 June 2013 06:04)

    请教 怎么去广告盒中间白线 。和自定义广告盒内字体?