玩转互联博客

关于BLOG左边字体色的设置

沙叶 — Mon, 05 Jun 2006 01:37:00 GMT

先列出 wow,shalo 这两套皮肤的左边字色配置代码。

在管理-选项-配置-自定义CSS中写代码。

版块标题字颜色：
.leftbox H1 {COLOR: #000000; }
.leftbox H3 {COLOR: #000000; }

版块内容字色：
.leftbox li {COLOR: #000000; }
.leftbox li a {COLOR: #000000; }
.leftbox li a:hover {COLOR: #000000; }
.leftbox li a:visited {COLOR: #000000; }

color:后面请填入你希望的颜色。#000000表示黑，#FFFFFF表示白，#FF0000表示正红等等，颜色代码可以在PHOTOSHOP，DREAMWEAVER，FIREWORKS等软件里查得。

如何给博客侧边栏增加自定义版块

沙叶 — Fri, 02 Jun 2006 11:18:00 GMT

原则上必须通过修改BLOG源程序来实现增加侧边版块，不过我们可以用其他方式来模拟这个效果。

方式一：
只适用于shalo,wow魔兽世界这2套皮肤，其他皮肤未作测试。

进入管理-选项-配置-公告中添加代码，并且保证代码在公告内容的最下面。
代码如下
=============================
</div>
<div class="leftbox">
  <h1>新版块名字</h1>
    <ul>
<li>内容1</li>
<li>内容2</li>
    </ul>
==============================
要加几个版块就把上面的代码相应复制几份就可以。
用此方式添加的版块会依次排在公告区下面。

方式二：
进入管理-连接
通过通过编辑链接分类来模拟自定义版块！具体样式也可以用自定义CSS来控制。
这个方法相信已经有不少朋友在应用。

用此方式添加的版块会依次排在相册区和搜索区之间。

怎样在自己的博客中加入音频/视频

沙叶 — Wed, 24 May 2006 07:32:00 GMT

先进自己的BLOG选择管理 > 选项 > 配置
在“声明”里填以下代码：

=============================================================================================

=============================================================================================

http://www.goxyz.com/aplacenearby.mp3 是示例MP3地址，可替换为自己的MP3，AVI，WMV等文件。这个地址有2处。同时不要忘记把 filename="aplacenearby.mp3" 这句也替换为 filename="你自己的文件名字"

height=20 width=100 为大小控制，如果要播放视频，可以把大小相应改一下。如改为0，就是隐藏了（实际只显示1个1象素的小点）。

<PARAM NAME="ShowControls" VALUE="false"> 把 VALUE=“FALSE”改为VALUE="true" 则显示控制按钮。

互联博客“魔兽世界”SKIN 制作完成

沙叶 — Tue, 28 Mar 2006 01:32:00 GMT

和原先想的还是有点差距，主要是背景的问题，妥协了下。基本上是在"shalo"皮肤的基础上修改的。

存在BUG处：贴超大图，相册浏览大图会撑开皮肤。

互联博客个性化SKIN定制指导 shalo篇

沙叶 — Fri, 17 Mar 2006 13:36:00 GMT

花了2天时间和L胖一起搞了这套皮肤，虽然不是十分漂亮，但个性化定制功能相对于其他几套来说，还是很方便的。

下面我简单得讲下关于这套皮肤的定制功能：

首先请大家进入管理-选项-配置，在皮肤选择项中选择shalo这套皮肤。

[普通篇]
模版的图片都是可以自定义的，比如头部大背景图，导航菜单的底图，左边栏目的背景图，左边栏目名底图，正文标题图，正文时间背景图，BLOG脚注背景图以及BLOG总背景图，等等。
大家只要把DIY好的图片上传到自己的空间中，记录下图片地址，然后依次点管理-选项-配置，在自定义CSS 筐中输入以下代码，即可对shalo皮肤彻底进行改造。

/*BLOG总背景图  */
body { background-image: url(http://blog.cnbb.com.cn/skins/shalo/images/bg.jpg);}
/*头部大背景图参考尺寸890x130 */
#head { background-image: url(http://blog.cnbb.com.cn/skins/shalo/images/title.jpg);}
/*导航菜单的底图 890x30*/
#nav { background-image: url(http://blog.cnbb.com.cn/skins/shalo/images/menubg.jpg);}
/*正文标题图参考尺寸24x21 */
.posttitle{  background-image: url(http://blog.cnbb.com.cn/skins/shalo/images/point.jpg);}
/*正文时间背景图   参考尺寸445x33 */
.itemdesc{ background-image: url(http://blog.cnbb.com.cn/skins/shalo/images/datebg.jpg);}
/*左边栏目的背景图   */
#left{  background-image: url(http://blog.cnbb.com.cn/skins/shalo/images/leftbg.jpg);}
/*BLOG脚注背景图参考尺寸900x60 */
#foot{ background-image: url(http://blog.cnbb.com.cn/skins/shalo/images/footbg.jpg);}
/*左边栏目名底图   参考尺寸220x24 */
.leftbox{  background-image: url(http://blog.cnbb.com.cn/skins/shalo/images/leftbarbg.jpg);}
/*正文背景图*/
#right{ background-image: url(这里写你的图片地址);}

红字部分请填入你想替换的图片地址。

[进阶篇]
如果你不能满足于仅仅对图片的更换，或者你希望对总体配色，字体等来个彻底的更换，那么请你继续往下看。
这一步需要一定CSS知识。
进入自定义CSS筐，配写以下代码：

/*背景色*/
#frame{background-color: #FFFFFF;}
#main{background-color: #FFFFFF;}

body {
font-family: "宋体";     /*总字体*/
font-size: 12px;           /*总字号*/
line-height: 20px;         /*总行距*/
color: #000000;              /*正文字色*/
}

a{}和 a:hover{}分别为链接字体配置以及链接字体激活时配置，请参照body{}作相应修改。

相应CSS参考：http://blog.cnbb.com.cn/skins/shalo/style.css

[高级篇]
接下来的修改需要你对CSS已经DIV布局有一定的了解。

下图是本模版的总布局图：

左边区块定义为.leftbox{}
相应CSS：http://blog.cnbb.com.cn/skins/shalo/style.css

请高手们下载以作进一步整容。

引用测试

沙叶 — Fri, 17 Mar 2006 00:56:00 GMT

http://blog.cnbb.com.cn/rabiet/archive/2006/03/16/2418.html

引用测试引用测试

L胖叫我测试分类

沙叶 — Wed, 22 Feb 2006 07:50:00 GMT

L胖鸟人叫我测试分类

SKIN MAKER

沙叶 — Mon, 20 Feb 2006 08:24:00 GMT

此CSS样式来自donews.net ,希望能够抛砖引玉~

登录你的博客,进入管理>选项>配置>

选择皮肤 Skin 为 LightY

然后在自定义CSS里添加

body, html {
background:#CCCC9A ;
    color: #555555;
    font-family:ms shell dlg;
    font-size:12px;
    margin: 0;
    line-height:150%;padding:10px 0 10px 0 ;
    text-align:center

}
#nadframe{display:none}
form{
margin-right: auto;
margin-left: auto;
font-size:14px;
}

.pagelayout{
    margin: auto;
    padding:0px 0px 0px 0px;
    width: 800px;
    font-size:14px;
    text-align:left;background:url(http://www.hnubbs.net/doc/pic/blog/o_Body.jpg)

}
a:visited, a:active, a:link {
    color : #9F8248;
    text-decoration : none;
}

a:hover {
    color: #9F8248;
    text-decoration :none;padding:3px;
    background:#D7EDB7;
    border-bottom:1px dotted #333
}

blockquote {
font-style : italic;
}

#header {
filter: revealTrans(Transition=5, Duration=23) ;
text-align:right;
color: #808080;
font-size:12px;
font-family:ms shell dlg;
padding-top:0px;
padding-right:20px;
background:url(http://www.hnubbs.net/doc/pic/blog/o_8beijing.gif) no-repeat;
height:210px ;width:100%
}
#header span{float:left;padding-top:160px;text-align:right;padding-left:180px;}
#header #Header1_HeaderTitle{
color: #000000;
font-size:14px;font-family:arial;line-height:120%;font-weight:bold;color:#D44F3C
}
#main {float:left;padding: 15px 0px 0px 35px;width:540px;font-size:14px;line-height:160%;color: #555555;word-wrap:break-word;

}
#footer{clear:both;border-top:0px solid #c0c0c0;padding-top:10px;text-align:center;font-size:12px}

#menu {clear:both;padding:0;
    float:right;
    width:180px;padding-top:15px;
word-wrap:break-word;
border-left:1px dotted #c0c0c0;padding-left:5px
}
#menu h1 {
    color:#C1B98A;padding:12px 0px 0px 5px;width:100%;
    font-size: 14px;
    font-weight:bold;
    margin: 0px;
    background:url(http://www.hnubbs.net/doc/pic/blog/o_h18.gif) no-repeat;height:21px
}

#menu h3 {
    color:#C1B98A;padding:12px 0px 0px 5px;width:100%;
    font-size: 14px;
    font-weight:bold;
    margin: 0px;
    background:url(http://www.hnubbs.net/doc/pic/blog/o_h18.gif) no-repeat;height:21px

}
#menu ul {
    list-style: none;
    padding: 0px;
    margin: 0px 22px 15px 5px;
    font-size: 12px;
}
#comments{font-size:12px;line-height:150%}
#comments a{font-weight:bold}
.postTitle{font-weight:bold}
.postTitle a,.postTitle a:link,.postTitle a:visited{color:#9F8248;font-size:14px}

div,select,input{font-size:12px;word-wrap:break-word;}
div.block {
background-image: url(images/main_background.gif);
background-position: top left;
background-repeat: repeat-y;
font-size: 12px;
text-align: justify;
}

div.block_footer {
background-image: url(images/day_footer.gif);
background-position: top left;
background-repeat: no-repeat;
height: 67px;
}

div.post {
padding-left: 0px;
}

.dateTitle{color:#808080;font-size:14px;font-weight:bold;line-height:280%}
div.posttitle {
color: #9F8248;
    font-family: "ms shell dlg";
    font-size: 14px;
    font-weight: bold;
}

.posttitle{background:#FFF url(http://www.hnubbs.net/doc/pic/blog/o_li8.gif) no-repeat;height:30px;padding-left:30px}
div.postText{line-height:160%;font-size:12px;}
.posttitle a:visited, .posttitle a:active, .posttitle a:link {
color:#9F8248;
text-decoration : none;
}

.posttitle a:hover {
    color: #9F8248;
    text-decoration : none;padding:3px;
    border-bottom:1px dotted #9F8248;
}
.postFoot{line-height:120%;border-bottom:1px dotted #808080;font-size:12px;}
div.itemdesc {
color: #808080;
font-size: 12px;
    text-transform: uppercase;
}

div.seperator {

background-position: top left;
background-repeat: no-repeat;
margin: 15px 0px 10px 0px;
}

div.entrylistitem {
padding-left: 20px;
padding-bottom: 10px;
}

a.entrylisttitle, a.entrylisttitle:visited, a.entrylisttitle:link, a.entrylisttitle:active {
color: #FF6600;
font-size: 14px;
font-weight: bold;
}

div.moreinfo {
font-size: 12px;
text-align: justify;
}

div.moreinfotitle {
    color: #FF2a00;
    font-size: 12px;
    font-weight: bold;
}

div.comments {
font-size: 12px
}

div.comment {
background-color: #FBFBFB;font-size:12px;
border: 0px dotted #DDDDDD;
margin: 10px 0px 10px 0px;
padding: 10px;
}

div.comment_author {
margin: 5px 0px 5px 0px;font-size:12px;
}

div.comment_content {
margin: 5px 0px 5px 0px;font-size:12px;
}

#postcomment {
border: 0px solid #DDDDDD;
background-color: #FBFBFB;
font-size: 12px;
padding: 10px;
text-align: justify;
margin-top: 15px;
width: 435px;
}

#postcomment div {
color: #808080;
font-size: 12px;
font-weight: bold;
margin: 5px 0px 5px 0px;
}

#postcomment input.text, textarea {
border: 1px solid #DDDDDD;
font-size: 12px;
}

input.text {
width : 300px;
}

textarea {
width : 300px;
height : 200px;
}

#relatedlinks ul {
    list-style : none;
    margin-left : 10px;
    padding : 0px;
}

span.highlight
{
background-color:Yellow;
}
.block_title{font-size:14px;font-weight:bold}
.code{float:left;width:90%;padding:10px;border:1px dotted #d9d9d9;background:#f4f4f4;}
.postFoot{clear:both;padding-top:6px}
br{clear:both;}

就可以有如图的效果了!!