芙蓉草堂

园魂上寒空，皆言四海同，安知千里外，不有雨兼风。（自定义模版）

日志

关于我

芙蓉草堂

生长在农乡, 闻识过书香, 吃过麦麸糠, 为国扛过枪, 渡过嘉陵江, 为公从过商, 下海当个体, 告老回故乡。

文章分类

装扮博客之【自定义导航条】设置操作图解

2013-08-13 21:30:19| 分类：装扮自定义博客 | 标签： |举报 |字号大中小订阅

下载LOFTER 我的照片书 |

装扮博客之

【自定义导航条】设置操作图解

——————————————

【自定义装扮博客】设置共分：浏览器、顶区、导航条、

中区、底区五部分，我已介绍【浏览区】、【顶区】本篇日志

重点介绍【自定义导航条】设置。看似简单的【导航条】，其

操作过程并不压于前面操作，万事都不是生而知之一帆风顺，

玩博也是图个高兴，只要你细心学习，反复琢磨，无所谓成败，

会在其中找到成功的乐趣，而且我们老年朋友学会动脑筋，对

身体有益而无百害。不妨您试试，趣味无穷，为装扮美化您的

博客乐在其中。下面以我的博客为例，分别作图解演示。不当

之处请有识之士指点。需要我解答问题的朋友们尽管提出！

.芙蓉草堂.

——————————————————————————

图1：进入装扮博客编辑状态

用鼠标点击网易博客首页左上角【向下箭头】进入装扮博客编辑状态。

图2：选择网易博客功能【装扮博客】

用鼠标点击选择【装扮博客】。

图3：选择装扮博客项目【换风格】

用鼠标点击选择【换风格】项目。

图4：选择【风格自定义】系统初始化

用鼠标点击选择【换风格】项目后,分两步操作：(1)先点击

【风格自定义】；(2)再点击【修改】，使【装扮博客】的编辑器

初始化。

图5：导航条编辑器

编辑器初始化完毕，分三步操作：(1)先点击选择我们本篇要装扮的

【导航条】；(2)再选择【导航条的背景部分】；(3)滑动【导航条高度】至

至最佳高度100PX，如图所示。

图6：导航条颜色编辑器

使用【导航条颜色编辑器】确定【导航条的背景颜色】。

图7：导航条【背景颜色】编辑器

本篇日志重点介绍我的博客，通常使用的【透明导航条背景】

其编辑操作是：用鼠标点击【除去颜色小方框】尔后

【导航条背景】成为“透明背景”，与浏览器背景融为一体，如图所示。

图8：导航条【文字】编辑器

用鼠标点击选择【导航条文字编辑器】此操作分四部进行：(1)鼠标

拨动滑块，确定“导航条的文字间距”（对照图示）；(2)鼠标拨动滑块，确

定“导航条的文字水平位置”（对照图示）；(3)用鼠标移动文字颜色选择器

的小圆圈O“选择“确定导航条文字颜色”（对照图示）；(4)用鼠标点击选择

确定“导航条文字大小，粗细”（对照图示）。

图9：导航条【当前项】编辑器

(1)用鼠标点击选择【导航条当前项编辑器】;(2)用鼠标点击选择

点击“当前项选图”（在你的素材文件中提取，图示是“福”图片）；(3)

点击当前项图片居中(4)用鼠标移动文字颜色选择器的小圆圈O“选择

“确定当前项文字颜色”

图10：导航条【鼠标滑过项】编辑器

(1)用鼠标点击选择点击“鼠标滑过项选图”

（在你的素材文件中提取，图示是“鸽子”图片）；

(2)用鼠标移动文字颜色选择器的小圆圈O“选择

“确定鼠标滑动项文字颜色”

图11：完整的【导航条】设置

完整的【自定义导航条】设置；须注意的是：“导航条【当前项】和

【鼠标滑过项】图片”大小像素在100至120为最适宜。下面为装扮博客的

朋友提供导航条【当前项】和【鼠标滑过项】两款图片仅供参考使用：

喜欢装扮博客的朋友可浏览我的博客【导航条】设置

文明转载留下评论

癸巳贰零壹叁年柒月拾贰日芙蓉草堂原创编辑祝愿普天下父亲节日快乐 - 芙蓉草堂 - 芙蓉草堂

评论这张

转发至微博

阅读(567)| 评论(52)

历史上的今天

