注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

静远草堂

静心度沧桑 远足浪天际 草芥凡夫子 堂正立尘埃

 
 
 

日志

 
 

首页日志导航条代码  

2011-01-03 13:43:47|  分类: 网页制作 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

 
其方法如下:

第一步:修改编写代码 

基本代码如下::

<DIV style="LEFT: 170px; ; TOP: 200px">

<TABLE cellSpacing=0 cellPadding=0 width=500 border=0>

<TBODY>

<TR><TD>

 <A href="此处填写连接地址" target=_blank><FONT color=#ff0000>这里填写导航文字</FONT></A>┆

<A href="此处填写连接地址" target=_blank><FONT color=#ff0000>这里填写导航文字</FONT></A>┆

<A href="此处填写连接地址" target=_blank><FONT color=#ff0000>这里填写导航文字</FONT></A>┆

<A href="此处填写连接地址" target=_blank><FONT color=#ff0000>这里填写导航文字</FONT></A>┆

<A href="此处填写连接地址" target=_blank><FONT color=#ff0000>这里填写导航文字</FONT></A>┆

<A href="此处填写连接地址" target=_blank><FONT color=#ff0000>这里填写导航文字</FONT></A>┆

<A href="此处填写连接地址" target=_blank><FONT color=#ff0000>这里填写导航文字</FONT></A>┆

<A href="此处填写连接地址" target=_blank><FONT color=#ff0000>这里填写导航文字</FONT></A>┆

<A href="此处填写连接地址" target=_blank><FONT color=#ff0000>这里填写导航文字</FONT></A>┆

<A href="此处填写连接地址" target=_blank><FONT color=#ff0000>这里填写导航文字</FONT></A>┆</TD></TR></TBODY></TABLE></DIV>

实用的博客入门—升级—精通(送给你的礼物) - 博啦 - 博啦的博客

1、将以上代码复制到记事本文档备用。

2、在未登录的状态下,从自己的博客首页找到要链接到列表当中的日志,点击“阅读全文”,逐一复制地址,粘贴到记事本文档里的备用代码中的相关位置。 

3、逐一检查链接地址和全部代码的正确性,确保无误。 

(注意:复制日志名称、粘贴,复制网络地址、粘贴。)

实用的博客入门—升级—精通(送给你的礼物) - 博啦 - 博啦的博客

第二步:登录编辑  

1、登录进入自己的首页;

2、点击首页左上角不断跳动的绿色向下箭头,展开折叠隐藏于页面顶端的的编辑功能栏; 

3、点击位于最右边的“装扮博客”图标按钮;

4、点击中间的“设置首页内容”按钮;

5、点击“添加自定义模块”;

6、一个新的栏目模块会出现在首页左上角,点击该栏目模块右侧的“编辑”,展开该模块代码编辑栏;

7、把事先修改、准备好的代码复制粘贴进去;

   8、点击编辑栏右上角的“预览”,如果能够显示编辑的基本效果,代码基本正确无误,即可点击“确定”保存,进入第三步。

实用的博客入门—升级—精通(送给你的礼物) - 博啦 - 博啦的博客

第三步:调整测试

1、把新编辑的模块拖到自己希望展示的理想位置。

2、在最后确定的位置,栏目模块中的列表可能会七扭八歪,行距、字体都出现问题,这时再点击模块右上角的“编辑”,展开代码编辑栏,对代码中的相关数据进行修改,同时不断点击“预览”显示修改的效果。

   3、经过反复修改,列表能够上下左右居中,显示中规中矩,链接地址能够准确转换,分类栏目列表制作即已经大功告成了。 

实用的博客入门—升级—精通(送给你的礼物) - 博啦 - 博啦的博客    

说明:

(1)一个自定义模块只能做15个导航目录,受到了规定字节的限制,如果导航内容比较多,就要分多个模块来做。

(2)如果要链接别人的博客,链接你认为好的网站,链接你在网上阅读了的好文章,方法一样,分门别类建好目录,依如上方法即可。

以上所述如有未尽即错漏之处,还望诸位高手斧正为感。


实用的博客入门—升级—精通(送给你的礼物) - 博啦 - 博啦的博客 

五种实用的首页导航代码


一、文字式(简洁)

代码:

<DIV style="LEFT: 165px; ; TOP: 194px">

<TABLE cellSpacing=0 cellPadding=0 width=550 border=0>

<TBODY>

<TR>

<TD>

<A href="此处填写连接地址" target=_blank><FONT color=#ff00ff>这里填写导航文字</FONT></A>┆

<A href="此处填写连接地址" target=_blank><FONT color=#ff00ff>这里填写导航文字</FONT></A>┆

<A href="此处填写连接地址" target=_blank><FONT color=#ff00ff>这里填写导航文字</FONT></A>┆

<A href="此处填写连接地址" target=_blank><FONT color=#ff00ff>这里填写导航文字</FONT></A>┆

<A href="此处填写连接地址" target=_blank><FONT color=#ff00ff>这里填写导航文字</FONT></A>┆

