重磅推出PJBlog个性皮肤『千变万化』(博客背景切换功能)-威言威语

重磅推出PJBlog个性皮肤『千变万化』(博客背景切换功能)

William2009-05-07 01:20设计7,601次阅读36条评论

完成新皮肤『千变万化』的制作，经过一段时间的调试，兼容了所有主流浏览器。

『千变万化』的各项功能在前面的文章中已经做了介绍了，这里就不多解释了。

这个修改是在2009.4.22 打了补丁的 PJBlog3.0 最终版 v3.0.6.170 上修改的，修改前强烈建议备份！

这套皮肤是在全静态下使用会有些错误，建议全静态用户不要使用，若想使用，换成半静态或者全动态！

好了，废话不多说，先看下效果，然后下面开始讲解安装过程！

方法一

一，下载文件，解压后打开【需上传的文件】，将 smooth.js 上传到 common 文件夹下；将images里面的图片放入博客根目录images文件夹下；将skins文件里面的5个文件上传到博客根目录下的skins 文件夹里面。

二，header.asp 里面：

1、加上这段代码：

<script type="text/javascript" src="common/smooth.js"></script>

加入的位置大家应该知道的，不知道的看看也就知道了。

2、在

background:#FF9F88 url(images/tips.gif) no-repeat 3px 4px;}

的后面加上

#MyStyleBox{
clear:both;
z-index:9999;
position:fixed;
_position:absolute;
left:0;top:0;
width:100%;
height:20px
}
#StyleBox{
margin:5px;
float:right;
list-style:none
}
#StyleBox li{
display:inline;
float:left;
padding-left:5px;
list-style:none}
#StyleBox span{
visibility:hidden;
height:10px;width:10px}
#StyleBox a{float:left;width:10px;
height:10px;border:1px solid #DDD;
background:#FFF;line-height:100px;
overflow:hidden}

3、在

<body onLoad="initJS()" onkeydown="PressKey()">

后面加入代码

<div id="MyStyleBox">
<ul id="StyleBox">
<li><a style="BACKGROUND: #204d90" href="#d2Vpc2F5XzI3">深海蓝</a></li>
<li><a style="BACKGROUND: #7e2090" href="#dnYx">罗兰紫</a></li>
<li><a style="BACKGROUND: #207b90" href="#dnYy">天空蓝</a></li>
<li><a style="BACKGROUND: #8f4321" href="#dnYz">玫瑰红</a></li>
<li><a style="BACKGROUND: #509020" href="#dnY0">祖母绿</a></li>
</ul>
</div>
<script type="text/javascript">
SetStyleBox();
</script>

三，footer.asp 里面。

在

<div id="foot">

后面加入代码

<a class="vtop" href="#" onfocus="this.blur();" onclick="goto_top(); return false">Top</a>

四，common文件夹下 common.js 的修改。

1、在

//转换AccessKey For IE

后面换行加入

vMenu()

2、在 common.js 的最后加上

getCookie_v=function(a){
var b=a+”=”,c,d;
if(document.cookie.length>0)
{
c=document.cookie.indexOf(b);
if(c!=-1){
c+=b.length;
d=document.cookie.indexOf(“;”,c);
if(d==-1)
d=document.cookie.length;
return unescape(document.cookie.substring(c,d));
}else return(”);
}else return(”);
}

