．Main Features of this Kubrick-Template :
- Expandable posts with Peekaboo view [Figure]
- Peek-A-Boo view of posts in label/archive pages [Figure]
- Author comment highlighting and notification [Figure]
- Comments with profile photos [Figure]
Download: Template File
．Create your own special banner by a very easy manner :
Website: http://redalt.com/Tools/Kubrickr
Through the website above, simply type some words that relate to your blog and push Submit. Choose one of the photos (generated from Flickr)from the that appears, and save the resulting file. It's that easy!
And it is really Awesome!!
If you have any question about this template, welcome to leave a comment!!
Btw, any bug-report is welcome, too ^_^
ReadMe For Chinese Version [
中文說明]
[+/-] Read More...
[+/-] Summary only...
Today we’ve reached another milestone in our transition to a better Blogger: all new accounts are being created on the new version of Blogger in beta. This hugely exciting for us, because now all new users will get the benefits of the new Blogger, the foremost among them being drag-and-drop template editing, post labels, and privacy controls.
Getting started with Blogger is as easy as ever: create a Google Account (or sign in with your Google Account if you already have one), give your blog a name, and choose a template for it.
Clarifying note: You can still create a new account on the old Blogger if you need to claim a mobile blog, join a team blog, or are using a language we haven’t added to the new version of Blogger.
— Pete [11/10/06 1:25 PM]
[+/-] Read More...
[+/-] Summary only...
這個功能，個人覺得比起之前的「"...Read More"篇」的更為實用，因為不需要重新載入新的頁面，直接就打開來...反應速度更快，閱讀完畢時，又可馬上縮起來，不占版面空間，相當的方便 ^_^
．實作方法如下：
Step1:將底下這行加到你的template的<head>裡頭。<script type='text/javascript' src='http://www.anniyalogam.com/widgets/hackosphere.js' />
Step2:找到底下這段，加入紅色的部份<b:includable id='post' var='post'>
<div class='post' expr:id='"post-" + data:post.id'>
<a expr:name='data:post.id'/>
Step3:找到底下這段，同樣加入紅色的部份<div class='post-header-line-1'/>
<div class='post-body'>
<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 href='javascript:void(0);'
expr:onclick='"javascript:showFull(\"post-" +
data:post.id + "\");"'>[+/-] Read More...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a href='javascript:void(0);'
expr:onclick='"javascript:hideFull(\"post-" +
data:post.id + "\");"'>[+/-] 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>
※若要更改"顯示文字"，請自行更改上頭程式碼裡頭的"[+/-] Read More..."和"[+/-] Summary only..." 這兩個文字標籤...
Step4:基本上這樣就完成了! 最後，先登入Blogger，再到「Settings->Formatting」，將<span id="fullpost"> 想要隱藏的部分 </span>填入Formatting的框框裡即可，如此一來，每次編輯新文章時，即會自動填入所需的程式碼囉 ^_^ oh ya!!
※注意是span，並非如同之前這篇「"...Read More"篇」所提到的，是用div...請小心!!
※參考文獻：
．Hackosphere -> Expandable posts with Peekaboo view
．How can I make show/hide links for my posts?
[+/-] Read More...
[+/-] Summary only...
很棒的 Blogger Hack，不僅具有和 [Blog] only show "Post Title" at Lable and Archive Page 這篇同樣的功能，更可以支援直接擴展(Expandable)，可以加速網頁的開啟的速度... Very Cool !!
例如：[Blog]所展現出來的行為。
實作方法如下：
Step1:將底下這行加到你的template的<head>裡頭。<script type='text/javascript' src='http://www.anniyalogam.com/widgets/hackosphere.js' />
Step2:修改成如下，新增紅色字所顯示的部份
<b:includable id='PeekABooPost' var='post'>
<div class='post uncustomized-post-template'>
<table><tr>
<td width='40px'>
<a href='javascript:void(0)' title='Expand/collapse this post' style='text-decoration:none' expr:onclick='"javascript:toggleIt(\"" + data:post.id + "\");"'>[+/-]</a>
</td>
<td>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
</td>
</tr></table>
<div class='post-body' expr:id='data:post.id' style='display:none'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</div>
</b:includable>
<b:includable id='main' var='top'>
<!-- posts -->
<div id='blog-posts'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<b:include data='post' name='PeekABooPost'/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
</b:loop>
</div>
※若要改變樣式，請自行更改上頭程式碼裡頭的"[+/-]"這個符號...
Step3: 沒有了，就這樣子而已...快去測試看看你的Label和Archive頁面吧...^^
．參考文獻：Hackosphere -> Peek-A-Boo view of posts in label/archive pages
[+/-] Read More...
[+/-] Summary only...
這個Hack相當的棒，可以隨機在你所指定的「圖片集」中，隨機Show一張圖，用在Blog的Banner上..那就更Cool啦 ^_^，所展現的效果就在我的Blog，直接多試幾次「重新整理 F5」，就清楚了!
此功能在WordPress中已經是預設的plug-in了，藉由這個簡易的javascript，可以達成很多其它功能，像是：產生「隨機Discription」、「隨機 Background」....等等...想到什麼，就自己加吧!
以隨機Banner來說明的話，主要的作法就是利用javascript修改css style，例如原來template裡面的#header-wrapper的style:
#header-wrapper{
margin: 0;
padding: 0;
font: $pagetitlefont;
background: #e0e0e0 url(http://www.blogblog.com/tictac/top_div.gif) no-repeat 0px 0px;
}
基本上，我們的主要作法就是在每次Browser要讀取你的Blog的HTML原碼時，先利用一段javascript code，產生一個同樣的background定義，用以覆寫<body>裡頭的wrapper-header的background定義，所以記得要把底下這段code「放置在<body>之後」，就行了：
<script type="text/javascript">
var banner= new Array()
banner[0]="http://photos1.blogger.com/blogger2/4171/1279/1600/kubrickheader.jpg"
banner[1]="http://chenkaie.googlepages.com/kubrickheader_1.png"
banner[2]="http://chenkaie.googlepages.com/kubrickheader_2.png"
banner[3]="http://chenkaie.googlepages.com/kubrickheader_3.png"
banner[4]="http://chenkaie.googlepages.com/kubrickheader_4.png"
var random=Math.round(4*Math.random());
document.write("<style>");
document.write("#header-wrapper {");
document.write(' background:url("' + banner[random] + '") no-repeat left TOP;');
document.write(" }");
document.write("</style>");
</script>
※記得上頭的"4"設成一致就行了，因為他的random產生器，填4的話，就是產生0~4這5種值，若你還要隨機變換字型產色之類的動作，就再加新的document.write(...)的語法進去就ok囉!!
重要參考文獻： Freeyasoul Adventure -> Random Rotating Banner Hack
[+/-] Read More...
[+/-] Summary only...
56 comments:
Post a Comment