21.9.06

blogger beta 真正文章伸展全功能

感謝Hackosphere的伸展功能﹐再加上BeaifulBeta的附屬功能讓首頁文章終於可以像一班blogger一樣展開縮回了﹐你可以試試看我的首頁read more 及 summary only功能。
前一篇的就可以不用再試了﹐畢竟那會跳到單一文章。

詳細步驟如下
1.在</script>之後﹐</head>前加入下段語法
<script type="text/javascript" src="http://www.anniyalogam.com/widgets/hackosphere.js"></script>

2.搜尋<div class='post-header-line-1'/>,看到下段語法(似乎有兩段﹐找一段上半部一樣的)﹐再加入紅色字

<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'/>

<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>


3.在你的SETTING的FORMAT中POST TEMPLATE再加入下面字
摘要
<span id="fullpost">
隱藏文字
</span>

你的舊文章若要伸縮功能﹐就須自己再一一加入修改了。

Tags search:
Filed Tags:

Read More...

Blogger / Blogspot 三欄的改法

感謝Hackosphere三欄式Beta教學﹐讓網的網頁也改成三欄式的了﹐
以下是如何改法:
第一個750px是你總網頁寬度﹐像我的是900px
400px+150px+150px+各margin=750px
這部份你自己須微調﹐紅色就是新增的第二個sidebar

先新增紅色的到#sidebar-wrapper 那是樣附近﹐
ps. 若是你像我一樣sidebar內有兩個的﹐記得也各自複製一個﹐可以用sidebar搜尋css 中式樣
#outer-wrapper {
width: 750px;
...
}
#main-wrapper {
width: 400px;
margin-left: 20px;
...
}
#sidebar-wrapper {
width: 150px;
float: right;
...
}
#newsidebar-wrapper {
width: 150px;
float: left;
...
}

2.下面一段加在適當位置﹐

若你原來是sidebar在左邊﹐則會順序
<div id='sidebar-wrapper'><div id='main-wrapper'><div id='newsidebar-wrapper'>
若你原來是sidebar在右邊﹐則會順序
<div id='newsidebar-wrapper'><div id='main-wrapper'><div id='sidebar-wrapper'>
上面都是代表一大段
<div id="'main-wrapper'">
...
...
</div>要找到這個尾部才可以加入下面部份

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>

接下來你到Page element就可以看到第三欄出來了﹐若把各顏色變數字形變數也新增的話﹐以後你在這Fonts & Colors 就可以直接調整。

Tags search:
Filed Tags:

Read More...

15.9.06

Beta 如何加一欄容易編輯的縮圖

謝謝Hoctor介紹﹐這就可以展現Bolgger Beta 的功力了﹐很容易就增加一欄專放縮圖得﹐整體就很美觀了.
隨時經由page element修改檔名﹐圖片就改變了﹐很方便的。

會玩Beta的﹐基本的add page element及修改HTML就不多說了。
最後結果如下圖所示


詳細步驟如下

1.Template->Add Elements, 選擇sidebar中的Add Page Elements﹐畫面跳出後再選擇Link List項目就可。


2.將剛新增的link元件拉到本文blog post上面


2.隨便建幾個連結﹐當然是你做好的圖檔﹐建議先做100x100px的四張縮圖﹐這邊就Key進連結

3.打開HTML編輯﹐記得勾選extend widget喔

原來的﹐找LinkList,若你已建link連結﹐這邊可能是linklist2﹐找到最後一個就對了
b:widget id='LinkList1' locked='false' title='Links' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<div id='link'>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</div>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>


新的程式﹐記得id='linklist1-3'這要修到一樣再貼上去
<b:widget id='LinkList1' locked='false' title='Random Pics' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<div class='hoctro_spacer'>
<b:loop values='data:links' var='link'>
<a expr:href='data:link.target' onblur='try {parent.deselectBloggerImageGracefully();} catch(e) {}'><img alt='' border='0'
expr:src='data:link.target' height='100' style='display:inline; margin:0px auto 10px; ;cursor:pointer;' width='100'/></a>
</b:loop>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

完工﹐這樣子就可以看到結果了

Tags search:
Filed Tags:

Read More...

13.9.06

文章分類以Menu按鈕顯示在上方

