继续收藏我所使用的Hacks... 相比隐藏Navbar和添加留言模块，本篇介绍制作导航栏和收缩展开文章的这2个Hacks的麻烦程度有明显提高。所以整个制作过程中我们都必须细心和耐心的寻找和修改代码...→ 将其替换为： <b:widget id="Label1" locked="false" title="" type="Label"> <b:includable id="main"> </b:includable></b:widget><div id="tabsX"> <ul> <b:loop values="data:labels" var="label"> <li> <a href="data:label.url"> <span> <data:label.name> </data:label.name></span> </a> </li> </b:loop> </ul> <!-- <b:include name="'quickedit'/"> --></div> </b:includable></b:widget> 其中"tabX"是你所使用的tabs的样式，根据样式不同X代表的字母也不同。在确保所有操作准确无误后保存即可看到效果。 <script type='text/javascript' src='http://zeus0517.googlepages.com/hackosphere.js /> <b:includable id='post' var='post'> <div class='post'> <a expr:name='data:post.id'/> <b:if cond='data:post.title'> <h3 class='post-title'> <b:if cond='data:post.url'> <a expr:href='data:post.url'><data:post.title/></a> <b:else/> <data:post.title/> </b:if> </h3> </b:if> <div class='post-header-line-1'/>
-----------------------------
先介绍将Label标签和导航栏技术的结合，原文点这里 其实这个Hack只是改变了Label的外观，分类的功能并没有变。
首先，我们需要导航栏的素材，Exploding Boy 网站有现成的导航按钮下载，你也可以直接点这里下载。
然后，进入" Template" >"Page Elements"给你的Labels定位。若你想把Labels放在Header的下面，则要对Header进行设置：进入"Template">"Edit HTML"找到下列代码：
<class="header" id="header" maxwidgets="1" showaddelement="no">
将它改为:
<class="header" id="header" maxwidgets="2" showaddelement="yes">
很明显，此代码修改了窗口部件的最大数目和显示所添加的模块。这样我们就能在"Page Elements"界面下把Labels放在Header的下方了。
接下来，将之前下载的压缩包释放之后，找到名为 "menus.htm" 的文件，用浏览器查看源代码功能打开它。找到你选中的式样所代表的CSS代码部分，进入"Template">"Edit HTML"界面，将它拷贝粘贴到你 Blogger 的代码中。每个/*- Menu Tabs--------------------------- */ 和每种导航按钮都是一一对应的，此时还需要修改：
background:url("tableft.gif") no-repeat left top;
background:url("tabright.gif") no-repeat right top;
中的URL。前面所下载的压缩包里有对应的gif格式图片，建议上传到自己的googlepages中，然后进行相应的修改。最后，修改你的Label部件格式。进入"Template">"Edit HTML"->勾选"Expand Widget Templates"展开,找到以下代码：
<b:widget id="Label1" locked="false" title="" type="Label"> <b:includable id="main"> <b:if cond="data:title"> </b:if></b:includable></b:widget><h2><data:title> </data:title></h2>
<div class="widget-content"> <ul> <b:loop values="data:labels" var="label"> <li> <b:if cond="data:blog.url == data:label.url"> <data:label.name> <b:else> <a href="data:label.url"> <data:label.name> </data:label.name></a> </b:else> (<data:label.count>) </data:label.count></data:label.name></b:if></li> </b:loop> </ul> <b:include name="quickedit"> </b:include></div>
-----------------------------
下面介绍收缩展开文章的方法，原文点这里 首先，进入"Template">"Edit HTML"->勾选"Expand Widget Templates"展开,需要加一段javascript代码:
<div class='post-body' expr:id='"post-" + data:post.id'> <b:if cond='data:blog.pageType == "item"'> <p><data:post.body/></p> <b:else/> <style>#fullpost {display:none;}</style> <p><data:post.body/></p> <span id='showlink'> <p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>Read More...</a></p> </span> <span id='hidelink' style='display:none'> <p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>Summary only...</a></p> </span> <script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script> </b:if> <div style='clear: both;'/> <!-- clear for photos floats --> </div> </div>
最后，"Settings"->"Formatting"->在"Post Template"一栏填入：
摘要内容写这里.
<span id="fullpost">
剩下的内容写这里.
</span>
-----------------------------
这2个Hacks麻烦之处在于更改不少代码，所以务必细心。改错一个地方就可能导致全盘皆输...当然了，事先备份自己的模板也是很必要的。
2006/10/07
一些我所使用的Beta Hack（制作导航栏&收缩展开文章）
zEUS.
标签：
Hack谱
Loading..
订阅：
博文评论 (Atom)
-
没有评论:
发表评论