Z-Blog博客转换到Blogger的方法

虽然Google的Blogspot在国内无法访问,但Blogspot依旧是国际上最大的BSP之一,其稳定性非常不错,并且完全免费,使用Z-Blog的用户,也可以通过一些方法将博客备份到Google Blogger,下面我就介绍一下如何将Z-Blog的博客转换到Google Blogger的方法。

这个方法针对大数据量的Z-Blog博客,首先通过SQL语句转换Z-Blog数据到MySQL数据库,之后在本地安装一个PHP+MySQL+Apache的系统,安装phpMyadmin和Wordpress程序,然后在phpMyadmin中建立一个blog_Article表,然后使用“ACCESS数据库转换MYSQL数据库的软件”将数据库转换到MySQL,然后直接在MySQL之中将blog_Article表的数据插入到wp_posts表中,这样就完成了Z-Blog的数据导出到Wordpress中。

接着登录本地的Wordpress系统,在“工具”-“导出”中,将文章导出为一个XML文件。

接着,就可以将WordPress博客转换到Blogger,进行转换之前,需要将WordPress导出的XML文件进行分割,推荐使用YO2的一个小工具DivXML来分割。

将文件分割为1M左右的XML文件后,就可以到Google Blog Converters提供的这个地址进行XML转换,将WordPress的XML文件转换为Blogger的XML文件。

拿到转换后的XML文件,登录Blogger后台,使用博客导入功能将这个XML文件导入到系统,文章和评论都会被导入进来。

导入之后,登录博客的域名管理系统,将博客的域名修改为CNAME的解析方式,指到ghs.google.com,这样,就实现了Z-Blog博客转换为Google Blogger系统。

最后,访问Google Blogspot的“设置”-“电子邮件和移动博客”,设置一个电子邮件发布地址(也称为 Mail2Blogger),然后在Z-Blog中启用Mailpost发送邮件插件,这样就可以实现Z-Blog的新文章也实时同步到Google Blogger上。

最终效果展示,我这里用“月光博客”做个了一个例子,将Z-Blog的数据,成功转换到了Blogspot的这个地址:http://info.williamlong.info/ 。

View the original article here

WordPress整合Google自定义搜索

WordPress整合Google自定义搜索,非常有用,请看具体步骤

步骤:

1. 用 Google帐号登录 http://www.google.com/cse/, 创建一个 自定义搜索引擎,填写相关信息,选择标准版,搜索网站 填写如下格式:hdsoso.com

2.进入控制面板可以获得,搜索引擎的唯一ID: 001666767838361085501:7tsxakvdqja

 

3. 在桌面创建一个名为 cse.php 的文件,之后上传到 WP 主题目录中,[注意这里的代码不完全是Google 生成的,添加了正则传参部分]文件内容如下:

 <?php
/*
Template Name: cse
*/
?>
<?php get_header(); ?>
<div>
<div>
这里粘帖google统计代码
</div>
<?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>

4. 在WP后台新建一个页面,你可以自定义名字,最好使用search,选择页面模板 cse 就是刚刚传上去的那个文件 。

之所以使用search这个名字,是因为基本所有的主题header.php?里面的一个action值都是search名字,所以,最好使用search。

发布,就OK啦。

5.现在试试的,看看在你的首页搜索blog看看,是不是进入到了搜索结果页,都是google搜索的结果。

good work!!!

div的隐藏与显示

div的隐藏和显示在js中经常用到,下面以一个实例为例,用脚本如何控制div的隐藏与显示,

我想实现这样的功能,点击“药房介绍管理”,”修改简介“消失,再次点击,“修改简介”又重新出现,

那么这样的效果如何实现的呢?

先看页面代码

<tr>
<td align=”center” valign=”top”><span>◆&nbsp;<a href=”#” onclick=”return showjj();” target=”_self”>药房介绍管理</a></span>
<div id=”yfgl” style=”display:none;”>
<ul style=”list-style-type:none;”>
<li><a href=”updatejj.asp” target=”mainFrame”>修改简介</a></li>
</ul>
</div>
</td>
</tr>