<A href="此处填写连接地址" target=_blank><FONT color=#ff00ff>这里填写导航文字</FONT></A>┆

</TD></TR></TBODY></TABLE></DIV>

   实用的博客入门—升级—精通(送给你的礼物) - 博啦 - 博啦的博客

首页日志导航条代码 - o℃的浪漫 - し梦の飘渺首页日志导航条代码 - o℃的浪漫 - し梦の飘渺 

二、标签式

代码:

 <P><FONT size=2>·</FONT><A href="地址" target=_blank><FONT color=#ff3300 size=2>题目

</FONT></A></P>

<P><FONT size=2>·</FONT><A href="地址" target=_blank><FONT color=#ff3300 size=2>题目

 </FONT></A></P>

<P><FONT size=2>·</FONT><A href="地址" target=_blank><FONT color=#ff3300 size=2>题目

</FONT></A></P>

<P><FONT size=2>·</FONT><A href="地址" target=_blank><FONT color=#ff0000 size=2>题目

</FONT></A></P>

 实用的博客入门—升级—精通(送给你的礼物) - 博啦 - 博啦的博客

说明:

把自己日志中的地址和题目替换代码中的地址和题目,最多可加到2000个字符,然后填加到首页自定义模块里。

 效果:


?题目

?题目

?题目

?题目

实用的博客入门—升级—精通(送给你的礼物) - 博啦 - 博啦的博客


 首页日志导航条代码 - o℃的浪漫 - し梦の飘渺首页日志导航条代码 - o℃的浪漫 - し梦の飘渺

  

三、表格式1

<HR width="100%" color=#0000ff SIZE=10>

 

<TABLE cellSpacing=1 cellPadding=0 width=700

align=center bgColor=#ff0000 border=0>

<TBODY>

<TR bgColor=#ffffcc height=40>

<TD width="100%">

<P></P><A href="http://bo.la.blog.163.com/edit/">标题</A>

<P align=center></P></TD></TR></TBODY>

</TABLE>

<P></P>

<P style="TEXT-INDENT: 2em">

<TABLE cellSpacing=1 cellPadding=0 width=

700 align=center bgColor=#ff0000 border=0>

<TBODY>

<TR bgColor=#00cc00 height=20>

<TD width="33.3%">标题</TD>

<TD width="33.3%">标题</TD>

<TD width="33.3%">标题</TD></TR></TBODY>

</TABLE></P>

<P style="TEXT-INDENT: 2em">

<TABLE cellSpacing=1 cellPadding=0 width=

700 align=center bgColor=#ff0000 border=0>

<TBODY>

<TR bgColor=#ffffcc height=20>

<TD width="33.3%"><A href="地址">标题 </A>

</TD>

<TD width="33.3%"><A href="地址">标题</A>

</TD>

<TD width="33.3%"><A href="地址">标题</A>

</TD></TR></TBODY></TABLE></P>

<P style="TEXT-INDENT: 2em">

<TABLE cellSpacing=1 cellPadding=0 width=700

align=center bgColor=#ff0000 border=0>

<TBODY>

<TR bgColor=#ffffcc height=20>

<TD width="33.3%"><A href="地址">标题 </A>

</TD>

<TD width="33.3%"><A href="地址">标题</A>

</TD>

<TD width="33.3%"><A href="地址">标题</A>

</TD></TR></TBODY></TABLE></P>

<P style="TEXT-INDENT: 2em">

<TABLE cellSpacing=1 cellPadding=0 width=700

align=center bgColor=#ff0000 border=0>

<TBODY>

<TR bgColor=#ffffcc height=20>

<TD width="33.3%"><A href="地址">标题</A></TD>

<TD width="33.3%"><A href="地址">标题<A></TD>

<TD width="33.3%"><A href="地址">标题</A></TD></TR></TBODY></TABLE></P>

<HR width="100%" color=#0000ff SIZE=10>

 实用的博客入门—升级—精通(送给你的礼物) - 博啦 - 博啦的博客

说明:

1、width="33.3%"是横格,100%分成三份。如是

四个横格,就是25%。以此类推。

2、height=20 每格的高度。将代码中的“地址”

和“标题”换成自己文章的地址和标题。

<HR width="100%" color=#0000ff SIZE=10> 是

上下蓝色条代码,可换上自己喜欢的颜色。

3、Color=#ffffcc 颜色可调。

4、如想增加表格 按上面代码的规律可继续填加。

 实用的博客入门—升级—精通(送给你的礼物) - 博啦 - 博啦的博客

首页日志导航条代码 - o℃的浪漫 - し梦の飘渺 首页日志导航条代码 - o℃的浪漫 - し梦の飘渺

  

四、表格式2

代码:

<TABLE cellSpacing=1 cellPadding=0 width=450 align=center bgColor=#ff0000 border=0>

<TBODY>

<TR bgColor=#dbe4f4 height=20>