感謝 Góc học trò / Hoctro's Place介紹﹐讓Beta多一顯示功能﹐其中用到Exploding-boy的Menu Css﹐你可以按進去看一下﹐選好你要的類別.例如如下

像我的網頁﹐因結合Hackosphere的標題伸縮功能﹐所以就更棒了﹐若要請參考這裡

第一步:下載CSS 樣本Css Navigation

第二步:編輯你的HTML範本﹐使用Extendable widget,讓最上面標替那塊可以新增元件
<b:section class="header" id="header" maxwidgets="1"
變成這樣
<b:section class="header" id="header" maxwidgets="2" showaddelement="yes">
ps.這一步是為了最上面區塊﹐若是選擇文章那一塊﹐這一部就可以不用做


第三步:在你的Page Element中﹐新增Labels,


然後再拉到文章那上面(若你有進行第二步﹐就可以拉到標題那去)


第四步:放在你的HTML 範本中</script>之前

開始:
/*- Menu Tabs F By http://www.exploding-boy.com/2005/12/15/free-css-navigation-designs/------
*/

#tabsF {
float:left;
width:100%;
font-size:80%;
line-height:normal;
border-bottom:1px solid $bordercolor;
/*Notice the use of $bordercolor to match with the Beta Blogger Settings*/
}
#tabsF ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsF li {
display:inline;
margin:0;
padding:0;
}
#tabsF a {
float:left;
background:url(" http://www.anniyalogam.com/labeltabs/tableftF.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsF a span {
float:left;
display:block;
background:url(" http://www.anniyalogam.com/labeltabs/tabrightF.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsF a span {float:none;}
/* End IE5-Mac hack */
#tabsF a:hover span {
color:#FFF;
}
#tabsF a:hover {
background-position:0% -42px;
}
#tabsF a:hover span {
background-position:100% -42px;
}

結束

最後一步:修改Label 那區塊﹐讓它像下面樣子﹐每個人這一塊不一定相同﹐但
<b:widget id='Label1' locked='false' title='' type='Label'>這一行及最後一行</b:widget>找出來﹐這塊蓋過去就好。有人有裝兩個文章分類的﹐可能就會是Label2﹐或Label3﹐自己判斷了。
原來的樣子


<b:widget id='Label1' locked='false' title='' type='Label'>
<b:includable id='main'>
<div id='tabsF'>
<ul>
<b:loop values='data:labels' var='label'>
<li><a expr:href='data:label.url'><span><data:label.name/></span></a></li>
</b:loop>
</ul>
<!-- <b:include name='quickedit'/> -->
</div>
</b:includable>
</b:widget>

最後若是出來按鈕按了沒有反應﹐就先僅留一個分類區塊﹐你原左右邊的那塊先刪掉。

Read More...

Short brief at hompage首頁僅顯示摘要

感謝程式設計﹐終於有精簡板的功能了﹐相關步驟如下:
Thanks for the programmer from 程式設計 that how to show brief at hompage. That's what I need before have really document extend and hide function at home page. Following is the introduction:

1.先找到程式碼Locate the code:
<p><data:post.body/></p>

2.用下面替代Replace by following code:
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<br></br>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'>More......</a>
<b:else/>
<data:post.title/>
</b:if>
</p>
</b:if>

3.文章範本內不show 出來的﹐放入下列碼。Add following code while you posting
<span class="fullpost"></span>

Read More...

12.9.06

Blogger / Blogspot Beta 標題伸縮功能

感謝Hackosphere的介紹﹐讓我的Beta 網頁也有標題伸縮功能﹐請參考按+/-就可以展開或縮回。在類別及存檔部份可以使用﹐首頁尚不適用。

修改須在你的程式中加入一些小程式﹐所以記得先備份你的Html code了(要勾選Extend Widget)。

修改詳細步驟如下:



1. 找到</head>,在之前貼一段碼
以下開始--
<script type='text/javascript'>
function toggleIt(id) {
post = document.getElementById(id);
if (post.style.display != 'none') {
post.style.display = 'none';
} else {
post.style.display = '';
}
}
結束
</head>

2.先找一段碼<b:if cond='data:post.dateHeader'>,再把以下改成下面的方式
有一行要刪掉﹐再改成紅色字部份。然後再新增上半部紅色的碼


