第一步，在你的主题模板文件夹下找到single.php文件，用DW打开，找到<!–<p class=postmetadata alt （可能不是每个主题都是同样的代码，原理就是找到文章内容模板结束的地方）；
第二步，在你找到的文章内容模板结束的地方上，加入如下代码：<div
<div<?php previous_post_link(‘««上一篇：%link’)?</div
<div class=alignright<?php next_post_link(‘下一篇：%link »»‘)?</div
</div（我的博客如此，可以修改多种不同的表现形式，不一一列举。）
第三步，写CSS样式，并加入到style.css（默认样式表）。我的CSS代码如下：
.alignleft {
float:left
text-align:left
margin-right:10px}
.alignright {
float:right
text-align:right
margin-left:10px}
.alignleft a{
color:#D52300
font-size:12px}
.alignright a{
color:#D52300
至此就大功告成了，轻松完成给你的wordpress博客文章加上上一篇、下一篇的艰巨任务！
在你的css样式表里加上下面这些：a[name="#post_begin"] + table td[align] a{display:none!important}
或者直接在你的代码中加入完整的CSS样式引用：
<style type="text/css">
a[name="#post_begin"] + table td[align] a{display:none!important}
</style>
或者是
<style type="text/css">
a[name] + table td[align] a{display:none!important}
</style>
上面说的这些是在你无法修改“上一篇”和“下一篇”代码的前提下。
如果你可以修改，那么找到代码中和下面这段代码相同的位置：
<a name="#post_begin"></a>
<table border="0" cellspacing="0" cellpadding="2" width="100%"><tr>
<td align="right">
找到像上面这样的，只要将把<td align="right">换成<td style="width:0height:0overflow:hidden">即可。
也有可能你找到的是<td align="left">，同样将其他换成上面的即可。
导入3个js 和 1个css，可以通过css改变样式<!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>
<title>jQuery Alert Dialogs</title>
<meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8" />
<meta name="description" content="This is a demonstration page." />
<meta name="keywords" content="alert, confirm, prompt, demo" />
<style type="text/css">
BODY,
HTML {
padding: 0px
margin: 0px
}
BODY {
font-family: Arial, Helvetica, sans-serif
font-size: 12px
background: #FFF
padding: 15px
}
H1 {
font-size: 20px
font-weight: normal
}
H2 {
font-size: 16px
font-weight: normal
}
FIELDSET {
border: solid 1px #CCC
-moz-border-radius: 16px
-webkit-border-radius: 16px
border-radius: 16px
padding: 1em 2em
margin: 1em 0em
}
LEGEND {
color: #666
font-size: 16px
padding: 0em .5em
}
PRE {
font-family: "Courier New", monospace
font-size: 11px
color: #666
background: #F8F8F8
padding: 1em
-moz-border-radius: 8px
-webkit-border-radius: 8px
border-radius: 8px
}
/* Custom dialog styles */
#popup_container.style_1 {
font-family: Georgia, serif
color: #A4C6E2
background: #005294
border-color: #113F66
}
#popup_container.style_1 #popup_title {
color: #FFF
font-weight: normal
text-align: left
background: #76A5CC
border: solid 1px #005294
padding-left: 1em
}
#popup_container.style_1 #popup_content {
background: none
}
#popup_container.style_1 #popup_message {
padding-left: 0em
}
#popup_container.style_1 INPUT[type='button'] {
border: outset 2px #76A5CC
color: #A4C6E2
background: #3778AE
}
</style>
<!-- Dependencies -->
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.ui.draggable.js" type="text/javascript"></script>
<!-- Core files -->
<script src="jquery.alerts.js" type="text/javascript"></script>
<link href="jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />
<!-- Example script -->
<script type="text/javascript">
$(document).ready( function() {
$("#alert_button").click( function() {
jAlert('This is a custom alert box', 'Alert Dialog')
})
$("#confirm_button").click( function() {
jConfirm('Can you confirm this?', 'Confirmation Dialog', function(r) {
jAlert('Confirmed: ' + r, 'Confirmation Results')
})
})
$("#prompt_button").click( function() {
jPrompt('Type something:', 'Prefilled value', 'Prompt Dialog', function(r) {
if( r ) alert('You entered ' + r)
})
})
$("#alert_button_with_html").click( function() {
jAlert('You can use HTML, such as <strong>bold</strong>, <em>italics</em>, and <u>underline</u>!')
})
$(".alert_style_example").click( function() {
$.alerts.dialogClass = $(this).attr('id')// set custom style class
jAlert('This is the custom class called “style_1”', 'Custom Styles', function() {
$.alerts.dialogClass = null// reset to default
})
})
})
</script>
</head>
<body>
<h1><a href="http://abeautifulsite.net/2008/12/jquery-alert-dialogs/">« jQuery Alert Dialogs (Alert, Confirm, &Prompt Replacements)</a></h1>
<h2>Basic Examples</h2>
<fieldset>
<legend>Alert</legend>
<pre>
jAlert('This is a custom alert box', 'Alert Dialog')
</pre>
<p>
<input id="alert_button" type="button" value="Show Alert" />
</p>
</fieldset>
<fieldset>
<legend>Confirm</legend>
<pre>
jConfirm('Can you confirm this?', 'Confirmation Dialog', function(r) {
jAlert('Confirmed: ' + r, 'Confirmation Results')
})
</pre>
<p>
<input id="confirm_button" type="button" value="Show Confirm" />
</p>
</fieldset>
<fieldset>
<legend>Prompt</legend>
<pre>
jPrompt('Type something:', 'Prefilled value', 'Prompt Dialog', function(r) {
if( r ) alert('You entered ' + r)
})
</pre>
<p>
<input id="prompt_button" type="button" value="Show Prompt" />
</p>
</fieldset>
<h2>Additional Examples</h2>
<fieldset>
<legend>With HTML</legend>
<pre>
jAlert('You can use HTML, such as <strong>bold</strong>, <em>italics</em>, and <u>underline</u>!')
</pre>
<p>
<input id="alert_button_with_html" type="button" value="Show Alert" />
</p>
</fieldset>
<fieldset>
<legend>Alternate Styles</legend>
<p>
By changing the value of the <samp>$.alerts.dialogClass</samp>property (and creating
your own CSS class), you can changes the style of your dialogs:
</p>
<p>
<input id="style_1" class="alert_style_example" type="button" value="Style 1" />
</p>
<p>
View the plugin source for additional properties that can be modifed at runtime.
</p>
</fieldset>
<p>
<a href="http://abeautifulsite.net/2008/09/jquery-context-menu-plugin/">Back to the project page</a>
</p>
</body>
</html>