<TD width="33%"><A href="链接地址#1">你的文字</A></TD>

<TD width="33%"><A href="链接地址#2">你的文字</A></TD>

<TD width="33%"><A href="链接地址#3">你的文字</A></TD></TR>

<TR bgColor=#dbe4f4 height=20>

<TD width="33%"><A href="链接地址#4">你的文字</A></TD>

<TD width="33%"><A href="链接地址#5">你的文字</A></TD>

<TD width="33%"><A href="链接地址#6">你的文字</A></TD></TR>

<TR bgColor=#dbe4f4 height=20>

<TD width="33%"><A href="链接地址#7">你的文字</A></TD>

<TD width="33%"><A href="链接地址#8">你的文字</A></TD>

<TD width="33%"><A href="链接地址#9">你的文字</A></TD></TR>

<TR bgColor=#dbe4f4 height=20>

<TD width="33%"><A href="链接地址#10">你的文字</A></TD>

<TD width="33%"><A href="链接地址#11">你的文字</A></TD>

<TD width="33%"><A href="链接地址#12">你的文字</A></TD></TR>

<TR bgColor=#dbe4f4 height=20>

<TD width="33%"><A href="链接地址#13">你的文字</A></TD>

<TD width="33%"><A href="链接地址#14">你的文字</A></TD>

<TD width="33%"><A href="链接地址#15">你的文字</A></TD></TR>

<TR bgColor=#dbe4f4 height=20>

<TD width="33%"><A href="链接地址#16">你的文字</A></TD>

<TD width="33%"><A href="链接地址#17">你的文字</A></TD>

<TD width="33%"><A href="链接地址#18">你的文字</A></TD></TR></TBODY></TABLE>

效果:

你的文字

你的文字 你的文字
你的文字 你的文字 你的文字
你的文字 你的文字 你的文字
你的文字 你的文字 你的文字
你的文字 你的文字 你的文字
的文字 你的文字 你的文字

实用的博客入门—升级—精通(送给你的礼物) - 博啦 - 博啦的博客 

首页日志导航条代码 - 首页日志导航条代码

 

五、图片导航类

三列代码:

<TABLE borderColor=#ff0000 cellSpacing=10 cellPadding=0 width="80%" bgColor=#080808 border=3>

<TBODY>

<TR>

<TD><A href="此处是导航的地址" target=_blank><IMG height=80 src="此处是图片地址" width=80 border=0></A>

<P>&nbsp;<A href="此处是导航的地址" target=_blank><FONT color=#ff0000 size=2>此处是导航的名称 </FONT></A> </P>

</TD>

<TD><A href="此处是导航的地址" target=_blank><IMG height=80 src="此处是图片地址" width=80 border=0></A>

<P>&nbsp;<A href="此处是导航的地址" target=_blank><FONT color=#ff0000 size=2>此处是导航的名称</FONT></A> </P>

</TD>

<TD><A href="此处是导航的地址" target=_blank><IMG height=80 src="此处是图片地址" width=80 border=0></A>

<P>&nbsp;<A href="此处是导航的地址" target=_blank><FONT color=#ff0000 size=2>此处是导航的名称</FONT></A> </P>

</TD>

</TR></TR></TR></TBODY></TABLE>

 实用的博客入门—升级—精通(送给你的礼物) - 博啦 - 博啦的博客

两列代码:

<TABLE borderColor=#ff0000 cellSpacing=10 cellPadding=0 width="80%" bgColor=#080808 border=3>

<TBODY>

<TR>

<TD><A href="http://bo.la.blog.163.com/edit/"

target=_blank><IMG height=80 src=" http://img.blog.163.com/photo/jqipOrLWyMbQ1aDJftbzCg==/601793500207686817.jpg" width=80 border=0></A>

<P>&nbsp;<A href=http://bo.la.blog.163.com/edit/ target=_blank><FONT color=#ff0000 size=2>

标题</FONT></A> </P>

</TD>

<TD><A href=http://bo.la.blog.163.com/edit/

target=_blank><IMG height=80 src=" http://

img.blog.163.com/photo/SJi9pqKQrsZc6fy

KMe4zJw==/582371726814840693.jpg" width=80 border=0></A>

<P>&nbsp;<A href=http://bo.la.blog.163.com/edit/

 target=_blank><FONT color=#ff0000 size=2>标题

</FONT></A> </P>

</TD>

</TR></TR></TR></TBODY></TABLE>

 实用的博客入门—升级—精通(送给你的礼物) - 博啦 - 博啦的博客

说明:

1、导航地址即是你的日志地址。必须去日志后的

/edit/,否则就答非所问了。

2、borderColor是图片外框线颜色,可调。

3、bgColor是背景颜色,可调。

4、color=#ff0000是字体颜色,可调。

5、width="80%是边框大小,可以根据自己模块大

小调节。

6、从美观的角度看,其余的项目可以不用调。

解读你的人生  了解自己和他人 - 博啦 - 博啦的博客

 

  评论这张
 
阅读(62)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017