this.p={  m:2,
              b:2,
              loftPermalink:'',
              id:'fks_087064086095086064081081085071072083086067082082086064086',
              blogTitle:'装扮博客之【自定义导航条】设置操作图解',
              blogAbstract:'<br\><div align=\"center\"   style=\"line-height: 25px;\"   \><table title=\"香儿编辑\"   cellpadding=\"2\"   width=\"98%\"   background=\"http://www.spiritisup.com/eyesdrk.jpg\"   border=\"0\"   style=\"line-height: 25px;\"   \><tbody style=\"line-height: 25px;\"   \><tr style=\"line-height: 25px;\"   \><td style=\"line-height: 25px;\"   \><div align=\"center\"   style=\"line-height: 25px;\"   \><table title=\"香儿编辑\"   cellspacing=\"14\"   cellpadding=\"0\"   width=\"100%\"   background=\"http://www.spiritisup.com/eyesshine2.jpg\"   border=\"0\"   style=\"line-height: 25px;\"   \><tbody style=\"line-height: 25px;\"   \><tr style=\"line-height: 25px;\"   \><td style=\"line-height: 25px;\"   \><div align=\"center\"   style=\"line-height: 25px;\"   \></div\></td\></tr\></table\></div\></td\></tr\></table\></div\>',
              blogTag:'',
              blogUrl:'blog/static/57064032201371293824199',
              isPublished:1,
              istop:false,
              type:2,
              modifyTime:1377314901453,
              publishTime:1376400619162,
              permalink:'blog/static/57064032201371293824199',
              commentCount:52,
              mainCommentCount:17,
              recommendCount:2,
              bsrk:-100,
              publisherId:0,
              recomBlogHome:false,
              currentRecomBlog:false,
              attachmentsFileIds:[],
              vote:{},
              groupInfo:{},
              friendstatus:'none',
              followstatus:'unFollow',
              pubSucc:'',
              visitorProvince:'',
              visitorCity:'',
              visitorNewUser:false,
              postAddInfo:{},
              mset:'000',
              mcon:'',
              srk:-100,
              remindgoodnightblog:false,
              isBlackVisitor:false,
              isShowYodaoAd:false,
              hostIntro:'生长在农乡,\n闻识过书香,\n吃过麦麸糠,\n为国扛过枪,\n渡过嘉陵江,\n为公从过商,\n下海当个体,\n告老回故乡。',
              hmcon:'1',
              selfRecomBlogCount:'0',
              lofter_single:'<iframe width="140" height="560" style="overflow:hidden;" src="http://www.lofter.com/mailEntry.do?blogad=1&blog" frameBorder="0"></iframe>'
            }

{list a as x}
    {if !!x}
    <div class="iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
      {if x.visitorName==visitor.userName}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        {if x.moveFrom=='wap'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/wapblog.html?frompersonalbloghome"><span title="来自网易手机博客" class="iblock wapIcon"> </span></a>
        {elseif x.moveFrom=='iphone'}
          <a class="noul pnt" target="_blank"><span title="来自iPhone客户端" class="iblock iphoneIcon"> </span></a>
        {elseif x.moveFrom=='android'}
          <a class="noul pnt" target="_blank"><span title="来自Android客户端" class="iblock androidIcon"> </span></a>
        {elseif x.moveFrom=='mobile'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/emsblog.html?frompersonalbloghome"><span title="来自网易短信写博" class="iblock wapIcon"> </span></a>
        {/if}
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
          ${fn(x.visitorNickname,8)|escape}
        </a>
      </div>
    </div>
    {/if}
    {/list}

<#--最新日志，群博日志--> <#--推荐日志-->

<p class="fc06">推荐过这篇日志的人：</p>
    <div>
      {list a as x}
      {if !!x}
      <div class="iblock nbw-fce nbw-f40">
        <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
        <img alt="${x.recommenderNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.recommenderName)}"/>
        </a>
        <div class="cwd thide">
          <a class="fc03 m2a" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
            ${fn(x.recommenderNickname,6)|escape}
          </a>
        </div>
      </div>
      {/if}
      {/list}
    </div>
    {if !!b&&b.length>0}
    <p  class="fc06">他们还推荐了：</p>
    <ul>
    {list b as y}
      {if !!y}
        <li class="rrb"><span class="iblock">·</span><a class="fc03 m2a" target="_blank" href="http://blog.163.com/${y.recommendBlogPermalink}/?from=blog/static/57064032201371293824199">${y.recommendBlogTitle|escape}</a></li>
      {/if}
    {/list}
    </ul>
    {/if}

<#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇，下一篇--> <#-- 热度 -->

{list a as x}
    {if !!x}
    <div class="hotItem iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
      {if x.publisherUsername==visitor.userName}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
          ${fn(x.publisherNickname,8)|escape}
        </a>
      </div>
      <a class="f-myLikeIcons hottype {if x.type==1} js-liketype{elseif x.type==2} js-reblogtype{elseif x.type==3} js-sharetype{else}{/if}" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/"> </a>
    </div>
    {/if}
    {/list}

<#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->

页脚

我的照片书 - 手机博客 - 下载LOFTER APP - 订阅此博客

芙蓉草堂

导航

日志

装扮博客之【自定义导航条】设置操作图解

历史上的今天

最近读者

热度

评论

页脚