<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"'>
<a expr:href='data:post.url'><data:post.title/></a><br/><br/>

<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>


就這有子﹐改完選擇列別就可以看到效果了。但不一定像我的在上面的選擇把﹐那功能另外再說。

Read More...

如何申請Blogspot / Blogger beta 新版

有人在問如何申請了﹐其實很簡單﹐你必須要有Blogger或者Gmail帳號﹐
Blogger Beta登入就可以了﹐
有Gmail的﹐會有一全新的Blogger Beta 界面
Blogspot的﹐就會有升級的選擇﹐向我還是有兩個帳號﹐你可以自己比較一下差別。BloggerBlogger beta

我是覺得大致上有70%水準了﹐但其方便性對一班使用者是很好用的﹐
目前心目中覺得尚缺少文章延展所小功能﹐但我相信應快了﹐看我的Beta的標題延展已開始使用了﹐代表已有人在研究如何破解了。提供大家參考。

Read More...

8.9.06

blogger / blogspot beta 一般的mp3 flash player會造成IE 當掉Crash

純抱怨一下﹐想向他們blogger Beta會報bug都不知道如何回報.

還在找哪些flash mp3 player , 之潛在非beta 都能正常播放﹐現在在Internet explorer會讓IE跑很久﹐最後還跑出警告訊息﹐但在firefox 就不會有問題。

但這在部落格不是常用的嗎?IE + mp3 player?希望他們趕快把問題解決。
現在已試過很多個,例如:player.swf, mp3player.swf, dewplayer.swf

有些失望說﹐好不容易很多blogspot舊版的附加功能慢慢已能修改強化了。看我的新版版面已比原blogger beta的範本多很多功能了.

大家可以比較我的Blogspot舊版,新版blogger Beta兩個差異﹐就知道了。

Read More...

7.9.06

Blogger / blogspot Beta 側邊加內建的文章搜尋

參考Basangpanaginip﹐很容易再加入文章內建的搜尋功能﹐參考下列語法﹐直接再Template/add page element/ 新增html/java 元件即可。


<form id="searchthis" action="http:/站名.blogspot.com/search" style="display:inline;" method="get">
<img src="http://beta.blogger.com/img/navbar/4/btn_search_this.gif"/> <br/> <input id="b-query" maxlength="200" name="q" size="15" type="text"/>
<input id="b-searchbtn" value="搜尋" type="submit"/>
</form>

size="15"調整搜尋bar 長度
value="搜尋" 用的搜尋名字

Read More...

4.9.06

側邊增加Side bar-Add recent comments in Blogger Beta

最近玩blogger beta﹐發現在側邊增加最新意見方法﹐使用系統產生的
comments fee喂給自己﹐就可以顯是在旁邊了﹐但最多僅能顯示五條,如下列所示:
Thru Blogger Beta's comments feed to Display "Recente comment". 1'st, copy the URL of your blog's post feed ("Subscribe to: Posts (Atom)"). The URL will be something like http://beta.blogger.com/feeds/########/posts/full. Rename the "Posts" to "comments". Choose dashboard\Template Page\"Add a Page element" function. Select the Feed element and paste the URL. Next to give a title ("Recent comments").

Also need to change the comments fee from "full" to "short" to avoid system bug in your dashboard setting.


Result(結果)


detail step by step


複製連結 - 在你的網頁底部,
像這樣子http://beta.blogger.com/feeds/########/posts/full
修改posts成comments
http://beta.blogger.com/feeds/########/comments/full


開blogger 編輯Template/ Add page element


選Fee 那一個


貼上剛修改過的連結


欄位命名﹐選name/date



最後一件也是最重要的﹐是要到你的控制台中的 site feed﹐更改成short的﹐才可避免系統的Bug.

最後﹐若是無法顯示全部資訊﹐這是Blogger spot 中文的Bug,解決辦法就是透過Feedburner轉了。我的就是這樣解決的

Read More...

建立站內搜尋Technorati, google Blog search(Blog Beta)


建立時也在想哪一個較好﹐要支援中文的比較少﹐所以兩個都安裝了﹐大家可以自己試看看﹐再決定
以Google Blog search比較簡單只要copy and paste就可以了
Technorati須另外註冊claim你的網站﹐但以Blog來說﹐這可以找到比較多