注意“修改简介”所在的div的display:none;表示初始是隐藏状态,那么我点击”药房介绍管理“,要求“修改简介”显示出来,再次点击,又隐藏。注意onclick事件代码 showjj();

function showjj(){
var yfgl =  document.getElementById(‘yfgl’);
if (yfgl.style.display == “none”){
yfgl.style.display = “block”;
}
else{
yfgl.style.display = “none”;
}
return false;
}

showjj这段js,首先得到“修改简介”的div的id,然后动态修改它的style样式,如果display==”none”,也就是隐藏,则设置display=”block”,显示出来,反之则否。

是不是很简单,其实js并没有那么难,只要我们勤动手,慢慢就熟练了。

div+css实现的导航栏

css文件:

.channel { width:350px; margin:12px 0px 0px 175px; height:30px; line-height:30px; text-align:center; }
.channel ul { list-style:none; margin:0px;}
.channel li { float:left; padding-left:8px; }
.channel a { background:url(arrow2.gif) no-repeat left; padding-left:10px; color:#457a8b; font-size:14px; font-weight:bold; }
.channel a:link { background:url(arrow2.gif) no-repeat left; padding-left:10px; color:#457a8b; }
.channel a:visited { background:url(arrow2.gif) no-repeat left; padding-left:10px; color:#457a8b; }
.channel a:hover { background:url(arrow1.gif) no-repeat left; padding-left:10px; color:#78b4c7; }
.channel a:active { background:url(arrow1.gif) no-repeat left; padding-left:10px; color:#78b4c7; }

页面文件:

<div class="channel">
<ul>
<li><a title="首页" target="none;" href="<%=request.getContextPath()%>/df.jsp">首页</a></li>
<li><a title="相册" href="#">相册</a></li>
<li><a title="好友" href="#">好友</a></li>
<li><a title="留言" href="#">留言</a></li>
</ul>
</div>

页面效果:

div+css命名规则-增强SEO

Div+css命名规则-增强SEO
页头:header
登录条:loginBar
标志:logo
侧栏:sideBar
广告:banner
导航:nav
子导航:subNav
菜单:menu
子菜单:subMenu
搜索:search
滚动:scroll
页面主体:main
内容:content
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
加入:joinus
指南:guild
服务:service
热点:hot
新闻:news
下载:download
注册:regsiter
状态:status
按钮:btn
投票:vote
合作伙伴:partner
友情链接:friendLink
页脚:footer
版权:copyRight

1.CSS ID 的命名
外 套:  wrap
主导航:  mainNav
子导航:  subnav
页 脚:  footer
整个页面: content
页 眉:  header
页 脚:  footer
商 标:  label
标 题:  title
主导航:  mainNav(globalNav)
顶导航:  topnav
边导航:  sidebar
左导航:  leftsideBar
右导航:  rightsideBar
旗 志:  logo
标 语:  banner
菜单内容1: menu1Content
菜单容量: menuContainer
子菜单:  submenu
边导航图标:sidebarIcon
注释:   note
面包屑:  breadCrumb(即页面所处位置导航提示)
容器:   container
内容:   content
搜索:   search
登陆:   login
功能区:  shop(如购物车,收银台)
当前的   current

2.另外在编辑样式表时可用的注释可这样写
<– Footer –>
内容区
<– End Footer –>

3.样式文件命名
主要的 master.css
布局,版面 layout.css
专栏 columns.css
文字 font.css
打印样式 print.css

div+css做的工字型局部改进版

这段通过对div和css的学习,初见成效,解决了 在ff下 浮动格式的问题。

    .contentright{
        height: 250px;
        width: 580px;
        font-size: 14px;
        list-style-type: none;
        border:1px #66CCFF solid;
        float:right;
    }

 

.contentright{
        height: 250px;
        width: 580px;
        font-size: 14px;
        list-style-type: none;
        border:1px #66CCFF solid;
    }

去掉了float:right;中间内容区分为左右两部分,左部分设置了float:left;这时下面的右边部分就会浮动到上面且紧靠左部。以前自己搞错了,以为设置了float:right;才会浮动到右边,其实不是这样的,这一切都是自动的。设置了float:right;反而使右部向右浮动,导致中间出现空档,使footer部分浮动上来。当然也可以对footer部分禁止浮动 clear:both;

好了,下面就是修修补补的小问题了。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <style type="text/css">
      * {
    margin: 0px;
    padding: 0px;
    }

     body {
     text-align:center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    margin: 0px auto;
    height: auto;
    width: 760px;
    border:1px #66CCFF solid;

    }
    .header {
    margin:auto;
    height: 100px;
    width: 760px;
    background-image: url(header.jpg);
    background-repeat: no-repeat;
    margin:0px 0px 3px 0px;
    border:1px #66CCFF solid;

    }
    .logo{
      float:left;
      background-image: url(scltemp.jpg);
      height: 100px;
      width: 75px;

    }
    .content {
    margin:auto;
    width: 760px;
    line-height: 1.5em;
    border:1px #66CCFF solid;
    }
    .content p {
    text-indent: 2em;
    }
    .content h3 {
    font-size: 16px;
    margin: 10px;
    }
    .contentleft {
    height: 250px;
    width: 100px;
    font-size: 14px;
    list-style-type: none;
    float:left;
    border:1px #66CCFF solid;
    }
    .contentleft li {
    float:left;
    }
    .contentleft li a{
    color:#000000;
    text-decoration:none;
    padding-top:4px;
    display:block;
    width:97px;
    height:22px;
    text-align:center;
    background-color: #009966;
    margin-left:2px;
    }
    .contentleft li a:hover{
    border:1px #66CCFF solid;
    color:#FFFFFF;
    }
    .contentright{
        height: 250px;
        font-size: 14px;
        list-style-type: none;
        border:1px #66CCFF solid;
    }
    .footer {
    margin:auto;
    height: 50px;
    width: 760px;
    line-height: 2em;
    text-align: center;
    background-color: #009966;
    border:1px #66CCFF solid;
    }
  </style>
   <! @author 孙程亮 E-mail:sclsch@188.com -->
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <title>http://blog.csdn.net/suncheng_hong</title>
 </HEAD>
 <BODY>
<div class="header">
  <div class="logo"></div>
</div>
<div class="content">
    <ul class="contentleft" >
    <li><a href="#">首 页</a></li>
    <li><a href="#">文 章</a></li>
    <li><a href="#">相册</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">论 坛</a></li>
    <li><a href="#">帮助</a></li>
    </ul>
    <div class="contentright">
    <h3>前言</h3>
    <p>第一段内容</p>
    <h3>理解CSS盒子模式</h3>
    <p>第二段内容</p>
    </div>
</div>
<div class="footer" >
<p>关于华升 ¦ 广告服务 ¦ 华升招聘 ¦ 客服中心 ¦ Q Q留言 ¦ 网站管理 ¦ 会员登录 ¦ 购物车</p><p>Copyright ©2006 - 2008 Tang
Guohui. All Rights Reserved</p>
</div>
 </BODY>
</HTML>

好了,希望对初学都有帮助,一起进步。

div结合css布局bbs首页

最近趁离职,我在做一个论坛系统,练练手,需要一个论坛首页的html页面,深知自己美工极差,心里很苦啊。于是买了本div+css网站布局的书,没想到讲得还不错,感觉长进很快,于是磨拳擦掌非要自己写一个不可,高手末笑。代码伺候。
我把论坛首页分为header区,信息区,内容区,页脚区。首先用一大div把这些包含进来,主要是考虑到页面整体调节方便,比如要调成宽屏的或者是窄屏的,只要设置一下这个大div就可以了。
先把代码贴出来,供朋友们调试使用。

css:

/* CSS Document */
body{
  background-color:#F5F5F5;
  margin:0;
  padding:0;
  font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, ,sans-serif;
  font-size:12px;
}
.pagehoder{
  width:100%;
  margin:auto;
  background-color:#2662DF;
  border-left:2px solid #7197D7;
  border-rigth:2px solid #7197D7;
  border-bottom:2px solid #7197D7;
}
.header{
  border-top:2px solid #7197D7;
  height:60px;
  background-color: #B1C3D9;
}
.logo{
  background:url(../images/logo.png) no-repeat ;
  width:200px;
  height:60px;
  float:left;
}
.img{
  background:url(../images/images1.jpg) repeat-x ;
  height:60px;
}
.navigate {
  padding-left:20px;
  background-color:#F3F8FE;
  height:10px;
}
.navigate li{
  float:left;
}
.navigate li a{
  margin-left:2px;
  padding-top:3px;
  padding-bottom:3px;
  text-align:center;
  display:block;
  text-decoration:none;
  width:70px;
  height:10px;
  background-color:#ececec;
}
.navigate li a:hover{
  color:#ffffff;
  background-color:#bbbbbb;
}
.notice{
  background-color:#ffffff;
  height:20px;
}
.content{
  background-color:#0000FF;
  height:400px;
}
.contentHead{
  text-align:center;
  padding-top:5px;
  padding-bottom:0px;
  height:20px;
  background-color:#71A3CC;
}
.f1{
  width:60%;
  float:left;
    background-color:#71A3CC;
}
.f2{
  width:12%;
  float:left;
    background-color:#71A3CC;
}
.f3{
  width:12%;
  float:left;
    background-color:#71A3CC;
}
.f4{
  width:15%;
    background-color:#71A3CC;
}
.typeHolder{
  width:100%;
  background-color:#D9DBE4;
}
.type{
  width:60%;
  float:left;
}
.boardHolder{
  text-align:center;
  width:100%;
  background-color:#FFFFFF;
}
.boardName{
  width:60%;
  float:left;
}
.subject{
  width:12%;
  float:left;
  background-color:#F7F7F8;
}
.article{ 
  width:12%;
  float:left;
  background-color:#F7F7F8;
}
.last{
  width:15%;
  background-color:#F7F7F8;
}
.msg{
  background-color:#FAFAFA;
  height:60px;
}
.footer{
  background-color:#99CC33;
  height:20px;
  text-align:center;
}

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<title>sclBBS首页</title>
</head>
<body>
<div class="pagehoder">
    <div class="header">
      <div class="logo">
      </div>
      <div class="img"></div>
    </div>
    <div class="navigate">
       <li> <a href="#">首页</a></li>
       <li> <a href="#">搜索</a></li>
       <li> <a href="#">会员列表</a></li>
       <li> <a href="#">热门主题</a></li>
       <li> <a href="#">最新主题</a></li>
    </div>
    <div class="notice">
        <marquee scrollAmount="2" width="100%">
           欢迎光临sclBBS。
        </marquee>
    </div> 
    <div class="content">
       <div class="contentHead">
         <div class="f1">版面</div>
         <div class="f2">主题</div>
         <div class="f3">文章</div>
         <div class="f4">最后发表</div>
       </div>   
       <div class="typeHolder">
         <div class="type">开源项目</div>
         <div class="place"></div>
       </div>
       <div class="boardHolder">
         <div class="boardName">JForum论坛</div>
         <div class="subject">23</div>
         <div class="article">23</div>
         <div class="last">23</div>
       </div>
       <div class="typeHolder">
         <div class="type">开源项目1</div>
         <div class="place"></div>
       </div>
       <div class="boardHolder">
         <div class="boardName">JForum论坛1</div>
         <div class="subject">23</div>
         <div class="article">23</div>
         <div class="last">23</div>
       </div>
       <div class="typeHolder">
         <div class="type">开源项目2</div>
         <div class="place"></div>
       </div>
       <div class="boardHolder">
         <div class="boardName">JForum论坛2</div>
         <div class="subject">23</div>
         <div class="article">23</div>
         <div class="last">23</div>
       </div>
       <div class="typeHolder">
         <div class="type">开源项目3</div>
         <div class="place"></div>
       </div>
       <div class="boardHolder">
         <div class="boardName">JForum论坛3</div>
         <div class="subject">23</div>
         <div class="article">23</div>
         <div class="last">23</div>
       </div>
    </div>
    <div class="msg">
           <div class="typeHolder">
         <div class="type">看谁在线上</div>
         <div class="place"></div>
       </div>
       <div class="boardHolder">

            目前总共发表了 2,806 篇文章
            目前总共有 4,186 位注册会员
            最新注册的会员: mxjccut
            目前总共有 80 位用户在线 :: 1 位会员, 79 位访客   [ 系统管理员 ] [ 版主 ]
            最高在线人数 2,712 人 [ 记录时间 :: 2007-08-13 16:12:34 ]
            目前在线注册会员: Admin  
       </div>

    </div>
    <div class="footer">
         Powered by sclBBS author:sclsch@188.com
    </div>
</div>
</body>
</html>

图片不能上传,没办法了,不影响学习。
这是我设计的第一个布局,从中了解了,div是块状的,默认是占整行的,如果想设计成两列或多列,可以用float属性,它可以向左(float:left)浮动,这时,如果下面的div大小可以放下的话,就会浮动到上面一行,这样就形成了两列的布局,
多列以此类推。理解了基本的,以后就可以向细的方向学习了。希望给像我一样的初学美工的朋友点帮助,做开发的了解美工也很重要,艺多不压身嘛。

div+css做的工字型局部初版

作为一个程序员,深受不会美工之苦,于是发奋图强,学习美工,下面是我小作,还不完美,做一记录,再图更新。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <style type="text/css">
      * {
    margin: 0px;
    padding: 0px;
    }
     body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    margin: 0px auto;
    height: auto;
    width: 760px;
    border:1px #66CCFF solid;

    }
    .header {
    height: 100px;
    width: 760px;
    background-image: url(header.jpg);
    background-repeat: no-repeat;
    margin:0px 0px 3px 0px;
    border:1px #66CCFF solid;

    }
    .contentleft {
    height: 250px;
    width: 150px;
    font-size: 14px;
    list-style-type: none;
    float:left;
    border:1px #66CCFF solid;
    }
    .contentleft li {
    float:left;
    }
    .contentleft li a{
    color:#000000;
    text-decoration:none;
    padding-top:4px;
    display:block;
    width:97px;
    height:22px;
    text-align:center;
    background-color: #009966;
    margin-left:2px;
    }
    .contentleft li a:hover{
    border:1px #66CCFF solid;
    color:#FFFFFF;
    }
    .content {
    height:auto;
    width: 760px;
    line-height: 1.5em;
    padding: 10px;
    border:1px #66CCFF solid;
    }
    .content p {
    text-indent: 2em;
    }
    .content h3 {
    font-size: 16px;
    margin: 10px;
    }
    .footer {
    height: 50px;
    width: 760px;
    line-height: 2em;
    text-align: center;
    background-color: #009966;
    padding: 10px;
    border:1px #66CCFF solid;
    }
    .contentright{
        height: 250px;
        width: 580px;
        font-size: 14px;
        list-style-type: none;
        border:1px #66CCFF solid;
        float:right;
    }
    .logo{
      background-image: url(scltemp.jpg);
      height: 100px;
      width: 75px;
    }
  </style>
      <! @author xxx E-mail:sclsch@188.com -->
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>
 <BODY>
<div class="header">
  <div class="logo"></div>
</div>
<div class="content">
    <div class="contentleft">
    <li><a href="#">首 页</a></li>
    <li><a href="#">文 章</a></li>
    <li><a href="#">相册</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">论 坛</a></li>
    <li><a href="#">帮助</a></li>
    </div>
    <div class="contentright">
    <h3>前言</h3>
    <p>第一段内容</p>
    <h3>理解CSS盒子模式</h3>
    <p>第二段内容</p>
    </div>
</div>
<div class="footer">
<p>关于华升 ¦ 广告服务 ¦ 华升招聘 ¦ 客服中心 ¦ Q Q留言 ¦ 网站管理 ¦ 会员登录 ¦ 购物车</p><p>Copyright ©2006 - 2008 Tang
Guohui. All Rights Reserved</p>
</div>
 </BODY>
</HTML>