setCookie_v=function(a,b){
var c=new Date();
var d=new Date();
d.setTime(c.getTime()+1000*60*60*24*365);
document.cookie=a+”=”+escape(b)+”;path=/”+”; expires=”+d.toGMTString();
}
function SetStyleBox(){
try{
var items = document.getElementById(“StyleBox”).getElementsByTagName(“a”);
var t = getCookie_v(“SBox”);
if(t==””) {
ChangeStyle(items[0].href);
}else {
ChangeStyle(t);
}
for(var j = 0; j < items.length; j++) { items[j].onclick = function(){ setCookie_v("SBox", this.href); return ChangeStyle(this.href); } items[j].title = items[j].innerHTML; } }catch(e){} } function vChgMenu(obj) { var ar = new Array("#ffe1ba", "#f9ffba", "#c5ffba", "#fed6fb", "#c5fcfd"); var v = document.getElementById("menu").getElementsByTagName("a"); for(var i = 0; i < v.length; i++) { if(obj == v[i]){ v[i].style.backgroundColor = ar[i]; break; } } } function vMenu() { var v = document.getElementById("menu").getElementsByTagName("a"); for(var i = 0; i < v.length; i++) { v[i].onmouseover = function() { vChgMenu(this); } v[i].onmouseout = function() { this.style.backgroundColor = ""; } } } function ChangeStyle(s){ var ss, str, ff = false, sp, le = 0; if(document.all){ ss = document.styleSheets; } else { ff = true; ss = document.getElementsByTagName("link"); } s = decode64(unescape(s.match(/[^\\\/#]+$/))); for(var i = 0; i < ss.length - 2; i++) { if(ff && ss[i].rel != "stylesheet")continue; str = ""; le = ss[i].href.indexOf("skins"); if(le < 0) continue; sp = ss[i].href.substr(le, ss[i].href.length).split("/"); for(var j = 0; j < sp.length; j++){ if(j == 1) { str += s; }else { str +=sp[j]; } if(j!=sp.length - 1) str += "/"; } ss[i].href = str; } return false; } var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/="; function decode64(input) { var output = ""; var chr1, chr2, chr3 = ""; var enc1, enc2, enc3, enc4 = ""; var i = 0; if(input.length%4!=0) { return ""; } var base64test = /[^A-Za-z0-9\+\/\=]/g; if (base64test.exec(input)) { return ""; } do { enc1 = keyStr.indexOf(input.charAt(i++)); enc2 = keyStr.indexOf(input.charAt(i++)); enc3 = keyStr.indexOf(input.charAt(i++)); enc4 = keyStr.indexOf(input.charAt(i++)); chr1 = (enc1 << 2) | (enc2 >> 4);
chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
chr3 = ((enc3 & 3) << 6) | enc4; output = output + String.fromCharCode(chr1); if (enc3 != 64) { output+=String.fromCharCode(chr2); } if (enc4 != 64) { output+=String.fromCharCode(chr3); } chr1 = chr2 = chr3 = ""; enc1 = enc2 = enc3 = enc4 = ""; } while (i < input.length); return output; }[/js] 五，找到comon下的library.asp文件，找到以下代码

Calendar = "<div id=""Calendar_Body""&#91;/html&#93;

在其后面加上

&#91;html&#93;class=""month"&C_Month&"""&#91;/html&#93;

<span style="color: red;">六</span>，新建模块，模块标识：Topvv，模块名称：留空。排序为：0。如图：

<img src="/blog/weiimg/article/qbwh/qbwh8.jpg" alt="" border="0" />

编辑HTML，写入下面代码

<ul>
<li><a onfocus="this.blur();" href="default.asp"><img src="images/menu1.gif" alt=""/><br/>网站首页</a></li>
<li><a onfocus="this.blur();" href="search.asp?searchType=Comments"><img src="images/menu3.gif" alt=""/><br/>最新评论</a></li>
<li><a onfocus="this.blur();" href="LoadMod.asp?plugins=GuestBookForPJBlog"><img src="images/menu4.gif" alt=""/><br/>最新留言</a></li>
<li><a onfocus="this.blur();" href="#Side_Search"><img src="images/menu2.gif" alt=""/><br/>内容搜索</a></li>
<li><a onfocus="this.blur();" href="tag.asp"><img src="images/menu5.gif" alt=""/><br/>标签云集</a></li>
<li><a onfocus="this.blur();" href="bloglink.asp"><img src="images/menu7.gif" alt=""/><br/>博客链接</a></li>
<li><a onfocus="this.blur();" href="feed.asp"  target="_blank"><img src="images/menu6.gif" alt=""/><br/>博客订阅</a></li>
</ul>

七，最后是一些设置问题。

1、最好将默认的搜索的首页独享去掉，这个改不改影响不大。

2、日志分类管理 – 设置日志分类，选5个分类，让其位置设置为“同时”，其余为“侧边”。

3、可能有些朋友没有这么多的分类，我已经提供了顶部图片的PSD文件，你可以修改横行菜单的大小，以保证顶部的美观性。

方法二

如果上述修改的文件你没有修改过，在解压的文件夹里面打开　【已经修改过的文件】，将其直接对应上传覆盖就可以了。当然了，文件夹内该上传的文件还是要上传的。

说明：

制皮辛苦，尤其这个皮肤更是幸苦，请尊重别人劳动。

拿去的朋友请不要修改我的信息。

如果你不懂得这个规矩，请别下载。

下载（已经包含了顶部的PSD文件）：

地址1：

地址2：

本文固定链接: https://www.weisay.com/blog/pjblog-personality-theme-ever-changing.html | 威言威语

赏

【上一篇】Ubuntu 9.04 使用手记
【下一篇】皮肤『千变万化』中的base64编码与解码

您可能还会对这些文章感兴趣！

重磅推出PJBlog个性皮肤『千变万化』(博客背景切换功能)：目前有36 条评论

33楼
小飞：

最多只能5样吗? 我想自己再添加风格~!如果能代码怎么改~! 本人不才,谢谢博主指教~!
```
<a href="#d2Vpc2F5XzI3" rel="nofollow">深海蓝</a>
<a href="#dnYx" rel="nofollow">罗兰紫</a>
<a href="#dnYy" rel="nofollow">天空蓝</a>
<a href="#dnYz" rel="nofollow">玫瑰红</a>
<a href="#dnY0" rel="nofollow">祖母绿</a>
```
2010-09-24 14:54 [回复]
- William 文章作者：
  
  好像你已经看懂了，呵呵，那我就不说了~
  
  2010-09-24 17:58 [回复]
  - 小飞：
    
    呵呵!谢谢你的回答!那些是看懂了~!不过这个’ smooth.js ‘文件的作用是做什么的呢~!?
    
    2010-09-26 03:24 [回复]
    - William 文章作者：
      
      那个是返回顶部的一个JS，点击主题上面的top可以滑动到顶部。
      
      2010-09-26 07:28 [回复]
32楼
peter ：

六，新建模块，模块标识：Topvv，模块名称：留空。如图
编辑HTML，写入下面代码
程序代码
(由于代码被系统禁止了,,所以贴不出来,我想博主应该知道我说的是哪段把!)
我把所有皮肤的侧边栏都移到了左边
在SKIN中设置，打开layout.css，把sidebar的float:left改为right，mainContent的float:right改为left就OK了
可是我想这段代码的模块还是留在右边,,请问我要怎么改呢??

William 于 2010-08-25 09:52 AM 回复
你想把侧边栏搬到左边，对于这套主题要修改的就不仅仅是把sidebar的float:left改为right，mainContent的float:right改为left就行的。好多地方都要做一些微调的，建议不要弄了，当然如果你喜欢折腾主题的话，你可以自己试着改改，希望你能成功~

2010-08-24 23:15 [回复]
31楼
peter ：

现在的 PJblog 3.28版本还能用吗? 我按照说明安装,,好像是有点问题。
求助…

William 于 2010-08-23 08:57 AM 回复
能用的啊，出现了什么问题?

2010-08-23 00:45 [回复]