1. Google Blog Search:
直接copy 下面內容﹐到你的範本中﹐編輯HTML﹐在sidebar中﹐也許直接放在你的連結下比較快。了解的﹐知道怎麼做.

程式複製開始
<form method="get"
action="http://blogsearch.google.com/blogsearch">
<table>
<tbody>
<tr>
<td>
<input maxlength="255" size="15" name="as_q"><input name="num"
value="50" type="hidden"><input name="bl_url"
value="你的Blog網址" type="hidden"> <input
name
="btnG" value="搜尋" type="submit"><a
href
="http://blogsearch.google.com/"><img
src
="http://www.google.com.tw/logos/powered_by_google_135x35.gif"
alt="Powered by Google Blog Search" title="Powered by Google
Blog Search"
border="0" height="35" width="135"></a> </p>
</td>
</tr>
</tbody>
</table>
</form>


參考:
台中2B月台


2.使用Technorati服務:
A。註冊程序
連到 Technorati
設定帳戶:

選star now


輸入新帳戶密碼

設定你的網頁

輸入網址


要用post claim申稱網站是你的﹐裡頭會有一段程式碼秀出﹐要複製起來


在你的網站發篇新文就可以連起來


確定發文成功

設定你的搜尋程式及位址(Blog beta 為例,

選embeded claim功能


複製程式碼


BlogBeta 就在template 地方


﹐選擇add a page elements, 再選HTML/Javascript功能﹐直接貼就可﹐當然要save.
Blogspot就直接像上面google blog做法一頁貼進去即可


完成後﹐就看到右上角有一個了.

Read More...

Blogger Beta 隱藏廣告標題NavBar


我在另一網頁是用Blogger Beta ﹐請參考Blogger Beta﹐有沒有發現上面的標題不見了﹐
感謝Cunnie網友建議新方法﹐此法比較快﹐也較不會有問題。大家玩看看
舊方法以後修改HTML會被偵測出﹐無法存回去﹐須記得程式碼修改部份。

新方法:將下段放入css區段內﹐在<script>和</script>之間

.Navbar {
visibility:hidden;
display: none;
}

舊方法有興趣參考以下步驟

1.很多範本可以選﹐一定要確認你的範本在這邊看得到藍色的NavBar﹐我之前碰過看不到的﹐後來換了其他才有看到。



2.啟動Edit HTML功能﹐避開footer有沒有問題
直接copy以下﹐貼到有開頭#或.那一區﹐避開#到}之間或是.到}的程式段
.hidden-fter .widget {
display:none;
}

#hidden-fter {
clear:both;
padding:15px 0 0;
}


3.底部程式區新增一行hidder-fter那行


<b:section class='footer' id='footer'/>
<b:section class='hidden-fter' id='hidden-fter'/>


4.程式修改完畢﹐再回edit html那邊更新及Save


5.到page elements那邊﹐拉過去到下面新增的那行壓下去﹐


6.結果會是看不到那navbar了﹐沒成功就多拉幾次


最後就成功了!﹐
若你也成功給點意見吧。

參考網站:
Pierre's ooh la la - Blogger in BETA 隱藏 Navbar 大法
How to hide/remove the navbar and replace it with a Blogger Beta search box


Read More...

側邊增加近日新文 New Posts (Blogger Beta)

最近玩blogger beta﹐感謝Hackosphere的詳細說明﹐發現在側邊增加最新意見方法﹐使用系統產生的
Post fee喂給自己﹐就可以顯是在旁邊了﹐但最多僅能顯示五條,如下列所示:
複製連結 - 在你的網頁底部,
像這樣子
http://beta.blogger.com/feeds/########/posts/full


開blogger 編輯Template/ Add page element


選Fee 那一個


貼上連結


接下給適當的標題近日新聞﹐及看你要顯示作者日期嗎﹐選好就OK了
最後你可以直接移動那剛作好的方塊到你要顯示的地方就可以了
最後﹐若是無法顯示全部資訊﹐這是Blogger spot 中文的Bug,解決辦法就是透過Feedburner轉了。我的就是這樣解決的

Read More...