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

晔儒的blog

http://ganmeng1128.blog.163.com

 
 
 

日志

 
 

羡慕人家的绚丽别样博客导航吗?很简单的,我来教你吧!  

2014-05-08 09:46:05|  分类: 【小甘甘】实用小 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
    是不是经常看到那些推荐的好博客里面的绚丽导航很眼馋呢???嘿嘿,其实没有那么难的,网易的主页装扮都是不允许自己篡改代码的,所以他们做的那些也是基于原本的模板,只是用了些小把戏。不多说,进入正题!
注意:这种篡改只是针对自己自定义的风格有效哦!人家的风格是不允许改动的。
首先给大家看看成品的效果:
    看到了吗?所有的中文宋体全部变成了绚丽的英文啦~~~大家可以根据自己喜好的样子DIY,可塑性非常高,我这里简单的说明一下制作过程。
羡慕人家的绚丽别样博客导航吗?很简单的,我来教你吧! - Miss小甘 - Miss.小甘甘吃xiao葱
1、进入网易博客的博客装扮,进入自定义博客装扮的导航项,下面这个就是原本的中文样子,这些外观的设置在我之前的博客中写过http://ganmeng1128.blog.163.com/blog/static/23502811320143281343804/,大家感兴趣可以看看,也蛮好看的,但是我让他更绚丽一些。
羡慕人家的绚丽别样博客导航吗?很简单的,我来教你吧! - Miss小甘 - Miss.小甘甘吃xiao葱
2、制作一个博客导航:这里可以用PS制作也可以用其他好用的图像软件,这里我就以美图秀秀为样本了,简单,而且大多数人都会用。
    我们新建一个画布,这里由于我背景是白色所以我建立成白色,当然也可以建立透明的,若你的主页顶区是花色的,那么你就可以建立为透明导航,然后配上你的花色背景。这里我设置高度为100px,根据导航条最大高度来定义的。
羡慕人家的绚丽别样博客导航吗?很简单的,我来教你吧! - Miss小甘 - Miss.小甘甘吃xiao葱
3.排布文字:给自己的导航搭配上好看的字体是很关键的,这里大家注意一点,若是你要制作居中导航那么你就把文字排布在画布中间,居左就排布在左边,以此类推。
羡慕人家的绚丽别样博客导航吗?很简单的,我来教你吧! - Miss小甘 - Miss.小甘甘吃xiao葱
4.记得输入文字的时候上方留白!!!这一点很关键,一会你就知道为什么关键了,大家可以根据自己的喜好下载更好看的字体哦。
羡慕人家的绚丽别样博客导航吗?很简单的,我来教你吧! - Miss小甘 - Miss.小甘甘吃xiao葱
5 .完成后,保存你的导航
羡慕人家的绚丽别样博客导航吗?很简单的,我来教你吧! - Miss小甘 - Miss.小甘甘吃xiao葱
6.进入网易博客的博客装扮,进入自定义博客装扮的导航项,按照我的圈选去设置吧!选图:刚刚完成的导航。
羡慕人家的绚丽别样博客导航吗?很简单的,我来教你吧! - Miss小甘 - Miss.小甘甘吃xiao葱
7.下图就是插入后的样子,我暂时设置高度为100px,这样好调整,知道为什么留白了吧,若是不留白则以前的文字会和你的导航产生干扰。这样的安排,原本的文字就在我们设计的导航上方,也就是利用这些文字连接进入我们的标题。
羡慕人家的绚丽别样博客导航吗?很简单的,我来教你吧! - Miss小甘 - Miss.小甘甘吃xiao葱

8.我们先把原先的导航字体对应到现在做好导航图片的字体位置,这样链接才会生效。调整位置利用我下图圈中的两个项目,可以调整导航位置和间宽度。
羡慕人家的绚丽别样博客导航吗?很简单的,我来教你吧! - Miss小甘 - Miss.小甘甘吃xiao葱
9.然后我们见证奇迹吧!把导航文字的字体设置为背景色,或者是设置为透明色,我记得可以设置,但是不会弄,我一直想知道透明色的代码数呢,希望有知道的给我留言告诉我呢。
  PS:设置背景色后你就可以再返回第6点说的调整一下导航条高度呢。
 
羡慕人家的绚丽别样博客导航吗?很简单的,我来教你吧! - Miss小甘 - Miss.小甘甘吃xiao葱
10.再进入“当前项”选项卡,将“首页”也设置为背景色,然后选择你喜欢的图标和对齐位置,我的选择图标如下,对齐位置是图中九宫格的左下角的黑点。
 
羡慕人家的绚丽别样博客导航吗?很简单的,我来教你吧! - Miss小甘 - Miss.小甘甘吃xiao葱
11.“鼠标滑过”选项卡,设置我们标题对应的图标,和排布位置。记得把文字颜色同样调成背景哦!如图中圈画!很关键!!!
 
羡慕人家的绚丽别样博客导航吗?很简单的,我来教你吧! - Miss小甘 - Miss.小甘甘吃xiao葱
12.然后保存风格!这样就大功告成啦~~~~有时候你保存后可能会出现小的显示错误,不过不要担心,再调整一下就好啦!! 
    希望大家都做出自己喜欢的界面。目前这个风格我已经分享啦~~~大家喜欢可以看看,名字是素白花色,以后会给出更多样板的!
   MISS.小甘
 
  评论这张
 
阅读(86)| 评论(8)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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